此篇为jQuery补充的一些知识点，详细资料请看另一篇博客，地址：https://www.cnblogs.com/chenyanbin/p/10454503.html
一、jQuery中提供的两个函数
1 $.map(array,callback(element,index)); 2 1.对于数组array中的每个元素，调用callback()函数，最终返回一个新的数组。原数组不变 3 4 $.each(array,fn);遍历数组，return false来退出循环。 5 1.主要用来遍历数组，不修改数组，对于普通数组或者“键值对”数组都没有问题 6 2.在each函数中可以直接使用this，表示当前元素的值
<script src="jquery-3.3.1.js"></script> <script type="text/javascript"> var arrInt = [1, 2, 3, 4, 5, 6, 7, 8]; $.each(arrInt, function (key, value) { if (key == 3) { //break; //在$.each中跳出循环不能使用break，需要使用return false; return false; //jQuery底层源码，因为调用callback.call()判断是否为false，直接break了 //if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) { // break; //} } //当使用each遍历，普通的数组的时候，索引就是键，值就是值 alert('key:' + key + '....' + 'value:' + value); }) //遍历键值队集合 //var personInfo = { 'name': '张三', 'age': 19, 'gender': '男' }; //$.each(personInfo, function (k, v) { // alert('key:' + k + '...v:' + this); //}); </script>
1 页面加载执行JavaScript与jQuery写法区别 2 JS: 3 window.onload(function(){ 4 5 }); 6 JQuery: 7 方式一： 8 $(document).ready(function(){ 9 10 }); 11 方式二: 12 $(function(){}); 等价于$(document).ready(function(){}); 13 14 两者区别: 15 1.window.onload需要等待页面全部加载完毕才会触发，即所有的Dom元素创建完毕、图片、CSS等加载完毕后才被触发。 16 2.$(document).ready()只要Dom元素加载完毕即触发，这样可以提升相应速度 17 3.$(document).ready();可以多次注册事件处理程序，并且最终都会执行，而window.onload每次注册新的事件处理程序时都会将前面的覆盖掉 18 19 以下jQuery三种写法相同 20 jQuery(document).ready(function(){ 21 22 }); 23 24 $(document).ready(function(){ 25 26 }); 27 28 $(function(){ 29 30 31 });
1 <script src="jquery-3.3.1.js"></script> 2 <script type="text/javascript"> 3 //var arrInt = [10, 20, 30, 40, 50, 60, 70, 80, 90]; 4 //遍历数组中的每个元素，返回一个新的数组 5 //var arrIntNew = $.map(arrInt, function (element_value, arrIndex) { 6 // //alert(arguments.length); //查看底层传入几个参数 7 // //alert(element_value+'...'+arrIndex); 8 // return element_value * 2; 9 //}) 10 //alert(arrIntNew); 11 12 //练习遍历数组，将索引大于3的元素翻倍。并返回一个新的数组 13 var arrInt = [10, 20, 30, 40, 50, 60, 70, 80, 90]; 14 var arrIntNew = $.map(arrInt, function (element_value, arrIndex) { 15 return arrIndex > 3 ? element_value * 2 : element_value; 16 }) 17 alert(arrIntNew); 18 19 //以下jQuery底层代码 20 // map: function( elems, callback, arg ) { 21 // var length, value, 22 // i = 0, 23 // ret = []; 24 25 // // Go through the array, translating each of the items to their new values 26 // if ( isArrayLike( elems ) ) { 27 // length = elems.length; 28 // for ( ; i < length; i++ ) { 29 // value = callback( elems[ i ], i, arg ); 30 31 // if ( value != null ) { 32 // ret.push( value ); 注:JavaScript的push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 33 // } 34 // } 35 36 // // Go through every key on the object, 37 // } else { 38 // for ( i in elems ) { 39 // value = callback( elems[ i ], i, arg ); 40 41 // if ( value != null ) { 42 // ret.push( value ); 43 // } 44 // } 45 // } 46 47 // // Flatten any nested arrays 48 // return concat.apply( [], ret ); 49 //} 50 </script>
二、jQuery中的trim()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <script src="jquery-3.3.1.js"></script> 9 <script type="text/javascript"> 10 //去除两边空格 11 var msg = ' alex '; 12 alert('===' + $.trim(msg) + '==='); 13 //jQuery底层源码 14 // trim: function( text ) { 15 // return text == null ? 16 // "" : 17 // ( text + "" ).replace( rtrim, "" ); 注:rtrim为正则表达式:/^[suFEFFxA0]+|[suFEFFxA0]+$/g 18 //} 19 20 //等同上面写法,两边加“=”为了明显区分是否有空格 21 alert('===' + msg.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g,'') + '===') 22 </script> 23 </body> 24 </html>
三、Dom对象和jQuery对象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 #div1 { 8 width:200px; 9 height:200px; 10 background-color:blue; 11 } 12 </style> 13 </head> 14 <body> 15 <input type="button" value="button" id="btn" /> 16 <div id="div1"> 17 18 </div> 19 <script src="jquery-3.3.1.js"></script> 20 <script type="text/javascript"> 21 //1.获取层对象 22 //页面上的元素对象才叫Dom对象，数组、日期，这些不是Dom对象 23 var divObj = document.getElementById('div1'); 24 //当直接使用Dom对象的时候，存在浏览器兼容问题 25 //为了解决浏览器的兼容问题，所以这时可以把Dom对象转换为jQuery对象，然后再操作 26 //divObj.innerHTML = 'hello word'; 27 var $divObj = $(divObj); 28 //把Dom对象转换为jQuery对象后，就可以调用对应的所有jQuery对象的成员了 29 //Dom对象只能使用Dom对象的成员，jQuery对象只能使用jQuery对象的成员，这两种对象是互相独立的 30 $divObj.text('hello word!'); 31 32 //把jQuery对象再转换为Dom对象 33 //方式一 34 var domDiv = $divObj[0]; 35 //方式二 36 //var domDiv2 = $divObj.get(0); 37 domDiv.innerHTML = 'aaaaaa'; 38 39 //jQuery对象 40 //可以把Dom对象转换为jQuery对象 41 //也可以把jQuery对象转换为Dom对象 42 </script> 43 44 </body> 45 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="button1" id="btn1" /> 9 <input type="text" value="" id="txt2" /> 10 <a href="http://www.baidu.com">百度一下</a> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 document.getElementById('btn1').onclick = function () { 14 //获取文本框中用户输入的内容 15 var $txtObj = $(document.getElementById('txt2')); 16 //方法一:val() 17 //alert($txtObj.val()); //不传参数，从文本框中取值 18 //$txtObj.val('哈哈哈哈'); //传参数，给文本框赋值 19 20 //方法二：设置文本框的CSS样式 21 //$txtObj.css('border', '1px solid blue'); 22 //设置多个样式时，用键值队的形式传入进去 23 $txtObj.css({ 'border': '1px solid blue', 'width': '200px', 'height': '40px', 'color': 'red' }); 24 25 //设置超链接 26 var $aLink = $(document.getElementsByTagName('a')[0]); 27 //$aLink.text('白了个度'); //--->innerHTML 28 $aLink.html('<img src="1.jpg" style="height:300px;200px">'); 29 }; 30 </script> 31 </body> 32 </html>
四、jQuery选择器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <div id="div1"> 9 10 </div> 11 <p>哈哈哈</p> 12 <input type="button" value="button" /> 13 <input type="text" /> 14 <span class="x">我是一个span</span> 15 <p>哈哈哈</p> 16 <p class="x">嘻嘻嘻</p> 17 <input type="button" value="设置p元素中显示的文字" id="btnSetTxt" /> 18 <script src="jquery-3.3.1.js"></script> 19 <script type="text/javascript"> 20 //1、id选择器：$('#div1') 21 //$(function () { 22 // $('#div1').css({ 'width': '100px', 'height': '100px', 'background-color': 'blue' }) 23 //}); 24 25 //2、标签选择器:$('p') 26 //$('p').css('color', 'red'); 27 28 //3、类选择器:选取所有应用了x类样式的那些元素 29 //$('.x').css('color', 'blue'); 30 31 //选取按钮并注册一个单机事件 32 $('#btnSetTxt').click(function () { 33 //选取页面上所有的p元素 34 //链式编程 35 $('p').text('我是p元素').css('border', '1px solid blue').css('width', '250px').mouseover(function () { 36 $(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor','') 37 }); //隐士迭代 38 }); 39 </script> 40 </body> 41 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <p class="test">test1</p> 9 <p class="test">test2</p> 10 <p class="test">test3</p> 11 <p>test4</p> 12 <p>test5</p> 13 <div class="test"> 14 15 </div> 16 <span class="test"> 17 content 18 </span> 19 <input type="button" id="btn" value="button" /> 20 <input type="text" /> 21 <script src="jquery-3.3.1.js"></script> 22 <script type="text/javascript"> 23 $(function () { 24 //$('.test').click(function () { 25 // alert($(this).text()); 26 //}) 27 28 //类选择器 29 //所有的应用test类样式的元素 30 //$('.test').css('backgroundColor', 'green'); 31 32 //标签+类选择器 33 //所有的应用了test类样式的p元素(标签+类选择器) 34 //$('p.test').css('backgroundColor', 'red'); 35 36 //组合选择器 37 //$('.test,#btn').css('backgroundColor', 'red'); 38 }); 39 </script> 40 </body> 41 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <span>我是body下的span</span> 9 <div> 10 <span>我是div下的span</span> 11 <p>00000000000<span>我是div下的p下的span</span></p> 12 </div> 13 <span>我是body下的span2</span> 14 <div id="div1"> 15 <p>11111111</p> 16 <p>22222222</p> 17 <p>33333333</p> 18 </div> 19 <p>44444444</p> 20 <p>55555555</p> 21 <p>66666666</p> 22 <script src="jquery-3.3.1.js"></script> 23 <script type="text/javascript"> 24 $(function () { 25 //层次选择器 26 27 //选取页面下的所有的p标签，背景色为红色 28 //$('p').css('backgroundColor', 'red'); 29 30 //选取所有div1下的所有元素，背景色为蓝色 31 //$('#div1 p').css('backgroundColor', 'blue'); 32 33 //选取页面上的所有的div下的p标签设置背景色为黄色 34 //$('div p').css('backgroundColor', 'yellow'); 35 36 //选取页面上的所有的span,背景色黄色 37 //$('span').css('backgroundColor', 'yellow'); 38 39 //选取body下的所有span 40 //$('body span').css('backgroundColor', 'yellow'); 41 42 //选取body下的直接子元素span 43 //后代选择器 44 $('body > span').css('backgroundColor', 'yellow'); 45 }); 46 </script> 47 </body> 48 </html>
五、层次选择器
1 1、后代，$('div li')获取div下的所有li元素(后代、子、子的子) 2 3 2、子元素，$('div>li')获取div下的直接li子元素【必须是直接子元素】 4 5 3、相邻元素1：$('.menuitem+div')获取样式名为menuitem之后的相邻的(紧接着的)第一个div元素(不常用)等同于$('.menuitem').next('div')；如果相邻的那个元素不是div，则不会继续向后找。 6 7 4、相邻元素2：$('.menuitem~div')获取样式名为menuitem之后所有的兄弟div元素，等同于$('.menuitem').nextAll('div')【nextAll('*')】或nextAll()表示后面的所有元素。 8 9 5、$('*')；选取所有的元素。 10 11 注：选择器表达式中的空格不能多也不能少。易错！过滤器与表单选择器时注意
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <div> 9 div1 10 </div> 11 <span>content</span> 12 <p>春眠不觉晓</p> 13 <p>春眠不觉晓</p> 14 <div> 15 div2 16 </div> 17 <p>春眠不觉晓</p> 18 <div> 19 div3 20 </div> 21 <p>春眠不觉晓</p> 22 <span>这是一个span</span> 23 <span>这是一个span</span> 24 <span>这是一个span</span> 25 <div> 26 <span>我会变色吗？</span> 27 </div> 28 <script src="jquery-3.3.1.js"></script> 29 <script type="text/javascript"> 30 $(function () { 31 //$('div + p').css('backgroundColor', 'red'); //+表示next()，后一个兄弟 32 //$('div ~ p').css('backgroundColor', 'red'); //~表示nextAll()，后面的所有兄弟 33 34 //下面两种写法互等 35 //$('div + span').css('backgroundColor', 'red'); //表示选择div后的下一个元素，并且该元素必须是span元素 36 //$('div').next('span').css('backgroundColor', 'red'); 37 38 //下面两种写法互等 39 //$('div ~ span').css('backgroundColor', 'red'); 40 //$('div').nextAll('span').css('backgroundColor', 'red'); 41 42 //互等 43 //$('div').next() <---> $('div + *').css('backgroundColor', 'red'); 44 45 //互等 46 //$('div').nextAll() <---> $('div ~ *').css('backgroundColor', 'red'); 47 48 //$('div').prev('span').css('backgroundColor', 'red'); //获取div的上一个元素,并且该兄弟元素必须是span 49 //$('div').prevAll('span').css('backgroundColor', 'red'); //获取div前面的所有兄弟 50 51 //获取当前元素的所有的兄弟元素 52 $('div').siblings('span'); 53 }); 54 </script> 55 </body> 56 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <ul> 9 <li>公牛</li> 10 <li>小牛</li> 11 <li>湖人</li> 12 <li>开拓者</li> 13 </ul> 14 <script src="jquery-3.3.1.js"></script> 15 <script type="text/javascript"> 16 $(function () { 17 //鼠标悬浮事件 18 $('ul li').mousemove(function () { 19 $(this).css('backgroundColor', 'red').siblings('li').css('backgroundColor', 'white'); 20 }).click(function () { 21 //单机事件 22 //有些方法是会破坏链式变成中返回的对象的，比如：next()、nextAll()、prev()、prevAll()、siblings()、无参数的:text()、val()、html() 23 //当链式编程的链被破坏的时候，以后的可以通过end()方法修复 24 $(this).prevAll().css('backgroundColor', 'yellow').end().nextAll().css('backgroundColor', 'blue'); 25 }); 26 //$('ul li').click(function () { 27 28 //}); 29 }); 30 </script> 31 </body> 32 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 td { 8 font-size:50px; 9 color:yellow; 10 cursor:pointer; 11 } 12 </style> 13 </head> 14 <body> 15 <p id="pscore"></p> 16 <table id="t1" border="0" cellpadding="0" cellspacing="0"> 17 <tr> 18 <td>☆</td> 19 <td>☆</td> 20 <td>☆</td> 21 <td>☆</td> 22 <td>☆</td> 23 </tr> 24 </table> 25 <script src="jquery-3.3.1.js"></script> 26 <script type="text/javascript"> 27 $(function () { 28 $('#t1 td').mouseover(function () { 29 $(this).text('★').prevAll().text('★').end().nextAll().text('☆'); 30 }).mouseout(function () { 31 //当鼠标移开的时候把所有的td都变成☆，将具有isclicked属性的td以及之前的td都变成★ 32 $('#t1 td').text('☆'); 33 $('#t1 td[isclicked=isclicked]').text('★').prevAll().text('★'); 34 }).click(function () { 35 //点击某个td的时候显示多少分 36 $(this).attr('isclicked', 'isclicked').siblings().removeAttr('isclicked'); //等价于setAttribute 37 $('#pscore').text($(this).attr('score')); 38 }).attr('score', function (index) { 39 return (index + 1) * 10; 40 }); 41 }); 42 </script> 43 </body> 44 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="全选" id="btnChkAll" /> 9 <input type="button" value="全不选" id="btnNoneChk" /> 10 <input type="button" value="反选" id="btnChkReverse" /> 11 <input type="checkbox" id="chkbox1" /> 12 <input type="checkbox" id="chkbox2" /> 13 <input type="checkbox" id="chkbox3" /> 14 <input type="checkbox" id="chkbox4" /> 15 <input type="checkbox" id="chkbox5" /> 16 <script src="jquery-3.3.1.js"></script> 17 <script type="text/javascript"> 18 $(function () { 19 //全选 20 $('#btnChkAll').click(function () { 21 //$('#btnChkAll[type="checkbox"]').prop('checked', true); 22 $('input[type="checkbox"]').prop('checked', true); 23 }); 24 //全不选 25 $('#btnNoneChk').click(function () { 26 $('input[type="checkbox"]').prop('checked', false); 27 }) 28 //反选 29 $('#btnChkReverse').click(function () { 30 //方式一:通过自己遍历的方式，设置反选 31 //$.each($('input[type="checkbox"]'), function (indexs, values) { 32 // $(values).prop('checked', !$(values).prop('checked')); 33 //}); 34 35 //方式二 36 $('input[type="checkbox"]').prop('checked', function (indexs, values) { 37 return !values; 38 //alert(indexs + ',' + values); 39 }) 40 }); 41 }) 42 </script> 43 </body> 44 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 .night { 8 background-color:black; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="button" value="button" id="btn" /> 14 <script src="jquery-3.3.1.js"></script> 15 <script type="text/javascript"> 16 $('#btn').click(function () { 17 //模拟开关灯效果 18 //方式一 19 //--------------------------- 20 //判断一个元素是否应用了某个样式 21 //if ($('body').hasClass('night')) { 22 // //移除该样式，不会移除其他的样式 23 // $('body').removeClass('night'); 24 //} else { 25 // $('body').addClass('night'); //追加新的样式，不会覆盖样式 26 //} 27 //----------------------------- 28 29 //方式二 30 $('body').toggleClass('night'); //切换类样式的应用于移除 31 }); 32 </script> 33 </body> 34 </html>
六、基本过滤选择器(:)
1 :first 选择第一个元素。$('div:first') 选取第一个<div> 2 3 :last 选择最后一个元素。$('div:last') 选取最后一个<div> 4 5 :not (选择器)选取不满足“选择器”条件的元素 6 例如:$('input:not(.myClass)') 选取样式名不是myClass的<input> 7 8 :even 选取索引是偶数的元素 9 10 :odd 选取索引是奇数的元素 11 12 :eq(索引序号) 选取索引等于 13 14 :gt(索引序号) 选取索引大于 15 16 :lt(索引序号) 选取索引小于
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="button" id="btn" /> 9 <h1>Alex</h1> 10 <h2>Alex</h2> 11 <h3>Alex</h3> 12 <h4>Alex</h4> 13 <h5>Alex</h5> 14 <h6>Alex</h6> 15 <p class="cls">p1</p> 16 <p>p2</p> 17 <p>p3</p> 18 <p>p4</p> 19 <p>p5</p> 20 <p class="cls">p6</p> 21 <p>p7</p> 22 <p>p8</p> 23 <p class="cls">p9</p> 24 <p>p10</p> 25 <script src="jquery-3.3.1.js"></script> 26 <script type="text/javascript"> 27 $(function () { 28 $('#btn').click(function () { 29 //1、选取索引的p标签，背景色红色 30 //$('p').css('backgroundColor', 'red'); 31 32 //2、选取第一个p标签，背景色红色 33 //$('p:first').css('backgroundColor', 'red'); 34 35 //3、选取最后一个p标签，背景色红色 36 //$('p:last').css('backgroundColor', 'red'); 37 38 //4、选取第二个p标签(索引从0开始)，背景色红色 39 //$('p:eq(1)').css('backgroundColor', 'red'); 40 41 //5、选取偶数 42 //$('p:even').css('backgroundColor', 'red'); 43 44 //6、选取奇数 45 //$('p:odd').css('backgroundColor', 'red'); 46 47 //7、索引大于2的，背景色红色 48 //$('p:gt(2)').css('backgroundColor', 'red'); 49 50 //8、索引小于5的，背景色红色 51 //$('p:lt(5)').css('backgroundColor', 'red'); 52 53 //9、选取页面上所有p标签，除了应用了cls类的那些标签 54 //$('p:not(.cls)').css('backgroundColor', 'red'); 55 56 //10、设置所有标题都变成红色 57 //$('H1').css('backgroundColor', 'red'); 58 //$('h1,h2').css('backgroundColor', 'red'); 59 //简写 60 //$(':header').css('backgroundColor', 'red'); 61 }); 62 }) 63 </script> 64 </body> 65 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="button" id="btn" /> 9 <table border="1" cellpadding="1" cellspacing="1"> 10 <thead>学生成绩</thead> 11 <tr> 12 <td>学生</td> 13 <td>成绩</td> 14 </tr> 15 <tr> 16 <td>张三</td> 17 <td>30</td> 18 </tr> 19 <tr> 20 <td>李四</td> 21 <td>40</td> 22 </tr> 23 <tr> 24 <td>王五</td> 25 <td>50</td> 26 </tr> 27 <tr> 28 <td>赵六</td> 29 <td>60</td> 30 </tr> 31 <tr> 32 <td>秦七</td> 33 <td>70</td> 34 </tr> 35 </table> 36 <script src="jquery-3.3.1.js"></script> 37 <script type="text/javascript"> 38 $(function () { 39 $('#btn').click(function () { 40 $('tr:first').css('font-size', 70); 41 $('tr:last').css('color', 'red'); 42 $('tr:gt(0):lt(2)').css('font-size', 50) 43 $('tr:odd:not(:last)').css('backgroundColor', 'red'); 44 }) 45 }) 46 </script> 47 </body> 48 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="button" id="btn" /> 9 <ul id="uone"> 10 <li>AAAAA</li> 11 <li>AAAAA</li> 12 <li>AAAAA</li> 13 <li>AAAAA</li> 14 <li>AAAAA</li> 15 <li>AAAAA</li> 16 <li>AAAAA</li> 17 <li>AAAAA</li> 18 </ul> 19 <script src="jquery-3.3.1.js"></script> 20 <script type="text/javascript"> 21 $('#btn').click(function () { 22 $('#uone li:lt(2)').css('color', 'red'); 23 }); 24 </script> 25 </body> 26 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="button" id="btn" /> 9 <table border="1" cellpadding="1" cellspacing="1"> 10 <tr> 11 <td>AA</td> 12 <td>BB</td> 13 <td>CC</td> 14 <td>DD</td> 15 <td>EE</td> 16 <td>FF</td> 17 </tr> 18 <tr> 19 <td>AA</td> 20 <td>BB</td> 21 <td>CC</td> 22 <td>DD</td> 23 <td>EE</td> 24 <td>FF</td> 25 </tr> 26 <tr> 27 <td>AA</td> 28 <td>BB</td> 29 <td>CC</td> 30 <td>DD</td> 31 <td>EE</td> 32 <td>FF</td> 33 </tr> 34 <tr> 35 <td>AA</td> 36 <td>BB</td> 37 <td>CC</td> 38 <td>DD</td> 39 <td>EE</td> 40 <td>FF</td> 41 </tr> 42 </table> 43 <script src="jquery-3.3.1.js"></script> 44 <script type="text/javascript"> 45 $(function () { 46 $('table tr').mouseover(function () { 47 $(this).css('backgroundColor', 'red').siblings('tr').css('backgroundColor','yellow'); 48 }); 49 }); 50 </script> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 td { 8 width:50px; 9 height:30px; 10 } 11 </style> 12 </head> 13 <body> 14 <input type="button" value="button" id="btn" /> 15 <table border="1" cellpadding="1" cellspacing="1" id="t1"> 16 <tr> 17 <td>AA</td> 18 <td>BB</td> 19 <td>CC</td> 20 <td>DD</td> 21 <td>EE</td> 22 <td>FF</td> 23 </tr> 24 <tr> 25 <td>AA</td> 26 <td>BB</td> 27 <td>CC</td> 28 <td>DD</td> 29 <td>EE</td> 30 <td>FF</td> 31 </tr> 32 <tr> 33 <td>AA</td> 34 <td>BB</td> 35 <td>CC</td> 36 <td>DD</td> 37 <td>EE</td> 38 <td>FF</td> 39 </tr> 40 <tr> 41 <td>AA</td> 42 <td>BB</td> 43 <td>CC</td> 44 <td>DD</td> 45 <td>EE</td> 46 <td>FF</td> 47 </tr> 48 </table> 49 <script src="jquery-3.3.1.js"></script> 50 <script type="text/javascript"> 51 $(function () { 52 $('#t1 tr').click(function () { 53 //清空其他颜色 54 $('#t1 td').css('backgroundColor', 'white'); 55 56 //$('td','#t1') <==>$('#t1 td') 57 //$('td', $(this)) 58 $('td:even', this).css('backgroundColor', 'red'); 59 $('td:odd', $(this)).css('backgroundColor', 'blue'); 60 }); 61 }); 62 </script> 63 </body> 64 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" id="btn1" value="select" /> 9 <select> 10 <option value="value">北京</option> 11 <option value="value">上海</option> 12 <option value="value">杭州</option> 13 </select> 14 <div id="div1"> 15 <input type="checkbox" /> 16 <input type="checkbox" /> 17 <input type="checkbox" checked /> 18 <input type="checkbox" /> 19 <input type="radio" /> 20 <input type="radio" /> 21 </div> 22 <form action="/" method="post" id="form1"> 23 <input type="text" name="name" value="" disabled="disabled" /> 24 <input type="text" name="name" value="" /> 25 <input type="text" name="name" value="" /> 26 <input type="button" name="name" value="button" /> 27 <input type="button" name="name" value="button" disabled="disabled" /> 28 <input type="button" name="name" value="button" /> 29 </form> 30 <hr /> 31 <input type="button" name="name" value="button" /> 32 <input type="button" name="name" value="button" disabled="disabled" /> 33 <input type="button" name="name" value="button" /> 34 <script src="jquery-3.3.1.js"></script> 35 <script type="text/javascript"> 36 //1、选取页面上所有被禁用的元素 37 //方式一 38 //$('*[disabled=disabled]').css('backgroundColor', 'red'); 39 40 //方式二 41 //$(':disabled').css('backgroundColor', 'red'); 42 43 //2、选取页面上所有没有被禁用的元素 44 //$(':enabled').css('backgroundColor', 'blue'); 45 46 //3、选取form下的没有禁用的元素 47 //$('#form1 :enabled').css('backgroundColor', 'blue'); 48 49 //4、选取form下的被禁用的元素 50 //$('#form1 :disabled').css('backgroundColor', 'red'); 51 52 //5、选取页面中所有被禁用的input元素 53 //$('input:disabled').css('backgroundColor', 'red'); 54 55 //6、选取页面中所有没有禁用的input元素 56 //$('input:enabled').css('backgroundColor', 'blue'); 57 58 //7、选取div1下所有checkbox被选中的元素 59 //$('#div1 :checked').css('backgroundColor', 'red'); 60 61 //8、选取div1下所有没被选中的元素 62 //$('#div1 :not(:checked)').css('backgroundColor', 'red'); 63 64 //9、获取选中的select 65 $('#btn1').click(function () { 66 $(':selected').text(function (index, v) { 67 return '*' + v + '*'; 68 }); 69 //设置没有被选中的 70 $('select :not(:selected)').text(function (index, v) { 71 return '=' + v + '='; 72 }); 73 }); 74 </script> 75 </body> 76 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="checkbox" name="name" value="tom" />tom 9 <input type="checkbox" name="name" value="jim" />jim 10 <input type="checkbox" name="name" value="Alex" />Alex 11 <p id="pmsg"> 12 13 </p> 14 <script src="jquery-3.3.1.js"></script> 15 <script type="text/javascript"> 16 $(function () { 17 //为每个checkbox注册单击事件 18 $('input[type=checkbox]').click(function () { 19 //1、获取当前所有被选中的checkbox 20 var chks = $('input[type=checkbox]:checked'); 21 //2、获取个数 22 var n = chks.length; 23 //3、获取每个checkbox的value 24 var names = []; 25 $.each(chks, function (k, chkObj) { 26 // 第一个索引，第二个对象 27 //方式一 28 names[k] = $(chkObj).val(); 29 //方式二 30 //names[names.length] = $(chkObj).val(); 31 }) 32 //4、把个数和值显示到p中 33 $('#pmsg').text('当前共选中' + n + '个,分别是' + names.toString()); 34 }); 35 }); 36 </script> 37 </body> 38 </html>
七、动态创建元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 #div1 { 8 width:300px; 9 height:300px; 10 border:1px solid blue; 11 } 12 </style> 13 </head> 14 <body> 15 <input type="button" value="button" id="btn1" /> 16 <div id="div1"> 17 18 </div> 19 <script src="jquery-3.3.1.js"></script> 20 <script type="text/javascript"> 21 $('#btn1').click(function () { 22 //1、动态创建一个超链接 23 //var aObj = $('<a href="http://www.baidu.com">百度一下</a>') 24 //2、将超链接加入到div中 25 //方式一 26 //$('#div1').append(aObj); 27 //方式二 28 //加到div后面 29 //$('#div1').after(aObj); 30 //加到div前面 31 //$('#div1').before(aObj); 32 33 //---------------------------- 34 //方式二动态创建元素 35 //div后面 36 //$('<a href="http://www.baidu.com">百度一下</a>').insertAfter('#div1') 37 //div前面 38 //$('<a href="http://www.baidu.com">百度一下</a>').insertBefore('#div1') 39 }); 40 </script> 41 </body> 42 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" id="btn1" value="button"/> 9 <script src="jquery-3.3.1.js"></script> 10 <script type="text/javascript"> 11 var websites = { '百度': 'http://www.baidu.com', '腾讯': 'http://www.qq.com' }; 12 $('#btn1').click(function () { 13 //1、动态创建表格 14 $('<table border="1" style="300px;height:300px;"></table>').appendTo('body'); 15 //2、动态创建表格中的行 16 for (var key in websites) { 17 $('<tr><td>' + key + '</td><td><a href="' + websites[key] + '">' + key + '</td></tr>').appendTo('table'); 18 } 19 }); 20 </script> 21 </body> 22 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <table border="1"> 9 <tr> 10 <td>毛毛</td> 11 <td>沙发~~</td> 12 </tr> 13 <tr> 14 <td>蛋蛋</td> 15 <td>板凳</td> 16 </tr> 17 </table> 18 昵称：<input type="text" name="name" value="" id="txtNickName" placeholder="请输入昵称！" /> 19 评论：<textarea cols="25" rows="5" id="txtContent"></textarea> 20 <input type="button" name="" value="提交" id="btn1" /> 21 <script src="jquery-3.3.1.js"></script> 22 <script type="text/javascript"> 23 $('#btn1').click(function () { 24 //1、获取昵称 25 var txtNickName = $('#txtNickName').val(); 26 //2、获取评论 27 var txtContent = $('#txtContent').val(); 28 //3、往table中追加 29 $('<tr><td>' + txtNickName + '</td><td>' + txtContent + '</td></tr>').appendTo('table'); 30 }); 31 </script> 32 </body> 33 </html>
八、 删除节点
1 empty()： 2 · 清空其元素下的所有子元素 3 · 内部实现：while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一样 4 remove(selector)
5 · 删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下: 6 · var lis = $('#ulSite li').remove(); 7 · $('#ulSite2').append(lis); 8 · 参数expr，是一个选择器，如果没有选择器，表示把选中的元素删掉，如果有选择器则表示在选中的元素中，再过滤出expr匹配的元素删除掉。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 select { 8 width:150px; 9 height:100px; 10 } 11 </style> 12 </head> 13 <body> 14 <select id="s1" multiple="multiple"> 15 <option>增加</option> 16 <option>删除</option> 17 <option>修改</option> 18 <option>保存</option> 19 </select> 20 <input type="button" value=">>" /> 21 <input type="button" value=">" /> 22 <input type="button" value="<" /> 23 <input type="button" value="<<" /> 24 <select id="s2" multiple="multiple"> 25 26 </select> 27 <script src="jquery-3.3.1.js"></script> 28 <script type="text/javascript"> 29 $(':button[value=">>"]').click(function () { 30 var sel1 = $('#s1 option').remove(); 31 $('#s2').append(sel1); 32 }); 33 $(':button[value=">"]').click(function () { 34 var sel1 = $('#s1 option:selected').remove(); 35 $('#s2').append(sel1); 36 }); 37 $(':button[value="<"]').click(function () { 38 var sel2 = $('#s2 option:selected').remove(); 39 $('#s1').append(sel2); 40 }); 41 $(':button[value="<<"]').click(function () { 42 var sel2 = $('#s2 option').remove(); 43 $('#s1').append(sel2); 44 }); 45 </script> 46 </body> 47 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="text" id="txt1" />+<input type="text" id="txt2" />=<input type="text" id="txt3" /> 9 <br /> 10 <input type="button" value="计算" id="btn1" /> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 $('#btn1').click(function () { 14 //1、获取文本框1的值 15 var txt1 = $('#txt1').val(); 16 //2、获取文本框2的值 17 var txt2 = $('#txt2').val(); 18 //3、计算并给文本框3赋值 19 var sum = parseInt(txt1) + parseInt(txt2) 20 $('#txt3').val(sum); 21 }); 22 </script> 23 </body> 24 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="请仔细阅读协议(5)" id="btn1" disabled="disabled" /> 9 <script src="jquery-3.3.1.js"></script> 10 <script type="text/javascript"> 11 var sec = 4; 12 $(function () { 13 var intervalId = setInterval(function () { 14 if (sec > 0) { 15 $('#btn1').val('请仔细阅读协议(' + sec + ')') 16 sec--; 17 } else { 18 //停止计时器 19 clearInterval(intervalId); 20 //方式一 21 //$('#btn1').val('同意!').removeAttr('disabled'); 22 //方式二 23 $('#btn1').val('同意!').prop('disabled', false); //注意，不能是字符串的false 24 } 25 }, 1000); 26 }) 27 </script> 28 </body> 29 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="text" /> 9 <input type="text" /> 10 <input type="text" /> 11 <script src="jquery-3.3.1.js"></script> 12 <script type="text/javascript"> 13 $(':text').blur(function () { 14 //1、校验 15 if ($(this).val().length == 0) { 16 //2、背景色变红 17 $(this).css('backgroundColor', 'red'); 18 } else { 19 $(this).css('backgroundColor', ''); 20 } 21 }) 22 </script> 23 </body> 24 </html>
九、节点的操作
· 替换节点 - $('br').replaceWith('<hr/>'); 用hr替换br - $('<br/>').replaceAll('hr'); 用br替换hr · 包裹节点 - wrap()：将所有元素逐个用指定标签包裹 $('b').wrap('<font color="red"></font>') 将所有粗体字红色显示 结果:<font color="red"><b></b></font> - wrapInner() 在内部围绕
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="替换" id="btn" /> 9 <p>ppppppppp</p> 10 <hr /> 11 <p>ppppppppp</p> 12 <hr /> 13 <p>ppppppppp</p> 14 <hr /> 15 <p>ppppppppp</p> 16 <script src="jquery-3.3.1.js"></script> 17 <script type="text/javascript"> 18 $('#btn').click(function () { 19 //先使用选择器选择对应的元素，然后使用指定的元素对象来替换选择到的元素 20 //$('hr').replaceWith('<a href="http://www.baidu.com">百度一下</a>') 21 22 //首先动态创建一个元素，然后进行替换 23 $('<font color="red">====</font>').replaceAll('hr') 24 }) 25 </script> 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="包裹节点" id="btn" /> 9 <p>pppppppp</p> 10 <input type="text" /> 11 <p>pppppppp</p> 12 <p>pppppppp</p> 13 <p>pppppppp</p> 14 <script src="jquery-3.3.1.js"></script> 15 <script type="text/javascript"> 16 $('#btn').click(function () { 17 //包裹外边 18 //$('p').wrap('<font color="red"></font>'); 19 //包裹里面 20 //$('p').wrapInner('<font color="red"></font>') 21 //包裹所有的:所有的p标签使用一个标签来包裹 22 $('p').wrapAll('<font color="red"></font>'); 23 }); 24 </script> 25 </body> 26 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="button" id="btn" /> 9 <p> 10 性别: 11 <input type="radio" name="gender" value="male" />男 12 <input type="radio" name="gender" value="female" />女 13 <input type="radio" name="gender" value="secret" />保密 14 </p> 15 <p> 16 婚否: 17 <input type="radio" name="hf" value="yihun" />已婚 18 <input type="radio" name="hf" value="weihun" />未婚 19 <input type="radio" name="hf" value="liyi" />离异 20 </p> 21 <p> 22 <input type="checkbox" name="hobby" value="dlq" />打篮球 23 <input type="checkbox" name="hobby" value="tzq" />踢足球 24 <input type="checkbox" name="hobby" value="ppq" />乒乓球 25 </p> 26 <script src="jquery-3.3.1.js"></script> 27 <script type="text/javascript"> 28 $('#btn').click(function () { 29 //要求如下： 30 // 保密、已婚、打篮球、踢足球被选中 31 //方式一 32 //$(':radio[value="secret"]').prop("checked", 'true'); 33 //$(':radio[value="yihun"]').prop("checked", 'true'); 34 //$(':checkbox[value="dlq"]').prop('checked', 'true'); 35 //$(':checkbox[value="tzq"]').prop('checked', 'true'); 36 //方式二 37 $(':radio').val(['secret', 'yihun']); 38 $(':checkbox').val(['dlq', 'tzq']); 39 }); 40 </script> 41 </body> 42 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 #div1 { 8 width:100px; 9 height:100px; 10 background-color:red; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="div1"> 16 17 </div> 18 <input type="text" id="txt1" /> 19 <script src="jquery-3.3.1.js"></script> 20 <script type="text/javascript"> 21 //注册一个鼠标移动事件 22 $('#div1').mousemove(function (evt) { 23 //在jQuery中使用事件对象，直接在事件处理函数中加一个evt参数即可 24 //并且该事件对象是经过jQuery封装后的事件对象 25 var x, y; 26 var e = evt || window.event; 27 x = e.pageX; 28 y = e.pageY; 29 document.title = x + ',' + y; 30 }).mousedown(function (evt) { 31 //获取鼠标按下的键，1：左键；2：滚轮；3：右键 32 alert(evt.which); 33 }); 34 $('#txt1').keydown(function (evt) { 35 //相当于window.keyCode键盘码 36 alert(evt.which); 37 }); 38 </script> 39 </body> 40 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <p id="p1">ppppppp<span id="s1">sssss</span>ppp 9 </p> 10 <script src="jquery-3.3.1.js"></script> 11 <script type="text/javascript"> 12 $('#p1').click(function () { 13 alert('p1'); 14 }); 15 $('#s1').click(function (evt) { 16 alert('s1'); 17 //阻止事件冒泡 18 //DOM取消事件冒泡：window.event.cancelBubble=true; 19 evt.stopPropagation(); 20 }); 21 </script> 22 </body> 23 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 #div1 { 8 width:300px; 9 height:300px; 10 background-color:blue; 11 } 12 </style> 13 </head> 14 <body> 15 <input type="button" value="show" id="btnShow" /> 16 <input type="button" value="hide" id="btnHide" /> 17 <input type="button" value="show/hide" id="btn" /> 18 <div id="div1"> 19 20 </div> 21 <script src="jquery-3.3.1.js"></script> 22 <script type="text/javascript"> 23 $('#btnShow').click(function () { 24 //$('#div1').stop().show(3000); 25 //$('#div1').stop().slideDown(3000); 26 //$('#div1').stop().fadeIn(3000); 27 //$('#div1').stop().fadeTo(3000, 0.3); 28 }); 29 $('#btnHide').click(function () { 30 //$('#div1').stop().hide(3000); 31 //$('#div1').stop().slideUp(3000); 32 //$('#div1').stop().fadeOut(3000); 33 }); 34 $('#btn').click(function () { 35 //$('#div1').stop().toggle(2000); 36 //$('#div1').stop().fadeToggle(2000); 37 $('#div1').stop().slideToggle(2000); 38 }); 39 </script> 40 </body> 41 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 #img1 { 8 display:none; 9 position:absolute; 10 } 11 </style> 12 </head> 13 <body> 14 <input type="button" value="显示消息" id="btn" /> 15 <img src="2.jpg" alt="Alternate Text" id="img1" /> 16 <script src="jquery-3.3.1.js"></script> 17 <script type="text/javascript"> 18 $('#btn').click(function () { 19 //$('#img1').css({ 'right': 0, 'bottom': 0 }).show(2000); 20 //$('#img1').css({ 'right': 0, 'bottom': 0 }).slideDown(2000); 21 $('#img1').css({ 'right': 0, 'bottom': 0 }).fadeIn(2000); 22 }); 23 </script> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 #qqTab { 8 height:500px; 9 width:300px; 10 border:1px solid blue; 11 } 12 #qqTab ul { 13 padding:0; 14 margin:0; 15 list-style-type:none; 16 } 17 p { 18 margin:0; 19 text-align:center; 20 background-color:aqua; 21 margin-bottom:2px; 22 } 23 #uGroup ul li { 24 background-color:chartreuse; 25 margin-top:2px; 26 margin-bottom:2px; 27 } 28 li, p { 29 cursor:pointer; 30 } 31 #uGroup li ul { 32 display:none; 33 } 34 </style> 35 </head> 36 <body> 37 <!--bgsound:仅仅支持IE--> 38 <bgsound id="snd" loop="0" src="天空之城.mp3"></bgsound> 39 <div id="qqTab"> 40 <ul id="uGroup"> 41 <li> 42 <p> 43 小学同学 44 </p> 45 <ul> 46 <li>小猫</li> 47 <li>小猫2</li> 48 </ul> 49 </li> 50 <li> 51 <p> 52 初中同学 53 </p> 54 <ul> 55 <li>小狗</li> 56 <li>小狗2</li> 57 </ul> 58 </li> 59 <li> 60 <p> 61 高中同学 62 </p> 63 <ul> 64 <li>小猪</li> 65 <li>小猪2</li> 66 </ul> 67 </li> 68 </ul> 69 </div> 70 <script src="jquery-3.3.1.js"></script> 71 <script type="text/javascript"> 72 $('#uGroup li p').click(function () { 73 //$(this).next('ul').toggle(1500); 74 $(this).next('ul').slideToggle(1500); 75 }); 76 </script> 77 </body> 78 </html>
十、animate动画(自定义)
1 - 滑动效果 2 slideDown()、slideUp()、slideToggle() 3 4 - 淡入淡出(透明) 5 fadeIn()、fadeOut()、fadeToggle()、fadeTo() 6 7 - 自定义动画 8 animate({样式},speed) 9 部分样式不支持:backgroundColor、color、borderStyle...... 10 使用animate设置对象位置的时候要确保position的值为absolute或relative 11 停止动画正在执行动画的元素:stop()(*),带参数的stop(true,false); 12 动画队列:animate().animate().animate()....;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 #div1 { 8 width:20px; 9 height:20px; 10 border:1px solid blue; 11 background-color:orange; 12 position:absolute; 13 left:100px; 14 top:100px; 15 } 16 </style> 17 </head> 18 <body> 19 <input type="button" value="button" id="btnStart" /> 20 <input type="button" value="stop" id="btnStop" /> 21 <div id="div1"> 22 23 </div> 24 <script src="jquery-3.3.1.js"></script> 25 <script type="text/javascript"> 26 //开始 27 $('#btnStart').click(function () { 28 $('#div1').animate({ '100px', height: '100px', left: '200px', top: '150px' }, 1000) 29 .animate({ '10px', height: '10px', left: '100px', top: '100px' }, 1000) 30 .animate({ '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000) 31 .animate({ '10px', height: '10px', left: '100px', top: '100px' }, 1000) 32 .animate({ '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000) 33 .animate({ '10px', height: '10px', left: '100px', top: '100px' }, 1000) 34 .animate({ '+=100px', height: '+=100px', left: '200px', top: '150px' }, 1000); 35 }); 36 //停止 37 $('#btnStop').click(function () { 38 //仅仅停止当前运行的动画，后面的动画不会停止，继续执行 39 //$(':animated').stop(); 40 //停止当前动画，并且清除后面的动画队列（动画停止） 41 //$(':animated').stop(true); 42 //停止当前动画，并且将当前元素设置到当前动画执行完毕的位置 43 $(':animated').stop(true, true); 44 }); 45 </script> 46 </body> 47 </html>
十一、 jQuery插件一(cookie)
下载地址：http://plugins.jquery.com/cookie/
注：必须先引入jQuery，再引用cookie。
1 什么是cookie：Cookie就是保存在浏览器上的内容，用户在本次浏览页面的时候向Cookie中保存文本内容，下次再访问页面的时候就可以取出来上次保存的内容，这样就可以得到上次“记忆”的内容。Cookie不是jQuery持有的概念，只不过jQueryCookie把他简化的更好用罢了。Cookie就是存储在浏览器里的一些数据 2 Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的，如果禁用了Cookie就不可以使用了， 3 Cookie的几个特征： 4 1、Cookie与域名相关 5 2、一个域名能写入的Cookie总尺寸是有限制的
1 使用方法 2 1、设置值，$.cookie('键','值')。cookie中保存的值都是文本 3 2、读取值，var v = $.cookie('键') 4 3、设置有效期；$.cookie('键','值',{expires:7,path:'/',domain:'www.baidu.com',secure:true}); 5 expires:表示浏览器保存cookie几天 6 options参数用那个设置那个。path：网页有效路径;domain：域名;secure:传输cookie时候，是否需要一个安全协议
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 #pmsg { 8 border:1px solid blue; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="text" id="userName" /> 14 <input type="button" value="提交" id="btnSubmit" /> 15 <p id="pmsg"> 16 欢迎，游客！~ 17 </p> 18 <script src="jquery-3.3.1.js"></script> 19 <script src="jquery.cookie.js"></script> 20 <script type="text/javascript"> 21 $(function () { 22 //------------先获取Cookie，若Cookie有值，则放到P标签中，否则，显示游客----------------------- 23 if ($.cookie('userName')) { 24 $('#pmsg').text('欢迎:' + $.cookie('userName')); 25 } else { 26 $('#pmsg').text('欢迎,游客~'); 27 } 28 $('#btnSubmit').click(function () { 29 //1、获取文本框的值 30 var user_name = $('#userName').val(); 31 //2、写到Cookie中 32 //当写入Cookie的时候，若不设置有效期，则为进程内“Cookie” 33 //3、设置Cookie有效期;{ expires: 7, path: '/', domain: 'jquery.com', secure: true } 34 $.cookie('userName', user_name, { expires: 7, path: '/', secure: false }); 35 alert('写入成功!'); 36 }); 37 }); 38 </script> 39 </body> 40 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <p id="p1"></p> 9 <script src="jquery-3.3.1.js"></script> 10 <script src="jquery.cookie.js"></script> 11 <script type="text/javascript"> 12 //1、读取cookie，如果有显示到p中 13 //2、无论这次是否读取到了cookie，那么这次都要将新的时间写入cookie 14 var now_time = $.cookie('nowtime'); 15 var date = new Date(); 16 if (now_time) { 17 $('#p1').text('最后一次刷新时间:' + now_time) 18 $.cookie('nowtime', date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(), { expires: 7, path: '/', secure: false }) 19 } else { 20 $.cookie('nowtime', date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(), { expires: 7, path: '/', secure: false }) 21 } 22 </script> 23 </body> 24 </html>
十二、jQuery插件二(jqzoom)
下载地址
链接：https://pan.baidu.com/s/1-fHzkr49n4XXxiLa91vHRA
提取码：r74f
Demo如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="jquery.js"></script> <!--第一步：引入jquery（注：jqzoom与jquery版本要对应）--> 7 <script src="jquery.jqzoom.js"></script> <!--第二步：引入jqzoom--> 8 <link href="jqzoom.css" rel="stylesheet" type="text/css" /> <!--第三步：引入jqzoom样式--> 9 </head> 10 <body> 11 <div class="jqzoom"><img src="timg2.jpg" alt="shoe" jqimg="timg1.jpg"></div> <!--第四步(timg2小图片；timg1大图片)--> 12 13 <script type="text/javascript"> 14 $(function () { 15 $('.jqzoom').jqueryzoom({ 16 xzoom: 400, //放大图片的X轴(默认为：200) 17 yzoom: 400, //方法图片的Y轴(默认为：200) 18 offset: 40, //偏移量(默认为：10) 19 position: "right" //默认为right 20 }); 21 }); 22 </script> 23 </body> 24 </html>
十三、 jQuery插件二(jquery ui)
下载地址
链接：https://pan.baidu.com/s/1NnIRp39bK9Sx2Y4G86qI9A
提取码：8yv2
中文官网地址：http://www.jqueryui.org.cn/
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 7 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 8 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 9 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> 10 <script> 11 $(function () { 12 $("#datepicker").datepicker({ 13 showOtherMonths: true, 14 selectOtherMonths: true 15 }); 16 }); 17 </script> 18 </head> 19 <body> 20 <p>日期：<input type="text" id="datepicker"></p> 21 </body> 22 </html>
其他的jquery ui请参考官网！~~~
十四、编写一个插件
1 1、为对象编写插件 2 $.fn.extend{fnName:function(){}}; 3 4 2、编写全局函数插件 5 6 3、插件命名：jquery.xxx.js
1 ; (function ($) { 2 $.fn.extend({ 3 setTableStyle: function () { 4 // 在当前函数中，this表示的就是调用当前函数的对象，即表格对象 5 $('tr', this).mouseover(function () { 6 $(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor', 'blue'); 7 }); 8 }, 9 clearTableStyle: function () { 10 $('tr', this).unbind(); //移除所有事件 11 } 12 }) 13 })(jQuery);
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>我的第一个jquery插件</title> 6 </head> 7 <body> 8 <table id="t1" border="1" cellpadding="2" cellspacing="2"> 9 <tr> 10 <td>11</td> 11 <td>11</td> 12 <td>11</td> 13 </tr> 14 <tr> 15 <td>22</td> 16 <td>22</td> 17 <td>22</td> 18 </tr> 19 <tr> 20 <td>33</td> 21 <td>33</td> 22 <td>33</td> 23 </tr> 24 <tr> 25 <td>44</td> 26 <td>44</td> 27 <td>44</td> 28 </tr> 29 <tr> 30 <td>55</td> 31 <td>55</td> 32 <td>55</td> 33 </tr> 34 </table> 35 <script src="jquery-3.3.1.js"></script> 36 <script src="jquery.tablestyle.js"></script> 37 <script type="text/javascript"> 38 $('#t1').setTableStyle(); 39 </script> 40 </body> 41 </html>
十五、完整练习项目地址
链接：https://pan.baidu.com/s/1UWO_IpnJItHjIy43-LtKzA
提取码：26ir