jQuery学习笔记获取jQuery对象
2023-06-13 09:14:35 时间
使用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元素间层次关系来获取特定元素,由两个选择器组合而成。选择过程为先按照第一个选择器选择元素,然后根据符号确定后代元素或子元素或兄弟元素,最后在这些元素范围内按照第二个选择器选取最后想要的元素;
下面就是各种选择器的表格说明--这就打了我一上午,真蛋疼!
基本选择器
基本过滤选择器
: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的元素
[selector1][selector2]…[selectorN]
选取满足所有属性过滤选择器的元素
层次选择器
selector1selector2
从selector1的后代元素里选取selector2
selector1>selector2
从selector1的子元素里选取selector2
Selector1+selector2
从selector1后面的第一个兄弟元素里选取selector2
selector1~selector2
从selector1后面的所有兄弟元素里选取selector2
表单选择器
:input
选取<input><textarea><select><button>元素
:text
选取符合[type=text]的<input>元素
:password
选取符合[type=password]的<input>元素
:radio
选取符合[type=radio]的<input>元素
:checkbox
选取符合[type=checkbox]的<input>元素
:image
选取符合[type=image]的<input>元素
:file
选取符合[type=file]的<input>元素
:button
选取符合[type=button]的<input>和<button>元素
:submit
选取符合[type=submit]的<input><button>元素
:reset
选取符合[type=reset]的<input><button>元素
:hidden
选取所有不可见的元素
表单过滤选择器
:enable
选取所有可用表单元素
:disable
选取所有不可用表单元素
:checked
选取被选中的<input>元素(单选框、复选框)
:selected
选取被选中的<option>元素
选择器
描述
返回
*
选取所有元素
集合元素
element
根据标签名选取元素
集合元素
#id
根据id属性值选取元素
单个元素
.class
根据class属性值选取元素
集合元素
selector1,selector2,…,selectorN
将每个选择器选取的元素合并在一个结果,主要用于选取不同元素
集合元素
选择器
描述
返回
选择器
描述
返回
集合元素
集合元素
集合元素
集合元素
集合元素
集合元素
集合元素
选择器
描述
返回
集合元素
集合元素
集合元素
集合元素
选择器
描述
返回
集合元素
集合元素
选择器
描述
返回
集合元素
集合元素
[attr!=value]
集合元素
[attr^=value]
集合元素
[attr$=value]
集合元素
[attr*=value]
集合元素
[attr~=value]
集合元素
集合元素
选择器
描述
返回
集合元素
集合元素
集合元素
集合元素
选择器
描述
返回
集合元素
集合元素
集合元素
集合元素
集合元素
集合元素
集合元素
集合元素
集合元素
集合元素
集合元素
选择器
描述
返回
集合元素
集合元素
集合元素
集合元素
相关文章
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- jQuery笔记(5) 做一个to do list!
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- jquery 常用方法总结详解编程语言
- Jquery 验证 validate详解编程语言
- jQuery子元素伪类选择器
- jQuery fadeTo()方法的用法
- JQuery表单中textarea字数限制实现代码
- JQuery插件模板制作jquery插件的朋友可以参考下
- jQuery.Validate使用笔记(jQueryValidation范例)
- Jquery从头学起第四讲jquery入门教程
- 基于jquery的lazyloader插件实现图片的延迟加载[简单使用]
- jQuery源码分析笔记(7)Queue
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- jquery在项目中做复选框时遇到的一些问题笔记
- Jquery获得控件值的三种方法总结
- JQuery解析HTML、JSON和XML实例详解
- jQuery如何取id有.的值一般的方法是取不到的
- JQuery打造省市下拉框联动效果
- jquery隐藏与显示tr标签示例代码
- jQuery学习笔记之jQuery.fn.init()的参数分析
- JQuery中使用.each()遍历元素学习笔记