鏈式編程 多行代碼合併成一行代碼,前提要認清此行代碼返回的是不是對象.是對象才能進行鏈式編程 .html(‘val’).text(‘val’).css()鏈式編程,隱式迭代 鏈式編程註意:$(‘div’).html(‘設置值’).val(‘設置值’);這樣可以,但是$(‘div’).html().t ...
鏈式編程
多行代碼合併成一行代碼,前提要認清此行代碼返回的是不是對象.是對象才能進行鏈式編程
.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",""); });
顯示效果:
特此聲明:如需轉載請註明出處,如有疑問請及時提出以便於改正,如有侵權,聯繫刪除,謝謝