链式编程 什么时候可以使用链式编程
当jQuery对象调用某个方法 返回值也是一个jQuery对象 那么就可以继续点出jQuery方法 在使用链式编程的时候 一定要注意 返回值的问题
$("div").width(100).width() //不会报错 正常显示 $("div").width(100).width().height(200) //报错 $("div").width(100).height(200) //不会报错end方法 有时候 jQuery方法的返回值也是一个jQuery对象 但是 并不是想要操作的那个jQuery对象，所以链式编程就进行不下去了，如果一定要使用链式编程 可以使用end方法 end() 将jQuery对象恢复到上一次的状态 并且返回匹配元素之前的状态
$(this).text("★").prevAll().text("★").end().nextAll().text("✩");end方法也是jQuery方法 也必须使用jQuery对象才可以点出来
$("div").width(100).width().end().height(200) //报错jQuery中的显示迭代 隐式迭代会给所有的元素都加上属性，不能分别给元素设置属性
原生js的方法 使用for循环遍历
for(var i =0; i<$lis.length;i++){ // $lis[i].style.opacity=(i+1)/10 //原生的方法 $($lis[i]).css("opacity",(i+1)/10); }jquery自己的迭代方式 each()
jQuery对象.each() $lis.each(function(index,ele){ // console.log(index,ele); console.log(this); // $(ele).css("opacity",(index+1)/10); $(this).css("opacity",(index+1)/10); }) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #ul{ list-style: none; padding: 0; } li{ float: left; width: 200px; height: 200px; background-color: yellow; margin: 20px; text-align: center; line-height: 200px; } </style> </head> <body> <ul id="ul"> <li>我是li1标签</li> <li>我是li2标签</li> <li>我是li3标签</li> <li>我是li4标签</li> <li>我是li5标签</li> <li>我是li6标签</li> <li>我是li7标签</li> <li>我是li8标签</li> <li>我是li9标签</li> <li>我是li10标签</li> </ul> </body> <script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //需求 找到li标签 分别给他们设置不同的透明度 var $lis=$("li"); // $lis.css("opacity",0.3); //这个是隐式迭代 给所有的li标签都加上了透明度 //但是隐式迭代满足不了需求 // for(var i =0; i<$lis.length;i++){ // // $lis[i].style.opacity=(i+1)/10 //原生的方法 // $($lis[i]).css("opacity",(i+1)/10); // } // jquery自己的迭代方式 each() $lis.each(function(index,ele){ // console.log(index,ele); console.log(this); // $(ele).css("opacity",(index+1)/10); $(this).css("opacity",(index+1)/10); }) }) </script> </html>