jQuery應(yīng)用之jQuery鏈用法實(shí)例
本文實(shí)例講述了jQuery應(yīng)用之jQuery鏈用法。分享給大家供大家參考。具體分析如下：
很多時候我們可以將jQuery語句鏈接在一起，這不僅可以縮短代碼長度，而且很多時候可以實(shí)現(xiàn)特殊的效果。先看如下代碼：
$(function() {
$("div").addClass("css1").filter(function(index) {
return index == 1 || $(this).attr("id") == "fourth";
}).addClass("css2");
});
</script>
以上代碼為整個<div>列表增加樣式css1,然后再進(jìn)行篩選，再為篩選的元素單獨(dú)增加css2樣式。如果不采用jQuery，實(shí)現(xiàn)上述的效果將非常麻煩。
在jQuery鏈中，后面的操作都是以前面的操作結(jié)果為對象的，如果希望操作對象為上一步的對象，則可以使用end()方法。
用end()方法來控制jQuery鏈。
$(function() {
$("p").find("span").addClass("css1").end().addClass("css2");
});
</script>
<p>Hello,<span>how</span>are you?</p>
<span>very nice,</span>Thank you.
以上代碼在<p>中搜索<span>標(biāo)記，然后添加風(fēng)格css1，利用end()方法將操作對象往回設(shè)置為$("p")并添加樣式風(fēng)格css2.
另外，還可以通過andSelf()將前面兩個對象進(jìn)行組合后共同處理。
用andSelf()方法控制jQuery鏈。
$(function() {
$("div").find("p").addClass("css1").andSelf().addClass("css2");
});
</script>
<div>
<p>第一段</p>
<p>第二段</p>
</div>
以上jQuery代碼首先在<div>中搜索<p>標(biāo)記，添加css1，這個風(fēng)格只對<p>標(biāo)記有效，然后利用andSelf()方法將<div>和<p>組合在一起，然后添加樣式css2,這個風(fēng)格對<div>和<p>均有效。
效果：
<p class="css1 css2">第一段</p>
<p class="css1 css2">第二段</p>
</div>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
- 使用JavaScript鏈?zhǔn)骄幊虒?shí)現(xiàn)模擬Jquery函數(shù)
- jquery鏈?zhǔn)讲僮鞯恼_使用方法
- jQuery鏈?zhǔn)讲僮魅绾螌?shí)現(xiàn)以及為什么要用鏈?zhǔn)讲僮?/a>
- 淺析jQuery的鏈?zhǔn)秸{(diào)用之each函數(shù)
- jQuery中ready事件用法實(shí)例
- jQuery中offsetParent()方法用法實(shí)例
- jQuery中outerWidth()方法用法實(shí)例
- jQuery中outerHeight()方法用法實(shí)例
- jQuery中innerWidth()方法用法實(shí)例
- jQuery中innerHeight()方法用法實(shí)例
相關(guān)文章
jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色,比較實(shí)用，也很簡單，使用到了一個resize事件需要的朋友可以參考下2014-10-10
本文給大家分享的是一款基于jQuery制作的多功能的輪播幻燈插件，支持多種配置，十分的實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
jQuery Ajax 加載數(shù)據(jù)時異步顯示加載動畫
這篇文章主要介紹了jQuery Ajax 加載數(shù)據(jù)時異步顯示加載動畫的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery樹插件zTree的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery基本篩選選擇器實(shí)例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這里給大家分享的是個人編寫的2個jQuery特效，非常簡單實(shí)用，推薦給大家，希望對大家能有所幫助。2015-02-02
基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能
基于jQuery的讓textarea支持Ctrl+Z步步撤銷功能，需要的朋友可以參考下。2011-10-10
jQuery對象數(shù)據(jù)緩存Cache原理及jQuery.data方法區(qū)別介紹
jQuery.data(..)來實(shí)現(xiàn)數(shù)據(jù)緩存，但有兩個用戶經(jīng)常使用的data([key],[value])和jQuery.data(element,[key],[value])，接下來為大家介紹下他們的區(qū)別，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要為大家分享了Jquery日歷插件e-calendar升級版,e-calendar是一個jQuery插件,創(chuàng)建一個事件日歷它很容易使用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片簡單輪播功能,結(jié)合實(shí)例形式分析了jQuery基于定時器與事件響應(yīng)的頁面元素屬性動態(tài)操作實(shí)現(xiàn)圖片輪播功能相關(guān)操作技巧,需要的朋友可以參考下2018-08-08