欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。由于本站位于香港虚拟主机,故速度比较慢。

教程  jQuery教程——选择器

JQuery 本站 274 0评论

jQuery 选择器


jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。


jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。


jQuery 中所有选择器都以美元符号开头:$()


jQuery 选择器可以分为以下几种类型:

1、基本选择器

2、层次选择器

3、基本过滤选择器

4、内容过滤选择器

5、可见性过滤选择器

6、属性选择器

7、子元素选择器

8、表单对象属性选择器

9、表单选择器


一、基础选择器


jQuery几乎支持主流的css1~css3选择器的写法,我们从最简单的也是最常用的开始学起。

111.jpg


1.简单选择器


1、id选择器:一个用来查找的ID,即元素的id属性

$( "#id" )

id选择器也是基本的选择器,jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的,所以在操作DOM的获取上,如果能采用id的话尽量考虑用这个选择器。

注意:

id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的。

实例:

当用户点击按钮后,有 id="test" 属性的元素将被隐藏

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});


2、类选择器顾名思义,通过class样式类名来获取节点

$( ".class" )

类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选,同样的jQuery在实现上,对于类选择器,如果浏览器支持,jQuery使用JavaScript的原生getElementsByClassName()函数来实现的。

我们不难发现:

jQuery除了选择上的简单,而且没有再次使用循环处理。

不难想到$(".imooc").css()方法内部肯定是带了一个隐式的循环处理,所以使用jQuery选择节点,不仅仅只是选择上的简单,同时还增加很多关联的便利操作,后续我们还会慢慢的学到其他的优势。

实例:

用户点击按钮后所有带有 class="test" 属性的元素都隐藏

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});


3、(标签)元素选择器:根据给定(html)标记名称选择所有的元素

$( "element" )

如:

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。


搜索指定元素标签名的所有节点,这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持。

实例:

<body>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<script type="text/javascript">
//通过原生方法处理
//获取到所有的节点标记名为div的元素
//给每一个div加上蓝色的边框
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
</script>
<script type="text/javascript">
//通过jQuery直接传入标签名p
//标签是可以多个的,所以得到的同样也是一个合集
$("p").css("border", "3px solid red");
</script>
</body>


4复合选择器

复合选择器将多个选择器(可以是ID选择器、元素选择器或是类名选择器)组合在一起,两个选择器之间以逗号","分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象。

注意:多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个匹配的元素合并后一起返回。

$("selector1,selector2,......,selectorN")

selector1:一个有效的选择器,可以是ID选择器、元素选择器或类名选择器等

selector2:另一个有效的选择器,可以是ID选择器、元素选择器或类名选择器等

selectorN:(可选择)任意多个选择器,可以是ID选择器、元素选择器或类名选择器等


示例:$("div,#btn")    //要查询文档中的全部的<div>元素和id属性为btn的元素。


2.进阶选择器


与CSS选择器语法一致,jQuery也支持3种进阶选择器,如下表:

111.jpg


1、群组选择器

群组选择器用于选择所指定选择器组合的结果,又称多元素选择器,语法格式:

$("selector1,selector2,selector3,......,selectorN")

其中,参数selector表示有效的任意选择器。

例:

222.jpg


2、后代选择器

后代选择器用于在指定祖先元素下匹配所有后代元素,语法格式:

$("ancestor descendant")

其中,参数ancestor是任意有效的简单选择器,为指定的祖先元素;参数descendant也是一个简单的选择器,用于筛选祖先元素的后代元素。两个参数之间用空格隔开。

在jQuery里为子选择器专门提供了一个等价的方法find(),语法格式如下:

$("ancestor").find("descendant")

例:

333.jpg


3、全选择器(*选择器)

在CSS中,经常会在第一行写下这样一段样式。

* {padding: 0; margin: 0;}

通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素。

$( "*" )

抛开jQuery,如果要获取文档中所有的元素,通过document.getElementsByTagName()中传递"*"同样可以获取到。

不难发现,id、class、tag都可以通过原生的方法获取到对应的节点,但是我们还需要考虑一个兼容性的问题,我这里顺便提及一下,比如:

· IE会将注释节点实现为元素,所以在IE中调用getElementsByTagName里面会包含注释节点,这个通常是不应该的。

· getElementById的参数在IE8及较低的版本不区分大小写。

· IE7及较低的版本中,表单元素中,如果表单A的name属性名用了另一个元素B的ID名并且A在B之前,那么getElementById会选中A。

· IE8及较低的版本,浏览器不支持getElementsByClassName。


3.高级选择器


与CSS选择器语法一致,jQuery也支持3种高级选择器,如下表:

444.jpg


1、子选择器

子选择器用于指定的父元素下查找该元素下面的所有子元素,语法格式如下:

$("parent>child")

其中,参数parent表示有效的任意选择器,child同样也是一个选择器,并且它是第一个选择器的子元素,两个参数之间用符号">"隔开。

在jQuery库里为子选择器专门提供了一个等价的方法children(),语法格式如下:

$("parent").children("child")

例:

555.jpg


2、next选择器

next选择器也叫紧邻同辈元素选择器,即用于匹配紧邻指定元素的同辈元素,语法格式:

$("prev+next")

其中,参数prev是任意有效的选择器,参数next同样也是一个选择器,用于匹配紧接prev元素的第一个元素。两个参数之间用加号"+"隔开。

在jQuery库里为子选择器专门提供了一个等价的方法next(),语法格式如下:

$("prev").next("next")

例:

666.jpg


3.nextALL选择器

nextALL选择器也叫相邻同辈元素选择器,即用于匹配指定元素的所有同辈元素,语法格式:

$("prev~siblings")

其中,参数prev是任意有效的选择器,参数siblings也是一个选择器,用于匹配prev元素的所有同辈元素。两个参数之间用"~"隔开。

在jQuery库里为子选择器专门提供了一个等价的方法nextALL(),语法格式如下:

$("prev").nextALL("next")

例:

777.jpg


二、层次选择器


文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了。


选择器中的层级选择器就是用来处理这种关系:子元素、后代元素、兄弟元素、相邻元素


通过一个列表,对比层级选择器的区别:

222.jpg

仔细观察层级选择器之间还是有很多相似与不同点:

· 层级选择器都有一个参考节点。

· 后代选择器包含子选择器的选择的内容。

· 一般兄弟选择器包含相邻兄弟选择的内容。

· 相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下。


333.jpg


三、过滤选择器


很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的过滤选择器用来更快捷的找到所需的DOM元素。过滤选择器很多都不是CSS的规范,而是jQuery自己为了开发者的便利延展出来的选择器。

过滤选择器的用法与CSS中的伪元素相似,选择器用冒号“”开头,按照不同的过滤规则,过滤选择器分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器


1.基本过滤选择器

基本过滤器通常用于实现简单过滤效果的过滤器,通过一个列表,看看基本过滤器的描述:

444.jpg

注意:

· :eq(), :lt(), :gt(), :even, :odd 用来过滤他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步过滤,注意jQuery合集都是从0开始索引。

· gt是一个段落过滤,从指定索引的下一个开始,gt(1) 实际从2开始。


2.内容过滤选择器

基本过滤选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容过滤选择器,其规则也会体现在它所包含的子元素或者文本内容上。内容过滤器描述如下表:

555.jpg

注意:

· :contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素。

· 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。

· :parent与:empty是相反的,两者所涉及的子元素,包括文本节点。


3.可见性过滤选择器

元素有显示状态与隐藏状态,jQuery根据元素的状态扩展了可见性过滤选择器:visible与:hidden

描述如下:

666.jpg

这2个选择器都是 jQuery 延伸出来的,看起来比较简单,但是元素可见性依赖于适用的样式。

:hidden选择器,不仅仅包含样式是display="none"的元素,还包括隐藏表单、visibility等等

我们有几种方式可以隐藏一个元素:

· CSS display的值是none。

· type="hidden"的表单元素。

· 宽度和高度都显式设置为0。

· 一个祖先元素是隐藏的,该元素是不会在页面上显示

· CSS visibility的值是hidden

· CSS opacity的指是0

如果元素中占据文档中一定的空间,元素被认为是可见的。

可见元素的宽度或高度,是大于零。

元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局。


4.属性过滤选择器

属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值的元素,这就是属性选择器展示它们的威力的地方。

777.jpg

浏览器支持:

· [att=val]、[att]、[att|=val]、[att~=val]  属于CSS 2.1规范

· [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范

· [name!="value"]  属于jQuery 扩展的选择器

CSS选择器无论CSS2.1版本还是CSS3版本,IE7和IE8都支持,webkit、Gecko核心及Opera也都支持,只有IE6以下浏览器才不支持。

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的。


· [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等。

· [attr*="value"]能在网站中帮助我们匹配不同类型的文件。


5.子元素过滤选择器

子元素过滤选择器不常使用,其过滤规则比起其它的选择器稍微要复杂点。

子元素过滤选择器描述表:

补充说明:

· :first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)。

· :last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素。

· 如果子元素只有一个的话,:first-child与:last-child是同一个。

· :only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配。

· jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的。

· nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算。


6.表单对象属性过滤选择器

无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的。jQuery中专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素。表单选择器的具体方法描述:

1000.jpg

注意:

除了input过滤选择器,几乎每个表单类别过滤器都对应一个input元素的type值。大部分表单类别器可以使用属性过滤器替换。比如 $(':password') == $('[type=password]')。


四、表单选择器


jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素。

表单选择器的说明如下:

1111.jpg


五、其他选择器


除了上述的选择器之外,jQuery还支持一些其他的过滤器,如下表所示:

2222.jpg


六、选择器的中注意事项


1.选择器中含有特殊符号的注意事项

含有"."、"#"、"{"、"}"等特殊字符:根据W3C规定,属性值中是不能包含这些特殊字符的,但在实际的项目中偶尔会遇到这种表达式中含有"#"和"}"等特殊字符的情况。这时,如果按照普通方法去处理的话就会出现错误,解决这类错误的方法是使用转义符号将其转义。

<div id="li#db">liaidb</div>
<div id="lidb(1)">lilovedb</div>

如果按照普通方式来获取,例如:

$("#li#db");
$("#lilovedb(1)");

这样是不能正确获取到元素的,正确的写法如下:

$("#li\\#db");
$("#lilovedb\\(1\\)");


2.属性选择器的@符号问题

在jQuery升级版本过程中,jQuery在1.3.1版本中彻底放弃了1.1.0版本遗留的@符号,假如我们使用1.3.1以上的版本,那么不需要在属性前添加@符号

$("div[@name="lidb"]");

正确写法是将@符号去掉,即改为如下形式:

$("div[name="lidb"]");


3.选择器中空格的注意事项 

在实际应用当中,选择器中含有空格也是不容忽视的,多一个空格或则少一个空格也会得到截然不同的结果。 

<div class="name">
<div style="display: none;">小李</div>
<div style="display: none;">小王</div>
<div style="display: none;">小明</div>
<div style="display: none;" class=name>小张</div>
</div>
<div style="display: none;" class=name>小玉</div>
<div style="display: none;" class=name>小刘</div>

使用如下的jQuery选择器分别获取它们 

<script type="text/javascript">
var $a=$( ".name :hidden");
var $b=$( ".name:hidden");
console.log($a) 
console.log($b) 
</script>

以上代码会出现不同的结果,是因为后代选择器和过滤选择器的不同 。


补充:

$("#id", ".class")  复合选择器
$(div p span)       层级选择器 //div下的p元素中的span元素
$(div>p)            父子选择器 //div下的所有p元素
$(div+p)            相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p)            兄弟选择器  //div后面的所有p元素(同级别)
$(.p:last)          类选择器 加 过滤选择器  第一个和最后一个(first 或者 last)
$("#mytable td:odd")      层级选择 加 过滤选择器 奇偶(odd 或者 even)
$("div p:eq(2)")    索引选择器 div下的第三个p元素(索引是从0开始)
$("a[href='www.baidu.com']")  属性选择器
$("p:contains(test)")        // 内容过滤选择器,包含text内容的p元素
$(":emtyp")        //内容过滤选择器,所有空标签(不包含子标签和内容的标签)parent 相反
$(":hidden")       //所有隐藏元素 visible 
$("input:enabled") //选取所有启用的表单元素
$(":disabled")     //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素


通过 $(":button") 可以选取所有 type="button" 的 <input> 元素 和 <button> 元素,如果去掉冒号,$("button")只能获取 <button> 元素。

<p id="test1">点进这里测试  <b>button</b></p>
<p id="test2">点进这里测试 <b>:button</b></p>
<button>Button 按钮</button>
<input type="button" value="Input 按钮">

在线示例:https://www.runoob.com/try/try.php?filename=tryjquery_sel_button3 


关于 : 和 [] 这两个符号的理解

可以理解为种类的意思,如:p:first,p 的种类为第一个。

[] 很自然的可以理解为属性的意思,如:[href] 选取带有 href 属性的元素。


$(":button") 为 jQuery 中表单选择器(貌似与过滤选择器同级),旨在选择所有的按钮,所以会找到 <input>、<button> 元素;而 $("button") 则为基本选择器,旨在选择为 <button> 的标签。

: 即为 jQuery 的过滤选择器,语法类似于 css 中的伪类选择器;其过滤选择器大概可以分为基本过滤(p:first 之类)、内容过滤(:empty)、子元素过滤(:first-child)和属性过滤 [href] 选择器。


更多选择器参考:https://www.runoob.com/jquery/jquery-ref-selectors.html 

jquery选择器扩展:https://api.jquery.com/category/selectors/jquery-selector-extensions/ 


参考网址:

https://www.runoob.com/jquery/jquery-selectors.html 

https://blog.csdn.net/Chenftli/article/details/81588447 

https://blog.csdn.net/qq_38225558/article/details/83780618 

https://blog.csdn.net/weixin_38930706/article/details/80917821 

https://www.cnblogs.com/wuyanliang/p/5868609.html 


转载请注明: ITTXX.CN--分享互联网 » jQuery教程——选择器

最后更新:2019-07-22 15:49:05

赞 (3) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽