JQuery的选择器

来源：互联网发布：java语言入门知识编辑：程序博客网时间：2024/05/16 19:58

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

选择器种类：

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

可以参考JQuery文档

基本选择器

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

$(“标签名”);

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

$(“.class属性名”);

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

$(“#id”);

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

这里写图片描述

组合

这里写图片描述

基本选择器确实和css类似

层次选择器

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

$(“select1 select2”)

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

$(“select1 > select2 ”)

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

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

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

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

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

这里写图片描述

过滤选择器：

基本过滤选择器

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

如：

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

对ｔａｂｌｅ的操作。

可以获取第一个ｔｒ

这里写图片描述

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

这里写图片描述

获取偶数：

这里写图片描述

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

这里写图片描述

获取小于这个下标的。ｌｔ　
这里写图片描述

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

内容过滤选择器

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

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

这里写图片描述

可见性过滤选择器

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

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

这里写图片描述

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

属性过滤器

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

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

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

这里写图片描述

状态过滤选择器

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

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

<input type="text" value="中国" disabled />

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

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

这里写图片描述

选中！

这里写图片描述

表单选择器

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

这里写图片描述

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>

0 0