jQuery 获取对象 定位子对象


Posted in Javascript onMay 31, 2010

选择中的特殊符号:

# 指示 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>
Javascript 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
jQuery 获取对象 基本选择与层级
May 31 #Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 #Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 #Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 #Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 #Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 #Javascript
Javascript 设计模式(二) 闭包
May 26 #Javascript
You might like
PHP中的CMS的涵义
2007/03/11 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
DOM 高级编程
2015/05/06 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python实现多线程抓取妹子图
2015/08/08 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
使用Python对Excel进行读写操作
2017/03/30 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
体育运动口号
2014/06/09 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
优秀教研组申报材料
2014/12/26 职场文书
介绍信应该怎么开?
2019/04/03 职场文书