jquery中获取元素的几种方式小结
更新时间:2011年07月05日 23:17:21 作者:
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 class="center">2</p>
<p class="center">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 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
<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 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
//获取元素的下一个元素
jQuery(function(){
$("p").next(".yes").css("color","red");
})
//获取元素的上一个元素
jQuery(function(){
$("p").prev(".yes").css("color","red");
})
5 获取元素的父元素和子元素
html:
<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
//获取元素的父元素
jQuery(function(){
$("p").parent().css("color","red");
})
//获取元素的子元素
jQuery(function(){
$("#aa").children(".yes").css("color","red");
})
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 class="center">2</p>
<p class="center">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 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
复制代码 代码如下:
<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 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
复制代码 代码如下:
//获取元素的下一个元素
jQuery(function(){
$("p").next(".yes").css("color","red");
})
//获取元素的上一个元素
jQuery(function(){
$("p").prev(".yes").css("color","red");
})
5 获取元素的父元素和子元素
html:
复制代码 代码如下:
<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
复制代码 代码如下:
//获取元素的父元素
jQuery(function(){
$("p").parent().css("color","red");
})
//获取元素的子元素
jQuery(function(){
$("#aa").children(".yes").css("color","red");
})
相关文章
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
下面小编就为大家带来一篇JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-05jQuery中借助deferred来请求及判断AJAX加载的实例讲解
deferred对象的延迟功能对jQuery的ajax操作是一个很大的帮助,尤其是回调控制,下面我们就来看一下对jQuery中借助deferred来请求及判断AJAX加载的实例讲解2016-05-05jquery easyui datagrid实现增加,修改,删除方法总结
这篇文章主要介绍了jquery easyui datagrid实现增加,修改,删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下2016-05-05
最新评论