JQuery的选择器

水深无声 2022-07-16 02:51 280阅读 0赞

**JQuery选择器**  
JQuery选择器类似于CSS选择(定位元素，施加样式)，能够实现定位元素，施加行为  
使用JQuery选择器能够将内容与行为分离

## 选择器种类： ##

基本选择器  
层次选择器  
过滤选择器  
表单选择器

可以参考JQuery文档

## 基本选择器 ##

元素选择器：依据标签名定位元素

$(“标签名”);

类选择器：根据class属性定位元素

$(“.class属性名”);

id选择器：根据id属性定位元素

$(“\#id”);

选择器组：定位一组选择器所对应的所有元素  
$(“\#id,.importent”);

![这里写图片描述][20160929212938108]

![这里写图片描述][20160929212954627]

组合

![这里写图片描述][20160929213025019]

**基本选择器确实和css类似**

## 层次选择器 ##

在select1元素下，选中所有满足select2的子孙元素

$(“select1 select2”)

在select1元素下，选中所有满足select2的子元素

$(“select1 > select2 ”)

选中select1元素的满足select2的下一个弟弟

$(“select1 ＋　ｓｅｌｅｃｔ２　”)

选中ｓｅｌｅｃｔ１元素的，满足ｓｅｌｅｃｔ２的所有弟弟

＄（＂ｓｅｌｅｃｔ１～ｓｅｌｅｃｔ２＂）

例如：　＄（＂＃ｄ１　．ｉｍｐｏｒｔｅｎｔ＂）

![这里写图片描述][20160929213059093]

## 过滤选择器： ##

## 基本过滤选择器 ##

**根据元素的基本特征定位元素，常用于表格和列表**  
ｆｉｒｓｔ：　　第一个元素  
ｌａｓｔ：　　　最后一个元素  
ｎｏｔ（ｓｅｌｅｃｔｏｒ）　　把ｓｅｌｅｃｔｏｒ排除在外  
ｅｖｅｎ：　　　挑选偶数行  
ｏｄｄ：　　　　挑选奇数行  
ｅｑ（ｉｎｄｅｘ）：下标等于ｉｎｄｅｘ的元素  
ｇｔ（ｉｎｄｅｘ）：　下标大于ｉｎｄｅｘ的元素  
ｌｔ（ｉｎｄｅｘ）：　下标小于ｉｎｄｅｘ的元素

如：

＄（＂ｔｒ：ｆｉｒｓｔ＂）

对ｔａｂｌｅ的操作。

可以获取第一个ｔｒ

![这里写图片描述][20160929213134031]

![这里写图片描述][20160929213151375]

**ｏｄｄ获取奇数行，但是是从０开始的！！！**

![这里写图片描述][20160929213215271]

**获取偶数：**

![这里写图片描述][20160929213242500]

**获取固定的下标，同样也是从０开始的。**

![这里写图片描述][20160929213309522]

**获取小于这个下标的。ｌｔ**　  
![这里写图片描述][20160929213332116]

ｎｏｔ是筛选，里面写＃ｉｄ，然后返回的就是排除掉这个ｉｄ的。

## 内容过滤选择器 ##

根据文本内容定位元素  
：ｃｏｎｔａｉｎｓ（ｔｅｘｔ）匹配包含给定文本的元素  
：ｅｍｐｔｙ　　　　　　　　　匹配所有不包含子元素或者文本的空元素

如：  
＄（＂ｐ：ｃｏｎｔａｉｎｓ（＇月饼＇）＂）

![这里写图片描述][20160929213400163]

## 可见性过滤选择器 ##

根据可见性定位元素  
：ｈｉｄｄｅｎ　　　　　匹配所有不可见元素，或ｔｙｐｅ为ｈｉｄｄｅｎ的元素  
：ｖｉｓｉｂｌｅ　　　　匹配所有的可见元素

如：  
＄（＂ｉｎｐｕｔ：ｈｉｄｄｅｎ＂）

![这里写图片描述][20160929213426133]

记住选择器的功能，实现功能时，想到可以用什么选择器

## 属性过滤器 ##

根据属性定位元素  
［ａｔｔｒｉｂｕｔｅ］　　　匹配具有ａｔｔｒｉｂｕｔｅ属性的元素  
［ａｔｔｒｉｂｕｔｅ　＝　ｖａｌｅ］　　匹配属性等于ｖａｌｕｅ的元素  
［ａｔｔｒｉｂｕｔｅ！＝ｖａｌｅ］　　　匹配属性不等于ｖａｌｕｅ的元素  
如：

＄（＂ｉｎｐｕｔ［ｖａｌｕｅ＝＂你好＂］＂）

**选出带有ｉｄ属性的ｄｉｖ**

![这里写图片描述][20160929213452399]

## 状态过滤选择器 ##

**根据状态定位元素**  
：ｅｎａｂｌｅｄ　　　　　匹配可用的元素  
：ｄｉｓａｂｌｅｄ　　　　匹配不可用的元素  
：ｃｈｅｃｋｅｄ　　　　　匹配选中的ｃｈｅｃｋｂｏｘ  
：ｓｅｌｅｃｔｅｄ　　　　匹配选中的ｏｐｔｉｏｎ

如：  
＄（＂ｉｎｐｕｔ：ｓｅｌｅｃｔｅｄ＂）

这个ｄｉｓａｂｌｅｄ是文本框不可用，就不能改了

**可以根据文本框的状态来选择**

![这里写图片描述][20160929213517899]

选中！

![这里写图片描述][20160929213539673]

## 表单选择器 ##

包括：  
：text 匹配文本框  
：password 匹配密码框  
：radio 匹配单选框  
：checkbox 匹配多选框  
：submit 匹配提交按钮  
：reset 匹配重置按钮  
：button 匹配普通按钮  
：file 匹配文件框  
：hidden 匹配隐藏框  
$(“:text”)

![这里写图片描述][20160929213620479]

## JQ实现图片轮播： ##

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQ版图片轮播</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript"> var index =0;//记录循环次数 function start(){ setInterval(function(){ //将显示的图片隐藏,:visible $("li:visible").hide(); //将下一张图片显示 $("li:eq("+(++index%$("li").length)+")").show(); },1000); } </script>
    <style type="text/css"> ul, li { list-style-type: none; margin: 0; padding: 0; } .show { display: block; } .hide { display: none; } </style>
    </head>
    
    <body onload="start();">
    <ul id="photos">
      <li class="show"><img src="2.jpg" /></li>
      <li class="hide"><img src="3.jpg" /></li>
    </ul>
    </body>
    </html>

[20160929212938108]: /images/20220716/f3bf49ccc3374effb344e855bcf098c8.png
[20160929212954627]: /images/20220716/c876491f3865467ca44be77fbf1c6cea.png
[20160929213025019]: /images/20220716/1528f82aa7bd4a25bf6164356890cdfd.png
[20160929213059093]: /images/20220716/65a1b12d52d34445a8b7a09dbe1acd81.png
[20160929213134031]: /images/20220716/1c8d2a95fd5242ee97cb54ffa31d0fa3.png
[20160929213151375]: /images/20220716/063fd2cfee6e4b20b0e4e9b3ea0a4d6a.png
[20160929213215271]: /images/20220716/2eebedbe2560494a9188ea59d2742c03.png
[20160929213242500]: /images/20220716/0f1fe748a2314cdca155f73a9cd305a8.png
[20160929213309522]: /images/20220716/bdd864ef5d3a4b78a9a414dcf39c2a6e.png
[20160929213332116]: /images/20220716/1154501bc77c4c358a0ec8416f3859ef.png
[20160929213400163]: /images/20220716/9affa2caec3d42559a1ab20e1bcf8d5c.png
[20160929213426133]: /images/20220716/f74e541e46144793aec5ad210bb6c7f5.png
[20160929213452399]: /images/20220716/ba115ea8ea0648d385192e19f708078c.png
[20160929213517899]: /images/20220716/a5df7912ac894d35b4e8a1fd7f05aedc.png
[20160929213539673]: /images/20220716/e6eecf32f9f1459aa8cb504eee790173.png
[20160929213620479]: /images/20220716/bbb3ae021a4948fc847459c1623debd4.png