jQuery链式编程

链式编程

多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程

.html(‘val’).text(‘val’).css()链式编程，隐式迭代

链式编程注意：$(‘div’).html(‘设置值’).val(‘设置值’);这样可以，但是$(‘div’).html().text()这样是不对的，因为获取值时返回的是获取的字符串而不是对象本身所以不能链式编程。

 

案例：

页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，
当点击某个li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝。自
己不变色。注意：nextAll()、prevAll()等方法返回值是一个元素集合，这里链式编程
时要想清楚当前返回的值是什么。

 

获得兄弟元素的几个方法：

next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）
nextAll();//当前元素之后的所有兄弟元素
prev();//当前元素之前的紧邻着的兄弟元素（上一个）
prevAll();//当前元素之前的所有兄弟元素
siblings();//当前元素的所有兄弟元素

以下代码为主要代码：

$("ul>li").mouseenter(function () {
　　$(this).css("backgroundColor","red").siblings().css("backgroundColor","");
　　}).click(function () {
　　　　$(this).prevAll().css("backgroundColor","yellow");
　　$(this).nextAll().css("backgroundColor","blue");
　　}).mouseleave(function () {
　　$(this).css("backgroundColor","");
});

显示效果：

 

 

 

特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢