JavaWeb = jQuery使用详解

jQuery 是一个优秀的 javascript 的轻量级框架之一，封装了 dom 操作、事件、页面动画、异步操作等功能。

特别值得一提的是基于 jquery 的插件非常丰富，大多数前端业务场景都有其封装好的工具框架

Look for Less，Do More

一。jQuery概述

1.jQuery概述

jQuery 是一个优秀的 javascript 的轻量级框架之一，封装了 dom 操作、事件、页面动画、异步操作等功能。

特别值得一提的是基于 jquery 的插件非常丰富，大多数前端业务场景都有其封装好的工具框架

2.jQuery版本

1.x ：兼容 IE678 ，使用最为广泛的，官方只做 BUG 维护，功能不再新增。因此一般项目来说，使用 1.x 版

本就可以了，最终版本： 1.12.4 (2016 年 5 月 20 日 )

2.x ：不兼容 IE678 ，很少有人使用，官方只做 BUG 维护，功能不再新增。如果不考虑兼容低版本的浏览器

可以使用 2.x ，最终版本： 2.2.4 (2016 年 5 月 20 日 )

3.x ：不兼容 IE678 ，只支持最新的浏览器。除非特殊要求，一般不会使用 3.x 版本的，很多老的 jQuery 插

件不支持这个版本。目前该版本是官方主要更新维护的版本

开发版本与生产版本，命名为 jQuery-x.x.x.js 为开发版本，命名为 jQuery-x.x.x.min.js 为生产版本，开发版

本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩

进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小。

jQuery下载和版本介绍

官网地址：http://jquery.com

注意事项：如果公司使用的老版本插件，我们jq升级后，可能会让插件失效....

* jquery-x.js 开发版本：有良好的缩进格式和注释，方便开发者阅读

* jquery-x.min.js 生产版本：代码进行压缩，体积小方便网络传输

jq本质上就是js的一个类库文件，我们使用它时，进行引入，就可以简化代码*

3.自定义js框架：

框架（Framework）是完成某种功能的半成品，抽取重复繁琐的代码，提供简洁强大的方法实现。

abc.js

// 抽取获取id的方法
function jQuery(id) {
return document.getElementById(id);
}
// 简化名称方案
function $(id) {
return document.getElementById(id);
}

引入外部文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义js框架</title>
    <script src="../js/abc.js"></script>
</head>
<body>
<div id="myDiv">世界上最遥远的距离不是生与死，而是你亲手制造的BUG就在你眼前，你却怎么都找不到她。</div>

<script>
    // 通过js原生的方式
    // document.getElementById('myDiv').innerHTML='我是js修改的内容';

    // jQuery('myDiv').innerHTML='我是js修改的内容';
    $('myDiv').innerHTML='哈哈我是自定义js文件';

</script>
</body>
</html>

二。jQuery语法

1.jQuery环境引入

jQuery(一个快速、简洁的JavaScript框架)

<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>

<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>

<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML引入Jquery</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">世界上最远的距离，是我在if里你在else里，虽然经常一起出现，但却永不结伴执行。</div>

<script>
    // 获得div标签的jq对象
    $('#myDiv').html('我是jq修改的内容')
</script>
</body>
</html>

jQuery与js的区别

jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。

通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。两者的关系与区别总结如下：

1. jQuery对象与js对象相互转换
	js --> jq
		$(js对象) 或者 jQuery(js对象)
	jq --> js
		jq对象[索引] 或者 jq对象.get(索引)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jq与js对象相互转换</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">通过不同方式获得文本内容</div>

<script>
    // 通过js方式修改文本内容
    let myDiv = document.getElementById('myDiv');
    // myDiv.innerHTML='我是js方式修改的';

    // 通过jq方式修改文本内容
    let $myDiv = $('#myDiv');
    // $myDiv.html('我是jq方式修改的')

    // js对象和jq对象的：属性和方法不同通用
    // myDiv.html('js操作jq函数');
    // $myDiv.innerHTML='jq操作js属性';


    // js -- 转换为 jq对象
    // $(myDiv).html('js变成jq对象');

    // jq 转换为 js对象  注意：jq对象本质上是数组，数组的每一个元素就是js原生对象
    console.log($myDiv.length);
    $myDiv[0].innerHTML='jq变成js对象';

</script>
</body>
</html>

2. 页面加载事件
	js
		window.onload=function(){}
	jq
		$(function(){})
	区别
		js：只能定义一次，如果定义多次，后加载会进行覆盖
		jq：可以定义多次

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面加载事件</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>

<script>
    // js页面加载事件
  /*  window.οnlοad=function () {
        alert('js加载事件1');
    }

    window.οnlοad=function () {
        alert('js加载事件2');
    }*/


   // jq页面加载事件
    $(function () {
        alert('jq加载事件1')
    })
    $(function () {
        alert('jq加载事件2')
    })
</script>
</body>
</html>

三.jQuery 选择器

1.基本选择器

1. 标签（元素）选择器
       * 语法：$("html标签名") 获得所有匹配标签名称的元素

2. id选择器
       * 语法：$("#id的属性值") 获得与指定id属性值匹配的元素

3. 类选择器
       * 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>

<span class="female">力娜扎</span>
<span class="female">丽热巴</span>
<span class="female hero">寡妇</span>

<span class="male hero">铁侠</span>
<span class="male hero">人</span>


<span id="boss">灭霸</span>

<script>
    // 1.获取span标签的jquery对象
    console.log($('span'));

    // 2.获取class有hero的jquery对象
    console.log($('.hero'));

    // 3.获得id="boss"的jquery对象
    console.log($('#boss'));
</script>
</body>
</html>

2.层级关系选择器

1. 后代选择器
       * 语法：$("A B") 选择A元素内部的所有B元素

2. 并集选择器
       * 语法：$("选择器1,选择器2....") 获取多个选择器选中的所有元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>层级关系选择器</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="kangxi">
    <span>儿子</span>
    <p>
        <span>孙子</span>
    </p>
</div>
<div>牛顿</div>

<script>
    // 1. 获取所有的p,div的文本
    console.log($('p,div').text());

    // 2. 获取div的后代span的文本
    console.log($('#kangxi span').text());

</script>
</body>
</html>

3.属性选择器

1. 属性选择器
       * 语法：$("A[属性名='值']") 包含指定属性等于指定值的选择器

2. 复合属性选择器
       * 语法：$("A[属性名='值'][]...") 包含多个属性条件的选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>

<input type="text" name="username" value="用户名"/><br/>

<input type="text" name="nickname" value="昵称"/><br/>

<script>
    // 1.获取type='text'的input标签
    console.log($('input[type="text"]'));

    // 2.获取type='text' 且 name="nickname" 的input标签
    console.log($('input[type="text"][name="nickname"]'));
</script>
</body>
</html>

4.过滤选择器

获得所有的li标签，在此基础上进行筛选过滤

1. 首元素选择器
       * 语法： :first 获得选择的元素中的第一个元素

2. 尾元素选择器
       * 语法： :last 获得选择的元素中的最后一个元素

3. 偶数选择器
       * 语法： :even 偶数，从 0 开始计数

4. 奇数选择器
       * 语法： :odd 奇数，从 0 开始计数

5. 指定索引选择器
       * 语法： :eq(index) 指定索引元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>过滤选择器</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
    <li>大娃</li>
    <li>二娃</li>
    <li>三娃</li>
    <li>四娃</li>
    <li>五娃</li>
    <li>六娃</li>
    <li>七娃</li>
</ul>

<script>
    // 1.获取第一个元素
    console.log($('li:first').text());
    // 2.获取偶数索引元素
    console.log($('li:even').text());
    // 3.获取指定索引2的元素
    console.log($('li:eq(2)').text());

</script>
</body>
</html>

5.对象的遍历

* 语法：
jq对象.each(function(index,element){

})

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>08-对象遍历</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
jquery对象的遍历
    $.each() 用法示例
-->
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
</ul>

<script>
    let lis = document.querySelectorAll('li');
    // 普通for
    for (let i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    // 增强for
    for (let li of lis) {
        console.log(li);
    }
    console.log('--------------------')
    // jq的for循环
    $('li').each(function (index, element) {
        // console.log(index);
        // console.log(element);
        // console.log(element.innerHTML); // 遍历的元素是js对象
        // console.log($(element).html()); // 升级为jq对象
        // console.log(this); // 当前遍历的元素，相当于element  补充
    })
</script>
</body>
</html>

四。jQuery的DOM操作

1.jQuery操作内容：

1. text(): 获取/设置元素的标签体纯文本内容
* 相当于js： innerText属性

2. html(): 获取/设置元素的标签体超文本内容
* 相当于js： innerHTML属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>dom操作内容</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv"><p>天王盖地虎</p></div>

<script>
    // 1.text()操作内容：innerText
    // 1.1 获取纯文本内容
    console.log($('#myDiv').text());
    // 1.2 设置纯文本内容
    $('#myDiv').text('<h1>小鸡炖蘑菇</h1>');

    // 2.html()操作内容:innerHTML
    // 2.1 获取超文本内容
    console.log($('#myDiv').html());
    // 2.2 设置超文本内容
    $('#myDiv').html($('#myDiv').html()+ '<h1>宝塔镇河妖</h1>');
</script>
</body>
</html>

2.jQuery操作属性

1. val()：获取/设置元素的value属性值
       * 相当于：js对象.value

2. attr(): 获取/设置元素的属性
   removeAttr()   删除属性
       * 相当于：js对象.setAttribute() / js对象.getAttribute()

3. prop():获取/设置元素的属性
   removeAttr()   删除属性
   jq在1.6版本之后，提供另一组API prop 通常处理属性值为布尔类型操作
       例如：checked selected等

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>dom操作属性</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="#" method="get">
    姓名 <input type="text" name="username" id="username" value="西亚"/> <br/>

    爱好
    <input id="hobby" type="checkbox" name="hobby" value="perm" checked>烫头<br/>

    <input type="reset" value="清空按钮"/>
    <input type="submit" value="提交按钮"/><br/>
</form>

<script>
    // 1.获取文本框value属性
    // 方式一：
  /*  console.log($('#username').attr('value')); // 查看
    $('#username').attr('value','盖伦小王子'); // 新增 or 修改
    $('#username').removeAttr('value'); // 删除*/

    // 方式二：  val() 只能给 value属性赋值
    console.log($('#username').val()); // 查看
    $('#username').val('人在塔在'); // 新增 or 修改

    // 2.获取爱好的checked属性
    /*
        方式一：使用attr() 获取
            选中返回：checked
            未选中：undefined
     */
    // console.log($('#hobby').attr('checked'));
    /*
        方式二：使用prop() 获取
        jq在1.6之后，弥补了这个设计缺陷，如果该属性存在返回true，该属性不存在返回false
     */

    console.log($('#hobby').prop('checked'));

</script>
</body>
</html>

3.jQuery操作样式

1. 直接修改jq对象样式属性
   语法：
       jq对象.css()
           css(样式名) 获取
           css(样式名,样式值) 设置
       优点：支持css语法
       举例：font-size

2. 添加/删除jq对象样式
   语法：
       jq对象.addClass()
       jq对象.removeClass()

3. 切换jq对象样式
   语法：
       jq对象.toggleClass() 无添加，有删除

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>dom操作样式</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <style>
        #p1{ background-color: red;}
        .mp {
            color: green;
            border: 2px double skyblue;
        }

        .mpp {
            background-color: lightgray;
        }
    </style>

</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<p id="p4">4. <button id="toggle">切换</button>class样式 </p>

<script>
    let $p1 = $('#p1');//获取p1
    let $p2 = $('#p2');//获取p2
    let $p3 = $('#p3');//获取p3
	let $p4 = $('#p4');//获取p4

    // 0.获取第一个标签的背景色
    console.log($p1.css('background-color'));

    // 1. 设置一个css样式
    $p1.css('background-color','gray');
    // 2. 批量设置css样式
    $p2.css({'border':'1px solid red','font-size':'20px'})

    // 3. 通过class设置样式
    $p3.addClass('mp mpp');
    $p3.removeClass('mpp');
	
	// 4. toggleClass() 切换一个class
    $('#toggle').click(function () {
        $p4.toggleClass('mp')
    })

</script>

</body>
</html>

4.jQuery操作元素

1. $(标签) 创建一个标签
$('<li>xxx</li>')

2. $.prepend() 在父标签中将子标签放在第一个位置

3. $.append() 在父标签中将子标签放在最后一个位置

4. $.empty() 清空子元素

5. $.remove() 删除自己

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>dom操作元素</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="star">
   <!-- <li>马尔</li>-->
    <li>古力</li>
    <li>迪丽</li>
<!--    <li>萨瓦</li>-->
</ul>

<script>
    let $star = $('#star'); // 无序列表


    // 1.前面添加马尔
    $('#star').prepend($('<li>马尔</li>'))
    // 2.后面添加萨瓦
    $('#star').append($('<li>萨瓦</li>'))
    // 3.移出所有列表项
   //  $('#star').empty();

    // 4.删除无序列表
    $('#star').remove();
</script>
</body>
</html>

五。jQuery事件绑定

jQuery的事件与js的事件的功能和作用一样，只是在使用语法上稍微有些差异。

js对象.事件属性=function(){}

jq对象.事件函数(function(){})

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jq事件绑定</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" value="js方式" id="jsBtn"> <br>
<input type="button" value="jq方式" id="jqBtn"> <br>

<script>
    // js事件绑定
    document.getElementById('jsBtn').οnclick=function () {
        alert('js事件绑定')
    }
    // jq事件绑定
    $('#jqBtn').click(function () {
        alert('jq事件绑定')
    })
</script>
</body>
</html>

常见事件

1. 点击事件：
        1. click()：单击事件
        2. dblclick()：双击事件
2. 焦点事件
        1. blur()：失去焦点
        2. focus():元素获得焦点。

3. 鼠标事件：
        1. mousedown()	鼠标按钮被按下。
        2. mouseup()	鼠标按键被松开。
        3. mousemove()	鼠标被移动。
        4. mouseover()	鼠标移到某元素之上。
        5. mouseout()	鼠标从某元素移开。
        
4. 键盘事件：
		1. keydown()	某个键盘按键被按下。	
		2. keyup()		某个键盘按键被松开。
		3. keypress()	某个键盘按键被按下并松开。

5. 改变事件
        1. change()	域的内容被改变。

6. 表单事件：
        1. submit()	提交按钮被点击。

hover详解

六，案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>隔行换色</title>
    <style>
        div{
            margin: 0 auto;
            width: 800px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>

    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th width="100px"><input type="checkbox" id="selectedAll">全/<input type="checkbox"  id="selectedOrderAll">反选</th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>5</td>
            <td>牛奶制品</td>
            <td>牛奶制品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>6</td>
            <td>大豆制品</td>
            <td>大豆制品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>7</td>
            <td>海参制品</td>
            <td>海参制品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>8</td>
            <td>羊绒制品</td>
            <td>羊绒制品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>9</td>
            <td>海洋产品</td>
            <td>海洋产品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>10</td>
            <td>奢侈用品</td>
            <td>奢侈用品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
    </table>
<script type="text/javascript">

     // 奇数行
    // $('tr:even').css('background-color','lightgray');
    // 偶数行
    //  $('tr:odd').css('background-color','skyblue');

    $("tr:first").css("backgroundColor","orange");
    $("tr:odd").css("backgroundColor","red");
    $("tr:even:gt(0)").css("backgroundColor","skyblue");

    let oldcolor;
    $("tr:gt(0)").each(function () {
        $(this).mouseover(function () {
            oldcolor =  $(this).css(`backgroundColor`);
            $(this).css(`backgroundColor`,`pink`);
        }).mouseout(function () {
            $(this).css(`backgroundColor`,oldcolor);
        });
    });

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>商品全选</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
商品全选
    1. 全选 点击全选按钮,所有复选框都被选中
    2. 反选 点击反选按钮,所有复选框状态取反
-->
<button id="btn1">1. 全选</button>
<button id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script >
    // 全选
    $('#btn1').click(function () {
        $('input[type="checkbox"]').prop('checked',true);
    })

    // 反选，必须遍历才能实现
    $('#btn2').click(function () {
        $('input[type="checkbox"]').each(function (index,element) { // 注意：element
            // js方式  推荐
           // element.checked = ! element.checked;
            // jq方式 比较麻烦 了解
            $(element).prop('checked',!$(element).prop('checked'))
        })
    })


    let str = '哈哈'+1+"呵呵";
    let str = '<p align="center"></p>'
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>QQ表情</title>
    <style type="text/css">
        *{margin: 0;padding: 0;list-style: none;}

        .emoji{margin:50px;}
        ul{overflow: hidden;}
        li{float: left;width: 48px;height: 48px;cursor: pointer;}
        .emoji img{ cursor: pointer; }
    </style>
    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="emoji">
    <ul>
        <li><img src="./img/01.gif" height="20" width="20"/></li>
        <li><img src="./img/02.gif" height="20" width="20" /></li>
        <li><img src="./img/03.gif" height="20" width="20" /></li>
        <li><img src="./img/04.gif" height="20" width="20" /></li>
        <li><img src="./img/05.gif" height="20" width="20"  /></li>
        <li><img src="./img/06.gif" height="20" width="20" /></li>
        <li><img src="./img/07.gif" height="20" width="20"  /></li>
        <li><img src="./img/08.gif" height="20" width="20" /></li>
        <li><img src="./img/09.gif" height="20" width="20"  /></li>
        <li><img src="./img/10.gif" height="20" width="20"  /></li>
        <li><img src="./img/11.gif" height="20" width="20"  /></li>
        <li><img src="./img/12.gif" height="20" width="20"  /></li>
    </ul>
    <p id="pleasespeak">
        <strong>请发言：</strong>
        <img src="./img/12.gif" height="20" width="20"/>
    </p>
</div>

<script type="text/javascript">
    $(".emoji img").click(function () {
        $("#pleasespeak").append($(this).clone());
    });
</script>

</body>
</html>

other---

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选中输入项目</title>
    <style type="text/css">
        .content {
            margin: 0 auto;
            width: 600px;
        }
        .content div{
            margin-top: 30px;
            margin-left: 15px;
            margin-bottom: 10px;
        }
        .content input[type="radio"]{
            background-color: red;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>

<div>
    <div class="content">
        <div><label for="cityname">请输入城市：</label><input id="cityname" type="text"></div>
        <div><label>城市复选框：</label>
            <div>
                <input type="radio" name="city" value="北京">北京
                <input type="radio" name="city" value="南京">南京
                <input type="radio" name="city" value="上海">上海
            </div>
        </div>

        <div><button>判断</button></div>
    </div>
</div>

<script type="text/javascript">
    $("#cityname").blur(function () {
        //获取输入框内容
        let cityname = $(this).val();
        $("input:radio").each(function () {
          //比较两个
            if ($(this).val()==cityname){
                $(this).prop("checked","true");
            }
        });
    });

    $("button").click(function () {
        //获取输入框内容
        let cityname = $(this).val();
        $("input:radio").each(function () {
            //比较两个
            if ($(this).val()==cityname){
                $(this).prop("checked","true");
            }
        });
    });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>禁用控件</title>
    <style type="text/css">

        #lookxieyi{
            margin: 20px;
            height: 36px;
            width: 160px;
            background-color: lightgray;
            border: black solid 1px;
        }
        #agreexieyi{
            margin: 20px;
            height: 36px;
            width: 100px;
            background-color: lightgray;
            border: black solid 1px;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>

<div>
    <button id="lookxieyi" disabled="disabled">
        请仔细阅读协议(5)
    </button>

    <br>

    <button id="agreexieyi">
        同意注册
    </button>

</div>

<script type="text/javascript">
  $(function () {
        let j=5;
        let interval = setInterval(function () {
            j--
            if (j > 0) {
                $("#lookxieyi").text(`请仔细阅读协议(${j})`)
            }else{
                clearInterval(interval);
                $("#lookxieyi").text(`请仔细阅读协议`);
                $("#lookxieyi").removeAttr("disabled");
                $("#agreexieyi").show();
            }

        },1000);
  });

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>显示隐藏</title>
    <style type="text/css">
        .content {
            margin: 0 auto;
            width: 600px;
        }
        .content button{
            width: 600px;
            height: 50px;
        }
        .content>div{
            width: 600px;
            height: 320px;
            border: gray solid 1px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>

<div>
    <div class="content">
        <button>移入显示移出隐藏</button>
        <div>
            <p style="display: none">鼠标划入不仅显示而且变色</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $("button").mouseover(function () {
        $("p").show(1000,function () {
            $(".content>div").css("backgroundColor","red");
        });

    }).mouseout(function () {
        $("p").hide(1000,function () {
            $(".content>div").css("backgroundColor","white");
        });
    });

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>发帖功能</title>
    <style type="text/css">
        #content{
            margin-top: 15px;
            margin-bottom: 20px;
            border: red solid 1px;
        }
        .fabugongju {

        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>

<div>
    <div id="content">

    </div>

    <div class="fabugongju">
        <div>张三 <input type="text"></div>
        <textarea name="textcontent" id="textcon" cols="10" rows="10"></textarea><br>
        <button>评论</button>
    </div>
</div>
<script type="text/javascript">
        $("button").click(function () {
            let name = $("input").val();
            let content = $("#textcon").val();
            console.log(name);
            console.log(content);
            // let con = $("content").html();
            // $("content").html(`${con}${name}:${content}<br>`)
            $("#content").append(`${name}:${content}<br>`);
        });
</script>

</body>
</html>

参考资料：

以下地址引均调用了第三方cdn公共库，第三方库

jQuery

jquery-migrate

jQuery UI

bootstrap

reset.css

font-awesome

three

html5.js

angular

animate

vue

ECharts

React

D3.js

hnbyboy

发布了141 篇原创文章 · 获赞 27 · 访问量 27万+

私信关注