jquery中获取元素的几种方式小结

用户7657330

发布于 2020-08-14 02:17:02

2.1K00

代码可运行

文章被收录于专栏：程序生涯程序生涯

运行总次数：0

代码可运行

1 从集合中通过指定的序号获取元素

<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> 





<script type="text/javascript">

jQuery(function(){

$("p").eq(2).css("color","red");

$("p").eq(3).css("color","red");

})

</script>

2 获取指定条件一致和指定范围的元素

<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> 



<script type="text/javascript">

jQuery(function(){

$("p").filter('.center').css("color","red");

})

$(function(){

$("p").slice(5,7).css("color","yellow");

})

</script>

3 获取与条件表达式一致的元素

<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> 



<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 获取元素的上一个元素和下一个元素

<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> 



//获取元素的下一个元素

jQuery(function(){

$("p").next(".yes").css("color","red");

})

//获取元素的上一个元素

jQuery(function(){

$("p").prev(".yes").css("color","red");

})

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

<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> 



//获取元素的父元素

jQuery(function(){

$("p").parent().css("color","red");

})

//获取元素的子元素

jQuery(function(){

$("#aa").children(".yes").css("color","red");

})