jQuery 获取对象定位子对象

更新时间：2010年05月31日 14:02:29 作者：

jQuery 获取对象定位子对象，学习jquery 定位子对象的朋友可以参考下。

选择中的特殊符号:

# 指示 id
. 指示 class
* 全选
, 多选
空格后代
> 子
~ 兄弟
+ 下一个
: 子(多功能)
() 函数式的过滤与查找

获取 div 下的所有标题对象: $("div :header")

 
<body> 
<h3>AAA</h3> 
<p>BBB</p> 
<h4>CCC</h4> 
<div> 
<h3>DDD</h3> 
<p>EEE</p> 
<h4>FFF</h4> 
</div> 
</body> 

获取所有标题对象: $(":header")

复制代码代码如下:

 
<body> 
<h3>AAA</h3> 
<p>BBB</p> 
<h4>CCC</h4> 
<div> 
<h3>DDD</h3> 
<p>EEE</p> 
<h4>FFF</h4> 
</div> 
</body> 

获取 first, 如: $("li:first") 或 $("li").first() 或 $("ul :first") 或 $("ul li:first")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

获取每组的 first, 如: $("li:first-child") 或 $("ul li:first-child") 或 $("ul :first-child")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

获取 last, 如: $("li:last") 或 $("li").last() 或 $("ul :last") 或 $("ul li:last")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

获取每组的 last, 如: $("li:last-child") 或 $("ul li:last-child") 或 $("ul :last-child")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

获取第几个, 如(获取第三个, eq 是 0 起): $("li:eq(2)") 或 $("li").eq(2)

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

获取第几个之后的, 如(获取第三个之后的, gt 是 0 起): $("li:gt(2)")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

获取第几个之前的, 如(获取第三个之前的, lt 是 0 起): $("li:lt(2)")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

获取索引值是偶数的, 如(even 是 0 起): $("li:even")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

获取索引值是奇数的, 如(odd 是 0 起): $("li:odd")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

获取每组第偶数个, 如(nth-child 是 1 起): $("li:nth-child(even)")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

获取每组第奇数个, 如(nth-child 是 1 起): $("li:nth-child(odd)")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

获取每组第几个, 譬如第 2 个(nth-child 是 1 起): $("li:nth-child(2)")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

用表达式指示每组的第几个, 如(nth-child 是 1 起): $("li:nth-child(3n-1)")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

如果是父元素中唯一的子元素, 如: $("li:only-child")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

:not 是对其他选择的取反, 如: $("li:not(li:first-child)")

复制代码代码如下:

 
<ul> 
<li>AAA</li> 
<li>BBB</li> 
<li>CCC</li> 
<li>DDD</li> 
<li>EEE</li> 
<li>FFF</li> 
<li>GGG</li> 
</ul> 
<ul> 
<li>111</li> 
</ul> 
<ul> 
<li>XXX</li> 
<li>YYY</li> 
<li>ZZZ</li> 
</ul> 

您可能感兴趣的文章:

jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
这篇文章主要介绍了jQuery实现Table表格隔行变色及高亮显示当前选择行效果,涉及jQuery针对table元素遍历、运算、样式及鼠标事件动态响应相关操作技巧,需要的朋友可以参考下
2017-02-02
jquery中表单多选框的一种巧妙写法
这篇文章主要介绍了jquery 表单多选框的一种巧妙写法 ,需要的朋友可以参考下
2015-09-09
高效的jQuery代码编写技巧总结
好的代码会带来速度的提升，快速渲染和响应意味着更好的用户体验。本文主要总结了如何高效的编写jQuery代码的技巧，对提升你的jQuery和javascript代码具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
使用jQuery或者原生js实现鼠标滚动加载页面新数据
这篇文章主要介绍了使用jQuery或者原生js实现鼠标滚动加载页面新数据的方法,即控制滚动条下拉时的加载事件,需要的朋友可以参考下
2016-03-03
JQuery跨Iframe选择实现代码
JQuery跨Iframe选择实现,下面也通过用DOM方法与jquery方法结合的方式实现了，需要的朋友可以参考下。
2010-08-08
如何确保JavaScript的执行顺序之jQuery.html并非万能钥匙
在上一篇文章《如何确保JavaScript的执行顺序 - 之jQuery.html深度分析》中，我们揭示了jQuery.html函数之所以能在各种浏览器下保持动态JS顺序执行，其秘密在于 – 同步AJAX获取外部JavaScript。
2011-03-03
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
在前面我们分别通过innerHeight()和innerWidth()来获得第一个匹配元素内部区域的高度和宽度，我们在应用中往往除了需要内部的尺寸，同样还需要知道外部的高度和宽度.
2009-11-11
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
这篇文章主要介绍了jQuery实现带3D切割效果的轮播图功能,结合实例形式分析了jQuery轮播图相关的界面布局、3D效果实现与事件响应等相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
2019-04-04
jQuery编写网页版2048小游戏
本文主要分享了jQuery编写网页版2048小游戏的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
jquery win 7透明弹出层效果的简单代码
jquery win 7透明弹出层效果，点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度，很不错的一个弹出层插件。
2013-08-08