此篇为jQuery补充的一些知识点，详细资料请看另一篇博客，地址：https://www.cnblogs.com/chenyanbin/p/10454503.html
一、jQuery中提供的两个函数
11 $.map(array,callback(element,index)); 22 1.对于数组array中的每个元素，调用callback()函数，最终返回一个新的数组。原数组不变 33 44 $.each(array,fn);遍历数组，return false来退出循环。 55 1.主要用来遍历数组，不修改数组，对于普通数组或者“键值对”数组都没有问题 66 2.在each函数中可以直接使用this，表示当前元素的值 7 8<script src="jquery-3.3.1.js"></script> 9 <script type="text/javascript"> 10 var arrInt = [1, 2, 3, 4, 5, 6, 7, 8]; 11 $.each(arrInt, function (key, value) { 12 if (key == 3) { 13 //break; //在$.each中跳出循环不能使用break，需要使用return false; 14 return false; 15 //jQuery底层源码，因为调用callback.call()判断是否为false，直接break了 16 //if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { 17 // break; 18 //} 19 } 20 //当使用each遍历，普通的数组的时候，索引就是键，值就是值 21 alert('key:' + key + '....' + 'value:' + value); 22 }) 23 24 //遍历键值队集合 25 //var personInfo = { 'name': '张三', 'age': 19, 'gender': '男' }; 26 //$.each(personInfo, function (k, v) { 27 // alert('key:' + k + '...v:' + this); 28 //}); 29 </script>
1 1 页面加载执行JavaScript与jQuery写法区别 2 2 JS: 3 3 window.onload(function(){ 4 4 5 5 }); 6 6 JQuery: 7 7 方式一： 8 8 $(document).ready(function(){ 9 9 1010 }); 1111 方式二: 1212 $(function(){}); 等价于$(document).ready(function(){}); 1313 1414 两者区别: 1515 1.window.onload需要等待页面全部加载完毕才会触发，即所有的Dom元素创建完毕、图片、CSS等加载完毕后才被触发。 1616 2.$(document).ready()只要Dom元素加载完毕即触发，这样可以提升相应速度 1717 3.$(document).ready();可以多次注册事件处理程序，并且最终都会执行，而window.onload每次注册新的事件处理程序时都会将前面的覆盖掉 1818 1919 以下jQuery三种写法相同 2020 jQuery(document).ready(function(){ 2121 2222 }); 2323 2424 $(document).ready(function(){ 2525 2626 }); 2727 2828 $(function(){ 2929 3030 3131 });
补充
1 1 <script src="jquery-3.3.1.js"></script> 2 2 <script type="text/javascript"> 3 3 //var arrInt = [10, 20, 30, 40, 50, 60, 70, 80, 90]; 4 4 //遍历数组中的每个元素，返回一个新的数组 5 5 //var arrIntNew = $.map(arrInt, function (element_value, arrIndex) { 6 6 // //alert(arguments.length); //查看底层传入几个参数 7 7 // //alert(element_value+'...'+arrIndex); 8 8 // return element_value * 2; 9 9 //}) 1010 //alert(arrIntNew); 1111 1212 //练习遍历数组，将索引大于3的元素翻倍。并返回一个新的数组 1313 var arrInt = [10, 20, 30, 40, 50, 60, 70, 80, 90]; 1414 var arrIntNew = $.map(arrInt, function (element_value, arrIndex) { 1515 return arrIndex > 3 ? element_value * 2 : element_value; 1616 }) 1717 alert(arrIntNew); 1818 1919 //以下jQuery底层代码 2020 // map: function( elems, callback, arg ) { 2121 // var length, value, 2222 // i = 0, 2323 // ret = []; 2424 2525 // // Go through the array, translating each of the items to their new values 2626 // if ( isArrayLike( elems ) ) { 2727 // length = elems.length; 2828 // for ( ; i < length; i++ ) { 2929 // value = callback( elems[ i ], i, arg ); 3030 3131 // if ( value != null ) { 3232 // ret.push( value ); 注:JavaScript的push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 3333 // } 3434 // } 3535 3636 // // Go through every key on the object, 3737 // } else { 3838 // for ( i in elems ) { 3939 // value = callback( elems[ i ], i, arg ); 4040 4141 // if ( value != null ) { 4242 // ret.push( value ); 4343 // } 4444 // } 4545 // } 4646 4747 // // Flatten any nested arrays 4848 // return concat.apply( [], ret ); 4949 //} 5050 </script>
二、jQuery中的trim()
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <script src="jquery-3.3.1.js"></script> 9 9 <script type="text/javascript"> 1010 //去除两边空格 1111 var msg = ' alex '; 1212 alert('===' + $.trim(msg) + '==='); 1313 //jQuery底层源码 1414 // trim: function( text ) { 1515 // return text == null ? 1616 // "" : 1717 // ( text + "" ).replace( rtrim, "" ); 注:rtrim为正则表达式:/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g 1818 //} 1919 2020 //等同上面写法,两边加“=”为了明显区分是否有空格 2121 alert('===' + msg.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,'') + '===') 2222 </script> 2323 </body> 2424 </html>
三、Dom对象和jQuery对象
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <style type="text/css"> 7 7 #div1 { 8 8 width:200px; 9 9 height:200px; 1010 background-color:blue; 1111 } 1212 </style> 1313 </head> 1414 <body> 1515 <input type="button" value="button" id="btn" /> 1616 <div id="div1"> 1717 1818 </div> 1919 <script src="jquery-3.3.1.js"></script> 2020 <script type="text/javascript"> 2121 //1.获取层对象 2222 //页面上的元素对象才叫Dom对象，数组、日期，这些不是Dom对象 2323 var divObj = document.getElementById('div1'); 2424 //当直接使用Dom对象的时候，存在浏览器兼容问题 2525 //为了解决浏览器的兼容问题，所以这时可以把Dom对象转换为jQuery对象，然后再操作 2626 //divObj.innerHTML = 'hello word'; 2727 var $divObj = $(divObj); 2828 //把Dom对象转换为jQuery对象后，就可以调用对应的所有jQuery对象的成员了 2929 //Dom对象只能使用Dom对象的成员，jQuery对象只能使用jQuery对象的成员，这两种对象是互相独立的 3030 $divObj.text('hello word!'); 3131 3232 //把jQuery对象再转换为Dom对象 3333 //方式一 3434 var domDiv = $divObj[0]; 3535 //方式二 3636 //var domDiv2 = $divObj.get(0); 3737 domDiv.innerHTML = 'aaaaaa'; 3838 3939 //jQuery对象 4040 //可以把Dom对象转换为jQuery对象 4141 //也可以把jQuery对象转换为Dom对象 4242 </script> 4343 4444 </body> 4545 </html> 46 47 1 <!DOCTYPE html> 48 2 <html> 49 3 <head> 50 4 <meta charset="utf-8" /> 51 5 <title></title> 52 6 </head> 53 7 <body> 54 8 <input type="button" value="button1" id="btn1" /> 55 9 <input type="text" value="" id="txt2" /> 5610 <a href="http://www.baidu.com">百度一下</a> 5711 <script src="jquery-3.3.1.js"></script> 5812 <script type="text/javascript"> 5913 document.getElementById('btn1').onclick = function () { 6014 //获取文本框中用户输入的内容 6115 var $txtObj = $(document.getElementById('txt2')); 6216 //方法一:val() 6317 //alert($txtObj.val()); //不传参数，从文本框中取值 6418 //$txtObj.val('哈哈哈哈'); //传参数，给文本框赋值 6519 6620 //方法二：设置文本框的CSS样式 6721 //$txtObj.css('border', '1px solid blue'); 6822 //设置多个样式时，用键值队的形式传入进去 6923 $txtObj.css({ 'border': '1px solid blue', 'width': '200px', 'height': '40px', 'color': 'red' }); 7024 7125 //设置超链接 7226 var $aLink = $(document.getElementsByTagName('a')[0]); 7327 //$aLink.text('白了个度'); //--->innerHTML 7428 $aLink.html('<img src="1.jpg" style="height:300px;width:200px">'); 7529 }; 7630 </script> 7731 </body> 7832 </html>
四、jQuery选择器
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <div id="div1"> 9 9 1010 </div> 1111 <p>哈哈哈</p> 1212 <input type="button" value="button" /> 1313 <input type="text" /> 1414 <span class="x">我是一个span</span> 1515 <p>哈哈哈</p> 1616 <p class="x">嘻嘻嘻</p> 1717 <input type="button" value="设置p元素中显示的文字" id="btnSetTxt" /> 1818 <script src="jquery-3.3.1.js"></script> 1919 <script type="text/javascript"> 2020 //1、id选择器：$('#div1') 2121 //$(function () { 2222 // $('#div1').css({ 'width': '100px', 'height': '100px', 'background-color': 'blue' }) 2323 //}); 2424 2525 //2、标签选择器:$('p') 2626 //$('p').css('color', 'red'); 2727 2828 //3、类选择器:选取所有应用了x类样式的那些元素 2929 //$('.x').css('color', 'blue'); 3030 3131 //选取按钮并注册一个单机事件 3232 $('#btnSetTxt').click(function () { 3333 //选取页面上所有的p元素 3434 //链式编程 3535 $('p').text('我是p元素').css('border', '1px solid blue').css('width', '250px').mouseover(function () { 3636 $(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor','') 3737 }); //隐士迭代 3838 }); 3939 </script> 4040 </body> 4141 </html> 42 43 1 <!DOCTYPE html> 44 2 <html> 45 3 <head> 46 4 <meta charset="utf-8" /> 47 5 <title></title> 48 6 </head> 49 7 <body> 50 8 <p class="test">test1</p> 51 9 <p class="test">test2</p> 5210 <p class="test">test3</p> 5311 <p>test4</p> 5412 <p>test5</p> 5513 <div class="test"> 5614 5715 </div> 5816 <span class="test"> 5917 content 6018 </span> 6119 <input type="button" id="btn" value="button" /> 6220 <input type="text" /> 6321 <script src="jquery-3.3.1.js"></script> 6422 <script type="text/javascript"> 6523 $(function () { 6624 //$('.test').click(function () { 6725 // alert($(this).text()); 6826 //}) 6927 7028 //类选择器 7129 //所有的应用test类样式的元素 7230 //$('.test').css('backgroundColor', 'green'); 7331 7432 //标签+类选择器 7533 //所有的应用了test类样式的p元素(标签+类选择器) 7634 //$('p.test').css('backgroundColor', 'red'); 7735 7836 //组合选择器 7937 //$('.test,#btn').css('backgroundColor', 'red'); 8038 }); 8139 </script> 8240 </body> 8341 </html> 84 85 1 <!DOCTYPE html> 86 2 <html> 87 3 <head> 88 4 <meta charset="utf-8" /> 89 5 <title></title> 90 6 </head> 91 7 <body> 92 8 <span>我是body下的span</span> 93 9 <div> 9410 <span>我是div下的span</span> 9511 <p>00000000000<span>我是div下的p下的span</span></p> 9612 </div> 9713 <span>我是body下的span2</span> 9814 <div id="div1"> 9915 <p>11111111</p> 10016 <p>22222222</p> 10117 <p>33333333</p> 10218 </div> 10319 <p>44444444</p> 10420 <p>55555555</p> 10521 <p>66666666</p> 10622 <script src="jquery-3.3.1.js"></script> 10723 <script type="text/javascript"> 10824 $(function () { 10925 //层次选择器 11026 11127 //选取页面下的所有的p标签，背景色为红色 11228 //$('p').css('backgroundColor', 'red'); 11329 11430 //选取所有div1下的所有元素，背景色为蓝色 11531 //$('#div1 p').css('backgroundColor', 'blue'); 11632 11733 //选取页面上的所有的div下的p标签设置背景色为黄色 11834 //$('div p').css('backgroundColor', 'yellow'); 11935 12036 //选取页面上的所有的span,背景色黄色 12137 //$('span').css('backgroundColor', 'yellow'); 12238 12339 //选取body下的所有span 12440 //$('body span').css('backgroundColor', 'yellow'); 12541 12642 //选取body下的直接子元素span 12743 //后代选择器 12844 $('body > span').css('backgroundColor', 'yellow'); 12945 }); 13046 </script> 13147 </body> 13248 </html>
五、层次选择器
1 1 1、后代，$('div li')获取div下的所有li元素(后代、子、子的子) 2 2 3 3 2、子元素，$('div>li')获取div下的直接li子元素【必须是直接子元素】 4 4 5 5 3、相邻元素1：$('.menuitem+div')获取样式名为menuitem之后的相邻的(紧接着的)第一个div元素(不常用)等同于$('.menuitem').next('div')；如果相邻的那个元素不是div，则不会继续向后找。 6 6 7 7 4、相邻元素2：$('.menuitem~div')获取样式名为menuitem之后所有的兄弟div元素，等同于$('.menuitem').nextAll('div')【nextAll('*')】或nextAll()表示后面的所有元素。 8 8 9 9 5、$('*')；选取所有的元素。 1010 1111 注：选择器表达式中的空格不能多也不能少。易错！过滤器与表单选择器时注意 12 13 1 <!DOCTYPE html> 14 2 <html> 15 3 <head> 16 4 <meta charset="utf-8" /> 17 5 <title></title> 18 6 </head> 19 7 <body> 20 8 <div> 21 9 div1 2210 </div> 2311 <span>content</span> 2412 <p>春眠不觉晓</p> 2513 <p>春眠不觉晓</p> 2614 <div> 2715 div2 2816 </div> 2917 <p>春眠不觉晓</p> 3018 <div> 3119 div3 3220 </div> 3321 <p>春眠不觉晓</p> 3422 <span>这是一个span</span> 3523 <span>这是一个span</span> 3624 <span>这是一个span</span> 3725 <div> 3826 <span>我会变色吗？</span> 3927 </div> 4028 <script src="jquery-3.3.1.js"></script> 4129 <script type="text/javascript"> 4230 $(function () { 4331 //$('div + p').css('backgroundColor', 'red'); //+表示next()，后一个兄弟 4432 //$('div ~ p').css('backgroundColor', 'red'); //~表示nextAll()，后面的所有兄弟 4533 4634 //下面两种写法互等 4735 //$('div + span').css('backgroundColor', 'red'); //表示选择div后的下一个元素，并且该元素必须是span元素 4836 //$('div').next('span').css('backgroundColor', 'red'); 4937 5038 //下面两种写法互等 5139 //$('div ~ span').css('backgroundColor', 'red'); 5240 //$('div').nextAll('span').css('backgroundColor', 'red'); 5341 5442 //互等 5543 //$('div').next() <---> $('div + *').css('backgroundColor', 'red'); 5644 5745 //互等 5846 //$('div').nextAll() <---> $('div ~ *').css('backgroundColor', 'red'); 5947 6048 //$('div').prev('span').css('backgroundColor', 'red'); //获取div的上一个元素,并且该兄弟元素必须是span 6149 //$('div').prevAll('span').css('backgroundColor', 'red'); //获取div前面的所有兄弟 6250 6351 //获取当前元素的所有的兄弟元素 6452 $('div').siblings('span'); 6553 }); 6654 </script> 6755 </body> 6856 </html>
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <ul> 9 9 <li>公牛</li> 1010 <li>小牛</li> 1111 <li>湖人</li> 1212 <li>开拓者</li> 1313 </ul> 1414 <script src="jquery-3.3.1.js"></script> 1515 <script type="text/javascript"> 1616 $(function () { 1717 //鼠标悬浮事件 1818 $('ul li').mousemove(function () { 1919 $(this).css('backgroundColor', 'red').siblings('li').css('backgroundColor', 'white'); 2020 }).click(function () { 2121 //单机事件 2222 //有些方法是会破坏链式变成中返回的对象的，比如：next()、nextAll()、prev()、prevAll()、siblings()、无参数的:text()、val()、html() 2323 //当链式编程的链被破坏的时候，以后的可以通过end()方法修复 2424 $(this).prevAll().css('backgroundColor', 'yellow').end().nextAll().css('backgroundColor', 'blue'); 2525 }); 2626 //$('ul li').click(function () { 2727 2828 //}); 2929 }); 3030 </script> 3131 </body> 3232 </html>
鼠标悬浮事件
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <style type="text/css"> 7 7 td { 8 8 font-size:50px; 9 9 color:yellow; 1010 cursor:pointer; 1111 } 1212 </style> 1313 </head> 1414 <body> 1515 <p id="pscore"></p> 1616 <table id="t1" border="0" cellpadding="0" cellspacing="0"> 1717 <tr> 1818 <td>☆</td> 1919 <td>☆</td> 2020 <td>☆</td> 2121 <td>☆</td> 2222 <td>☆</td> 2323 </tr> 2424 </table> 2525 <script src="jquery-3.3.1.js"></script> 2626 <script type="text/javascript"> 2727 $(function () { 2828 $('#t1 td').mouseover(function () { 2929 $(this).text('★').prevAll().text('★').end().nextAll().text('☆'); 3030 }).mouseout(function () { 3131 //当鼠标移开的时候把所有的td都变成☆，将具有isclicked属性的td以及之前的td都变成★ 3232 $('#t1 td').text('☆'); 3333 $('#t1 td[isclicked=isclicked]').text('★').prevAll().text('★'); 3434 }).click(function () { 3535 //点击某个td的时候显示多少分 3636 $(this).attr('isclicked', 'isclicked').siblings().removeAttr('isclicked'); //等价于setAttribute 3737 $('#pscore').text($(this).attr('score')); 3838 }).attr('score', function (index) { 3939 return (index + 1) * 10; 4040 }); 4141 }); 4242 </script> 4343 </body> 4444 </html>
评分五角星
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="button" value="全选" id="btnChkAll" /> 9 9 <input type="button" value="全不选" id="btnNoneChk" /> 1010 <input type="button" value="反选" id="btnChkReverse" /> 1111 <input type="checkbox" id="chkbox1" /> 1212 <input type="checkbox" id="chkbox2" /> 1313 <input type="checkbox" id="chkbox3" /> 1414 <input type="checkbox" id="chkbox4" /> 1515 <input type="checkbox" id="chkbox5" /> 1616 <script src="jquery-3.3.1.js"></script> 1717 <script type="text/javascript"> 1818 $(function () { 1919 //全选 2020 $('#btnChkAll').click(function () { 2121 //$('#btnChkAll[type="checkbox"]').prop('checked', true); 2222 $('input[type="checkbox"]').prop('checked', true); 2323 }); 2424 //全不选 2525 $('#btnNoneChk').click(function () { 2626 $('input[type="checkbox"]').prop('checked', false); 2727 }) 2828 //反选 2929 $('#btnChkReverse').click(function () { 3030 //方式一:通过自己遍历的方式，设置反选 3131 //$.each($('input[type="checkbox"]'), function (indexs, values) { 3232 // $(values).prop('checked', !$(values).prop('checked')); 3333 //}); 3434 3535 //方式二 3636 $('input[type="checkbox"]').prop('checked', function (indexs, values) { 3737 return !values; 3838 //alert(indexs + ',' + values); 3939 }) 4040 }); 4141 }) 4242 </script> 4343 </body> 4444 </html>
全选反选全不选
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <style type="text/css"> 7 7 .night { 8 8 background-color:black; 9 9 } 1010 </style> 1111 </head> 1212 <body> 1313 <input type="button" value="button" id="btn" /> 1414 <script src="jquery-3.3.1.js"></script> 1515 <script type="text/javascript"> 1616 $('#btn').click(function () { 1717 //模拟开关灯效果 1818 //方式一 1919 //--------------------------- 2020 //判断一个元素是否应用了某个样式 2121 //if ($('body').hasClass('night')) { 2222 // //移除该样式，不会移除其他的样式 2323 // $('body').removeClass('night'); 2424 //} else { 2525 // $('body').addClass('night'); //追加新的样式，不会覆盖样式 2626 //} 2727 //----------------------------- 2828 2929 //方式二 3030 $('body').toggleClass('night'); //切换类样式的应用于移除 3131 }); 3232 </script> 3333 </body> 3434 </html>
模拟开关灯
六、基本过滤选择器(:)
1 1 :first 选择第一个元素。$('div:first') 选取第一个<div> 2 2 3 3 :last 选择最后一个元素。$('div:last') 选取最后一个<div> 4 4 5 5 :not (选择器)选取不满足“选择器”条件的元素 6 6 例如:$('input:not(.myClass)') 选取样式名不是myClass的<input> 7 7 8 8 :even 选取索引是偶数的元素 9 9 1010 :odd 选取索引是奇数的元素 1111 1212 :eq(索引序号) 选取索引等于 1313 1414 :gt(索引序号) 选取索引大于 1515 1616 :lt(索引序号) 选取索引小于 17 18 1 <!DOCTYPE html> 19 2 <html> 20 3 <head> 21 4 <meta charset="utf-8" /> 22 5 <title></title> 23 6 </head> 24 7 <body> 25 8 <input type="button" value="button" id="btn" /> 26 9 <h1>Alex</h1> 2710 <h2>Alex</h2> 2811 <h3>Alex</h3> 2912 <h4>Alex</h4> 3013 <h5>Alex</h5> 3114 <h6>Alex</h6> 3215 <p class="cls">p1</p> 3316 <p>p2</p> 3417 <p>p3</p> 3518 <p>p4</p> 3619 <p>p5</p> 3720 <p class="cls">p6</p> 3821 <p>p7</p> 3922 <p>p8</p> 4023 <p class="cls">p9</p> 4124 <p>p10</p> 4225 <script src="jquery-3.3.1.js"></script> 4326 <script type="text/javascript"> 4427 $(function () { 4528 $('#btn').click(function () { 4629 //1、选取索引的p标签，背景色红色 4730 //$('p').css('backgroundColor', 'red'); 4831 4932 //2、选取第一个p标签，背景色红色 5033 //$('p:first').css('backgroundColor', 'red'); 5134 5235 //3、选取最后一个p标签，背景色红色 5336 //$('p:last').css('backgroundColor', 'red'); 5437 5538 //4、选取第二个p标签(索引从0开始)，背景色红色 5639 //$('p:eq(1)').css('backgroundColor', 'red'); 5740 5841 //5、选取偶数 5942 //$('p:even').css('backgroundColor', 'red'); 6043 6144 //6、选取奇数 6245 //$('p:odd').css('backgroundColor', 'red'); 6346 6447 //7、索引大于2的，背景色红色 6548 //$('p:gt(2)').css('backgroundColor', 'red'); 6649 6750 //8、索引小于5的，背景色红色 6851 //$('p:lt(5)').css('backgroundColor', 'red'); 6952 7053 //9、选取页面上所有p标签，除了应用了cls类的那些标签 7154 //$('p:not(.cls)').css('backgroundColor', 'red'); 7255 7356 //10、设置所有标题都变成红色 7457 //$('H1').css('backgroundColor', 'red'); 7558 //$('h1,h2').css('backgroundColor', 'red'); 7659 //简写 7760 //$(':header').css('backgroundColor', 'red'); 7861 }); 7962 }) 8063 </script> 8164 </body> 8265 </html>
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="button" value="button" id="btn" /> 9 9 <table border="1" cellpadding="1" cellspacing="1"> 1010 <thead>学生成绩</thead> 1111 <tr> 1212 <td>学生</td> 1313 <td>成绩</td> 1414 </tr> 1515 <tr> 1616 <td>张三</td> 1717 <td>30</td> 1818 </tr> 1919 <tr> 2020 <td>李四</td> 2121 <td>40</td> 2222 </tr> 2323 <tr> 2424 <td>王五</td> 2525 <td>50</td> 2626 </tr> 2727 <tr> 2828 <td>赵六</td> 2929 <td>60</td> 3030 </tr> 3131 <tr> 3232 <td>秦七</td> 3333 <td>70</td> 3434 </tr> 3535 </table> 3636 <script src="jquery-3.3.1.js"></script> 3737 <script type="text/javascript"> 3838 $(function () { 3939 $('#btn').click(function () { 4040 $('tr:first').css('font-size', 70); 4141 $('tr:last').css('color', 'red'); 4242 $('tr:gt(0):lt(2)').css('font-size', 50) 4343 $('tr:odd:not(:last)').css('backgroundColor', 'red'); 4444 }) 4545 }) 4646 </script> 4747 </body> 4848 </html>
过滤器小练习
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="button" value="button" id="btn" /> 9 9 <ul id="uone"> 1010 <li>AAAAA</li> 1111 <li>AAAAA</li> 1212 <li>AAAAA</li> 1313 <li>AAAAA</li> 1414 <li>AAAAA</li> 1515 <li>AAAAA</li> 1616 <li>AAAAA</li> 1717 <li>AAAAA</li> 1818 </ul> 1919 <script src="jquery-3.3.1.js"></script> 2020 <script type="text/javascript"> 2121 $('#btn').click(function () { 2222 $('#uone li:lt(2)').css('color', 'red'); 2323 }); 2424 </script> 2525 </body> 2626 </html>
小练习
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="button" value="button" id="btn" /> 9 9 <table border="1" cellpadding="1" cellspacing="1"> 1010 <tr> 1111 <td>AA</td> 1212 <td>BB</td> 1313 <td>CC</td> 1414 <td>DD</td> 1515 <td>EE</td> 1616 <td>FF</td> 1717 </tr> 1818 <tr> 1919 <td>AA</td> 2020 <td>BB</td> 2121 <td>CC</td> 2222 <td>DD</td> 2323 <td>EE</td> 2424 <td>FF</td> 2525 </tr> 2626 <tr> 2727 <td>AA</td> 2828 <td>BB</td> 2929 <td>CC</td> 3030 <td>DD</td> 3131 <td>EE</td> 3232 <td>FF</td> 3333 </tr> 3434 <tr> 3535 <td>AA</td> 3636 <td>BB</td> 3737 <td>CC</td> 3838 <td>DD</td> 3939 <td>EE</td> 4040 <td>FF</td> 4141 </tr> 4242 </table> 4343 <script src="jquery-3.3.1.js"></script> 4444 <script type="text/javascript"> 4545 $(function () { 4646 $('table tr').mouseover(function () { 4747 $(this).css('backgroundColor', 'red').siblings('tr').css('backgroundColor','yellow'); 4848 }); 4949 }); 5050 </script> 5151 </body> 5252 </html>
小练习
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <style type="text/css"> 7 7 td { 8 8 width:50px; 9 9 height:30px; 1010 } 1111 </style> 1212 </head> 1313 <body> 1414 <input type="button" value="button" id="btn" /> 1515 <table border="1" cellpadding="1" cellspacing="1" id="t1"> 1616 <tr> 1717 <td>AA</td> 1818 <td>BB</td> 1919 <td>CC</td> 2020 <td>DD</td> 2121 <td>EE</td> 2222 <td>FF</td> 2323 </tr> 2424 <tr> 2525 <td>AA</td> 2626 <td>BB</td> 2727 <td>CC</td> 2828 <td>DD</td> 2929 <td>EE</td> 3030 <td>FF</td> 3131 </tr> 3232 <tr> 3333 <td>AA</td> 3434 <td>BB</td> 3535 <td>CC</td> 3636 <td>DD</td> 3737 <td>EE</td> 3838 <td>FF</td> 3939 </tr> 4040 <tr> 4141 <td>AA</td> 4242 <td>BB</td> 4343 <td>CC</td> 4444 <td>DD</td> 4545 <td>EE</td> 4646 <td>FF</td> 4747 </tr> 4848 </table> 4949 <script src="jquery-3.3.1.js"></script> 5050 <script type="text/javascript"> 5151 $(function () { 5252 $('#t1 tr').click(function () { 5353 //清空其他颜色 5454 $('#t1 td').css('backgroundColor', 'white'); 5555 5656 //$('td','#t1') <==>$('#t1 td') 5757 //$('td', $(this)) 5858 $('td:even', this).css('backgroundColor', 'red'); 5959 $('td:odd', $(this)).css('backgroundColor', 'blue'); 6060 }); 6161 }); 6262 </script> 6363 </body> 6464 </html>
小练习
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="button" id="btn1" value="select" /> 9 9 <select> 1010 <option value="value">北京</option> 1111 <option value="value">上海</option> 1212 <option value="value">杭州</option> 1313 </select> 1414 <div id="div1"> 1515 <input type="checkbox" /> 1616 <input type="checkbox" /> 1717 <input type="checkbox" checked /> 1818 <input type="checkbox" /> 1919 <input type="radio" /> 2020 <input type="radio" /> 2121 </div> 2222 <form action="/" method="post" id="form1"> 2323 <input type="text" name="name" value="" disabled="disabled" /> 2424 <input type="text" name="name" value="" /> 2525 <input type="text" name="name" value="" /> 2626 <input type="button" name="name" value="button" /> 2727 <input type="button" name="name" value="button" disabled="disabled" /> 2828 <input type="button" name="name" value="button" /> 2929 </form> 3030 <hr /> 3131 <input type="button" name="name" value="button" /> 3232 <input type="button" name="name" value="button" disabled="disabled" /> 3333 <input type="button" name="name" value="button" /> 3434 <script src="jquery-3.3.1.js"></script> 3535 <script type="text/javascript"> 3636 //1、选取页面上所有被禁用的元素 3737 //方式一 3838 //$('*[disabled=disabled]').css('backgroundColor', 'red'); 3939 4040 //方式二 4141 //$(':disabled').css('backgroundColor', 'red'); 4242 4343 //2、选取页面上所有没有被禁用的元素 4444 //$(':enabled').css('backgroundColor', 'blue'); 4545 4646 //3、选取form下的没有禁用的元素 4747 //$('#form1 :enabled').css('backgroundColor', 'blue'); 4848 4949 //4、选取form下的被禁用的元素 5050 //$('#form1 :disabled').css('backgroundColor', 'red'); 5151 5252 //5、选取页面中所有被禁用的input元素 5353 //$('input:disabled').css('backgroundColor', 'red'); 5454 5555 //6、选取页面中所有没有禁用的input元素 5656 //$('input:enabled').css('backgroundColor', 'blue'); 5757 5858 //7、选取div1下所有checkbox被选中的元素 5959 //$('#div1 :checked').css('backgroundColor', 'red'); 6060 6161 //8、选取div1下所有没被选中的元素 6262 //$('#div1 :not(:checked)').css('backgroundColor', 'red'); 6363 6464 //9、获取选中的select 6565 $('#btn1').click(function () { 6666 $(':selected').text(function (index, v) { 6767 return '*' + v + '*'; 6868 }); 6969 //设置没有被选中的 7070 $('select :not(:selected)').text(function (index, v) { 7171 return '=' + v + '='; 7272 }); 7373 }); 7474 </script> 7575 </body> 7676 </html>
小练习
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="checkbox" name="name" value="tom" />tom 9 9 <input type="checkbox" name="name" value="jim" />jim 1010 <input type="checkbox" name="name" value="Alex" />Alex 1111 <p id="pmsg"> 1212 1313 </p> 1414 <script src="jquery-3.3.1.js"></script> 1515 <script type="text/javascript"> 1616 $(function () { 1717 //为每个checkbox注册单击事件 1818 $('input[type=checkbox]').click(function () { 1919 //1、获取当前所有被选中的checkbox 2020 var chks = $('input[type=checkbox]:checked'); 2121 //2、获取个数 2222 var n = chks.length; 2323 //3、获取每个checkbox的value 2424 var names = []; 2525 $.each(chks, function (k, chkObj) { 2626 // 第一个索引，第二个对象 2727 //方式一 2828 names[k] = $(chkObj).val(); 2929 //方式二 3030 //names[names.length] = $(chkObj).val(); 3131 }) 3232 //4、把个数和值显示到p中 3333 $('#pmsg').text('当前共选中' + n + '个,分别是' + names.toString()); 3434 }); 3535 }); 3636 </script> 3737 </body> 3838 </html>
小练习
七、动态创建元素
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <style type="text/css"> 7 7 #div1 { 8 8 width:300px; 9 9 height:300px; 1010 border:1px solid blue; 1111 } 1212 </style> 1313 </head> 1414 <body> 1515 <input type="button" value="button" id="btn1" /> 1616 <div id="div1"> 1717 1818 </div> 1919 <script src="jquery-3.3.1.js"></script> 2020 <script type="text/javascript"> 2121 $('#btn1').click(function () { 2222 //1、动态创建一个超链接 2323 //var aObj = $('<a href="http://www.baidu.com">百度一下</a>') 2424 //2、将超链接加入到div中 2525 //方式一 2626 //$('#div1').append(aObj); 2727 //方式二 2828 //加到div后面 2929 //$('#div1').after(aObj); 3030 //加到div前面 3131 //$('#div1').before(aObj); 3232 3333 //---------------------------- 3434 //方式二动态创建元素 3535 //div后面 3636 //$('<a href="http://www.baidu.com">百度一下</a>').insertAfter('#div1') 3737 //div前面 3838 //$('<a href="http://www.baidu.com">百度一下</a>').insertBefore('#div1') 3939 }); 4040 </script> 4141 </body> 4242 </html>
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="button" id="btn1" value="button"/> 9 9 <script src="jquery-3.3.1.js"></script> 1010 <script type="text/javascript"> 1111 var websites = { '百度': 'http://www.baidu.com', '腾讯': 'http://www.qq.com' }; 1212 $('#btn1').click(function () { 1313 //1、动态创建表格 1414 $('<table border="1" style="width:300px;height:300px;"></table>').appendTo('body'); 1515 //2、动态创建表格中的行 1616 for (var key in websites) { 1717 $('<tr><td>' + key + '</td><td><a href="https://my.oschina.net//u/4349408/blog/3294993/span>' + websites[key] + '">' + key + '</td></tr>').appendTo('table'); 1818 } 1919 }); 2020 </script> 2121 </body> 2222 </html>
小练习
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <table border="1"> 9 9 <tr> 1010 <td>毛毛</td> 1111 <td>沙发~~</td> 1212 </tr> 1313 <tr> 1414 <td>蛋蛋</td> 1515 <td>板凳</td> 1616 </tr> 1717 </table> 1818 昵称：<input type="text" name="name" value="" id="txtNickName" placeholder="请输入昵称！" /> 1919 评论：<textarea cols="25" rows="5" id="txtContent"></textarea> 2020 <input type="button" name="" value="提交" id="btn1" /> 2121 <script src="jquery-3.3.1.js"></script> 2222 <script type="text/javascript"> 2323 $('#btn1').click(function () { 2424 //1、获取昵称 2525 var txtNickName = $('#txtNickName').val(); 2626 //2、获取评论 2727 var txtContent = $('#txtContent').val(); 2828 //3、往table中追加 2929 $('<tr><td>' + txtNickName + '</td><td>' + txtContent + '</td></tr>').appendTo('table'); 3030 }); 3131 </script> 3232 </body> 3333 </html>
无刷新评论
八、 删除节点
11 empty()： 22 · 清空其元素下的所有子元素 33 · 内部实现：while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一样 44 remove(selector)5 · 删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下: 56 · var lis = $('#ulSite li').remove(); 67 · $('#ulSite2').append(lis); 78 · 参数expr，是一个选择器，如果没有选择器，表示把选中的元素删掉，如果有选择器则表示在选中的元素中，再过滤出expr匹配的元素删除掉。
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <style type="text/css"> 7 7 select { 8 8 width:150px; 9 9 height:100px; 1010 } 1111 </style> 1212 </head> 1313 <body> 1414 <select id="s1" multiple="multiple"> 1515 <option>增加</option> 1616 <option>删除</option> 1717 <option>修改</option> 1818 <option>保存</option> 1919 </select> 2020 <input type="button" value=">>" /> 2121 <input type="button" value=">" /> 2222 <input type="button" value="<" /> 2323 <input type="button" value="<<" /> 2424 <select id="s2" multiple="multiple"> 2525 2626 </select> 2727 <script src="jquery-3.3.1.js"></script> 2828 <script type="text/javascript"> 2929 $(':button[value=">>"]').click(function () { 3030 var sel1 = $('#s1 option').remove(); 3131 $('#s2').append(sel1); 3232 }); 3333 $(':button[value=">"]').click(function () { 3434 var sel1 = $('#s1 option:selected').remove(); 3535 $('#s2').append(sel1); 3636 }); 3737 $(':button[value="<"]').click(function () { 3838 var sel2 = $('#s2 option:selected').remove(); 3939 $('#s1').append(sel2); 4040 }); 4141 $(':button[value="<<"]').click(function () { 4242 var sel2 = $('#s2 option').remove(); 4343 $('#s1').append(sel2); 4444 }); 4545 </script> 4646 </body> 4747 </html>
小练习
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="text" id="txt1" />+<input type="text" id="txt2" />=<input type="text" id="txt3" /> 9 9 <br /> 1010 <input type="button" value="计算" id="btn1" /> 1111 <script src="jquery-3.3.1.js"></script> 1212 <script type="text/javascript"> 1313 $('#btn1').click(function () { 1414 //1、获取文本框1的值 1515 var txt1 = $('#txt1').val(); 1616 //2、获取文本框2的值 1717 var txt2 = $('#txt2').val(); 1818 //3、计算并给文本框3赋值 1919 var sum = parseInt(txt1) + parseInt(txt2) 2020 $('#txt3').val(sum); 2121 }); 2222 </script> 2323 </body> 2424 </html>
小练习
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="button" value="请仔细阅读协议(5)" id="btn1" disabled="disabled" /> 9 9 <script src="jquery-3.3.1.js"></script> 1010 <script type="text/javascript"> 1111 var sec = 4; 1212 $(function () { 1313 var intervalId = setInterval(function () { 1414 if (sec > 0) { 1515 $('#btn1').val('请仔细阅读协议(' + sec + ')') 1616 sec--; 1717 } else { 1818 //停止计时器 1919 clearInterval(intervalId); 2020 //方式一 2121 //$('#btn1').val('同意!').removeAttr('disabled'); 2222 //方式二 2323 $('#btn1').val('同意!').prop('disabled', false); //注意，不能是字符串的false 2424 } 2525 }, 1000); 2626 }) 2727 </script> 2828 </body> 2929 </html>
小练习
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="text" /> 9 9 <input type="text" /> 1010 <input type="text" /> 1111 <script src="jquery-3.3.1.js"></script> 1212 <script type="text/javascript"> 1313 $(':text').blur(function () { 1414 //1、校验 1515 if ($(this).val().length == 0) { 1616 //2、背景色变红 1717 $(this).css('backgroundColor', 'red'); 1818 } else { 1919 $(this).css('backgroundColor', ''); 2020 } 2121 }) 2222 </script> 2323 </body> 2424 </html>
小练习
九、节点的操作
1· 替换节点 2 - $('br').replaceWith('<hr/>'); 3 用hr替换br 4 - $('<br/>').replaceAll('hr'); 5 用br替换hr 6 7· 包裹节点 8 - wrap()：将所有元素逐个用指定标签包裹 9 $('b').wrap('<font color="red"></font>') 将所有粗体字红色显示 10 结果:<font color="red"><b></b></font> 11 - wrapInner() 在内部围绕
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="button" value="替换" id="btn" /> 9 9 <p>ppppppppp</p> 1010 <hr /> 1111 <p>ppppppppp</p> 1212 <hr /> 1313 <p>ppppppppp</p> 1414 <hr /> 1515 <p>ppppppppp</p> 1616 <script src="jquery-3.3.1.js"></script> 1717 <script type="text/javascript"> 1818 $('#btn').click(function () { 1919 //先使用选择器选择对应的元素，然后使用指定的元素对象来替换选择到的元素 2020 //$('hr').replaceWith('<a href="http://www.baidu.com">百度一下</a>') 2121 2222 //首先动态创建一个元素，然后进行替换 2323 $('<font color="red">====</font>').replaceAll('hr') 2424 }) 2525 </script> 2626 </body> 2727 </html>
节点替换
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="button" value="包裹节点" id="btn" /> 9 9 <p>pppppppp</p> 1010 <input type="text" /> 1111 <p>pppppppp</p> 1212 <p>pppppppp</p> 1313 <p>pppppppp</p> 1414 <script src="jquery-3.3.1.js"></script> 1515 <script type="text/javascript"> 1616 $('#btn').click(function () { 1717 //包裹外边 1818 //$('p').wrap('<font color="red"></font>'); 1919 //包裹里面 2020 //$('p').wrapInner('<font color="red"></font>') 2121 //包裹所有的:所有的p标签使用一个标签来包裹 2222 $('p').wrapAll('<font color="red"></font>'); 2323 }); 2424 </script> 2525 </body> 2626 </html>
节点包裹
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <input type="button" value="button" id="btn" /> 9 9 <p> 1010 性别: 1111 <input type="radio" name="gender" value="male" />男 1212 <input type="radio" name="gender" value="female" />女 1313 <input type="radio" name="gender" value="secret" />保密 1414 </p> 1515 <p> 1616 婚否: 1717 <input type="radio" name="hf" value="yihun" />已婚 1818 <input type="radio" name="hf" value="weihun" />未婚 1919 <input type="radio" name="hf" value="liyi" />离异 2020 </p> 2121 <p> 2222 <input type="checkbox" name="hobby" value="dlq" />打篮球 2323 <input type="checkbox" name="hobby" value="tzq" />踢足球 2424 <input type="checkbox" name="hobby" value="ppq" />乒乓球 2525 </p> 2626 <script src="jquery-3.3.1.js"></script> 2727 <script type="text/javascript"> 2828 $('#btn').click(function () { 2929 //要求如下： 3030 // 保密、已婚、打篮球、踢足球被选中 3131 //方式一 3232 //$(':radio[value="secret"]').prop("checked", 'true'); 3333 //$(':radio[value="yihun"]').prop("checked", 'true'); 3434 //$(':checkbox[value="dlq"]').prop('checked', 'true'); 3535 //$(':checkbox[value="tzq"]').prop('checked', 'true'); 3636 //方式二 3737 $(':radio').val(['secret', 'yihun']); 3838 $(':checkbox').val(['dlq', 'tzq']); 3939 }); 4040 </script> 4141 </body> 4242 </html>
单选框和复选框操作
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <style type="text/css"> 7 7 #div1 { 8 8 width:100px; 9 9 height:100px; 1010 background-color:red; 1111 } 1212 </style> 1313 </head> 1414 <body> 1515 <div id="div1"> 1616 1717 </div> 1818 <input type="text" id="txt1" /> 1919 <script src="jquery-3.3.1.js"></script> 2020 <script type="text/javascript"> 2121 //注册一个鼠标移动事件 2222 $('#div1').mousemove(function (evt) { 2323 //在jQuery中使用事件对象，直接在事件处理函数中加一个evt参数即可 2424 //并且该事件对象是经过jQuery封装后的事件对象 2525 var x, y; 2626 var e = evt || window.event; 2727 x = e.pageX; 2828 y = e.pageY; 2929 document.title = x + ',' + y; 3030 }).mousedown(function (evt) { 3131 //获取鼠标按下的键，1：左键；2：滚轮；3：右键 3232 alert(evt.which); 3333 }); 3434 $('#txt1').keydown(function (evt) { 3535 //相当于window.keyCode键盘码 3636 alert(evt.which); 3737 }); 3838 </script> 3939 </body> 4040 </html>
获取事件对象
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <p id="p1">ppppppp<span id="s1">sssss</span>ppp 9 9 </p> 1010 <script src="jquery-3.3.1.js"></script> 1111 <script type="text/javascript"> 1212 $('#p1').click(function () { 1313 alert('p1'); 1414 }); 1515 $('#s1').click(function (evt) { 1616 alert('s1'); 1717 //阻止事件冒泡 1818 //DOM取消事件冒泡：window.event.cancelBubble=true; 1919 evt.stopPropagation(); 2020 }); 2121 </script> 2222 </body> 2323 </html>
取消事件冒泡
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <style type="text/css"> 7 7 #div1 { 8 8 width:300px; 9 9 height:300px; 1010 background-color:blue; 1111 } 1212 </style> 1313 </head> 1414 <body> 1515 <input type="button" value="show" id="btnShow" /> 1616 <input type="button" value="hide" id="btnHide" /> 1717 <input type="button" value="show/hide" id="btn" /> 1818 <div id="div1"> 1919 2020 </div> 2121 <script src="jquery-3.3.1.js"></script> 2222 <script type="text/javascript"> 2323 $('#btnShow').click(function () { 2424 //$('#div1').stop().show(3000); 2525 //$('#div1').stop().slideDown(3000); 2626 //$('#div1').stop().fadeIn(3000); 2727 //$('#div1').stop().fadeTo(3000, 0.3); 2828 }); 2929 $('#btnHide').click(function () { 3030 //$('#div1').stop().hide(3000); 3131 //$('#div1').stop().slideUp(3000); 3232 //$('#div1').stop().fadeOut(3000); 3333 }); 3434 $('#btn').click(function () { 3535 //$('#div1').stop().toggle(2000); 3636 //$('#div1').stop().fadeToggle(2000); 3737 $('#div1').stop().slideToggle(2000); 3838 }); 3939 </script> 4040 </body> 4141 </html>
动画
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <style type="text/css"> 7 7 #img1 { 8 8 display:none; 9 9 position:absolute; 1010 } 1111 </style> 1212 </head> 1313 <body> 1414 <input type="button" value="显示消息" id="btn" /> 1515 <img src="2.jpg" alt="Alternate Text" id="img1" /> 1616 <script src="jquery-3.3.1.js"></script> 1717 <script type="text/javascript"> 1818 $('#btn').click(function () { 1919 //$('#img1').css({ 'right': 0, 'bottom': 0 }).show(2000); 2020 //$('#img1').css({ 'right': 0, 'bottom': 0 }).slideDown(2000); 2121 $('#img1').css({ 'right': 0, 'bottom': 0 }).fadeIn(2000); 2222 }); 2323 </script> 2424 </body> 2525 </html>
右下角弹窗
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <style type="text/css"> 7 7 #qqTab { 8 8 height:500px; 9 9 width:300px; 1010 border:1px solid blue; 1111 } 1212 #qqTab ul { 1313 padding:0; 1414 margin:0; 1515 list-style-type:none; 1616 } 1717 p { 1818 margin:0; 1919 text-align:center; 2020 background-color:aqua; 2121 margin-bottom:2px; 2222 } 2323 #uGroup ul li { 2424 background-color:chartreuse; 2525 margin-top:2px; 2626 margin-bottom:2px; 2727 } 2828 li, p { 2929 cursor:pointer; 3030 } 3131 #uGroup li ul { 3232 display:none; 3333 } 3434 </style> 3535 </head> 3636 <body> 3737 <!--bgsound:仅仅支持IE--> 3838 <bgsound id="snd" loop="0" src="天空之城.mp3"></bgsound> 3939 <div id="qqTab"> 4040 <ul id="uGroup"> 4141 <li> 4242 <p> 4343 小学同学 4444 </p> 4545 <ul> 4646 <li>小猫</li> 4747 <li>小猫2</li> 4848 </ul> 4949 </li> 5050 <li> 5151 <p> 5252 初中同学 5353 </p> 5454 <ul> 5555 <li>小狗</li> 5656 <li>小狗2</li> 5757 </ul> 5858 </li> 5959 <li> 6060 <p> 6161 高中同学 6262 </p> 6363 <ul> 6464 <li>小猪</li> 6565 <li>小猪2</li> 6666 </ul> 6767 </li> 6868 </ul> 6969 </div> 7070 <script src="jquery-3.3.1.js"></script> 7171 <script type="text/javascript"> 7272 $('#uGroup li p').click(function () { 7373 //$(this).next('ul').toggle(1500); 7474 $(this).next('ul').slideToggle(1500); 7575 }); 7676 </script> 7777 </body> 7878 </html>
QQ面板
十、animate动画(自定义)
1 1 - 滑动效果 2 2 slideDown()、slideUp()、slideToggle() 3 3 4 4 - 淡入淡出(透明) 5 5 fadeIn()、fadeOut()、fadeToggle()、fadeTo() 6 6 7 7 - 自定义动画 8 8 animate({样式},speed) 9 9 部分样式不支持:backgroundColor、color、borderStyle...... 1010 使用animate设置对象位置的时候要确保position的值为absolute或relative 1111 停止动画正在执行动画的元素:stop()(*),带参数的stop(true,false); 1212 动画队列:animate().animate().animate()....; 13 14 1 <!DOCTYPE html> 15 2 <html> 16 3 <head> 17 4 <meta charset="utf-8" /> 18 5 <title></title> 19 6 <style type="text/css"> 20 7 #div1 { 21 8 width:20px; 22 9 height:20px; 2310 border:1px solid blue; 2411 background-color:orange; 2512 position:absolute; 2613 left:100px; 2714 top:100px; 2815 } 2916 </style> 3017 </head> 3118 <body> 3219 <input type="button" value="button" id="btnStart" /> 3320 <input type="button" value="stop" id="btnStop" /> 3421 <div id="div1"> 3522 3623 </div> 3724 <script src="jquery-3.3.1.js"></script> 3825 <script type="text/javascript"> 3926 //开始 4027 $('#btnStart').click(function () { 4128 $('#div1').animate({ width: '100px', height: '100px', left: '200px', top: '150px' }, 1000) 4229 .animate({ width: '10px', height: '10px', left: '100px', top: '100px' }, 1000) 4330 .animate({ width: '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000) 4431 .animate({ width: '10px', height: '10px', left: '100px', top: '100px' }, 1000) 4532 .animate({ width: '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000) 4633 .animate({ width: '10px', height: '10px', left: '100px', top: '100px' }, 1000) 4734 .animate({ width: '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000); 4835 }); 4936 //停止 5037 $('#btnStop').click(function () { 5138 //仅仅停止当前运行的动画，后面的动画不会停止，继续执行 5239 //$(':animated').stop(); 5340 //停止当前动画，并且清除后面的动画队列（动画停止） 5441 //$(':animated').stop(true); 5542 //停止当前动画，并且将当前元素设置到当前动画执行完毕的位置 5643 $(':animated').stop(true, true); 5744 }); 5845 </script> 5946 </body> 6047 </html>
十一、 jQuery插件一(cookie)
下载地址：http://plugins.jquery.com/cookie/
注：必须先引入jQuery，再引用cookie。
11 什么是cookie：Cookie就是保存在浏览器上的内容，用户在本次浏览页面的时候向Cookie中保存文本内容，下次再访问页面的时候就可以取出来上次保存的内容，这样就可以得到上次“记忆”的内容。Cookie不是jQuery持有的概念，只不过jQueryCookie把他简化的更好用罢了。Cookie就是存储在浏览器里的一些数据 22 Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的，如果禁用了Cookie就不可以使用了， 33 Cookie的几个特征： 44 1、Cookie与域名相关 55 2、一个域名能写入的Cookie总尺寸是有限制的
11 使用方法 22 1、设置值，$.cookie('键','值')。cookie中保存的值都是文本 33 2、读取值，var v = $.cookie('键') 44 3、设置有效期；$.cookie('键','值',{expires:7,path:'/',domain:'www.baidu.com',secure:true}); 55 expires:表示浏览器保存cookie几天 66 options参数用那个设置那个。path：网页有效路径;domain：域名;secure:传输cookie时候，是否需要一个安全协议
Cookie的使用
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <style type="text/css"> 7 7 #pmsg { 8 8 border:1px solid blue; 9 9 } 1010 </style> 1111 </head> 1212 <body> 1313 <input type="text" id="userName" /> 1414 <input type="button" value="提交" id="btnSubmit" /> 1515 <p id="pmsg"> 1616 欢迎，游客！~ 1717 </p> 1818 <script src="jquery-3.3.1.js"></script> 1919 <script src="jquery.cookie.js"></script> 2020 <script type="text/javascript"> 2121 $(function () { 2222 //------------先获取Cookie，若Cookie有值，则放到P标签中，否则，显示游客----------------------- 2323 if ($.cookie('userName')) { 2424 $('#pmsg').text('欢迎:' + $.cookie('userName')); 2525 } else { 2626 $('#pmsg').text('欢迎,游客~'); 2727 } 2828 $('#btnSubmit').click(function () { 2929 //1、获取文本框的值 3030 var user_name = $('#userName').val(); 3131 //2、写到Cookie中 3232 //当写入Cookie的时候，若不设置有效期，则为进程内“Cookie” 3333 //3、设置Cookie有效期;{ expires: 7, path: '/', domain: 'jquery.com', secure: true } 3434 $.cookie('userName', user_name, { expires: 7, path: '/', secure: false }); 3535 alert('写入成功!'); 3636 }); 3737 }); 3838 </script> 3939 </body> 4040 </html>
记录用户登录状态
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 </head> 7 7 <body> 8 8 <p id="p1"></p> 9 9 <script src="jquery-3.3.1.js"></script> 1010 <script src="jquery.cookie.js"></script> 1111 <script type="text/javascript"> 1212 //1、读取cookie，如果有显示到p中 1313 //2、无论这次是否读取到了cookie，那么这次都要将新的时间写入cookie 1414 var now_time = $.cookie('nowtime'); 1515 var date = new Date(); 1616 if (now_time) { 1717 $('#p1').text('最后一次刷新时间:' + now_time) 1818 $.cookie('nowtime', date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(), { expires: 7, path: '/', secure: false }) 1919 } else { 2020 $.cookie('nowtime', date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(), { expires: 7, path: '/', secure: false }) 2121 } 2222 </script> 2323 </body> 2424 </html>
用户最后刷新时间
十二、jQuery插件二(jqzoom)
下载地址
链接：https://pan.baidu.com/s/1-fHzkr49n4XXxiLa91vHRA
提取码：r74f
Demo如下
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <script src="jquery.js"></script> <!--第一步：引入jquery（注：jqzoom与jquery版本要对应）--> 7 7 <script src="jquery.jqzoom.js"></script> <!--第二步：引入jqzoom--> 8 8 <link href="jqzoom.css" rel="stylesheet" type="text/css" /> <!--第三步：引入jqzoom样式--> 9 9 </head> 1010 <body> 1111 <div class="jqzoom"><img src="timg2.jpg" alt="shoe" jqimg="timg1.jpg"></div> <!--第四步(timg2小图片；timg1大图片)--> 1212 1313 <script type="text/javascript"> 1414 $(function () { 1515 $('.jqzoom').jqueryzoom({ 1616 xzoom: 400, //放大图片的X轴(默认为：200) 1717 yzoom: 400, //方法图片的Y轴(默认为：200) 1818 offset: 40, //偏移量(默认为：10) 1919 position: "right" //默认为right 2020 }); 2121 }); 2222 </script> 2323 </body> 2424 </html>
图片放大
十三、 jQuery插件二(jquery ui)
下载地址
链接：https://pan.baidu.com/s/1NnIRp39bK9Sx2Y4G86qI9A
提取码：8yv2
中文官网地址：http://www.jqueryui.org.cn/
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title></title> 6 6 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 7 7 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 8 8 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 9 9 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> 1010 <script> 1111 $(function () { 1212 $("#datepicker").datepicker({ 1313 showOtherMonths: true, 1414 selectOtherMonths: true 1515 }); 1616 }); 1717 </script> 1818 </head> 1919 <body> 2020 <p>日期：<input type="text" id="datepicker"></p> 2121 </body> 2222 </html>
日期样式
其他的jquery ui请参考官网！~~~
十四、编写一个插件
11 1、为对象编写插件 22 $.fn.extend{fnName:function(){}}; 33 44 2、编写全局函数插件 55 66 3、插件命名：jquery.xxx.js
1 1 ; (function ($) { 2 2 $.fn.extend({ 3 3 setTableStyle: function () { 4 4 // 在当前函数中，this表示的就是调用当前函数的对象，即表格对象 5 5 $('tr', this).mouseover(function () { 6 6 $(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor', 'blue'); 7 7 }); 8 8 }, 9 9 clearTableStyle: function () { 1010 $('tr', this).unbind(); //移除所有事件 1111 } 1212 }) 1313 })(jQuery);
jquery.tablestyle.js
1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <title>我的第一个jquery插件</title> 6 6 </head> 7 7 <body> 8 8 <table id="t1" border="1" cellpadding="2" cellspacing="2"> 9 9 <tr> 1010 <td>11</td> 1111 <td>11</td> 1212 <td>11</td> 1313 </tr> 1414 <tr> 1515 <td>22</td> 1616 <td>22</td> 1717 <td>22</td> 1818 </tr> 1919 <tr> 2020 <td>33</td> 2121 <td>33</td> 2222 <td>33</td> 2323 </tr> 2424 <tr> 2525 <td>44</td> 2626 <td>44</td> 2727 <td>44</td> 2828 </tr> 2929 <tr> 3030 <td>55</td> 3131 <td>55</td> 3232 <td>55</td> 3333 </tr> 3434 </table> 3535 <script src="jquery-3.3.1.js"></script> 3636 <script src="jquery.tablestyle.js"></script> 3737 <script type="text/javascript"> 3838 $('#t1').setTableStyle(); 3939 </script> 4040 </body> 4141 </html>
index.html
十五、完整练习项目地址
链接：https://pan.baidu.com/s/1UWO\_IpnJItHjIy43-LtKzA
提取码：26ir