1 從集合中通過指定的序號獲取元素

html：

?

View Code <div>
????<p>0</p>
????<p>1</p>
????<p>2</p>
????<p>3</p>
????<p>4</p>
????<p>5</p>
????<p>6</p>
????<p>7</p>
????</div>

?JS

?

View Code <script?type="text/javascript">
??????jQuery(function(){
????????$("p").eq(2).css("color","red");
????????$("p").eq(3).css("color","red");
??????})
???</script>

?

2 獲取指定條件一致和指定范圍的元素

html:

?

View Code ??<div>
????<p>0</p>
????<p>1</p>
????<p?class="center">2</p>
????<p?class="center">3</p>
????<p>4</p>
????<p>5</p>
????<p>6</p>
????<p>7</p>
????</div>

?

JS

?

View Code ??<script?type="text/javascript">
??????jQuery(function(){
??????$("p").filter('.center').css("color","red");?
??????})
??????$(function(){
????????$("p").slice(5,7).css("color","yellow");
??????})
???</script>

?

3 獲取與條件表達(dá)式一致的元素

html:

?

View Code <div>
????<p>0</p>
????<p>1</p>
????<p?class="center">2</p>
????<p?class="center">3</p>
????<p>4</p>
????<p?class="aa">5</p>
????<p>6</p>
????<p>7</p>
????</div>

js

?

View Code <script?type="text/javascript">
??????jQuery(function(){
????????$("p").each(function(){
???????????switch(true){
???????????????case?$(this).is(".center"):
????????????????????$(this).css("color","red");
????????????????????break;
???????????????case?$(this).is(".aa"):
????????????????????$(this).css("color","yellow");
????????????????????break;
???????????}
?????????
????????})
??????})
???</script>

?

4 獲取元素的上一個元素和下一個元素

Html:

?

View Code <div?id="aa">
????<p>1號</p>
????<p?class="yes">2號</p>
????<p>3號</p>
????<p>4號</p>
????<p>5號</p>
????<p?class="yes">6號</p>
????<p?class="yes">7號</p>
????</div>

js

View Code ????//獲取元素的下一個元素
???jQuery(function(){
???$("p").next(".yes").css("color","red");
???????})
???//獲取元素的上一個元素????
???????jQuery(function(){
?????????$("p").prev(".yes").css("color","red");
???????})

?

5 獲取元素的父元素和子元素

html:

?

View Code ?<div?id="aa">
????<p>1號</p>
????<p?class="yes">2號</p>
????<p>3號</p>
????<p>4號</p>
????<p>5號</p>
????<p?class="yes">6號</p>
????<p?class="yes">7號</p>
????</div>

?

js

?

View Code ?//獲取元素的父元素????
???????jQuery(function(){
?????????$("p").parent().css("color","red");
???????})

??//獲取元素的子元素????
???????jQuery(function(){
?????????$("#aa").children(".yes").css("color","red");
???????})

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/shuang121/archive/2011/07/05/2098549.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的几种获取元素的方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。