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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
js parseInt("08")未指定进位制问题
Jun 19 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
angular 用Observable实现异步调用的方法
Dec 27 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
js cavans实现静态滚动弹幕
May 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
php数据库抽象层 PDO
2011/05/07 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
vue实现购物车列表
2020/06/30 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python 进程的几种创建方式详解
2019/08/29 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Python多进程编程常用方法解析
2020/03/26 Python
路政管理专业推荐信
2013/11/11 职场文书
病媒生物防治方案
2014/05/13 职场文书
工作证明英文模板
2014/10/21 职场文书
结婚纪念日感言
2015/08/01 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
python 判断文件或文件夹是否存在
2022/03/18 Python