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","");
});

顯示效果：

 

 

 

特此聲明：如需轉載請注明出處，如有疑問請及時提出以便於改正，如有侵權，聯系刪除，謝謝