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

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

复制代码 代码如下:


<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

复制代码 代码如下:


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


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

复制代码 代码如下:


<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

复制代码 代码如下:


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


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

复制代码 代码如下:


<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

复制代码 代码如下:


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

复制代码 代码如下:


<div>
<p>1号</p>
<p>2号</p>
<p>3号</p>
<p>4号</p>
<p>5号</p>
<p>6号</p>
<p>7号</p>
</div>


js

复制代码 代码如下:


//获取元素的下一个元素
jQuery(function(){
$("p").next(".yes").css("color","red");
})
//获取元素的上一个元素
jQuery(function(){
$("p").prev(".yes").css("color","red");
})


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

复制代码 代码如下:


<div>
<p>1号</p>
<p>2号</p>
<p>3号</p>
<p>4号</p>
<p>5号</p>
<p>6号</p>
<p>7号</p>
</div>


js

复制代码 代码如下:


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

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdfwgg.html