jQuery——链式编程与隐式迭代
Posted 站错队了同志
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery——链式编程与隐式迭代相关的知识，希望对你有一定的参考价值。
链式编程
1、原理：return this;
2、通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
3、end()：结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.11.1.js"></script> <style> ul { list-style: none; } li { width: 50px; background-color: #cccccc; margin: 10px; } </style> <script> $(function () { $("button").click(function () { //end()会过滤一次返回$("li").eq(3)的对象 $("li").eq(3).css("height", 50).prevAll().css("height", 100).end().css("backgroundColor", "red"); }); }); </script> </head> <body> <button>end()</button> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
隐式迭代
1、含义：方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。如果获取的是多元素的值，大部分情况下返回的是第一个元素的值
2、优点：jQuery这一特性相比较js而言，在注册事件上很方便，无需循环注册事件
3、each()：函数遍历；虽然有隐式迭代，但是对每个元素做不同的处理，这时候就用到了each方法
//参数一表示当前元素在所有匹配元素中的索引号 //参数二表示当前元素（DOM对象） //element是一个js对象，需要转换成jquery对象 $(selector).each(function(index,element){});
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.11.1.js"></script> <style> span { font-size: 50px; cursor: pointer; } </style> <script> $(function () { //点到谁 谁就会变成实心的 // $("span").mouseenter(function () { $(this).text("★").prevAll().text("★").end().nextAll().text("☆"); }); $("div").mouseleave(function () { $("span").each(function (index, ele) { if ($(ele).attr("lighted") == 1) { $(ele).text("★"); } else { $(ele).text("☆"); } }); }); $("span").click(function () { $(this).attr("lighted", 1); $(this).prevAll().attr("lighted", 1); $(this).nextAll().attr("lighted", 0); }); }); </script> </head> <body> <div> <span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span> </div> </body> </html>
以上是关于jQuery——链式编程与隐式迭代的主要内容，如果未能解决你的问题，请参考以下文章