jQuery中的siblings()是什么意思(推薦)

更新時間：2016年12月29日 14:28:29 作者：yangzailu1990

siblings()方法返回被選元素的所有同級元素。同級元素是共享相同父元素的元素。但是很多朋友不清楚jQuery中的siblings()是什么意思，今天小編給大家介紹下

定義和用法

jQuery siblings() 方法返回被選元素的所有同胞元素，并且可以使用可選參數(shù)來過濾對同胞元素的搜索。

實(shí)例演示：點(diǎn)擊某個li標(biāo)簽后將其設(shè)置為紅色，而其所有同胞元素去除紅色樣式。

1.創(chuàng)建Html元素

<div class="box">
  <span>點(diǎn)擊li元素設(shè)置紅色并去除其余所有同胞元素的紅色樣式：</span>
  <div class="content">
    <li>栗子</li>
    <li>李子</li>
    <li>梨子</li>
    <li>荔枝</li>
  </div>  
</div>

2.設(shè)置css樣式：

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
li{padding:10px;}
.red{color:red;}

3.編寫jquery代碼

$(function(){
  $("li").click(function() {
    $(this).addClass('red');  // 設(shè)置被點(diǎn)擊元素為紅色
    $(this).siblings('li').removeClass('red'); // 去除所有同胞元素的紅色樣式
  })
})

4.觀察效果：點(diǎn)擊李子，李子呈紅色，其余l(xiāng)i元素正常

以上所述是小編給大家介紹的jQuery中的siblings()是什么意思(推薦)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

使用jQuery獲取data-的自定義屬性
本文給大家分享的是使用jQuery制作的組件，實(shí)現(xiàn)獲取data-自定義屬性，并附上使用方法，非常的實(shí)用，有需要的小伙伴可以參考下
2015-11-11
jquery 常用操作整理基礎(chǔ)入門篇
jQuery是繼prototype之后又一個優(yōu)秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。
2009-10-10
EasySlider 基于jQuery功能強(qiáng)大簡單易用的滑動門插件
Easy Slider 是一個滑動門插件，支持任何圖片或內(nèi)容，當(dāng)點(diǎn)擊時實(shí)現(xiàn)橫向或縱向滑動。它擁有一系列豐富的參數(shù)設(shè)置，可通過CSS來進(jìn)行完全的控制。
2010-06-06
基于jQuery的圖片剪切插件
網(wǎng)頁應(yīng)用程序需要對豐富的內(nèi)容提供簡單易用的上傳和操作方式，但是這樣會給只有少數(shù)圖片處理技能的用戶造成很大的困難。圖片剪切是最基本的圖片處理技術(shù)，這個詳細(xì)的教程將包括在jQuery庫上創(chuàng)建此參加的每一個步驟。
2011-08-08
JQuery animate動畫應(yīng)用示例
這篇文章主要介紹了JQuery animate動畫應(yīng)用,結(jié)合具體實(shí)例形式分析了jQuery使用animate動畫實(shí)現(xiàn)選項(xiàng)卡及樣式動態(tài)變化相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
addEventListener—jQuery的事件監(jiān)聽方法
在Javascript中，事件監(jiān)聽是非常重要的，通過事件監(jiān)聽，我們可以在用戶執(zhí)行某些操作時觸發(fā)相應(yīng)的處理程序。最初，Javascript監(jiān)聽事件的方式是addEvent。addEvent()比較麻煩，所以jQuery為我們提供了一個更為便捷的事件監(jiān)聽方法：addEventListener。
2023-06-06
jquery mobile實(shí)現(xiàn)撥打電話功能的幾種方法
在做一個便民服務(wù)電話，用到移動web中列出的電話，點(diǎn)擊需要實(shí)現(xiàn)調(diào)用通訊錄，撥打電話功能，有需要的朋友可以參考一下
2013-08-08
來自國外的30個基于jquery的Web下拉菜單
來自國外的30個基于jquery的Web下拉菜單，需要的朋友可以參考學(xué)習(xí)下
2012-06-06
jQuery基于閉包實(shí)現(xiàn)的顯示與隱藏div功能示例
這篇文章主要介紹了jQuery基于閉包實(shí)現(xiàn)的顯示與隱藏div功能,結(jié)合實(shí)例形式分析了jQuery使用閉包實(shí)現(xiàn)的div顯示及隱藏相關(guān)判定與函數(shù)使用技巧,需要的朋友可以參考下
2018-06-06
Jquery中val()表單取值賦值的實(shí)例代碼
在jquery中給表單取值或賦值的方法我們只要簡單的$(\'表單ID\').val()即可實(shí)現(xiàn)取值了，如果賦值我們可使用$(\'表單ID\').val(\'內(nèi)容\')即可實(shí)現(xiàn)了
2013-08-08