jQuery学习笔记 获取jQuery对象


Posted in Javascript onSeptember 19, 2012

使用jQuery选择器选择页面元素,目的是为了生成jQuery对象,语法相当简单:$(selector)。但值得注意的是,这是生成jQuery对象,不是DOM对象,因此$(selector).innerHTML以获取元素内部HTML代码是错误的,正确写法是$(selector).html()。同样的,判断一个DOM对象是否存在,不能够写成if($(selector)),而是if($(selector).length>0)。

当然jQuery对象和DOM对象可以互转换。从上面的例子也可以看出,jQuery对象可以视为是一个DOM对象数组,因此转换成DOM对象可使用get(index)方法或者[index]取下标;相反,DOM对象转换为jQuery对象只需直接用$(document.getElementById(“id”))包装一下就行了。

虽然取对象的方法很简单$(selector),但是这个参数selector却是种类繁多。这里扼要说明一下:

过滤选择器:附在所有选择器的后面,通过特定的过滤规则来筛选出一部分元素,如$(selector:first)。若单独使用,$(:first)则等价于$(*:first);

层次选择器:通过DOM元素间层次关系来获取特定元素,由两个选择器组合而成。选择过程为先按照第一个选择器选择元素,然后根据符号确定后代元素或子元素或兄弟元素,最后在这些元素范围内按照第二个选择器选取最后想要的元素;

下面就是各种选择器的表格说明- -这就打了我一上午,真蛋疼!

 

基本选择器

选择器 描述 返回
* 选取所有元素 集合元素
element 根据标签名选取元素 集合元素
#id 根据id属性值选取元素 单个元素
.class 根据class属性值选取元素 集合元素
selector1,selector2,…,selectorN 将每个选择器选取的元素合并在一个结果,主要用于选取不同元素 集合元素

 

基本过滤选择器

选择器 描述 返回
:first 选取第一个元素 单个元素
:last 选取最后一个元素 单个元素
:even 选取索引值是偶数的所有元素,索引从0开始 集合元素
:odd 选取索引值是奇数的所有元素,索引从0开始 集合元素
:eq(index) 选取索引值等于index的元素,index从0开始 单个元素
:gt(index) 选取索引值大于index的元素,index从0开始 集合元素
:lt(index) 选取索引值小于index的元素,index从0开始 集合元素
:not(selector) 选取匹配selector以外的元素 集合元素
:header 选取所有的标题元素 集合元素
:animated 选取当前正在执行动画的所有元素 集合元素

 

子元素过滤选择器

选择器 描述 返回
:first-child 选取每个父元素的第一个子元素 集合元素
:last-child 选取每个父元素的最后一个子元素 集合元素
:only-child 如果某元素是父元素唯一的子元素,则将被选取 集合元素
:nth-child(odd) 选取每个父元素下索引值是奇数的子元素 集合元素
:nth-child(even) 选取每个父元素下索引值是偶数的子元素 集合元素
:nth-child(index) 选取每个父元素下索引值等于index的子元素 集合元素
:nth-child(equation) 选取每个父元素下索引值匹配equation的子元素 集合元素

 

内容过滤选择器

选择器 描述 返回
:contains(text) 选取文本内容为text的元素 集合元素
:has(selector) 选取含有后代元素为selector的元素 集合元素
:parent 选取含有后代元素或文本的元素 集合元素
:empty 选取不包含后代元素或文本的空元素 集合元素

 

可见性过滤选择器

选择器 描述 返回
:hidden 选取所有不可见的元素 集合元素
:visible 选取所有可见的元素 集合元素

 

属性过滤选择器

选择器 描述 返回
[attr] 选取拥有attr属性的元素 集合元素
[attr=value] 选取attr属性值为value的元素 集合元素
[attr!=value] 选取attr属性值不为value的元素 集合元素
[attr^=value] 选取attr属性值以value开始的元素 集合元素
[attr$=value] 选取attr属性值以value结束的元素 集合元素
[attr*=value] 选取attr属性值含有value的元素 集合元素
[attr~=value] 选取attr属性值用空格分隔的值中有一个为value的元素 集合元素
[selector1][selector2]…[selectorN] 选取满足所有属性过滤选择器的元素 集合元素

 

层次选择器

选择器 描述 返回
selector1 selector2 从selector1的后代元素里选取selector2 集合元素
selector1>selector2 从selector1的子元素里选取selector2 集合元素
Selector1+selector2 从selector1后面的第一个兄弟元素里选取selector2 集合元素
selector1~selector2 从selector1后面的所有兄弟元素里选取selector2 集合元素

 

表单选择器

选择器 描述 返回
:input 选取 集合元素
:text 选取符合[type=text]的元素 集合元素
:password 选取符合[type=password]的元素 集合元素
:radio 选取符合[type=radio]的元素 集合元素
:checkbox 选取符合[type=checkbox]的元素 集合元素
:image 选取符合[type=image]的元素 集合元素
:file 选取符合[type=file]的元素 集合元素
:button 选取符合[type=button]的 集合元素
:submit 选取符合[type=submit]的 集合元素
:reset 选取符合[type=reset]的 集合元素
:hidden 选取所有不可见的元素 集合元素

 

表单过滤选择器

选择器 描述 返回
:enable 选取所有可用表单元素 集合元素
:disable 选取所有不可用表单元素 集合元素
:checked 选取被选中的元素(单选框、复选框) 集合元素
:selected 选取被选中的 集合元素
Javascript 相关文章推荐
Jquery 绑定时间实现代码
May 03 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
jQuery学习笔记 更改jQuery对象
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 #Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 #Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 #Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 #Javascript
You might like
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
动态创建类实例代码
2009/10/07 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
Python制作exe文件简单流程
2019/01/24 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Django框架models使用group by详解
2020/03/11 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
大学军训感言200字
2014/02/26 职场文书
聚美优品广告词改编
2014/03/14 职场文书
初一新生军训方案
2014/05/22 职场文书
测绘工程专业求职信
2014/07/15 职场文书
电子工程求职信
2014/07/17 职场文书
异地年检委托书范本
2014/09/24 职场文书
525心理健康活动总结
2015/05/08 职场文书
php png失真的原因及解决办法
2021/11/17 PHP
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js