Jquery选择器

最新推荐文章于 2022-03-09 22:34:03 发布

西小贝先森

最新推荐文章于 2022-03-09 22:34:03 发布

阅读量105

点赞数

分类专栏： JQuery笔记

本文链接：https://blog.csdn.net/luckyht/article/details/103748467

版权

JQuery笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JQuery的选择器是其核心，是JQuery的重中之中在jquery中，选择器按照选择的元素类别可以分为四类

1.基本选择器

基于元素id css样式类元素名称等使用基于CSS的选择器机制查找界面元素

标签选择器：按元素标签名称进行选择 $(“div”)
id选择器：选取文档中指定的id元素$("#div1")
类选择器：根据css类进行选择 $(" .divclass")
通配符选择器：选择所有的$("*") ,同时选择几个选择器通过“，”隔开 $("#divid,a,.aclass")

###2.层次选择器
通过DOM元素间的层次关系关系获取页面元素

后代选择器：ancestor descendant 如$(“div p”) div下的所以p
父子选择器：parent>child 如： $(“ul li”)
相邻选择器: prev+next 两个同级级别的元素选中的是 prev元素后面的next元素
注：和相邻选择器类似的方法还有next 方法

$(".div+P").css("color","#f40");
$(".div").next().css("color","#f40");

评级选择器： prev~siblings 选择的是与prev同级的后面的所有兄弟如$("#sevli~li")
注：和平级选择器类似的方法还有nextAll方法
如果想相邻所有的元素（包含前面的和后面的）可以使用siblings方法

$("#sevli~li").css("background","#333");
$("#sevli").nextAll().css('background','#333');
$("#sevli").silblings("li").css("background","#333");

3.过滤选择器

根据某种过滤规则来进行匹配元素

简单过滤选择器：主要是用来选择首尾，指定索引，奇数偶数位元素

    ：first 第一个元素
    ：last 最后一个元素
    ：odd 所有索引为奇数的元素
    ：even 所有索引为偶数的元素
    ：eq（index） 指定索引的元素
     : gt（index）大于给定索引的元素
    ：lt（index）小于给定索引的元素
   需要注意的是以上索引都是从0开始的

属性过滤选择器
根据html属性来匹配元素

 [attr]          匹配含有给定属性的元素  如$("li[id]")
 [attr=value]    匹配给定属性值的   $("input[name='news']")
 [attr*=value]   匹配属性中包含某个特定值的元素
 [attr!=value]   匹配属性中不包含某个特定值的元素
 [attr^=value]   匹配属性是以某些值开头的元素
 [attr$=value]   匹配属性是以某些值结尾的元素

内容过滤选择器
是根据HTML文本内容来进行选择

：contains(text)  匹配还有给定文本的元素；
:has(selector)  $("div:has('p')")  选择所有包含p的div；
：empty 匹配所有不含子元素或不含文本的空元素；

可见性过滤选择器
是根据元素是否可见来查找元素的主要是：hidden 和：visited；
：hidden 匹配所有不可见元素
：visited 匹配所有可见元素
注意：css中隐藏元素的方法有 display：none 不占据空间位置；visibility：hidden 占据空间位置；opcity：0 占据空间位置
```
 ：hidden会匹配以下几种格式的元素
     1.具有css 中 display为none的元素
     2.HTML中type=hidden的元素
     3.宽高被显示设置为0的元素  
：visited 匹配占据空间位置的元素
```

子元素过滤选择器
根据父元素选择子元素

 ：nth-child(index/odd/even) 匹配父元素的第几个元素
 ：first-child
 ：last-child
 需要注意的是此时的index是从1开始的

表单对象过滤选择器
根据表单中某对象的属性特征来获取表单元素

：enabled   查找所有可用元素    
：disabled  查找所有不可以的元素   
：checked   查找所有被选中的元素
：selected  查找所有选中的option元素

4.表单选择器

可以在页面上快速定位某类表单对象

：input 匹配所有的input元素
：text 查找所有的文本框
：password 查找所有的密码框
：button 查找所有的按钮
：checkbox 查找所有的复选框
…
需要注意$(“input”)和 $(":input")的区别
$(“input”)是标签选择器 $("：input")是表单选择器选择表单中的input select textare button元素