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之原型和继承
Jul 06 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
CI框架中数据库操作函数$this->db->where()相关用法总结
2016/05/17 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
简单说说tomcat的配置
2013/05/28 面试题
客服文员岗位职责
2013/11/29 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
工作证明书
2015/06/15 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书