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 相关文章推荐
js的一些常用方法小结
Jun 29 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
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中取得image按钮传递的name值
2006/10/09 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
python列出目录下指定文件与子目录的方法
2015/07/03 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python遍历小写英文字母的方法
2019/01/02 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
物理教师自荐信范文
2013/12/28 职场文书
大型车展策划方案
2014/02/01 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
给上级领导的感谢信
2015/01/22 职场文书