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

一、jQuery中提供的两个函数

 $.map(array,callback(element,index));

     1.对于数组array中的每个元素，调用callback()函数，最终返回一个新的数组。原数组不变

 $.each(array,fn);遍历数组，return false来退出循环。

     1.主要用来遍历数组，不修改数组，对于普通数组或者“键值对”数组都没有问题

     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>

 页面加载执行JavaScript与jQuery写法区别

 JS:

     window.onload(function(){

 });

 JQuery:

     方式一：

              $(document).ready(function(){

 });

      方式二:

               $(function(){});   等价于$(document).ready(function(){});    

 两者区别:

     1.window.onload需要等待页面全部加载完毕才会触发，即所有的Dom元素创建完毕、图片、CSS等加载完毕后才被触发。

     2.$(document).ready()只要Dom元素加载完毕即触发，这样可以提升相应速度

     3.$(document).ready();可以多次注册事件处理程序，并且最终都会执行，而window.onload每次注册新的事件处理程序时都会将前面的覆盖掉

 以下jQuery三种写法相同

 jQuery(document).ready(function(){

 });

 $(document).ready(function(){

 });

 $(function(){

 });

补充

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         //var arrInt = [10, 20, 30, 40, 50, 60, 70, 80, 90];

         //遍历数组中的每个元素，返回一个新的数组

         //var arrIntNew = $.map(arrInt, function (element_value, arrIndex) {

         //    //alert(arguments.length); //查看底层传入几个参数

         //    //alert(element_value+'...'+arrIndex);

         //    return element_value * 2;

         //})

         //alert(arrIntNew);

         //练习遍历数组，将索引大于3的元素翻倍。并返回一个新的数组

         var arrInt = [10, 20, 30, 40, 50, 60, 70, 80, 90];

         var arrIntNew = $.map(arrInt, function (element_value, arrIndex) {

             return arrIndex > 3 ? element_value * 2 : element_value;

         })

         alert(arrIntNew);

     //以下jQuery底层代码

     //  map: function( elems, callback, arg ) {

     //    var length, value,

     //        i = 0,

     //        ret = [];

     //    // Go through the array, translating each of the items to their new values

     //    if ( isArrayLike( elems ) ) {

     //        length = elems.length;

     //        for ( ; i < length; i++ ) {

     //            value = callback( elems[ i ], i, arg );

     //            if ( value != null ) {

     //                ret.push( value );  注:JavaScript的push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

     //            }

     //        }

     //    // Go through every key on the object,

     //    } else {

     //        for ( i in elems ) {

     //            value = callback( elems[ i ], i, arg );

     //            if ( value != null ) {

     //                ret.push( value );

     //            }

     //        }

     //    }

     //    // Flatten any nested arrays

     //    return concat.apply( [], ret );

     //}

     </script>

二、jQuery中的trim()

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         //去除两边空格

         var msg = '     alex     ';

         alert('===' + $.trim(msg) + '===');

         //jQuery底层源码

         //  trim: function( text ) {

         //    return text == null ?

         //        "" :

         //        ( text + "" ).replace( rtrim, "" );  注:rtrim为正则表达式:/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g

         //}

         //等同上面写法,两边加“=”为了明显区分是否有空格

         alert('===' + msg.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,'') + '===')

     </script>

 </body>

 </html>

三、Dom对象和jQuery对象

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         #div1 {

             width:200px;

             height:200px;

             background-color:blue;

         }

     </style>

 </head>

 <body>

     <input type="button" value="button" id="btn" />

     <div id="div1">

     </div>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         //1.获取层对象

         //页面上的元素对象才叫Dom对象，数组、日期，这些不是Dom对象

         var divObj = document.getElementById('div1');

         //当直接使用Dom对象的时候，存在浏览器兼容问题

         //为了解决浏览器的兼容问题，所以这时可以把Dom对象转换为jQuery对象，然后再操作

         //divObj.innerHTML = 'hello word';

         var $divObj = $(divObj);

         //把Dom对象转换为jQuery对象后，就可以调用对应的所有jQuery对象的成员了

         //Dom对象只能使用Dom对象的成员，jQuery对象只能使用jQuery对象的成员，这两种对象是互相独立的

         $divObj.text('hello word!');

         //把jQuery对象再转换为Dom对象

         //方式一

         var domDiv = $divObj[0];

         //方式二

         //var domDiv2 = $divObj.get(0);

         domDiv.innerHTML = 'aaaaaa';

         //jQuery对象

         //可以把Dom对象转换为jQuery对象

         //也可以把jQuery对象转换为Dom对象

     </script>

 </body>

 </html>

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" value="button1" id="btn1" />

     <input type="text" value="" id="txt2" />

     <a href="http://www.baidu.com">百度一下</a>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         document.getElementById('btn1').onclick = function () {

             //获取文本框中用户输入的内容

             var $txtObj = $(document.getElementById('txt2'));

             //方法一:val()

             //alert($txtObj.val());  //不传参数，从文本框中取值

             //$txtObj.val('哈哈哈哈');  //传参数，给文本框赋值

             //方法二：设置文本框的CSS样式

             //$txtObj.css('border', '1px solid blue');

             //设置多个样式时，用键值队的形式传入进去

             $txtObj.css({ 'border': '1px solid blue', 'width': '200px', 'height': '40px', 'color': 'red' });

             //设置超链接

             var $aLink = $(document.getElementsByTagName('a')[0]);

             //$aLink.text('白了个度');   //--->innerHTML

             $aLink.html('<img src="1.jpg" style="height:300px;width:200px">');

         };

     </script>

 </body>

 </html>

四、jQuery选择器

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <div id="div1">

     </div>

     <p>哈哈哈</p>

     <input type="button" value="button" />

     <input type="text" />

     <span class="x">我是一个span</span>

     <p>哈哈哈</p>

     <p class="x">嘻嘻嘻</p>

     <input type="button" value="设置p元素中显示的文字" id="btnSetTxt" />

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         //1、id选择器：$('#div1')

         //$(function () {

         //    $('#div1').css({ 'width': '100px', 'height': '100px', 'background-color': 'blue' })

         //});

         //2、标签选择器:$('p')

         //$('p').css('color', 'red');

         //3、类选择器:选取所有应用了x类样式的那些元素

         //$('.x').css('color', 'blue');

         //选取按钮并注册一个单机事件

         $('#btnSetTxt').click(function () {

             //选取页面上所有的p元素

             //链式编程

             $('p').text('我是p元素').css('border', '1px solid blue').css('width', '250px').mouseover(function () {

                 $(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor','')

             }); //隐士迭代

         });

     </script>

 </body>

 </html>

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <p class="test">test1</p>

     <p class="test">test2</p>

     <p class="test">test3</p>

     <p>test4</p>

     <p>test5</p>

     <div class="test">

     </div>

     <span class="test">

         content

     </span>

     <input type="button" id="btn" value="button" />

     <input type="text" />

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function () {

             //$('.test').click(function () {

             //    alert($(this).text());

             //})

             //类选择器

             //所有的应用test类样式的元素

             //$('.test').css('backgroundColor', 'green');

             //标签+类选择器

             //所有的应用了test类样式的p元素(标签+类选择器)

             //$('p.test').css('backgroundColor', 'red');

             //组合选择器

             //$('.test,#btn').css('backgroundColor', 'red');

         });

     </script>

 </body>

 </html>

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <span>我是body下的span</span>

     <div>

         <span>我是div下的span</span>

         <p>00000000000<span>我是div下的p下的span</span></p>

     </div>

     <span>我是body下的span2</span>

     <div id="div1">

         <p>11111111</p>

         <p>22222222</p>

         <p>33333333</p>

     </div>

     <p>44444444</p>

     <p>55555555</p>

     <p>66666666</p>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function () {

             //层次选择器

             //选取页面下的所有的p标签，背景色为红色

             //$('p').css('backgroundColor', 'red');

             //选取所有div1下的所有元素，背景色为蓝色

             //$('#div1 p').css('backgroundColor', 'blue');

             //选取页面上的所有的div下的p标签设置背景色为黄色

             //$('div p').css('backgroundColor', 'yellow');

             //选取页面上的所有的span,背景色黄色

             //$('span').css('backgroundColor', 'yellow');

             //选取body下的所有span

             //$('body span').css('backgroundColor', 'yellow');

             //选取body下的直接子元素span

             //后代选择器

             $('body > span').css('backgroundColor', 'yellow');

         });

     </script>

 </body>

 </html>

五、层次选择器

 1、后代，$('div li')获取div下的所有li元素(后代、子、子的子)

 2、子元素，$('div>li')获取div下的直接li子元素【必须是直接子元素】

 3、相邻元素1：$('.menuitem+div')获取样式名为menuitem之后的相邻的(紧接着的)第一个div元素(不常用)等同于$('.menuitem').next('div')；如果相邻的那个元素不是div，则不会继续向后找。

 4、相邻元素2：$('.menuitem~div')获取样式名为menuitem之后所有的兄弟div元素，等同于$('.menuitem').nextAll('div')【nextAll('*')】或nextAll()表示后面的所有元素。

 5、$('*')；选取所有的元素。

 注：选择器表达式中的空格不能多也不能少。易错！过滤器与表单选择器时注意

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <div>

         div1

     </div>

     <span>content</span>

     <p>春眠不觉晓</p>

     <p>春眠不觉晓</p>

     <div>

         div2

     </div>

     <p>春眠不觉晓</p>

     <div>

         div3

     </div>

     <p>春眠不觉晓</p>

     <span>这是一个span</span>

     <span>这是一个span</span>

     <span>这是一个span</span>

     <div>

         <span>我会变色吗？</span>

     </div>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function () {

             //$('div + p').css('backgroundColor', 'red'); //+表示next()，后一个兄弟

             //$('div ~ p').css('backgroundColor', 'red');  //~表示nextAll()，后面的所有兄弟

             //下面两种写法互等

             //$('div + span').css('backgroundColor', 'red'); //表示选择div后的下一个元素，并且该元素必须是span元素

             //$('div').next('span').css('backgroundColor', 'red');

             //下面两种写法互等

             //$('div ~ span').css('backgroundColor', 'red');

             //$('div').nextAll('span').css('backgroundColor', 'red');

             //互等

             //$('div').next() <---> $('div + *').css('backgroundColor', 'red');

             //互等

             //$('div').nextAll() <---> $('div ~ *').css('backgroundColor', 'red');

             //$('div').prev('span').css('backgroundColor', 'red'); //获取div的上一个元素,并且该兄弟元素必须是span

             //$('div').prevAll('span').css('backgroundColor', 'red'); //获取div前面的所有兄弟

             //获取当前元素的所有的兄弟元素

             $('div').siblings('span');

         });

     </script>

 </body>

 </html>

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <ul>

         <li>公牛</li>

         <li>小牛</li>

         <li>湖人</li>

         <li>开拓者</li>

     </ul>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function () {

             //鼠标悬浮事件

             $('ul li').mousemove(function () {

                 $(this).css('backgroundColor', 'red').siblings('li').css('backgroundColor', 'white');

             }).click(function () {

                 //单机事件

                 //有些方法是会破坏链式变成中返回的对象的，比如：next()、nextAll()、prev()、prevAll()、siblings()、无参数的:text()、val()、html()

                 //当链式编程的链被破坏的时候，以后的可以通过end()方法修复

                 $(this).prevAll().css('backgroundColor', 'yellow').end().nextAll().css('backgroundColor', 'blue');

             });

             //$('ul li').click(function () {

             //});

         });

     </script>

 </body>

 </html>

鼠标悬浮事件

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         td {

             font-size:50px;

             color:yellow;

             cursor:pointer;

             }

     </style>

 </head>

 <body>

     <p id="pscore"></p>

     <table id="t1" border="0" cellpadding="0" cellspacing="0">

         <tr>

             <td>☆</td>

             <td>☆</td>

             <td>☆</td>

             <td>☆</td>

             <td>☆</td>

         </tr>

     </table>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function () {

             $('#t1 td').mouseover(function () {

                 $(this).text('★').prevAll().text('★').end().nextAll().text('☆');

             }).mouseout(function () {

                 //当鼠标移开的时候把所有的td都变成☆，将具有isclicked属性的td以及之前的td都变成★

                 $('#t1 td').text('☆');

                 $('#t1 td[isclicked=isclicked]').text('★').prevAll().text('★');

             }).click(function () {

                 //点击某个td的时候显示多少分

                 $(this).attr('isclicked', 'isclicked').siblings().removeAttr('isclicked'); //等价于setAttribute

                 $('#pscore').text($(this).attr('score'));

             }).attr('score', function (index) {

                 return (index + 1) * 10;

             });

         });

     </script>

 </body>

 </html>

评分五角星

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" value="全选" id="btnChkAll" />

     <input type="button" value="全不选" id="btnNoneChk" />

     <input type="button" value="反选" id="btnChkReverse" />

     <input type="checkbox" id="chkbox1" />

     <input type="checkbox" id="chkbox2" />

     <input type="checkbox" id="chkbox3" />

     <input type="checkbox" id="chkbox4" />

     <input type="checkbox" id="chkbox5" />

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function () {

             //全选

             $('#btnChkAll').click(function () {

                 //$('#btnChkAll[type="checkbox"]').prop('checked', true);

                 $('input[type="checkbox"]').prop('checked', true);

             });

             //全不选

             $('#btnNoneChk').click(function () {

                 $('input[type="checkbox"]').prop('checked', false);

             })

             //反选

             $('#btnChkReverse').click(function () {

                 //方式一:通过自己遍历的方式，设置反选

                 //$.each($('input[type="checkbox"]'), function (indexs, values) {

                 //    $(values).prop('checked', !$(values).prop('checked'));

                 //});

                 //方式二

                 $('input[type="checkbox"]').prop('checked', function (indexs, values) {

                     return !values;

                     //alert(indexs + ',' + values);

                 })

             });

         })

     </script>

 </body>

 </html>

全选反选全不选

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         .night {

             background-color:black;

         }

     </style>

 </head>

 <body>

     <input type="button" value="button" id="btn" />

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#btn').click(function () {

             //模拟开关灯效果

             //方式一

             //---------------------------

             //判断一个元素是否应用了某个样式

             //if ($('body').hasClass('night')) {

             //    //移除该样式，不会移除其他的样式

             //    $('body').removeClass('night');

             //} else {

             //    $('body').addClass('night');  //追加新的样式，不会覆盖样式

             //}

             //-----------------------------

             //方式二

             $('body').toggleClass('night'); //切换类样式的应用于移除

         });

     </script>

 </body>

 </html>

模拟开关灯

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

 :first 选择第一个元素。$('div:first') 选取第一个<div>

 :last 选择最后一个元素。$('div:last') 选取最后一个<div>

 :not (选择器)选取不满足“选择器”条件的元素

 例如:$('input:not(.myClass)') 选取样式名不是myClass的<input>

 :even 选取索引是偶数的元素

 :odd 选取索引是奇数的元素

 :eq(索引序号) 选取索引等于

 :gt(索引序号) 选取索引大于

 :lt(索引序号) 选取索引小于

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" value="button" id="btn" />

     <h1>Alex</h1>

     <h2>Alex</h2>

     <h3>Alex</h3>

     <h4>Alex</h4>

     <h5>Alex</h5>

     <h6>Alex</h6>

     <p class="cls">p1</p>

     <p>p2</p>

     <p>p3</p>

     <p>p4</p>

     <p>p5</p>

     <p  class="cls">p6</p>

     <p>p7</p>

     <p>p8</p>

     <p  class="cls">p9</p>

     <p>p10</p>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function () {

             $('#btn').click(function () {

                 //1、选取索引的p标签，背景色红色

                 //$('p').css('backgroundColor', 'red');

                 //2、选取第一个p标签，背景色红色

                 //$('p:first').css('backgroundColor', 'red');

                 //3、选取最后一个p标签，背景色红色

                 //$('p:last').css('backgroundColor', 'red');

                 //4、选取第二个p标签(索引从0开始)，背景色红色

                 //$('p:eq(1)').css('backgroundColor', 'red');

                 //5、选取偶数

                 //$('p:even').css('backgroundColor', 'red');

                 //6、选取奇数

                 //$('p:odd').css('backgroundColor', 'red');

                 //7、索引大于2的，背景色红色

                 //$('p:gt(2)').css('backgroundColor', 'red');

                 //8、索引小于5的，背景色红色

                 //$('p:lt(5)').css('backgroundColor', 'red');

                 //9、选取页面上所有p标签，除了应用了cls类的那些标签

                 //$('p:not(.cls)').css('backgroundColor', 'red');

                 //10、设置所有标题都变成红色

                 //$('H1').css('backgroundColor', 'red');

                 //$('h1,h2').css('backgroundColor', 'red');

                 //简写

                 //$(':header').css('backgroundColor', 'red');

             });

         })

     </script>

 </body>

 </html>

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" value="button" id="btn" />

     <table border="1" cellpadding="1" cellspacing="1">

         <thead>学生成绩</thead>

         <tr>

             <td>学生</td>

             <td>成绩</td>

         </tr>

         <tr>

             <td>张三</td>

             <td>30</td>

         </tr>

         <tr>

             <td>李四</td>

             <td>40</td>

         </tr>

         <tr>

             <td>王五</td>

             <td>50</td>

         </tr>

         <tr>

             <td>赵六</td>

             <td>60</td>

         </tr>

         <tr>

             <td>秦七</td>

             <td>70</td>

         </tr>

     </table>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function () {

             $('#btn').click(function () {

                 $('tr:first').css('font-size', 70);

                 $('tr:last').css('color', 'red');

                 $('tr:gt(0):lt(2)').css('font-size', 50)

                 $('tr:odd:not(:last)').css('backgroundColor', 'red');

             })

         })

     </script>

 </body>

 </html>

过滤器小练习

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" value="button" id="btn" />

     <ul id="uone">

         <li>AAAAA</li>

         <li>AAAAA</li>

         <li>AAAAA</li>

         <li>AAAAA</li>

         <li>AAAAA</li>

         <li>AAAAA</li>

         <li>AAAAA</li>

         <li>AAAAA</li>

     </ul>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#btn').click(function () {

             $('#uone li:lt(2)').css('color', 'red');

         });

     </script>

 </body>

 </html>

小练习

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" value="button" id="btn" />

     <table border="1" cellpadding="1" cellspacing="1">

         <tr>

             <td>AA</td>

             <td>BB</td>

             <td>CC</td>

             <td>DD</td>

             <td>EE</td>

             <td>FF</td>

         </tr>

         <tr>

             <td>AA</td>

             <td>BB</td>

             <td>CC</td>

             <td>DD</td>

             <td>EE</td>

             <td>FF</td>

         </tr>

         <tr>

             <td>AA</td>

             <td>BB</td>

             <td>CC</td>

             <td>DD</td>

             <td>EE</td>

             <td>FF</td>

         </tr>

         <tr>

             <td>AA</td>

             <td>BB</td>

             <td>CC</td>

             <td>DD</td>

             <td>EE</td>

             <td>FF</td>

         </tr>

     </table>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function () {

             $('table tr').mouseover(function () {

                 $(this).css('backgroundColor', 'red').siblings('tr').css('backgroundColor','yellow');

             });

         });

     </script>

 </body>

 </html>

小练习

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         td {

             width:50px;

             height:30px;

         }

     </style>

 </head>

 <body>

     <input type="button" value="button" id="btn" />

     <table border="1" cellpadding="1" cellspacing="1" id="t1">

         <tr>

             <td>AA</td>

             <td>BB</td>

             <td>CC</td>

             <td>DD</td>

             <td>EE</td>

             <td>FF</td>

         </tr>

         <tr>

             <td>AA</td>

             <td>BB</td>

             <td>CC</td>

             <td>DD</td>

             <td>EE</td>

             <td>FF</td>

         </tr>

         <tr>

             <td>AA</td>

             <td>BB</td>

             <td>CC</td>

             <td>DD</td>

             <td>EE</td>

             <td>FF</td>

         </tr>

         <tr>

             <td>AA</td>

             <td>BB</td>

             <td>CC</td>

             <td>DD</td>

             <td>EE</td>

             <td>FF</td>

         </tr>

     </table>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function () {

             $('#t1 tr').click(function () {

                 //清空其他颜色

                 $('#t1 td').css('backgroundColor', 'white');

                 //$('td','#t1')  <==>$('#t1 td')

                 //$('td', $(this))

                 $('td:even', this).css('backgroundColor', 'red');

                 $('td:odd', $(this)).css('backgroundColor', 'blue');

             });

         });

     </script>

 </body>

 </html>

小练习

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" id="btn1" value="select" />

     <select>

         <option value="value">北京</option>

         <option value="value">上海</option>

         <option value="value">杭州</option>

     </select>

     <div id="div1">

         <input type="checkbox" />

         <input type="checkbox" />

         <input type="checkbox" checked />

         <input type="checkbox" />

         <input type="radio" />

         <input type="radio" />

     </div>

     <form action="/" method="post" id="form1">

         <input type="text" name="name" value="" disabled="disabled" />

         <input type="text" name="name" value="" />

         <input type="text" name="name" value="" />

         <input type="button" name="name" value="button" />

         <input type="button" name="name" value="button" disabled="disabled" />

         <input type="button" name="name" value="button" />

     </form>

     <hr />

     <input type="button" name="name" value="button" />

     <input type="button" name="name" value="button" disabled="disabled" />

     <input type="button" name="name" value="button" />

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         //1、选取页面上所有被禁用的元素

         //方式一

         //$('*[disabled=disabled]').css('backgroundColor', 'red');

         //方式二

         //$(':disabled').css('backgroundColor', 'red');

         //2、选取页面上所有没有被禁用的元素

         //$(':enabled').css('backgroundColor', 'blue');

         //3、选取form下的没有禁用的元素

         //$('#form1 :enabled').css('backgroundColor', 'blue');

         //4、选取form下的被禁用的元素

         //$('#form1 :disabled').css('backgroundColor', 'red');

         //5、选取页面中所有被禁用的input元素

         //$('input:disabled').css('backgroundColor', 'red');

         //6、选取页面中所有没有禁用的input元素

         //$('input:enabled').css('backgroundColor', 'blue');

         //7、选取div1下所有checkbox被选中的元素

         //$('#div1 :checked').css('backgroundColor', 'red');

         //8、选取div1下所有没被选中的元素

         //$('#div1 :not(:checked)').css('backgroundColor', 'red');

         //9、获取选中的select

         $('#btn1').click(function () {

             $(':selected').text(function (index, v) {

                 return '*' + v + '*';

             });

             //设置没有被选中的

             $('select :not(:selected)').text(function (index, v) {

                 return '=' + v + '=';

             });

         });

     </script>

 </body>

 </html>

小练习

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="checkbox" name="name" value="tom" />tom

     <input type="checkbox" name="name" value="jim" />jim

     <input type="checkbox" name="name" value="Alex" />Alex

     <p id="pmsg">

     </p>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function () {

             //为每个checkbox注册单击事件

             $('input[type=checkbox]').click(function () {

                 //1、获取当前所有被选中的checkbox

                 var chks = $('input[type=checkbox]:checked');

                 //2、获取个数

                 var n = chks.length;

                 //3、获取每个checkbox的value

                 var names = [];

                 $.each(chks, function (k, chkObj) {

                     // 第一个索引，第二个对象

                     //方式一

                     names[k] = $(chkObj).val();

                     //方式二

                     //names[names.length] = $(chkObj).val();

                 })

                 //4、把个数和值显示到p中

                 $('#pmsg').text('当前共选中' + n + '个,分别是' + names.toString());

             });

         });

     </script>

 </body>

 </html>

小练习

七、动态创建元素

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         #div1 {

             width:300px;

             height:300px;

             border:1px solid blue;

         }

     </style>

 </head>

 <body>

     <input type="button" value="button" id="btn1" />

     <div id="div1">

     </div>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#btn1').click(function () {

             //1、动态创建一个超链接

             //var aObj = $('<a href="http://www.baidu.com">百度一下</a>')

             //2、将超链接加入到div中

             //方式一

             //$('#div1').append(aObj);

             //方式二

             //加到div后面

             //$('#div1').after(aObj);

             //加到div前面

             //$('#div1').before(aObj);

             //----------------------------

             //方式二动态创建元素

             //div后面

             //$('<a href="http://www.baidu.com">百度一下</a>').insertAfter('#div1')

             //div前面

             //$('<a href="http://www.baidu.com">百度一下</a>').insertBefore('#div1')

         });

     </script>

 </body>

 </html>

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" id="btn1" value="button"/>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         var websites = { '百度': 'http://www.baidu.com', '腾讯': 'http://www.qq.com' };

         $('#btn1').click(function () {

             //1、动态创建表格

             $('<table border="1" style="width:300px;height:300px;"></table>').appendTo('body');

             //2、动态创建表格中的行

             for (var key in websites) {

                 $('<tr><td>' + key + '</td><td><a href="' + websites[key] + '">' + key + '</td></tr>').appendTo('table');

             }

         });

     </script>

 </body>

 </html>

小练习

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <table border="1">

         <tr>

             <td>毛毛</td>

             <td>沙发~~</td>

         </tr>

         <tr>

             <td>蛋蛋</td>

             <td>板凳</td>

         </tr>

     </table>

     昵称：<input type="text" name="name" value="" id="txtNickName" placeholder="请输入昵称！" />

     评论：<textarea cols="25" rows="5" id="txtContent"></textarea>

     <input type="button" name="" value="提交" id="btn1" />

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#btn1').click(function () {

             //1、获取昵称

             var txtNickName = $('#txtNickName').val();

             //2、获取评论

             var txtContent = $('#txtContent').val();

             //3、往table中追加

             $('<tr><td>' + txtNickName + '</td><td>' + txtContent + '</td></tr>').appendTo('table');

         });

     </script>

 </body>

 </html>

无刷新评论

八、删除节点

 empty()：

     · 清空其元素下的所有子元素

     · 内部实现：while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一样

4 remove(selector)
5     · 删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下:

6         · var lis = $('#ulSite li').remove();

7         · $('#ulSite2').append(lis);

8     · 参数expr，是一个选择器，如果没有选择器，表示把选中的元素删掉，如果有选择器则表示在选中的元素中，再过滤出expr匹配的元素删除掉。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         select {

             width:150px;

             height:100px;

         }

     </style>

 </head>

 <body>

     <select id="s1" multiple="multiple">

         <option>增加</option>

         <option>删除</option>

         <option>修改</option>

         <option>保存</option>

     </select>

     <input type="button" value=">>" />

     <input type="button" value=">" />

     <input type="button" value="<" />

     <input type="button" value="<<" />

     <select id="s2" multiple="multiple">

     </select>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(':button[value=">>"]').click(function () {

             var sel1 = $('#s1 option').remove();

             $('#s2').append(sel1);

         });

         $(':button[value=">"]').click(function () {

             var sel1 = $('#s1 option:selected').remove();

             $('#s2').append(sel1);

         });

         $(':button[value="<"]').click(function () {

              var sel2 = $('#s2 option:selected').remove();

             $('#s1').append(sel2);

         });

         $(':button[value="<<"]').click(function () {

             var sel2 = $('#s2 option').remove();

             $('#s1').append(sel2);

         });

     </script>

 </body>

 </html>

小练习

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="text" id="txt1" />+<input type="text" id="txt2" />=<input type="text" id="txt3" />

     <br />

     <input type="button" value="计算" id="btn1" />

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#btn1').click(function () {

             //1、获取文本框1的值

             var txt1 = $('#txt1').val();

             //2、获取文本框2的值

             var txt2 = $('#txt2').val();

             //3、计算并给文本框3赋值

             var sum = parseInt(txt1) + parseInt(txt2)

             $('#txt3').val(sum);

         });

     </script>

 </body>

 </html>

小练习

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" value="请仔细阅读协议(5)" id="btn1" disabled="disabled" />

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         var sec = 4;

         $(function () {

             var intervalId = setInterval(function () {

                 if (sec > 0) {

                     $('#btn1').val('请仔细阅读协议(' + sec + ')')

                     sec--;

                 } else {

                     //停止计时器

                     clearInterval(intervalId);

                     //方式一

                     //$('#btn1').val('同意!').removeAttr('disabled');

                     //方式二

                     $('#btn1').val('同意!').prop('disabled', false);  //注意，不能是字符串的false

                 }

             }, 1000);

         })

     </script>

 </body>

 </html>

小练习

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="text" />

     <input type="text" />

     <input type="text" />

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(':text').blur(function () {

             //1、校验

             if ($(this).val().length == 0) {

                 //2、背景色变红

                 $(this).css('backgroundColor', 'red');

             } else {

                 $(this).css('backgroundColor', '');

             }

         })

     </script>

 </body>

 </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() 在内部围绕

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" value="替换" id="btn" />

     <p>ppppppppp</p>

     <hr />

     <p>ppppppppp</p>

     <hr />

     <p>ppppppppp</p>

     <hr />

     <p>ppppppppp</p>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#btn').click(function () {

             //先使用选择器选择对应的元素，然后使用指定的元素对象来替换选择到的元素

             //$('hr').replaceWith('<a href="http://www.baidu.com">百度一下</a>')

             //首先动态创建一个元素，然后进行替换

             $('<font color="red">====</font>').replaceAll('hr')

         })

     </script>

 </body>

 </html>

节点替换

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" value="包裹节点" id="btn" />

     <p>pppppppp</p>

     <input type="text" />

     <p>pppppppp</p>

     <p>pppppppp</p>

     <p>pppppppp</p>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#btn').click(function () {

             //包裹外边

             //$('p').wrap('<font color="red"></font>');

             //包裹里面

             //$('p').wrapInner('<font color="red"></font>')

             //包裹所有的:所有的p标签使用一个标签来包裹

             $('p').wrapAll('<font color="red"></font>');

         });

     </script>

 </body>

 </html>

节点包裹

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <input type="button" value="button" id="btn" />

     <p>

         性别:

         <input type="radio" name="gender" value="male" />男

         <input type="radio" name="gender" value="female" />女

         <input type="radio" name="gender" value="secret" />保密

     </p>

     <p>

         婚否:

         <input type="radio" name="hf" value="yihun" />已婚

         <input type="radio" name="hf" value="weihun" />未婚

         <input type="radio" name="hf" value="liyi" />离异

     </p>

     <p>

         <input type="checkbox" name="hobby" value="dlq" />打篮球

         <input type="checkbox" name="hobby" value="tzq" />踢足球

         <input type="checkbox" name="hobby" value="ppq" />乒乓球

     </p>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#btn').click(function () {

             //要求如下：

             // 保密、已婚、打篮球、踢足球被选中

             //方式一

             //$(':radio[value="secret"]').prop("checked", 'true');

             //$(':radio[value="yihun"]').prop("checked", 'true');

             //$(':checkbox[value="dlq"]').prop('checked', 'true');

             //$(':checkbox[value="tzq"]').prop('checked', 'true');

             //方式二

             $(':radio').val(['secret', 'yihun']);

             $(':checkbox').val(['dlq', 'tzq']);

         });

     </script>

 </body>

 </html>

单选框和复选框操作

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         #div1 {

             width:100px;

             height:100px;

             background-color:red;

         }

     </style>

 </head>

 <body>

     <div id="div1">

     </div>

     <input type="text" id="txt1" />

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         //注册一个鼠标移动事件

         $('#div1').mousemove(function (evt) {

             //在jQuery中使用事件对象，直接在事件处理函数中加一个evt参数即可

             //并且该事件对象是经过jQuery封装后的事件对象

             var x, y;

             var e = evt || window.event;

             x = e.pageX;

             y = e.pageY;

             document.title = x + ',' + y;

         }).mousedown(function (evt) {

             //获取鼠标按下的键，1：左键；2：滚轮；3：右键

             alert(evt.which);

         });

         $('#txt1').keydown(function (evt) {

             //相当于window.keyCode键盘码

             alert(evt.which);

         });

     </script>

 </body>

 </html>

获取事件对象

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <p id="p1">ppppppp<span id="s1">sssss</span>ppp

     </p>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#p1').click(function () {

             alert('p1');

         });

         $('#s1').click(function (evt) {

             alert('s1');

             //阻止事件冒泡

             //DOM取消事件冒泡：window.event.cancelBubble=true;

             evt.stopPropagation();

         });

     </script>

 </body>

 </html>

取消事件冒泡

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         #div1 {

             width:300px;

             height:300px;

             background-color:blue;

         }

     </style>

 </head>

 <body>

     <input type="button" value="show" id="btnShow" />

     <input type="button" value="hide" id="btnHide" />

     <input type="button" value="show/hide" id="btn" />

     <div id="div1">

     </div>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#btnShow').click(function () {

             //$('#div1').stop().show(3000);

             //$('#div1').stop().slideDown(3000);

             //$('#div1').stop().fadeIn(3000);

             //$('#div1').stop().fadeTo(3000, 0.3);

         });

         $('#btnHide').click(function () {

             //$('#div1').stop().hide(3000);

             //$('#div1').stop().slideUp(3000);

             //$('#div1').stop().fadeOut(3000);

         });

         $('#btn').click(function () {

             //$('#div1').stop().toggle(2000);

             //$('#div1').stop().fadeToggle(2000);

             $('#div1').stop().slideToggle(2000);

         });

     </script>

 </body>

 </html>

动画

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         #img1 {

             display:none;

             position:absolute;

         }

     </style>

 </head>

 <body>

     <input type="button" value="显示消息" id="btn" />

     <img src="2.jpg" alt="Alternate Text" id="img1" />

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#btn').click(function () {

             //$('#img1').css({ 'right': 0, 'bottom': 0 }).show(2000);

             //$('#img1').css({ 'right': 0, 'bottom': 0 }).slideDown(2000);

             $('#img1').css({ 'right': 0, 'bottom': 0 }).fadeIn(2000);

         });

     </script>

 </body>

 </html>

右下角弹窗

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         #qqTab {

             height:500px;

             width:300px;

             border:1px solid blue;

         }

         #qqTab ul {

                 padding:0;

                 margin:0;

                 list-style-type:none;

         }

         p {

             margin:0;

             text-align:center;

             background-color:aqua;

             margin-bottom:2px;

         }

         #uGroup ul li {

             background-color:chartreuse;

             margin-top:2px;

             margin-bottom:2px;

         }

         li, p {

             cursor:pointer;

         }

         #uGroup li ul {

             display:none;

         }

     </style>

 </head>

 <body>

     <!--bgsound:仅仅支持IE-->

     <bgsound id="snd" loop="0" src="天空之城.mp3"></bgsound>

     <div id="qqTab">

         <ul id="uGroup">

             <li>

                 <p>

                     小学同学

                 </p>

                 <ul>

                     <li>小猫</li>

                     <li>小猫2</li>

                 </ul>

             </li>

             <li>

                 <p>

                     初中同学

                 </p>

                 <ul>

                     <li>小狗</li>

                     <li>小狗2</li>

                 </ul>

             </li>

             <li>

                 <p>

                     高中同学

                 </p>

                 <ul>

                     <li>小猪</li>

                     <li>小猪2</li>

                 </ul>

             </li>

         </ul>

     </div>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $('#uGroup li p').click(function () {

             //$(this).next('ul').toggle(1500);

             $(this).next('ul').slideToggle(1500);

         });

     </script>

 </body>

 </html>

QQ面板

十、animate动画(自定义)

 - 滑动效果

     slideDown()、slideUp()、slideToggle()

 - 淡入淡出(透明)

     fadeIn()、fadeOut()、fadeToggle()、fadeTo()

 - 自定义动画

     animate({样式},speed)

         部分样式不支持:backgroundColor、color、borderStyle......

     使用animate设置对象位置的时候要确保position的值为absolute或relative

     停止动画正在执行动画的元素:stop()(*),带参数的stop(true,false);

     动画队列:animate().animate().animate()....;

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         #div1 {

             width:20px;

             height:20px;

             border:1px solid blue;

             background-color:orange;

             position:absolute;

             left:100px;

             top:100px;

         }

     </style>

 </head>

 <body>

     <input type="button" value="button" id="btnStart" />

     <input type="button" value="stop" id="btnStop" />

     <div id="div1">

     </div>

     <script src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         //开始

         $('#btnStart').click(function () {

             $('#div1').animate({ width: '100px', height: '100px', left: '200px', top: '150px' }, 1000)

                 .animate({ width: '10px', height: '10px', left: '100px', top: '100px' }, 1000)

                 .animate({ width: '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000)

                 .animate({ width: '10px', height: '10px', left: '100px', top: '100px' }, 1000)

                 .animate({ width: '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000)

                 .animate({ width: '10px', height: '10px', left: '100px', top: '100px' }, 1000)

                 .animate({ width: '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000);

         });

         //停止

         $('#btnStop').click(function () {

             //仅仅停止当前运行的动画，后面的动画不会停止，继续执行

             //$(':animated').stop();

             //停止当前动画，并且清除后面的动画队列（动画停止）

             //$(':animated').stop(true);

             //停止当前动画，并且将当前元素设置到当前动画执行完毕的位置

             $(':animated').stop(true, true);

         });

     </script>

 </body>

 </html>

十一、 jQuery插件一(cookie)

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

注：必须先引入jQuery，再引用cookie。

     什么是cookie：Cookie就是保存在浏览器上的内容，用户在本次浏览页面的时候向Cookie中保存文本内容，下次再访问页面的时候就可以取出来上次保存的内容，这样就可以得到上次“记忆”的内容。Cookie不是jQuery持有的概念，只不过jQueryCookie把他简化的更好用罢了。Cookie就是存储在浏览器里的一些数据

     Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的，如果禁用了Cookie就不可以使用了，

     Cookie的几个特征：

         1、Cookie与域名相关

         2、一个域名能写入的Cookie总尺寸是有限制的

 使用方法

     1、设置值，$.cookie('键','值')。cookie中保存的值都是文本

     2、读取值，var v = $.cookie('键')

     3、设置有效期；$.cookie('键','值',{expires:7,path:'/',domain:'www.baidu.com',secure:true});

         expires:表示浏览器保存cookie几天

         options参数用那个设置那个。path：网页有效路径;domain：域名;secure:传输cookie时候，是否需要一个安全协议

Cookie的使用

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style type="text/css">

         #pmsg {

             border:1px solid blue;

         }

     </style>

 </head>

 <body>

     <input type="text" id="userName" />

     <input type="button" value="提交" id="btnSubmit" />

     <p id="pmsg">

         欢迎，游客！~

     </p>

     <script src="jquery-3.3.1.js"></script>

     <script src="jquery.cookie.js"></script>

     <script type="text/javascript">

         $(function () {

             //------------先获取Cookie，若Cookie有值，则放到P标签中，否则，显示游客-----------------------

             if ($.cookie('userName')) {

                 $('#pmsg').text('欢迎:' + $.cookie('userName'));

             } else {

                 $('#pmsg').text('欢迎,游客~');

             }

             $('#btnSubmit').click(function () {

                 //1、获取文本框的值

                 var user_name = $('#userName').val();

                 //2、写到Cookie中

                 //当写入Cookie的时候，若不设置有效期，则为进程内“Cookie”

                 //3、设置Cookie有效期;{ expires: 7, path: '/', domain: 'jquery.com', secure: true }

                 $.cookie('userName', user_name, { expires: 7, path: '/', secure: false });

                 alert('写入成功!');

             });

         });

     </script>

 </body>

 </html>

记录用户登录状态

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

 </head>

 <body>

     <p id="p1"></p>

     <script src="jquery-3.3.1.js"></script>

     <script src="jquery.cookie.js"></script>

     <script type="text/javascript">

         //1、读取cookie，如果有显示到p中

         //2、无论这次是否读取到了cookie，那么这次都要将新的时间写入cookie

         var now_time = $.cookie('nowtime');

         var date = new Date();

         if (now_time) {

             $('#p1').text('最后一次刷新时间:' + now_time)

             $.cookie('nowtime', date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(), { expires: 7, path: '/', secure: false })

         } else {

             $.cookie('nowtime', date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(), { expires: 7, path: '/', secure: false })

         }

     </script>

 </body>

 </html>

用户最后刷新时间

十二、jQuery插件二(jqzoom)

下载地址

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <script src="jquery.js"></script>   <!--第一步：引入jquery（注：jqzoom与jquery版本要对应）-->

     <script src="jquery.jqzoom.js"></script>    <!--第二步：引入jqzoom-->

     <link href="jqzoom.css" rel="stylesheet" type="text/css" />      <!--第三步：引入jqzoom样式-->

 </head>

 <body>

     <div class="jqzoom"><img src="timg2.jpg" alt="shoe" jqimg="timg1.jpg"></div> <!--第四步(timg2小图片；timg1大图片)-->

     <script type="text/javascript">

         $(function () {

             $('.jqzoom').jqueryzoom({

                 xzoom: 400, //放大图片的X轴(默认为：200)

                 yzoom: 400, //方法图片的Y轴(默认为：200)

                 offset: 40, //偏移量(默认为：10)

                 position: "right" //默认为right

             });

         });

     </script>

 </body>

 </html>

图片放大

十三、 jQuery插件二(jquery ui)

下载地址

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

     <script src="//code.jquery.com/jquery-1.9.1.js"></script>

     <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

     <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

     <script>

         $(function () {

             $("#datepicker").datepicker({

                 showOtherMonths: true,

                 selectOtherMonths: true

             });

         });

     </script>

 </head>

 <body>

     <p>日期：<input type="text" id="datepicker"></p>

 </body>

 </html>

日期样式

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

十四、编写一个插件

 1、为对象编写插件

         $.fn.extend{fnName:function(){}};

 2、编写全局函数插件

 3、插件命名：jquery.xxx.js

 ; (function ($) {

     $.fn.extend({

         setTableStyle: function () {

             // 在当前函数中，this表示的就是调用当前函数的对象，即表格对象

             $('tr', this).mouseover(function () {

                 $(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor', 'blue');

             });

         },

         clearTableStyle: function () {

             $('tr', this).unbind(); //移除所有事件

         }

     })

 })(jQuery);

jquery.tablestyle.js

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title>我的第一个jquery插件</title>

 </head>

 <body>

     <table id="t1" border="1" cellpadding="2" cellspacing="2">

         <tr>

             <td>11</td>

             <td>11</td>

             <td>11</td>

         </tr>

         <tr>

             <td>22</td>

             <td>22</td>

             <td>22</td>

         </tr>

         <tr>

             <td>33</td>

             <td>33</td>

             <td>33</td>

         </tr>

         <tr>

             <td>44</td>

             <td>44</td>

             <td>44</td>

         </tr>

         <tr>

             <td>55</td>

             <td>55</td>

             <td>55</td>

         </tr>

     </table>

     <script src="jquery-3.3.1.js"></script>

     <script src="jquery.tablestyle.js"></script>

     <script type="text/javascript">

         $('#t1').setTableStyle();

     </script>

 </body>

 </html>

index.html

十五、完整练习项目地址

链接：https://pan.baidu.com/s/1UWO_IpnJItHjIy43-LtKzA
提取码：26ir

巴特西

Jquery补充及插件

一、jQuery中提供的两个函数

二、jQuery中的trim()

三、Dom对象和jQuery对象

四、jQuery选择器

五、层次选择器

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

七、动态创建元素

八、删除节点

九、节点的操作

十、animate动画(自定义)

十一、 jQuery插件一(cookie)

十二、jQuery插件二(jqzoom)

十三、 jQuery插件二(jquery ui)

十四、编写一个插件

十五、完整练习项目地址

最新文章

热门文章

巴特西

Jquery补充及插件

一、jQuery中提供的两个函数

二、jQuery中的trim()

三、Dom对象和jQuery对象

四、jQuery选择器

五、层次选择器

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

七、动态创建元素

八、 删除节点

九、节点的操作

十、animate动画(自定义)

十一、 jQuery插件一(cookie)

十二、jQuery插件二(jqzoom)

十三、 jQuery插件二(jquery ui)

十四、编写一个插件

十五、完整练习项目地址

最新文章

热门文章

八、删除节点