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