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 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
javascript实现获取服务器时间
May 19 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
原生JS实现拖拽效果
Dec 04 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
香妃
2021/03/03 冲泡冲煮
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python对象转JSON字符串的方法
2016/04/27 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python 自动批量打开网页的示例
2019/02/21 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
python绘制汉诺塔
2021/03/01 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
小学语文国培感言
2014/03/04 职场文书
公司合作协议书范本
2014/04/18 职场文书
公务员年度个人总结
2015/02/12 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
贷款收入证明范本
2015/06/12 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
导游词之湖北武当山
2019/09/23 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
spring boot实现文件上传
2022/08/14 Java/Android