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 页面自动加载函数(兼容多浏览器)
May 18 Javascript
javascript中的作用域scope介绍
Dec 28 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
react如何快速设置文件路径别名
Apr 28 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python正则表达式常用函数总结
2017/06/24 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
django中forms组件的使用与注意
2019/07/08 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python 爬取小说并下载的示例
2020/12/07 Python
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
总经理职责
2013/12/22 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
妇女工作先进事迹
2014/08/17 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
前台岗位职责
2015/02/13 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
Redis读写分离搭建的完整步骤
2021/09/14 Redis
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技