Jquery补充及插件

Stella981
• 阅读 589

此篇为jQuery补充的一些知识点,详细资料请看另一篇博客,地址:https://www.cnblogs.com/chenyanbin/p/10454503.html

一、jQuery中提供的两个函数

1 $.map(array,callback(element,index));
2     1.对于数组array中的每个元素,调用callback()函数,最终返回一个新的数组。原数组不变
3 
4 $.each(array,fn);遍历数组,return false来退出循环。
5     1.主要用来遍历数组,不修改数组,对于普通数组或者“键值对”数组都没有问题
6     2.在each函数中可以直接使用this,表示当前元素的值

<script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        var arrInt = [1, 2, 3, 4, 5, 6, 7, 8];
        $.each(arrInt, function (key, value) {
            if (key == 3) {
                //break;  //在$.each中跳出循环不能使用break,需要使用return false;
                return false;
                //jQuery底层源码,因为调用callback.call()判断是否为false,直接break了
                //if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                //    break;
                //}
            }
            //当使用each遍历,普通的数组的时候,索引就是键,值就是值
            alert('key:' + key + '....' + 'value:' + value);
        })

        //遍历键值队集合
        //var personInfo = { 'name': '张三', 'age': 19, 'gender': '男' };
        //$.each(personInfo, function (k, v) {
        //    alert('key:' + k + '...v:' + this);
        //});
    </script>

Jquery补充及插件 Jquery补充及插件

 1 页面加载执行JavaScript与jQuery写法区别
 2 JS:
 3     window.onload(function(){
 4 
 5 });
 6 JQuery:
 7     方式一:
 8              $(document).ready(function(){
 9 
10 });
11      方式二:
12               $(function(){});   等价于$(document).ready(function(){});    
13 
14 两者区别:
15     1.window.onload需要等待页面全部加载完毕才会触发,即所有的Dom元素创建完毕、图片、CSS等加载完毕后才被触发。
16     2.$(document).ready()只要Dom元素加载完毕即触发,这样可以提升相应速度
17     3.$(document).ready();可以多次注册事件处理程序,并且最终都会执行,而window.onload每次注册新的事件处理程序时都会将前面的覆盖掉
18 
19 以下jQuery三种写法相同
20 jQuery(document).ready(function(){
21 
22 });
23 
24 $(document).ready(function(){
25 
26 });
27 
28 $(function(){
29 
30 
31 });

补充

 1     <script src="jquery-3.3.1.js"></script>
 2     <script type="text/javascript">
 3         //var arrInt = [10, 20, 30, 40, 50, 60, 70, 80, 90];
 4         //遍历数组中的每个元素,返回一个新的数组
 5         //var arrIntNew = $.map(arrInt, function (element_value, arrIndex) {
 6         //    //alert(arguments.length); //查看底层传入几个参数
 7         //    //alert(element_value+'...'+arrIndex);
 8         //    return element_value * 2;
 9         //})
10         //alert(arrIntNew);
11 
12         //练习遍历数组,将索引大于3的元素翻倍。并返回一个新的数组
13         var arrInt = [10, 20, 30, 40, 50, 60, 70, 80, 90];
14         var arrIntNew = $.map(arrInt, function (element_value, arrIndex) {
15             return arrIndex > 3 ? element_value * 2 : element_value;
16         })
17         alert(arrIntNew);
18 
19     //以下jQuery底层代码
20     //  map: function( elems, callback, arg ) {
21     //    var length, value,
22     //        i = 0,
23     //        ret = [];
24 
25     //    // Go through the array, translating each of the items to their new values
26     //    if ( isArrayLike( elems ) ) {
27     //        length = elems.length;
28     //        for ( ; i < length; i++ ) {
29     //            value = callback( elems[ i ], i, arg );
30 
31     //            if ( value != null ) {
32     //                ret.push( value );  注:JavaScript的push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
33     //            }
34     //        }
35 
36     //    // Go through every key on the object,
37     //    } else {
38     //        for ( i in elems ) {
39     //            value = callback( elems[ i ], i, arg );
40 
41     //            if ( value != null ) {
42     //                ret.push( value );
43     //            }
44     //        }
45     //    }
46 
47     //    // Flatten any nested arrays
48     //    return concat.apply( [], ret );
49     //}
50     </script>

二、jQuery中的trim()

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <script src="jquery-3.3.1.js"></script>
 9     <script type="text/javascript">
10         //去除两边空格
11         var msg = '     alex     ';
12         alert('===' + $.trim(msg) + '===');
13         //jQuery底层源码
14         //  trim: function( text ) {
15         //    return text == null ?
16         //        "" :
17         //        ( text + "" ).replace( rtrim, "" );  注:rtrim为正则表达式:/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g
18         //}
19 
20         //等同上面写法,两边加“=”为了明显区分是否有空格
21         alert('===' + msg.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,'') + '===')
22     </script>
23 </body>
24 </html>

 三、Dom对象和jQuery对象

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         #div1 {
 8             width:200px;
 9             height:200px;
10             background-color:blue;
11         }
12     </style>
13 </head>
14 <body>
15     <input type="button" value="button" id="btn" />
16     <div id="div1">
17 
18     </div>
19     <script src="jquery-3.3.1.js"></script>
20     <script type="text/javascript">
21         //1.获取层对象
22         //页面上的元素对象才叫Dom对象,数组、日期,这些不是Dom对象
23         var divObj = document.getElementById('div1');
24         //当直接使用Dom对象的时候,存在浏览器兼容问题
25         //为了解决浏览器的兼容问题,所以这时可以把Dom对象转换为jQuery对象,然后再操作
26         //divObj.innerHTML = 'hello word';
27         var $divObj = $(divObj);
28         //把Dom对象转换为jQuery对象后,就可以调用对应的所有jQuery对象的成员了
29         //Dom对象只能使用Dom对象的成员,jQuery对象只能使用jQuery对象的成员,这两种对象是互相独立的
30         $divObj.text('hello word!');
31 
32         //把jQuery对象再转换为Dom对象
33         //方式一
34         var domDiv = $divObj[0];
35         //方式二
36         //var domDiv2 = $divObj.get(0);
37         domDiv.innerHTML = 'aaaaaa';
38 
39         //jQuery对象
40         //可以把Dom对象转换为jQuery对象
41         //也可以把jQuery对象转换为Dom对象
42     </script>
43 
44 </body>
45 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="button1" id="btn1" />
 9     <input type="text" value="" id="txt2" />
10     <a href="http://www.baidu.com">百度一下</a>
11     <script src="jquery-3.3.1.js"></script>
12     <script type="text/javascript">
13         document.getElementById('btn1').onclick = function () {
14             //获取文本框中用户输入的内容
15             var $txtObj = $(document.getElementById('txt2'));
16             //方法一:val()
17             //alert($txtObj.val());  //不传参数,从文本框中取值
18             //$txtObj.val('哈哈哈哈');  //传参数,给文本框赋值
19 
20             //方法二:设置文本框的CSS样式
21             //$txtObj.css('border', '1px solid blue');
22             //设置多个样式时,用键值队的形式传入进去
23             $txtObj.css({ 'border': '1px solid blue', 'width': '200px', 'height': '40px', 'color': 'red' });
24 
25             //设置超链接
26             var $aLink = $(document.getElementsByTagName('a')[0]);
27             //$aLink.text('白了个度');   //--->innerHTML
28             $aLink.html('<img src="1.jpg" style="height:300px;width:200px">');
29         };
30     </script>
31 </body>
32 </html>

四、jQuery选择器

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <div id="div1">
 9 
10     </div>
11     <p>哈哈哈</p>
12     <input type="button" value="button" />
13     <input type="text" />
14     <span class="x">我是一个span</span>
15     <p>哈哈哈</p>
16     <p class="x">嘻嘻嘻</p>
17     <input type="button" value="设置p元素中显示的文字" id="btnSetTxt" />
18     <script src="jquery-3.3.1.js"></script>
19     <script type="text/javascript">
20         //1、id选择器:$('#div1')
21         //$(function () {
22         //    $('#div1').css({ 'width': '100px', 'height': '100px', 'background-color': 'blue' })
23         //});
24 
25         //2、标签选择器:$('p')
26         //$('p').css('color', 'red');
27 
28         //3、类选择器:选取所有应用了x类样式的那些元素
29         //$('.x').css('color', 'blue');
30 
31         //选取按钮并注册一个单机事件
32         $('#btnSetTxt').click(function () {
33             //选取页面上所有的p元素
34             //链式编程
35             $('p').text('我是p元素').css('border', '1px solid blue').css('width', '250px').mouseover(function () {
36                 $(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor','')
37             }); //隐士迭代
38         });
39     </script>
40 </body>
41 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <p class="test">test1</p>
 9     <p class="test">test2</p>
10     <p class="test">test3</p>
11     <p>test4</p>
12     <p>test5</p>
13     <div class="test">
14 
15     </div>
16     <span class="test">
17         content
18     </span>
19     <input type="button" id="btn" value="button" />
20     <input type="text" />
21     <script src="jquery-3.3.1.js"></script>
22     <script type="text/javascript">
23         $(function () {
24             //$('.test').click(function () {
25             //    alert($(this).text());
26             //})
27 
28             //类选择器
29             //所有的应用test类样式的元素
30             //$('.test').css('backgroundColor', 'green');
31 
32             //标签+类选择器
33             //所有的应用了test类样式的p元素(标签+类选择器)
34             //$('p.test').css('backgroundColor', 'red');
35 
36             //组合选择器
37             //$('.test,#btn').css('backgroundColor', 'red');
38         });
39     </script>
40 </body>
41 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <span>我是body下的span</span>
 9     <div>
10         <span>我是div下的span</span>
11         <p>00000000000<span>我是div下的p下的span</span></p>
12     </div>
13     <span>我是body下的span2</span>
14     <div id="div1">
15         <p>11111111</p>
16         <p>22222222</p>
17         <p>33333333</p>
18     </div>
19     <p>44444444</p>
20     <p>55555555</p>
21     <p>66666666</p>
22     <script src="jquery-3.3.1.js"></script>
23     <script type="text/javascript">
24         $(function () {
25             //层次选择器
26 
27             //选取页面下的所有的p标签,背景色为红色
28             //$('p').css('backgroundColor', 'red');
29 
30             //选取所有div1下的所有元素,背景色为蓝色
31             //$('#div1 p').css('backgroundColor', 'blue');
32 
33             //选取页面上的所有的div下的p标签设置背景色为黄色
34             //$('div p').css('backgroundColor', 'yellow');
35 
36             //选取页面上的所有的span,背景色黄色
37             //$('span').css('backgroundColor', 'yellow');
38 
39             //选取body下的所有span
40             //$('body span').css('backgroundColor', 'yellow');
41 
42             //选取body下的直接子元素span
43             //后代选择器
44             $('body > span').css('backgroundColor', 'yellow');
45         });
46     </script>
47 </body>
48 </html>

 五、层次选择器

 1 1、后代,$('div li')获取div下的所有li元素(后代、子、子的子)
 2 
 3 2、子元素,$('div>li')获取div下的直接li子元素【必须是直接子元素】
 4 
 5 3、相邻元素1:$('.menuitem+div')获取样式名为menuitem之后的相邻的(紧接着的)第一个div元素(不常用)等同于$('.menuitem').next('div');如果相邻的那个元素不是div,则不会继续向后找。
 6 
 7 4、相邻元素2:$('.menuitem~div')获取样式名为menuitem之后所有的兄弟div元素,等同于$('.menuitem').nextAll('div')【nextAll('*')】或nextAll()表示后面的所有元素。
 8 
 9 5、$('*');选取所有的元素。
10 
11 注:选择器表达式中的空格不能多也不能少。易错!过滤器与表单选择器时注意

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <div>
 9         div1
10     </div>
11     <span>content</span>
12     <p>春眠不觉晓</p>
13     <p>春眠不觉晓</p>
14     <div>
15         div2
16     </div>
17     <p>春眠不觉晓</p>
18     <div>
19         div3
20     </div>
21     <p>春眠不觉晓</p>
22     <span>这是一个span</span>
23     <span>这是一个span</span>
24     <span>这是一个span</span>
25     <div>
26         <span>我会变色吗?</span>
27     </div>
28     <script src="jquery-3.3.1.js"></script>
29     <script type="text/javascript">
30         $(function () {
31             //$('div + p').css('backgroundColor', 'red'); //+表示next(),后一个兄弟
32             //$('div ~ p').css('backgroundColor', 'red');  //~表示nextAll(),后面的所有兄弟
33 
34             //下面两种写法互等
35             //$('div + span').css('backgroundColor', 'red'); //表示选择div后的下一个元素,并且该元素必须是span元素
36             //$('div').next('span').css('backgroundColor', 'red');
37 
38             //下面两种写法互等
39             //$('div ~ span').css('backgroundColor', 'red');
40             //$('div').nextAll('span').css('backgroundColor', 'red');
41 
42             //互等
43             //$('div').next() <---> $('div + *').css('backgroundColor', 'red');
44 
45             //互等
46             //$('div').nextAll() <---> $('div ~ *').css('backgroundColor', 'red');
47 
48             //$('div').prev('span').css('backgroundColor', 'red'); //获取div的上一个元素,并且该兄弟元素必须是span
49             //$('div').prevAll('span').css('backgroundColor', 'red'); //获取div前面的所有兄弟
50 
51             //获取当前元素的所有的兄弟元素
52             $('div').siblings('span');
53         });
54     </script>
55 </body>
56 </html>

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>公牛</li>
10         <li>小牛</li>
11         <li>湖人</li>
12         <li>开拓者</li>
13     </ul>
14     <script src="jquery-3.3.1.js"></script>
15     <script type="text/javascript">
16         $(function () {
17             //鼠标悬浮事件
18             $('ul li').mousemove(function () {
19                 $(this).css('backgroundColor', 'red').siblings('li').css('backgroundColor', 'white');
20             }).click(function () {
21                 //单机事件
22                 //有些方法是会破坏链式变成中返回的对象的,比如:next()、nextAll()、prev()、prevAll()、siblings()、无参数的:text()、val()、html()
23                 //当链式编程的链被破坏的时候,以后的可以通过end()方法修复
24                 $(this).prevAll().css('backgroundColor', 'yellow').end().nextAll().css('backgroundColor', 'blue');
25             });
26             //$('ul li').click(function () {
27 
28             //});
29         });
30     </script>
31 </body>
32 </html>

鼠标悬浮事件

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         td {
 8             font-size:50px;
 9             color:yellow;
10             cursor:pointer;
11             }
12     </style>
13 </head>
14 <body>
15     <p id="pscore"></p>
16     <table id="t1" border="0" cellpadding="0" cellspacing="0">
17         <tr>
18             <td>☆</td>
19             <td>☆</td>
20             <td>☆</td>
21             <td>☆</td>
22             <td>☆</td>
23         </tr>
24     </table>
25     <script src="jquery-3.3.1.js"></script>
26     <script type="text/javascript">
27         $(function () {
28             $('#t1 td').mouseover(function () {
29                 $(this).text('★').prevAll().text('★').end().nextAll().text('☆');
30             }).mouseout(function () {
31                 //当鼠标移开的时候把所有的td都变成☆,将具有isclicked属性的td以及之前的td都变成★
32                 $('#t1 td').text('☆');
33                 $('#t1 td[isclicked=isclicked]').text('★').prevAll().text('★');
34             }).click(function () {
35                 //点击某个td的时候显示多少分
36                 $(this).attr('isclicked', 'isclicked').siblings().removeAttr('isclicked'); //等价于setAttribute
37                 $('#pscore').text($(this).attr('score'));
38             }).attr('score', function (index) {
39                 return (index + 1) * 10;
40             });
41         });
42     </script>
43 </body>
44 </html>

评分五角星

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="全选" id="btnChkAll" />
 9     <input type="button" value="全不选" id="btnNoneChk" />
10     <input type="button" value="反选" id="btnChkReverse" />
11     <input type="checkbox" id="chkbox1" />
12     <input type="checkbox" id="chkbox2" />
13     <input type="checkbox" id="chkbox3" />
14     <input type="checkbox" id="chkbox4" />
15     <input type="checkbox" id="chkbox5" />
16     <script src="jquery-3.3.1.js"></script>
17     <script type="text/javascript">
18         $(function () {
19             //全选
20             $('#btnChkAll').click(function () {
21                 //$('#btnChkAll[type="checkbox"]').prop('checked', true);
22                 $('input[type="checkbox"]').prop('checked', true);
23             });
24             //全不选
25             $('#btnNoneChk').click(function () {
26                 $('input[type="checkbox"]').prop('checked', false);
27             })
28             //反选
29             $('#btnChkReverse').click(function () {
30                 //方式一:通过自己遍历的方式,设置反选
31                 //$.each($('input[type="checkbox"]'), function (indexs, values) {
32                 //    $(values).prop('checked', !$(values).prop('checked'));
33                 //});
34 
35                 //方式二
36                 $('input[type="checkbox"]').prop('checked', function (indexs, values) {
37                     return !values;
38                     //alert(indexs + ',' + values);
39                 })
40             });
41         })
42     </script>
43 </body>
44 </html>

全选反选全不选

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         .night {
 8             background-color:black;
 9         }
10     </style>
11 </head>
12 <body>
13     <input type="button" value="button" id="btn" />
14     <script src="jquery-3.3.1.js"></script>
15     <script type="text/javascript">
16         $('#btn').click(function () {
17             //模拟开关灯效果
18             //方式一
19             //---------------------------
20             //判断一个元素是否应用了某个样式
21             //if ($('body').hasClass('night')) {
22             //    //移除该样式,不会移除其他的样式
23             //    $('body').removeClass('night');
24             //} else {
25             //    $('body').addClass('night');  //追加新的样式,不会覆盖样式
26             //}
27             //-----------------------------
28 
29             //方式二
30             $('body').toggleClass('night'); //切换类样式的应用于移除
31         });
32     </script>
33 </body>
34 </html>

模拟开关灯

 六、基本过滤选择器(:)

 1 :first 选择第一个元素。$('div:first') 选取第一个<div>
 2 
 3 :last 选择最后一个元素。$('div:last') 选取最后一个<div>
 4 
 5 :not (选择器)选取不满足“选择器”条件的元素
 6 例如:$('input:not(.myClass)') 选取样式名不是myClass的<input>
 7 
 8 :even 选取索引是偶数的元素
 9 
10 :odd 选取索引是奇数的元素
11 
12 :eq(索引序号) 选取索引等于
13 
14 :gt(索引序号) 选取索引大于
15 
16 :lt(索引序号) 选取索引小于

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="button" id="btn" />
 9     <h1>Alex</h1>
10     <h2>Alex</h2>
11     <h3>Alex</h3>
12     <h4>Alex</h4>
13     <h5>Alex</h5>
14     <h6>Alex</h6>
15     <p class="cls">p1</p>
16     <p>p2</p>
17     <p>p3</p>
18     <p>p4</p>
19     <p>p5</p>
20     <p  class="cls">p6</p>
21     <p>p7</p>
22     <p>p8</p>
23     <p  class="cls">p9</p>
24     <p>p10</p>
25     <script src="jquery-3.3.1.js"></script>
26     <script type="text/javascript">
27         $(function () {
28             $('#btn').click(function () {
29                 //1、选取索引的p标签,背景色红色
30                 //$('p').css('backgroundColor', 'red');
31 
32                 //2、选取第一个p标签,背景色红色
33                 //$('p:first').css('backgroundColor', 'red');
34 
35                 //3、选取最后一个p标签,背景色红色
36                 //$('p:last').css('backgroundColor', 'red');
37 
38                 //4、选取第二个p标签(索引从0开始),背景色红色
39                 //$('p:eq(1)').css('backgroundColor', 'red');
40 
41                 //5、选取偶数
42                 //$('p:even').css('backgroundColor', 'red');
43 
44                 //6、选取奇数
45                 //$('p:odd').css('backgroundColor', 'red');
46 
47                 //7、索引大于2的,背景色红色
48                 //$('p:gt(2)').css('backgroundColor', 'red');
49 
50                 //8、索引小于5的,背景色红色
51                 //$('p:lt(5)').css('backgroundColor', 'red');
52 
53                 //9、选取页面上所有p标签,除了应用了cls类的那些标签
54                 //$('p:not(.cls)').css('backgroundColor', 'red');
55 
56                 //10、设置所有标题都变成红色
57                 //$('H1').css('backgroundColor', 'red');
58                 //$('h1,h2').css('backgroundColor', 'red');
59                 //简写
60                 //$(':header').css('backgroundColor', 'red');
61             });
62         })
63     </script>
64 </body>
65 </html>

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="button" id="btn" />
 9     <table border="1" cellpadding="1" cellspacing="1">
10         <thead>学生成绩</thead>
11         <tr>
12             <td>学生</td>
13             <td>成绩</td>
14         </tr>
15         <tr>
16             <td>张三</td>
17             <td>30</td>
18         </tr>
19         <tr>
20             <td>李四</td>
21             <td>40</td>
22         </tr>
23         <tr>
24             <td>王五</td>
25             <td>50</td>
26         </tr>
27         <tr>
28             <td>赵六</td>
29             <td>60</td>
30         </tr>
31         <tr>
32             <td>秦七</td>
33             <td>70</td>
34         </tr>
35     </table>
36     <script src="jquery-3.3.1.js"></script>
37     <script type="text/javascript">
38         $(function () {
39             $('#btn').click(function () {
40                 $('tr:first').css('font-size', 70);
41                 $('tr:last').css('color', 'red');
42                 $('tr:gt(0):lt(2)').css('font-size', 50)
43                 $('tr:odd:not(:last)').css('backgroundColor', 'red');
44             })
45         })
46     </script>
47 </body>
48 </html>

过滤器小练习

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="button" id="btn" />
 9     <ul id="uone">
10         <li>AAAAA</li>
11         <li>AAAAA</li>
12         <li>AAAAA</li>
13         <li>AAAAA</li>
14         <li>AAAAA</li>
15         <li>AAAAA</li>
16         <li>AAAAA</li>
17         <li>AAAAA</li>
18     </ul>
19     <script src="jquery-3.3.1.js"></script>
20     <script type="text/javascript">
21         $('#btn').click(function () {
22             $('#uone li:lt(2)').css('color', 'red');
23         });
24     </script>
25 </body>
26 </html>

小练习

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="button" id="btn" />
 9     <table border="1" cellpadding="1" cellspacing="1">
10         <tr>
11             <td>AA</td>
12             <td>BB</td>
13             <td>CC</td>
14             <td>DD</td>
15             <td>EE</td>
16             <td>FF</td>
17         </tr>
18         <tr>
19             <td>AA</td>
20             <td>BB</td>
21             <td>CC</td>
22             <td>DD</td>
23             <td>EE</td>
24             <td>FF</td>
25         </tr>
26         <tr>
27             <td>AA</td>
28             <td>BB</td>
29             <td>CC</td>
30             <td>DD</td>
31             <td>EE</td>
32             <td>FF</td>
33         </tr>
34         <tr>
35             <td>AA</td>
36             <td>BB</td>
37             <td>CC</td>
38             <td>DD</td>
39             <td>EE</td>
40             <td>FF</td>
41         </tr>
42     </table>
43     <script src="jquery-3.3.1.js"></script>
44     <script type="text/javascript">
45         $(function () {
46             $('table tr').mouseover(function () {
47                 $(this).css('backgroundColor', 'red').siblings('tr').css('backgroundColor','yellow');
48             });
49         });
50     </script>
51 </body>
52 </html>

小练习

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         td {
 8             width:50px;
 9             height:30px;
10         }
11     </style>
12 </head>
13 <body>
14     <input type="button" value="button" id="btn" />
15     <table border="1" cellpadding="1" cellspacing="1" id="t1">
16         <tr>
17             <td>AA</td>
18             <td>BB</td>
19             <td>CC</td>
20             <td>DD</td>
21             <td>EE</td>
22             <td>FF</td>
23         </tr>
24         <tr>
25             <td>AA</td>
26             <td>BB</td>
27             <td>CC</td>
28             <td>DD</td>
29             <td>EE</td>
30             <td>FF</td>
31         </tr>
32         <tr>
33             <td>AA</td>
34             <td>BB</td>
35             <td>CC</td>
36             <td>DD</td>
37             <td>EE</td>
38             <td>FF</td>
39         </tr>
40         <tr>
41             <td>AA</td>
42             <td>BB</td>
43             <td>CC</td>
44             <td>DD</td>
45             <td>EE</td>
46             <td>FF</td>
47         </tr>
48     </table>
49     <script src="jquery-3.3.1.js"></script>
50     <script type="text/javascript">
51         $(function () {
52             $('#t1 tr').click(function () {
53                 //清空其他颜色
54                 $('#t1 td').css('backgroundColor', 'white');
55 
56                 //$('td','#t1')  <==>$('#t1 td')
57                 //$('td', $(this))
58                 $('td:even', this).css('backgroundColor', 'red');
59                 $('td:odd', $(this)).css('backgroundColor', 'blue');
60             });
61         });
62     </script>
63 </body>
64 </html>

小练习

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" id="btn1" value="select" />
 9     <select>
10         <option value="value">北京</option>
11         <option value="value">上海</option>
12         <option value="value">杭州</option>
13     </select>
14     <div id="div1">
15         <input type="checkbox" />
16         <input type="checkbox" />
17         <input type="checkbox" checked />
18         <input type="checkbox" />
19         <input type="radio" />
20         <input type="radio" />
21     </div>
22     <form action="/" method="post" id="form1">
23         <input type="text" name="name" value="" disabled="disabled" />
24         <input type="text" name="name" value="" />
25         <input type="text" name="name" value="" />
26         <input type="button" name="name" value="button" />
27         <input type="button" name="name" value="button" disabled="disabled" />
28         <input type="button" name="name" value="button" />
29     </form>
30     <hr />
31     <input type="button" name="name" value="button" />
32     <input type="button" name="name" value="button" disabled="disabled" />
33     <input type="button" name="name" value="button" />
34     <script src="jquery-3.3.1.js"></script>
35     <script type="text/javascript">
36         //1、选取页面上所有被禁用的元素
37         //方式一
38         //$('*[disabled=disabled]').css('backgroundColor', 'red');
39 
40         //方式二
41         //$(':disabled').css('backgroundColor', 'red');
42 
43         //2、选取页面上所有没有被禁用的元素
44         //$(':enabled').css('backgroundColor', 'blue');
45 
46         //3、选取form下的没有禁用的元素
47         //$('#form1 :enabled').css('backgroundColor', 'blue');
48 
49         //4、选取form下的被禁用的元素
50         //$('#form1 :disabled').css('backgroundColor', 'red');
51 
52         //5、选取页面中所有被禁用的input元素
53         //$('input:disabled').css('backgroundColor', 'red');
54 
55         //6、选取页面中所有没有禁用的input元素
56         //$('input:enabled').css('backgroundColor', 'blue');
57 
58         //7、选取div1下所有checkbox被选中的元素
59         //$('#div1 :checked').css('backgroundColor', 'red');
60 
61         //8、选取div1下所有没被选中的元素
62         //$('#div1 :not(:checked)').css('backgroundColor', 'red');
63 
64         //9、获取选中的select
65         $('#btn1').click(function () {
66             $(':selected').text(function (index, v) {
67                 return '*' + v + '*';
68             });
69             //设置没有被选中的
70             $('select :not(:selected)').text(function (index, v) {
71                 return '=' + v + '=';
72             });
73         });
74     </script>
75 </body>
76 </html>

小练习

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="checkbox" name="name" value="tom" />tom
 9     <input type="checkbox" name="name" value="jim" />jim
10     <input type="checkbox" name="name" value="Alex" />Alex
11     <p id="pmsg">
12 
13     </p>
14     <script src="jquery-3.3.1.js"></script>
15     <script type="text/javascript">
16         $(function () {
17             //为每个checkbox注册单击事件
18             $('input[type=checkbox]').click(function () {
19                 //1、获取当前所有被选中的checkbox
20                 var chks = $('input[type=checkbox]:checked');
21                 //2、获取个数
22                 var n = chks.length;
23                 //3、获取每个checkbox的value
24                 var names = [];
25                 $.each(chks, function (k, chkObj) {
26                     // 第一个索引,第二个对象
27                     //方式一
28                     names[k] = $(chkObj).val();
29                     //方式二
30                     //names[names.length] = $(chkObj).val();
31                 })
32                 //4、把个数和值显示到p中
33                 $('#pmsg').text('当前共选中' + n + '个,分别是' + names.toString());
34             });
35         });
36     </script>
37 </body>
38 </html>

小练习

 七、动态创建元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         #div1 {
 8             width:300px;
 9             height:300px;
10             border:1px solid blue;
11         }
12     </style>
13 </head>
14 <body>
15     <input type="button" value="button" id="btn1" />
16     <div id="div1">
17 
18     </div>
19     <script src="jquery-3.3.1.js"></script>
20     <script type="text/javascript">
21         $('#btn1').click(function () {
22             //1、动态创建一个超链接
23             //var aObj = $('<a href="http://www.baidu.com">百度一下</a>')
24             //2、将超链接加入到div中
25             //方式一
26             //$('#div1').append(aObj);
27             //方式二
28             //加到div后面
29             //$('#div1').after(aObj);
30             //加到div前面
31             //$('#div1').before(aObj);
32 
33             //----------------------------
34             //方式二动态创建元素
35             //div后面
36             //$('<a href="http://www.baidu.com">百度一下</a>').insertAfter('#div1')
37             //div前面
38             //$('<a href="http://www.baidu.com">百度一下</a>').insertBefore('#div1')
39         });
40     </script>
41 </body>
42 </html>

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" id="btn1" value="button"/>
 9     <script src="jquery-3.3.1.js"></script>
10     <script type="text/javascript">
11         var websites = { '百度': 'http://www.baidu.com', '腾讯': 'http://www.qq.com' };
12         $('#btn1').click(function () {
13             //1、动态创建表格
14             $('<table border="1" style="width:300px;height:300px;"></table>').appendTo('body');
15             //2、动态创建表格中的行
16             for (var key in websites) {
17                 $('<tr><td>' + key + '</td><td><a href="https://my.oschina.net//u/4349408/blog/3294993/span>' + websites[key] + '">' + key + '</td></tr>').appendTo('table');
18             }
19         });
20     </script>
21 </body>
22 </html>

小练习

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <table border="1">
 9         <tr>
10             <td>毛毛</td>
11             <td>沙发~~</td>
12         </tr>
13         <tr>
14             <td>蛋蛋</td>
15             <td>板凳</td>
16         </tr>
17     </table>
18     昵称:<input type="text" name="name" value="" id="txtNickName" placeholder="请输入昵称!" />
19     评论:<textarea cols="25" rows="5" id="txtContent"></textarea>
20     <input type="button" name="" value="提交" id="btn1" />
21     <script src="jquery-3.3.1.js"></script>
22     <script type="text/javascript">
23         $('#btn1').click(function () {
24             //1、获取昵称
25             var txtNickName = $('#txtNickName').val();
26             //2、获取评论
27             var txtContent = $('#txtContent').val();
28             //3、往table中追加
29             $('<tr><td>' + txtNickName + '</td><td>' + txtContent + '</td></tr>').appendTo('table');
30         });
31     </script>
32 </body>
33 </html>

无刷新评论

八、 删除节点

1 empty():
2     · 清空其元素下的所有子元素
3     · 内部实现:while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一样
4 remove(selector)5     · 删除当前元素,返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下:
6         · var lis = $('#ulSite li').remove();
7         · $('#ulSite2').append(lis);
8     · 参数expr,是一个选择器,如果没有选择器,表示把选中的元素删掉,如果有选择器则表示在选中的元素中,再过滤出expr匹配的元素删除掉。

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         select {
 8             width:150px;
 9             height:100px;
10         }
11     </style>
12 </head>
13 <body>
14     <select id="s1" multiple="multiple">
15         <option>增加</option>
16         <option>删除</option>
17         <option>修改</option>
18         <option>保存</option>
19     </select>
20     <input type="button" value=">>" />
21     <input type="button" value=">" />
22     <input type="button" value="<" />
23     <input type="button" value="<<" />
24     <select id="s2" multiple="multiple">
25 
26     </select>
27     <script src="jquery-3.3.1.js"></script>
28     <script type="text/javascript">
29         $(':button[value=">>"]').click(function () {
30             var sel1 = $('#s1 option').remove();
31             $('#s2').append(sel1);
32         });
33         $(':button[value=">"]').click(function () {
34             var sel1 = $('#s1 option:selected').remove();
35             $('#s2').append(sel1);
36         });
37         $(':button[value="<"]').click(function () {
38              var sel2 = $('#s2 option:selected').remove();
39             $('#s1').append(sel2);
40         });
41         $(':button[value="<<"]').click(function () {
42             var sel2 = $('#s2 option').remove();
43             $('#s1').append(sel2);
44         });
45     </script>
46 </body>
47 </html>

小练习

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="text" id="txt1" />+<input type="text" id="txt2" />=<input type="text" id="txt3" />
 9     <br />
10     <input type="button" value="计算" id="btn1" />
11     <script src="jquery-3.3.1.js"></script>
12     <script type="text/javascript">
13         $('#btn1').click(function () {
14             //1、获取文本框1的值
15             var txt1 = $('#txt1').val();
16             //2、获取文本框2的值
17             var txt2 = $('#txt2').val();
18             //3、计算并给文本框3赋值
19             var sum = parseInt(txt1) + parseInt(txt2)
20             $('#txt3').val(sum);
21         });
22     </script>
23 </body>
24 </html>

小练习

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="请仔细阅读协议(5)" id="btn1" disabled="disabled" />
 9     <script src="jquery-3.3.1.js"></script>
10     <script type="text/javascript">
11         var sec = 4;
12         $(function () {
13             var intervalId = setInterval(function () {
14                 if (sec > 0) {
15                     $('#btn1').val('请仔细阅读协议(' + sec + ')')
16                     sec--;
17                 } else {
18                     //停止计时器
19                     clearInterval(intervalId);
20                     //方式一
21                     //$('#btn1').val('同意!').removeAttr('disabled');
22                     //方式二
23                     $('#btn1').val('同意!').prop('disabled', false);  //注意,不能是字符串的false
24                 }
25             }, 1000);
26         })
27     </script>
28 </body>
29 </html>

小练习

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="text" />
 9     <input type="text" />
10     <input type="text" />
11     <script src="jquery-3.3.1.js"></script>
12     <script type="text/javascript">
13         $(':text').blur(function () {
14             //1、校验
15             if ($(this).val().length == 0) {
16                 //2、背景色变红
17                 $(this).css('backgroundColor', 'red');
18             } else {
19                 $(this).css('backgroundColor', '');
20             }
21         })
22     </script>
23 </body>
24 </html>

小练习

 九、节点的操作

· 替换节点
    - $('br').replaceWith('<hr/>');
        用hr替换br
    - $('<br/>').replaceAll('hr');
        用br替换hr

· 包裹节点
    - wrap():将所有元素逐个用指定标签包裹
        $('b').wrap('<font color="red"></font>') 将所有粗体字红色显示
        结果:<font color="red"><b></b></font>
    - wrapInner() 在内部围绕

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="替换" id="btn" />
 9     <p>ppppppppp</p>
10     <hr />
11     <p>ppppppppp</p>
12     <hr />
13     <p>ppppppppp</p>
14     <hr />
15     <p>ppppppppp</p>
16     <script src="jquery-3.3.1.js"></script>
17     <script type="text/javascript">
18         $('#btn').click(function () {
19             //先使用选择器选择对应的元素,然后使用指定的元素对象来替换选择到的元素
20             //$('hr').replaceWith('<a href="http://www.baidu.com">百度一下</a>')
21 
22             //首先动态创建一个元素,然后进行替换
23             $('<font color="red">====</font>').replaceAll('hr')
24         })
25     </script>
26 </body>
27 </html>

节点替换

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="包裹节点" id="btn" />
 9     <p>pppppppp</p>
10     <input type="text" />
11     <p>pppppppp</p>
12     <p>pppppppp</p>
13     <p>pppppppp</p>
14     <script src="jquery-3.3.1.js"></script>
15     <script type="text/javascript">
16         $('#btn').click(function () {
17             //包裹外边
18             //$('p').wrap('<font color="red"></font>');
19             //包裹里面
20             //$('p').wrapInner('<font color="red"></font>')
21             //包裹所有的:所有的p标签使用一个标签来包裹
22             $('p').wrapAll('<font color="red"></font>');
23         });
24     </script>
25 </body>
26 </html>

节点包裹

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="button" id="btn" />
 9     <p>
10         性别:
11         <input type="radio" name="gender" value="male" />男
12         <input type="radio" name="gender" value="female" />女
13         <input type="radio" name="gender" value="secret" />保密
14     </p>
15     <p>
16         婚否:
17         <input type="radio" name="hf" value="yihun" />已婚
18         <input type="radio" name="hf" value="weihun" />未婚
19         <input type="radio" name="hf" value="liyi" />离异
20     </p>
21     <p>
22         <input type="checkbox" name="hobby" value="dlq" />打篮球
23         <input type="checkbox" name="hobby" value="tzq" />踢足球
24         <input type="checkbox" name="hobby" value="ppq" />乒乓球
25     </p>
26     <script src="jquery-3.3.1.js"></script>
27     <script type="text/javascript">
28         $('#btn').click(function () {
29             //要求如下:
30             // 保密、已婚、打篮球、踢足球被选中
31             //方式一
32             //$(':radio[value="secret"]').prop("checked", 'true');
33             //$(':radio[value="yihun"]').prop("checked", 'true');
34             //$(':checkbox[value="dlq"]').prop('checked', 'true');
35             //$(':checkbox[value="tzq"]').prop('checked', 'true');
36             //方式二
37             $(':radio').val(['secret', 'yihun']);
38             $(':checkbox').val(['dlq', 'tzq']);
39         });
40     </script>
41 </body>
42 </html>

单选框和复选框操作

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         #div1 {
 8             width:100px;
 9             height:100px;
10             background-color:red;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="div1">
16 
17     </div>
18     <input type="text" id="txt1" />
19     <script src="jquery-3.3.1.js"></script>
20     <script type="text/javascript">
21         //注册一个鼠标移动事件
22         $('#div1').mousemove(function (evt) {
23             //在jQuery中使用事件对象,直接在事件处理函数中加一个evt参数即可
24             //并且该事件对象是经过jQuery封装后的事件对象
25             var x, y;
26             var e = evt || window.event;
27             x = e.pageX;
28             y = e.pageY;
29             document.title = x + ',' + y;
30         }).mousedown(function (evt) {
31             //获取鼠标按下的键,1:左键;2:滚轮;3:右键
32             alert(evt.which);
33         });
34         $('#txt1').keydown(function (evt) {
35             //相当于window.keyCode键盘码
36             alert(evt.which);
37         });
38     </script>
39 </body>
40 </html>

获取事件对象

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <p id="p1">ppppppp<span id="s1">sssss</span>ppp
 9     </p>
10     <script src="jquery-3.3.1.js"></script>
11     <script type="text/javascript">
12         $('#p1').click(function () {
13             alert('p1');
14         });
15         $('#s1').click(function (evt) {
16             alert('s1');
17             //阻止事件冒泡
18             //DOM取消事件冒泡:window.event.cancelBubble=true;
19             evt.stopPropagation();
20         });
21     </script>
22 </body>
23 </html>

取消事件冒泡

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         #div1 {
 8             width:300px;
 9             height:300px;
10             background-color:blue;
11         }
12     </style>
13 </head>
14 <body>
15     <input type="button" value="show" id="btnShow" />
16     <input type="button" value="hide" id="btnHide" />
17     <input type="button" value="show/hide" id="btn" />
18     <div id="div1">
19 
20     </div>
21     <script src="jquery-3.3.1.js"></script>
22     <script type="text/javascript">
23         $('#btnShow').click(function () {
24             //$('#div1').stop().show(3000);
25             //$('#div1').stop().slideDown(3000);
26             //$('#div1').stop().fadeIn(3000);
27             //$('#div1').stop().fadeTo(3000, 0.3);
28         });
29         $('#btnHide').click(function () {
30             //$('#div1').stop().hide(3000);
31             //$('#div1').stop().slideUp(3000);
32             //$('#div1').stop().fadeOut(3000);
33         });
34         $('#btn').click(function () {
35             //$('#div1').stop().toggle(2000);
36             //$('#div1').stop().fadeToggle(2000);
37             $('#div1').stop().slideToggle(2000);
38         });
39     </script>
40 </body>
41 </html>

动画

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         #img1 {
 8             display:none;
 9             position:absolute;
10         }
11     </style>
12 </head>
13 <body>
14     <input type="button" value="显示消息" id="btn" />
15     <img src="2.jpg" alt="Alternate Text" id="img1" />
16     <script src="jquery-3.3.1.js"></script>
17     <script type="text/javascript">
18         $('#btn').click(function () {
19             //$('#img1').css({ 'right': 0, 'bottom': 0 }).show(2000);
20             //$('#img1').css({ 'right': 0, 'bottom': 0 }).slideDown(2000);
21             $('#img1').css({ 'right': 0, 'bottom': 0 }).fadeIn(2000);
22         });
23     </script>
24 </body>
25 </html>

右下角弹窗

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         #qqTab {
 8             height:500px;
 9             width:300px;
10             border:1px solid blue;
11         }
12         #qqTab ul {
13                 padding:0;
14                 margin:0;
15                 list-style-type:none;
16         }
17         p {
18             margin:0;
19             text-align:center;
20             background-color:aqua;
21             margin-bottom:2px;
22         }
23         #uGroup ul li {
24             background-color:chartreuse;
25             margin-top:2px;
26             margin-bottom:2px;           
27         }
28         li, p {
29             cursor:pointer;
30         }
31         #uGroup li ul {
32             display:none;
33         }
34     </style>
35 </head>
36 <body>
37     <!--bgsound:仅仅支持IE-->
38     <bgsound id="snd" loop="0" src="天空之城.mp3"></bgsound>
39     <div id="qqTab">
40         <ul id="uGroup">
41             <li>
42                 <p>
43                     小学同学
44                 </p>
45                 <ul>
46                     <li>小猫</li>
47                     <li>小猫2</li>
48                 </ul>
49             </li>
50             <li>
51                 <p>
52                     初中同学
53                 </p>
54                 <ul>
55                     <li>小狗</li>
56                     <li>小狗2</li>
57                 </ul>
58             </li>
59             <li>
60                 <p>
61                     高中同学
62                 </p>
63                 <ul>
64                     <li>小猪</li>
65                     <li>小猪2</li>
66                 </ul>
67             </li>
68         </ul>
69     </div>
70     <script src="jquery-3.3.1.js"></script>
71     <script type="text/javascript">
72         $('#uGroup li p').click(function () {
73             //$(this).next('ul').toggle(1500);
74             $(this).next('ul').slideToggle(1500);
75         });
76     </script>
77 </body>
78 </html>

QQ面板

十、animate动画(自定义)

 1 - 滑动效果
 2     slideDown()、slideUp()、slideToggle()
 3 
 4 - 淡入淡出(透明)
 5     fadeIn()、fadeOut()、fadeToggle()、fadeTo()
 6 
 7 - 自定义动画
 8     animate({样式},speed)
 9         部分样式不支持:backgroundColor、color、borderStyle......
10     使用animate设置对象位置的时候要确保position的值为absolute或relative
11     停止动画正在执行动画的元素:stop()(*),带参数的stop(true,false);
12     动画队列:animate().animate().animate()....;

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         #div1 {
 8             width:20px;
 9             height:20px;
10             border:1px solid blue;
11             background-color:orange;
12             position:absolute;
13             left:100px;
14             top:100px;
15         }
16     </style>
17 </head>
18 <body>
19     <input type="button" value="button" id="btnStart" />
20     <input type="button" value="stop" id="btnStop" />
21     <div id="div1">
22 
23     </div>
24     <script src="jquery-3.3.1.js"></script>
25     <script type="text/javascript">
26         //开始
27         $('#btnStart').click(function () {
28             $('#div1').animate({ width: '100px', height: '100px', left: '200px', top: '150px' }, 1000)
29                 .animate({ width: '10px', height: '10px', left: '100px', top: '100px' }, 1000)
30                 .animate({ width: '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000)
31                 .animate({ width: '10px', height: '10px', left: '100px', top: '100px' }, 1000)
32                 .animate({ width: '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000)
33                 .animate({ width: '10px', height: '10px', left: '100px', top: '100px' }, 1000)
34                 .animate({ width: '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000);
35         });
36         //停止
37         $('#btnStop').click(function () {
38             //仅仅停止当前运行的动画,后面的动画不会停止,继续执行
39             //$(':animated').stop();
40             //停止当前动画,并且清除后面的动画队列(动画停止)
41             //$(':animated').stop(true);
42             //停止当前动画,并且将当前元素设置到当前动画执行完毕的位置
43             $(':animated').stop(true, true);
44         });
45     </script>
46 </body>
47 </html>

十一、 jQuery插件一(cookie)

下载地址:http://plugins.jquery.com/cookie/

注:必须先引入jQuery,再引用cookie。

1     什么是cookie:Cookie就是保存在浏览器上的内容,用户在本次浏览页面的时候向Cookie中保存文本内容,下次再访问页面的时候就可以取出来上次保存的内容,这样就可以得到上次“记忆”的内容。Cookie不是jQuery持有的概念,只不过jQueryCookie把他简化的更好用罢了。Cookie就是存储在浏览器里的一些数据
2     Cookie需要浏览器的支持,浏览器的Cookie是可以禁用的,如果禁用了Cookie就不可以使用了,
3     Cookie的几个特征:
4         1、Cookie与域名相关
5         2、一个域名能写入的Cookie总尺寸是有限制的

Jquery补充及插件 Jquery补充及插件

1 使用方法
2     1、设置值,$.cookie('键','值')。cookie中保存的值都是文本
3     2、读取值,var v = $.cookie('键')
4     3、设置有效期;$.cookie('键','值',{expires:7,path:'/',domain:'www.baidu.com',secure:true});
5         expires:表示浏览器保存cookie几天
6         options参数用那个设置那个。path:网页有效路径;domain:域名;secure:传输cookie时候,是否需要一个安全协议

Cookie的使用

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         #pmsg {
 8             border:1px solid blue;
 9         }
10     </style>
11 </head>
12 <body>
13     <input type="text" id="userName" />
14     <input type="button" value="提交" id="btnSubmit" />
15     <p id="pmsg">
16         欢迎,游客!~
17     </p>
18     <script src="jquery-3.3.1.js"></script>
19     <script src="jquery.cookie.js"></script>
20     <script type="text/javascript">
21         $(function () {
22             //------------先获取Cookie,若Cookie有值,则放到P标签中,否则,显示游客-----------------------
23             if ($.cookie('userName')) {
24                 $('#pmsg').text('欢迎:' + $.cookie('userName'));
25             } else {
26                 $('#pmsg').text('欢迎,游客~');
27             }
28             $('#btnSubmit').click(function () {
29                 //1、获取文本框的值
30                 var user_name = $('#userName').val();
31                 //2、写到Cookie中
32                 //当写入Cookie的时候,若不设置有效期,则为进程内“Cookie”
33                 //3、设置Cookie有效期;{ expires: 7, path: '/', domain: 'jquery.com', secure: true }
34                 $.cookie('userName', user_name, { expires: 7, path: '/', secure: false });
35                 alert('写入成功!');
36             });
37         });
38     </script>
39 </body>
40 </html>

记录用户登录状态

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6 </head>
 7 <body>
 8     <p id="p1"></p>
 9     <script src="jquery-3.3.1.js"></script>
10     <script src="jquery.cookie.js"></script>
11     <script type="text/javascript">
12         //1、读取cookie,如果有显示到p中
13         //2、无论这次是否读取到了cookie,那么这次都要将新的时间写入cookie
14         var now_time = $.cookie('nowtime');
15         var date = new Date();
16         if (now_time) {
17             $('#p1').text('最后一次刷新时间:' + now_time)
18             $.cookie('nowtime', date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(), { expires: 7, path: '/', secure: false })
19         } else {
20             $.cookie('nowtime', date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(), { expires: 7, path: '/', secure: false })
21         }        
22     </script>
23 </body>
24 </html>

用户最后刷新时间

 十二、jQuery插件二(jqzoom)

下载地址

链接:https://pan.baidu.com/s/1-fHzkr49n4XXxiLa91vHRA
提取码:r74f
Demo如下

Jquery补充及插件

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <script src="jquery.js"></script>   <!--第一步:引入jquery(注:jqzoom与jquery版本要对应)-->
 7     <script src="jquery.jqzoom.js"></script>    <!--第二步:引入jqzoom-->
 8     <link href="jqzoom.css" rel="stylesheet" type="text/css" />      <!--第三步:引入jqzoom样式-->
 9 </head>
10 <body>
11     <div class="jqzoom"><img src="timg2.jpg" alt="shoe" jqimg="timg1.jpg"></div> <!--第四步(timg2小图片;timg1大图片)-->
12 
13     <script type="text/javascript">
14         $(function () {
15             $('.jqzoom').jqueryzoom({
16                 xzoom: 400, //放大图片的X轴(默认为:200)
17                 yzoom: 400, //方法图片的Y轴(默认为:200)
18                 offset: 40, //偏移量(默认为:10)
19                 position: "right" //默认为right
20             });
21         });
22     </script>
23 </body>
24 </html>

图片放大

十三、 jQuery插件二(jquery ui)

下载地址

链接:https://pan.baidu.com/s/1NnIRp39bK9Sx2Y4G86qI9A
提取码:8yv2
中文官网地址:http://www.jqueryui.org.cn/

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 7     <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 8     <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 9     <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
10     <script>
11         $(function () {
12             $("#datepicker").datepicker({
13                 showOtherMonths: true,
14                 selectOtherMonths: true
15             });
16         });
17     </script>
18 </head>
19 <body>
20     <p>日期:<input type="text" id="datepicker"></p>
21 </body>
22 </html>

日期样式

其他的jquery ui请参考官网!~~~

十四、编写一个插件

1 1、为对象编写插件
2         $.fn.extend{fnName:function(){}};
3 
4 2、编写全局函数插件
5 
6 3、插件命名:jquery.xxx.js

Jquery补充及插件 Jquery补充及插件

 1 ; (function ($) {
 2     $.fn.extend({
 3         setTableStyle: function () {
 4             // 在当前函数中,this表示的就是调用当前函数的对象,即表格对象
 5             $('tr', this).mouseover(function () {
 6                 $(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor', 'blue');
 7             });
 8         },
 9         clearTableStyle: function () {
10             $('tr', this).unbind(); //移除所有事件
11         }
12     })
13 })(jQuery);

jquery.tablestyle.js

Jquery补充及插件 Jquery补充及插件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>我的第一个jquery插件</title>
 6 </head>
 7 <body>
 8     <table id="t1" border="1" cellpadding="2" cellspacing="2">
 9         <tr>
10             <td>11</td>
11             <td>11</td>
12             <td>11</td>
13         </tr>
14         <tr>
15             <td>22</td>
16             <td>22</td>
17             <td>22</td>
18         </tr>
19         <tr>
20             <td>33</td>
21             <td>33</td>
22             <td>33</td>
23         </tr>
24         <tr>
25             <td>44</td>
26             <td>44</td>
27             <td>44</td>
28         </tr>
29         <tr>
30             <td>55</td>
31             <td>55</td>
32             <td>55</td>
33         </tr>
34     </table>
35     <script src="jquery-3.3.1.js"></script>
36     <script src="jquery.tablestyle.js"></script>
37     <script type="text/javascript">
38         $('#t1').setTableStyle();
39     </script>
40 </body>
41 </html>

index.html

十五、完整练习项目地址

链接:https://pan.baidu.com/s/1UWO\_IpnJItHjIy43-LtKzA
提取码:26ir

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
2年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
5个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这