jQuery-选择器
程序员文章站
2022-03-22 13:21:10
使用jQuery选择器 1、可以使代码更简洁的写 document.getElementById()使用jQuery的写:$("#demo") 2、支持CSS选择器 3、提供了完善的处理机制 (完善的兼容处理) 1、基本选择器 基本选择器是JQuery最常用的选择器,也是最简单的选择器,它通过元素i ......
使用jquery选择器
1、可以使代码更简洁的写
document.getelementbyid()使用jquery的写:$("#demo")
2、支持css选择器
3、提供了完善的处理机制 (完善的兼容处理)
1、基本选择器
基本选择器是jquery最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名来查找dom元素。
* : 选择所有元素 //$("*").css("background","red")
#id :通过id属性值获取元素 //$("#id").css("background","red")
element :通过元素名获取元素
selector1,selector2 :获取列表中指定的所有元素
.class :获取使用class样式的所有元素、
2、层级选择器
如果想通过 dom 元素之间的层次关系(后代元素, 子元素, 相邻元素, 兄弟元素等)来获取特定元素。
ancetor descendant :匹配祖先元素下的后代元素 //$("body div").css("background","red")
parent > child :匹配父元素下的子元素 //$("body>div").css("background","red")
prev + next :匹配上一个元素的后面的元素,必须是挨着的
prev~siblings :匹配前一个元素的所有平辈元素,在prev元素后面才能匹配 //$("#two").siblings("div").css("background","red")
3、过滤选择器
在页面元素中先找到许多具有共同属性的元素,然后对这些元素加过滤条件,找到我们想要的这些元素。
即通过特定的过滤规则来筛选出所需的 dom 元素。
按照不同的过滤规则,又分为基本过滤选择器, 内容过滤选择器, 可见性过滤选择器, 属性过滤选择器, 子元素过滤选择器和表单对象属性过滤选择器。
3.1、基础过滤选择器
:first :匹配第一个元素
:last :匹配最后一个元素 //$("div:last")
:even :匹配索引为偶数的元素 //$("input:even")
:odd :匹配索引为奇数的元素
:eq(index) :匹配索引为指定值的元素
:gt(index) :匹配索引大于指定值的元素 //:gt(index)
:lt(index) :匹配索引小于指定值的元素
:not(selector) :匹配除了指定选择器之外的所有元素 //$("div:not(.class)").css("background","red")
3.2、内容过滤选择器
:contains(text) :匹配内容中包含指定内容的元素
:empty :匹配内容为空的元素
:has(selector) :匹配内容中包含指定选择器的元素
:parent :匹配内容不为空的元素
3.3、可见性过滤选择器
:hidden :匹配隐藏的元素 //$("div:hidden").show(3000)
:visible :匹配显示的元素
3.4、属性过滤选择器
[attribute] :匹配具有指定属性的元素 //$("div[title]").css("background","red")
[attribute=value] :匹配属性等于指定值的元素
[attribute!=value] :匹配属性不等于指定值的元素
[attribute^=value] :匹配属性值以指定值开始的元素 //("div[title^=en]").css("background","red")
[attribute$=value] :匹配属性值以指定值结束的元素
[attribute*=value] :匹配属性值中包含指定值的元素
[selector1][selector2][selectorn] :同时满足所有条件,则匹配
3.5、子元素过滤选择器
:nth-child(index/even/odd) :匹配指定索引的元素 从1算起 //$("div.one :nth-child(2)").css("background","red")
:first-child :匹配第一个子元素
:last-child :匹配最后一个子元素
:only-child :如果子元素是父元素的唯一子元素,则匹配
3.6、表单对象属性滤选择器
:enabled :匹配状态可用的表单元素
:disabled :匹配状态不可用的表单元素
:checked :匹配被选中的元素 匹配单选或复选 //$("#form1 input:checked").length
:selected :匹配被选中的元素 匹配的是option
3.7、表单过滤选择器
:input :匹配所有表单元素
$(“:input”) :匹配所有表单元素 select、textarea
$(‘input’) :匹配input标签
:text :文本框
:password :密码框 //$(":password")
:radio :单选按钮
:checkbox :复选框
:submit :提交按钮
:reset :重置按钮 //$(":reset")
:image :图像按钮
:button :按钮
:file :文件框
:hidden :隐藏域