jq 中常见的选择器

Yi_Zhi_Yu 发布于2019-08-21 11:35 / 892人阅读

摘要：基本选择器选择器选择器元素选择器通配符选择器匹配所有元素层次选择器选取里面所有的选取元素下的子元素选取紧接在元素后的元素等价于选取元素之后的所有元素等价于过滤选择器基本过滤选择器选取第一个元素选取最后一个元素选取索引是偶数的所有元素索引从开

1 基本选择器
id选择器 #id $("#test")
class 选择器 .class $(".test")
元素选择器 element $(p) $(img)
通配符选择器 $("*") 匹配所有元素

2 层次选择器
$("div span") 选取div 里面所有的span
$("parent>child") 选取 parent 元素下的child 子元素
$("prev + next") 选取紧接在prev元素后的next元素
$(".one+div") 等价于$(".one").next("div")
$("prev~sibkings") 选取prev 元素之后的所有siblings 元素
$("#prev~div") 等价于 $("#prev").nextAll("div")

3 过滤选择器

3.1 基本过滤选择器
:first 选取第一个元素 $("div:first")
:last 选取最后一个元素 $("div:last")
:even 选取索引是偶数的所有元素索引从0开始
:odd 选取索引是奇数的所有元素索引从1开始
:eq(index) 选取索引等于index 的元素索引从0开始
:gt(index) 选取索引大于index 的元素索引从0开始
:lt(index) 选取索引小于index 的元素索引从0开始
:header 选取所有的标题元素 eg: h1 h2 h3
:animated 选取当前正在执行动画的所有元素

3.2 内容过滤选择器
:contains(text) 选取含有文本内容text的元素
:empty 选取不包含子元素或文本的空元素
:has(selector) 选取含有选择器所有匹配元素的元素
:parent 选取含有子元素或文本的元素

3.3 可见性过滤选择器
:hidden 选取所有不可见的元素 $(":hidden")
$(":hidden")选取所有不可见元素。
包括：

等元素。
:visible 选取所有可见元素

3.4 属性过滤选择器
[attribute] 选取拥有此属性的元素
[attribute = value] 选取属性值为value的元素
[attribute !=value] 选取属性值不等于value的元素
[attribute^=value] 选取属性值以value开始的元素
[attribute $=value] 选取属性值以value 结束的元素
[attribute *=value] 选取属性值含有value值的元素

3.5 子元素过滤选择器
:first-child 选取每个父元素下第一个子元素
:last-child 选取每个父元素下的最后一个子元素
:only-child 如果某个元素是他父元素中唯一的一个子元素，那么将会被匹配，
如果父元素中含有其他的元素将不会匹配

3.6 表单对象属性过滤选择器
:enabled 选取所有可用的元素
:disabled 选取所有不可用的元素
:checked 选取所有被选中的元素（单选框、复选框）
:selected 选取所有被选中的选项元素（下拉列表）

4 表单选择器
:input 选中所有input textarea select button 元素
:text 选取所有单行文本框
:password 选取所有密码框
:radio 选取所有单选框
:checkbox 选取所有多选框
:submit 选取所有的提交按钮
:file 选取所有的上传域
:hidden 选取所有不可见元素

5 获得兄弟元素的方法
next() 当前元素之后的近邻的第一个兄弟元素
nextAll() 当前元素之后的所有的兄弟元素
prev() 当前元素之前的近邻的兄弟元素
prevAll() 当前元素之前的所有的兄弟元素
sibling() 当前元素的所有的兄弟元素

海外云主机服务器托管 jsp中id选择器 js中常见的变量名称 html的编写器选择 jq删除js中json数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86897.html

聊聊jQuery的反模式

摘要：如果我们认为模式代表一个最佳的实践，那么反模式将代表我们已经学到一个教训。受启发于的设计模式，在年的月的报告大会上首次提出反模式。参考链接反模式学用设计模式极客学院如果我们认为模式代表一个最佳的实践，那么反模式将代表我们已经学到一个教训。受启发于Gof的《设计模式》，Andrew Koeing在1995年的11月的C++报告大会上首次提出反模式。在Koeing的报告中，反模式有着两...

CoderStudy 2019-08-19 17:45 评论0 收藏0
JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

chunquedong 2019-08-29 17:05 评论0 收藏0
JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

nicercode 2019-08-02 11:51 评论0 收藏0
JavaWEB开发04——JQuery

摘要：设计的宗旨是，，即倡导写更少的代码，做更多的事情。它封装常用的功能代码，提供一种简便的设计模式，优化文档操作事件处理动画设计和交互。今日任务使用JQuery完成页面定时弹出广告定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display = bloc...

pakolagij 2019-08-23 12:34 评论0 收藏0
jQuery最佳实践

摘要：链式操作使用链式操作代替变量缓存和多次操作每当链长超过个链接或得到，因为活动任务的复杂，使用适当的换行和缩进使代码的可读性。对于较长的链式操作可以把对象缓存到一个变量里。原文地址：http://lab.abhinayrathore.com/jquery-standards/ 第一次翻译，有不对不妥的地方请拍砖。showImg(http://segmentfault.com/img/b...

wizChen 2019-08-21 12:13 评论0 收藏0