jQuery系列-选择器(理论)
JQuery选择器详解
JQuery选择器详解第六章：Jquery选择器⼀:基本选择器（王洪涛）标签选择器：$("标签名"); 返回⼀组元素集合（匹配相同的标签名）类选择器：$(".class类名"); 返回⼀组元素集合（匹配相同的class属性值）id选择器：$("#id名"); 返回单个元素（匹配id属性值）通⽤选择器：$("标签,class,id"); 返回⼀组元素集合（选择的元素）全局选择器：$("*"); 返回⼀组元素集合（⽹页所有元素）⼆.层次选择器（史志慧）后代选择器 ancestor descendant 选取ancestor元素⾥的所有descendant（后代）元素 $("#menu span" )选取#menu下的<span>元素⼦选择器 parent>child 选取parent元素下的child（⼦）元素 $(" #menu>span" )选取#menu的⼦元素<span>相邻元素选择器 prev+next 选取紧邻prev元素之后的next元素 $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>同辈元素选择器 prev~sibings 选取prev元素之后的所有siblings元素 $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>三.属性选择器（任⾃彬）[attribute] 选取包含给定属性的元素 $(" [href]" )选取含有href属性的元素[attribute=value] 选取等于给定属性是某个特定值的元素 $(" [href ='#']" )选取href属性值为“#”的元素[attribute !=value] 选取不等于给定属性是某个特定值的元素 $(" [href !='#']" )选取href属性值不为“#”的元素[attribute^=value] 选取给定属性是以某些特定值开始的元素 $(" [href^='en']" )选取href属性值以en开头的元素[attribute$=value] 选取给定属性是以某些特定值结尾的元素 $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素[attribute*=value] 选取给定属性是以包含某些值的元素 $(" [href* ='txt']" )选取href属性值中含有txt的元素四.过滤选择器（超超）/*获取第⼀个元素*///$(".lis:first").css("color","green");/*获取最后⼀个元素*///$(".lis:last").css("color","blue");/*忽略元素*///$("a:not([href^=g])").css("background-color","pink");/*奇数偶数：下标0开始*//* $("li:odd").css("background-color","pink"); *//*定位到具体哪⼀个*/$("li:eq(0)").css("color","red");/*定位到⼤于位置的元素*/$("li:gt(2)").css("background-color","pink");/*定位到⼩于位置的元素*/$("li:lt(2)").css("background-color","green");/*定位到标题元素*/$(":header").css("background-color","blue");/*获取有焦点的元素*///$("#wht").focus();//$("input:focus").val('磊给你太美');/*获取动画元素*///$("ul").fadeOut(3000).fadeIn(5000);//$("ul:animated").css("background-color","blue");/*可见性选择器*//* :hidden可以定位到隐藏元素，包含隐藏域等，如果说定位到的时隐藏域，显⽰时则修改type属性值，如果时普通元素则可以修改css样式display */$("input:hidden").attr("type","visible");。
第二章jQuery选择器
2.5、 2.5、选择器中的一些注意事项 2.5.2、选择器中包含空格 5.2、 5.2 选择器中的空格是不容忽视的， 选择器中的空格是不容忽视的，多一个空格 或少一个空格会得到截然不同的结果. 或少一个空格会得到截然不同的结果. 如: $(“div:input”) 和 $(“div :input”) 具体区别请大家自己上机实践总结。 具体区别请大家自己上机实践总结。
:visible
选择所有可见元素
集合元素
2.3.4、 2.3.4、属性过滤选择器
选择器 [attribute] [attribute=val ue] [attribute!=va lue] [attribute^=va lue] [attribute$=va lue] [attribute*=va lue] [A1][A2]…A[N] 描述
:first-child
选择每个父元素的第1个 子元素
集合元素
:last-child :only-child
选取每个父元素的最后1 个子元素 如果某个元素是它父元 素中惟一的子元素,那么 将会被匹配.如果父元素 中含有其他元素,则不会 被匹配
集合元素
集合元素
2.3.5、 2.3.5、子元素过滤选择器 • :nth-child()选择器详细功能描述:
– 4、表单选择器
2.1、jQuery基本选择器 2.1、jQuery基本选择器
选择器 #id .class Element * E1,E2,E3 描述
根据指定的id匹配元素 根据类匹配元素
返回
单个元素 集合元素
示例 $(“#hel”)选择id=hel的元素 $(“#hel”) hel”) $(“.hel”)选择class=hel的 $(“.hel”) hel”) 元素 $(“div”)选择所有的div元素 $(“*”)选择所有元素 $(“div,span,.hotclass”)选 择所有div，span,和class为 hotcalss的元素
jQuery选择器详解
jQuery选择器详解根据所获取页⾯中元素的不同。
可以将jQuery选择器分为：四⼤类，其中过滤选择器在分为六⼩类jQuery选择器基本选择器层次选择器过滤选择器简单过滤选择器内容过滤选择器可见性过滤选择器属性过滤选择器⼦元素过滤选择器表单对象属性过滤选择器表单选择器基本选择器是jQuery中使⽤最频繁的选择器，它是由元素Id,Class,元素名，多个选择符组成，通过基本选择器可以实现⼤多数页⾯元素的查找，基本选择器选择器功能返回值#id根据给定的ID匹配⼀个元素单个元素element根据给定的元素匹配所有元素元素集合.class根据给定的类匹配元素元素集合*匹配所有元素元素集合selector，selectorN将每个选择器匹配到元素合并后⼀起返回元素集合层次选择器⽤过DOM元素间的层次关系获取元素，其主要的层次关系包括后代，⽗⼦，相邻，兄弟关系，通过其中某类关系可以⽅便快捷地定位元素层次选择器选择器功能返回值ancestor descendant根据祖先元素匹配所有的后代元素元素集合parent>child根据⽗元素匹配所有的⼦元素元素集合prev+next匹配所有紧接在prev元素后的相邻元素元素集合prev~siblings匹配prev元素之后的所有兄弟元素元素集合过滤选择器下的简单过滤选择器根据某类过滤规则进⾏元素的匹配，书写时都以冒号（：）开头;简单过滤器选择器是过滤器中使⽤最⼴泛的⼀种，简单过滤选择器语法选择器功能返回值first() 或：first获取第⼀个元素单个元素last() 或：last获取最后⼀个元素单个元素：not(selector)获取除给定选择器外的所有元素元素集合：even获取所有索引值为偶数的元素，索引号从0开始元素集合：odd获取所有索引值为奇数的元素，索引号从0开始元素集合：eq(index)获取指定索引器的元素，索引号从0开始单个元素：gt(index)获取所有⼤于给定索引器的元素，索引号从0开始元素集合：lt(index)获取所有⼩于给定索引器的元素，索引号从0开始元素集合：header获取所有标题类型的元素，如h1,h2......元素机会：animated获取正在执⾏动画效果的元素元素集合过滤选择器下的内容过滤选择器根据元素中的⽂字内容或所包含的⼦元素特征获取元素，其⽂本内容可以模糊或绝对匹配进⾏元素定位，内容过滤选择器选择器功能返回值：contains（text）获取包含给定⽂本的元素元素集合：empty获取所有不包含⼦元素或者⽂本的空元素元素集合：has(selector)获取含有选择器所匹配的元素的元素元素集合：parent获取含有⼦元素或者⽂本的元素元素集合过滤选择器下的可见性过滤选择器根据元素是否可见的特征获取元素，可见性过滤器语法选择器功能返回值：hidden获取所有不可见元素，或者type为hidden的元素元素集合：visible获取所有可见元素元素集合过滤选择器下的属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“【”号开始⼀“】”号结束。
基础jquery知识点
基础jquery知识点基础jQuery知识点jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果等操作。
在网页开发中，jQuery非常常用，是前端开发的基础知识之一。
下面将介绍一些基础的jQuery 知识点。
一、选择器（Selectors）选择器是使用jQuery的关键，它允许我们通过各种方式选择HTML元素，并对其进行操作。
常见的选择器包括元素选择器、类选择器、ID选择器等。
1. 元素选择器元素选择器使用元素的标签名作为选择器，可以选择所有匹配的元素。
例如，使用$("p")可以选择页面中的所有段落元素。
2. 类选择器类选择器使用元素的class属性作为选择器，可以选择具有相同类名的所有元素。
例如，使用$(".class")可以选择页面中所有具有class为class的元素。
3. ID选择器ID选择器使用元素的id属性作为选择器，可以选择具有相同id的元素。
例如，使用$("#id")可以选择具有id为id的元素。
二、事件处理（Event Handling）事件处理是jQuery的另一个重要功能，它允许我们对HTML元素进行事件绑定，并在事件发生时执行相应的操作。
1. click事件click事件在元素被点击时触发，我们可以使用click()函数来绑定click事件，并定义事件处理函数。
例如，使用$("button").click(function(){})可以在点击按钮时执行相应的操作。
2. hover事件hover事件在鼠标悬停在元素上时触发，我们可以使用hover()函数来绑定hover事件，并定义事件处理函数。
例如，使用$("div").hover(function(){}, function(){})可以在鼠标悬停在div元素上时执行第一个函数，鼠标移出时执行第二个函数。
第二讲 jQUERY选择器
三、过滤选择器
（二）内容过滤选择器
将某个选择器与内容过滤选择器一起使用，可以从查询到的 元素中进一步筛选出具有给定文本或子元素的元素。
三、过滤选择器
（三）属性过滤选择器
通配符选择器
*{…}
$(“*”)
匹配所有元素
二、jQuery选择器
（三）层级选择器
如果想通过DOM元素之间的层次关系来获取特定元素，例如 后代元素、子元素、相邻元素和兄弟元素等，层次选择器非 常好用。
选择器 $(“s1 s2”) $(“parent>c”) 描述 选取s1元素里的所 有（后代）元素 选取parent元素下 下的C（子）元素 返回值 集合元素 集合元素 集合元素 集合元素 示例 $(“div span”)选择div里的 所有后代span元素 $(“div>span”)选择div元素 下名是span的所有直接子元素 $(“.one+div”)选取class为 one的下一个div元素 $(“#two~div”)选取id为two 的元素后面的所有div兄弟元素
二、jQuery选择器
（一）jQuery工厂函数
工厂函数是jQuery中的核心函数，其名称就是jQuery，其简写 形式为美元符号$，工厂函数语法格式很多，但最终返回 jQuery对象。格式如下：
将一个DOM元素包装成jQuery对象
$(document.getElementById(“div”);
（一）DOM模型
核心DOM：针对任何结构化文档定义了一组对象。 XML DOM：针对XML文档定义了一组对象 HTML DOM：针对HTML文档定义了一组对象
03jQuery选择器
第三章jQuery选择器参考帮助文档1、基本选择器$(“#id”)ID选择器$(“.calss”)class选择器$(“element”)元素选择器$(“*”)匹配所有元素2、层次选择器1、多个选择器之间用","隔开，每个选择器之间地位平等。
2、多个选择器之间用" "隔开，前一个选择器包含下一个选择器（祖先和所有后代的关系)。
3、两个选择器之间用>隔开，则是父子关系。
前一个元素是后一个元素的父节点。
4、两个选择器之间用+隔开，则是相邻关系。
前一个元素的下一个元素。
5、两个选择器之间用~隔开，则是前一个元素的所有后面的兄弟元素。
6、选择器.silbings(选择器)，则是前一个元素的所有兄弟元素3、过滤选择器7、$(选择器:frist）第一个元素$(选择器:last）最后一个元素8、$(选择器:not(选择器))，则是前一个元素不为第二个元素9、$(选择器:even)：索引为偶数$(选择器:odd):索引为奇数10、$(选择器:gt(3))：索引大于3 $(选择器:lt(3)):索引小于3 $(选择器:eq(3)) 索引等于311、$(:header)选择所有h1-h6的标题元素12、$(:animated)选择animated的元素4、内容选择器13、$(选择器:contains(text))选择某个选择器下包含text内容的元素14、$(选择器:empty)匹配所有不包含子元素或者文本的空元素15、$(选择器:has(selector))匹配含有选择器所匹配的元素的元素16、$(选择器:parent)：匹配含有子元素或者文本的元素，即它是父节点17、$(选择器:not(:contains(text)))选择某个选择器不包含text内容的元素5、可见度选择器18、$(选择器:hiddle):匹配所有不可见元素，或者type为hidden的元素19、$(选择器:visible):匹配所有的可见元素6、属性过滤选择器20、$(选择器[属性名])：匹配包含给定属性的元素。
第2讲JQuery选择器
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后 面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无 关, 只要是同辈节点就可以选取
层次选择器示例
改变 <body> 内所有 <div> 的背景色为 # bbffaa $(“body div") 改变 <body> 内子 <div> 的背景色为 # bbffaa $(“body>div") 改变 id 为 one 的下一个 <div> 的背景色为 # bbffaa $("#one+div") 改变 id 为 two 的元素后面的所有兄弟<div>的元素的 背景色为 # bbffaa $("#two~div") 改变 id 为 two 的元素所有 <p> 兄弟元素的背景色为 # bbffaa $("#two"). siblings("p")
表单选择器
练习1
1. 给网页中所有的 <p> 元素添加 onclick 事件 <p>段落1</p> <p>段落2</p> <p>段落3</p>
2. 使一个特定的表格隔行变色(每个表格隔行变色) $(“table:eq(0) tr:even").css("background","red");
子元素过滤选择器示例
选取下列元素,改变其背景色为 # bbffaa 每个class为one的div父元素下的第2个子元素. 每个class为one的div父元素下的第一个子元素 每个class为one的div父元素下的最后一个子元 素 如果class为one的div父元素下的仅仅只有一个 子元素，那么选中这个子元素
jQuery选择器讲义
1、基本选择器
2、层次选择器
3、过滤选择器
4、表单选择器
1、基本选择器
#id : 根据给定的id匹配一个元素，返回单个匹配的元素：
eg：$(#t)选取id为t的元素
.class:根据给定的类名匹配元素,返回集合元素，
eg：$(".t")选取所有class为t的元素
eg
$("div:has(p)")选取含有<p>元素的<div>元素
：parent 选取含有子元素或文本的元素
eg
$("div:parent")选取包含子元素或文本元素的<div>元素
可见性过滤
：hidden 选取所有不可见的元素
eg
$(":hidden")选取所有不合成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围
eg
$("div[id][title*=test]")选取拥有属性id，并且属性title以test结束的<div>元素
子元素过滤
：nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素（index从1算起）
内容过滤
：contains(text)选取含有文本内容为“text”的元素
eg
$("div:contains('刘')")选取含有文本“刘”元素
:empty 选取不包含子元素或者文本的空元素
eg
$("div:empty")选取不包含子元素或文本元素的<div>空元素
jQuery选择器深度解析
jQuery选择器 (2)jQuery选择器的分类 (2)基本选择器 (3)Id选择器的特殊：只返回单个元素，这个由html的规定决定的。
(3)class选择器 (4)基本选择器的大例子 (4)层次选择器 (7)用空格分开的层次选择器的特点 (7)+层次选择器 (8)等价关系 (9)层次选择器的大例子 (9)过滤选择器 (12)基本过滤 (13)基本过滤的例子 (13)内容过滤 (16)内容过滤的例子 (16)可见性过滤 (18)可见性过滤的例子 (18)属性过滤 (20)属性过滤的例子 (20)子元素过滤 (23)子元素过滤 (23)表单对象属性过滤 (26)表单对象属性过滤例子 (26)表单选择器 (29)表单选择器的例子 (29)jQuery的text和html的区别 (31)js里面的innerText和innerHtml的区别 (32)html的知识：文本框不能输入 (32)html的知识：下拉列表的类型 (33)视频问题 (34)问题 (34)问题1jQuery中基本选择器 (34)问题2jQuery拥有这么多的选择器，该怎么进行选择？好像有些内容是重复的 .. 35jQuery选择器jQuery选择器的分类基本选择器$(“id”),根据id值找到匹配的元素，最多只返回一个元素(如果该元素存在)，如果不存在，则返回一个空的jQuery对象。
$(“.class”)，根据css的class属性来返回一个集合，无论该css类是否真的存在，只要定义在元素中就能被jQuery查询到。
Id选择器的特殊：只返回单个元素，这个由html的规定决定的。
注意跟css的区别，css可以控制所有id相同的元素的样式jQuery1.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> New Document </title><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><script type="text/javascript" src="jquery-1.8.0.js"></script><script type="text/javascript">$(document).ready(function(){//结果是1，而不是2,有多个相同id的元素只返回单个元素alert($("#test1").length);alert($("#test1").text());alert($("#test1")[0].href);});</script></head><body><a id="test1" href="">google</a><a id="test2" href="">yahoo</a></body></html>class选择器jQuery4.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> New Document </title><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><script type="text/javascript" src="jquery-1.8.0.js"></script><script type="text/javascript">$(document).ready(function(){//在这个html中没有class为test的css，但是jQuery并不关心是否存在相应的css，只关心元素是否有名为test的class修饰alert($(".test").length); //结果为2});</script></head><body><a class="test" href="">google</a><a class="test" href="">yahoo</a></body></html>基本选择器的大例子jQuery5.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="jquery-1.8.0.js"></script><script type="text/javascript">$(document).ready(function(){$("#button1").click(function(){//id选择器$("#one").css("background","red");});$("#button2").click(function(){//里面隐藏了循环//class选择器$(".mini").css("background","green");});$("#button3").click(function(){//里面隐藏了循环//标签选择器$("div").css("background","orange");});$("#button4").click(function(){//里面隐藏了循环//所有的元素$("*").css("background","blue");});$("#button5").click(function(){//里面隐藏了循环//组合$("span,#two,.mini").css("background","pink");});});</script></head></head><body><h3>基本选择器</h3><input type="button" value="test1" id="button1"><input type="button" value="test2" id="button2"><input type="button" value="test3" id="button3"><input type="button" value="test4" id="button4"><input type="button" value="test5" id="button5"><div class="one" id="one">id为one，class为one的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two，class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div> </div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div> </div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为“hide”的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"/> </div></body></html>style.cssdiv,span,p{width:140px;height:140px;margin:5px;background:#aaa;border:#000 1px solid;float:left;font-size:17px;font-family:Verdana;}div.mini{width:55px;height:55px;background-color:#aaa;font-size:12px;}div.hide{display:none;}层次选择器用空格分开的层次选择器的特点jQuery6.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><script type="text/javascript" src="jquery-1.8.0.js"></script><script type="text/javascript">$(document).ready(function(){$("div span").css("background","red");});</script></head></head><body><h3>基本选择器</h3>$("div span")这个选择器选择的是div下面的span，包括它下面直接的span还有下面其他标签里面的span例如a链接里面的span<br><div><span>这个是div下的span</span><br><a><span>这个是a下的span</span></a></div></body></html>+层次选择器上面解释了$(".one + div")会选中的元素是哪一些等价关系层次选择器的大例子jQuery7.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="jquery-1.8.0.js"></script><script type="text/javascript">$(document).ready(function(){$("#button1").click(function(){//body里面的所有div改变背景色用单引号或者双引号都可以$('body div').css("background","red");//下面这个写法跟上面的写法是一样的，但是含义不一样，上面那个是选择body下面的所有div//$('div').css("background","red");});$("#button2").click(function(){//里面隐藏了循环//直接的子元素$('body > div').css("background","blue");});$("#button3").click(function(){//里面隐藏了循环//class为one的下一个元素，在这个例子中由于很多的div的class都是one，所以它们的下一个被选中//总共选择了四个//这个$(".one + div"返回的是一个集合，因为可能有很多class叫做one的元素//下面两句话是等价的//$(".one + div").css("background","green");$(".one").next("div").css("background","green");});$("#button4").click(function(){//里面隐藏了循环//#two后面的所有兄弟元素//$("#two ~ div").css("background","orange");//等价写法$("#two").nextAll().css("background","orange");});$("#button5").click(function(){//里面隐藏了循环//查找同辈的div，没有上下顺序$("#two").siblings("div").css("background","orange");});});</script></head></head><body><h3>基本选择器</h3><input type="button" value="test1" id="button1"><input type="button" value="test2" id="button2"><input type="button" value="test3" id="button3"><input type="button" value="test4" id="button4"><input type="button" value="test5" id="button5"><div class="one" id="one">id为one，class为one的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two，class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div> </div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div> </div><div>style的display为"none"的div</div><div class="hide">class为“hide”的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"/> </div></body></html>Style.cssdiv,span,p{width:140px;height:140px;margin:5px;background:#aaa;border:#000 1px solid;float:left;font-size:17px;font-family:Verdana; }div.mini{width:55px;height:55px;background-color:#aaa;font-size:12px;}div.hide{display:none;}过滤选择器基本过滤基本过滤的例子jQuery8.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="jquery-1.8.0.js"></script><script type="text/javascript">$(document).ready(function(){$("#button1").click(function(){//选择第一个div元素$('div:first').css("background","red");});$("#button2").click(function(){$('div:last').css("background","blue");});//even odd包括隐藏和孙子元素的所有元素$("#button3").click(function(){//even是偶数，从0开始$("div:even").css("background","green");});$("#button4").click(function(){//odd是奇数，从0开始$("div:odd").css("background","orange");});$("#button5").click(function(){//div等于3的元素，即第四个$("div:eq(3)").css("background","pink");});$("#button6").click(function(){//div的class属性不为one的元素$("div:not(.one)").css("background","yellow");});$("#button7").click(function(){//div大于3的元素$("div:gt(3)").css("background","#abcdef");});$("#button8").click(function(){//div小于3的元素$("div:lt(3)").css("background","#fedcba");});$("#button9").click(function(){//<h3>基本选择器</h3>$(":header").css("background","#fedcba");});});</script></head></head><body><h3>基本选择器</h3><input type="button" value="test1" id="button1"><input type="button" value="test2" id="button2"><input type="button" value="test3" id="button3"><input type="button" value="test4" id="button4"><input type="button" value="test5" id="button5"><input type="button" value="test6" id="button6"><input type="button" value="test7" id="button7"><input type="button" value="test8" id="button8"><input type="button" value="test9" id="button9"><div class="one" id="one">id为one，class为one的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two，class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div> </div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div> </div><div>style的display为"none"的div</div><div class="hide">class为“hide”的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"/> </div></body></html>内容过滤内容过滤的例子jQuery9.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="jquery-1.8.0.js"></script><script type="text/javascript">//$(document).ready 等价于$().ready $(function(){})这个三个完全等价$(function(){$("#button1").click(function(){//注意“为”并没有加引号，这是1.8.0的特点，其他的版本可能需要加,当然加上去也行$("div:contains(为)").css("background","red");});$("#button2").click(function(){//div不包含子元素和文本$("div:empty").css("background","green");});$("#button3").click(function(){//标签选择器$("div:has(.mini)").css("background","blue");});$("#button4").click(function(){//具有子元素和文本$("div:parent").css("background","#abaaee");});});</script></head></head><body><h3>内容过滤选择器</h3><input type="button" value="test1" id="button1"><input type="button" value="test2" id="button2"><input type="button" value="test3" id="button3"><input type="button" value="test4" id="button4"><div class="one" id="one">id为one，class为one的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two，class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div> </div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为“hide”的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"/> </div></body></html>可见性过滤可见性过滤的例子jQuery10.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="jquery-1.8.0.js"></script><script type="text/javascript">//$(document).ready 等价于$().ready $(function(){})这个三个完全等价$().ready(function(){$("#button1").click(function(){//不可见的body 结果是0alert($("body:hidden").length);alert($("div:hidden").length);alert($("input:hidden").length);//动画效果，参数是时间，多久显示出来以毫秒为单位$('div:hidden').show(5000).css('background','blue');});$("#button2").click(function(){//div不包含子元素和文本$("div:visible").css("background","red");});});</script></head></head><body><h3>可见性过滤选择器</h3><input type="button" value="test1" id="button1"><input type="button" value="test2" id="button2"><div class="one" id="one">id为one，class为one的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two，class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div> </div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为“hide”的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"/> </div></body></html>属性过滤属性过滤的例子jQuery11.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="jquery-1.8.0.js"></script><script type="text/javascript">//$(document).ready 等价于$().ready $(function(){})这个三个完全等价$().ready(function(){$("#button1").click(function(){//包含title属性的div$('div[title]').css("background",'green')});$("#button2").click(function(){//属性title等于test的div$("div[title=test]").css("background","red");});$("#button3").click(function(){//属性title等于test的div$("div[title!=test]").css("background","pink");});$("#button4").click(function(){//属性title是以test开头的div$("div[title^=test]").css("background","pink");});$("#button5").click(function(){//属性title是以st结尾的div$("div[title$=test]").css("background","pink");});$("#button6").click(function(){//属性title包含st的div$("div[title*=st]").css("background","pink");});$("#button7").click(function(){//有id属性title以t开头的div$("div[id][title^=t][title$=t]").css("background","pink");});});</script></head></head><body><h3>属性过滤选择器</h3><input type="button" value="test1" id="button1"><input type="button" value="test2" id="button2"><input type="button" value="test3" id="button3"><input type="button" value="test4" id="button4"><input type="button" value="test5" id="button5"><input type="button" value="test6" id="button6"><input type="button" value="test7" id="button7"><div class="one" id="one">id为one，class为one的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two，class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div> </div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div> </div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为“hide”的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"/> </div></body></html>子元素过滤子元素过滤jQuery12.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="jquery-1.8.0.js"></script><script type="text/javascript">//$(document).ready 等价于$().ready $(function(){})这个三个完全等价$().ready(function(){$("#button1").click(function(){//class为one的div中的第二个元素//nth的由来：第七是serventh,所以用n(1,2,...)+th来表示$('div.one :nth-child(2)').css("background",'red')});$("#button2").click(function(){//两种写法是一样的//$('div.one :nth-child(1)').css("background",'green')$("div.one :first-child").css("background","green");});$("#button3").click(function(){//class为one的div中的最后一个元素$("div.one :last-child").css("background","pink");});$("#button4").click(function(){//class为one的div中只有一个元素$("div.one :only-child").css("background","orange");});});</script></head></head><body><h3>子元素过滤选择器</h3><input type="button" value="test1" id="button1"><input type="button" value="test2" id="button2"><input type="button" value="test3" id="button3"><input type="button" value="test4" id="button4"><input type="button" value="test5" id="button5"><input type="button" value="test6" id="button6"><input type="button" value="test7" id="button7"><div class="one" id="one">id为one，class为one的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two，class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div> </div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为“hide”的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"/> </div></body></html>。
jQuery选择器
jQuery选择器1.基本选择器(3种):$("标签名"),如$("p")是选取了所有的p标签节点$("#id名"),如$("#test")是选取了id为test的标签节点$(".class名"),如$(".test")是选取了所有class为test的标签节点上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt等等.*：匹配所有元素2.组选择器:下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class.$("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3")3.层次选择器3.1后代选择器:$("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div 标签内的所有具有test的class的后代元素(就是被div嵌套的class 属性为test的标签)3.2.子选择器:$("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子:$("div>.test")<div><p class="test"></p></div>对这里的p段落标签有效.但对<div><p><p class="test"></p></p></div>对这里的p段落标签无效,这里要用$("div .test)3.3.临近选择器:$("mix+mix"),选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点.<div></div><p id="test"></p>在$("div + #test")中能取到p 段落节点<div></div><p></p><p id="test"></p>则不能取到3.4~匹配 prev 元素之后的所有siblings 元素4.过滤选择器（也叫简单选择器）4.1 :first 匹配找到的第一个元素4.2 :last 匹配找到的最后一个元素4.3 :not去除所有与给定选择器匹配的元素在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）$("input:not(:checked)")4.4 :even匹配所有索引值为偶数的元素，从 0 开始计数4.5 :odd匹配所有索引值为奇数的元素，从 0 开始计数4.6 :eq(index)匹配一个给定索引值的元素4.7 :gt(index)匹配所有大于给定索引值的元素4.8 :lt(index)匹配所有小于给定索引值的元素4.9 :header匹配如h1, h2, h3之类的标题元素$(":header").css("background", "#EEE");4.10 :animated匹配所有正在执行动画效果的元素$("#run").click(function(){$("div:not(:animated)").animate({ left: "+=20" }, 1000);});5.内容过滤选择器5.1 :contains(text) 匹配包含给定文本的元素5.2 :empty 匹配所有不包含子元素或者文本的空元素5.3 :has(selector) 匹配含有选择器所匹配的元素的元素5.4 :parent 匹配含有子元素或者文本的元素6.可见性过滤选择器6.1 :hidden匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到6.2 :visible匹配所有的可见元素7.属性过滤选择器7.1 [attribute]匹配包含给定属性的元素。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
选择器 children([expr]) find(expr) parent([expr]) siblings([expr])
14
jQuery筛选
• 判断
说明 用一个表达式来检查当前选择的元素集合，如果其中至少 有一个元素符合这个给定的表达式就返回true。 'false' 如果没有元素符合，或者表达式无效，都返回'false'。 例：is(“:hidden”) 检查当前的元素是否含有某个特定的类，如果有，则返回 true。 这其实就是 is("." + class)。 例：hasClass(“highlight”)
7
操作样式
• addClass(“css类名”) vs attr(“class”, “css类名”) 例
<div id=“divTest” class=“test”></div>
执行$(“#divTest”).attr(“class”,”other”);后
<div id=“divTest” class=“other”></div>
选择器 is(expr)
hasClass(class)
15
总结
jQuery的选择器有哪些？ 的选择பைடு நூலகம்有哪些？ 的选择器有哪些 如何操作元素的属性？ 如何操作元素的属性？
attr(“class”, “ClassName”)与addClass(“ClassName”)的区别 与 的区别
16
作业
• 作业： 作业.txt
12
jQuery选择器
• 其它
说明 匹配包含给定文本的元素 匹配所有选中的被选中元素(复选框、单选框等，不包括 select中的option) 匹配所有选中的option元素
选择器 :contains :checked :selected
13
jQuery筛选
• 查找
说明 取得一个包含匹配的元素集合中每一个元素的所有子元素 的元素集合。 搜索所有与指定表达式匹配的元素。这个函数是找出正在 处理的元素的后代元素的好方法。 取得一个包含着所有匹配元素的唯一父元素的元素集合。 取得一个包含匹配的元素集合中每一个元素的所有唯一同 辈元素的元素集合。可以用可选的表达式进行筛选。
2
本章任务
• • 掌握jQuery选择器 操作页面元素属性和样式
3
本章目标
• • 使用jQuery选择器获取页面元素 操作元素的属性和样式
4
操作属性
• attr – attr(“属性名”) 取得属性的值 – attr(“属性名”, “属性值”) 修改属性的值 – removeAttr(“属性名”) 删除属性 例： $(“#divTest”).attr(“id”); $(“#divTest”).attr(“class”, “hidden”);
选择器
JQuery系列
1
回顾 • • jQuery是什么？ 一个优秀的Javascrīpt框架 jQuery的核心函数有哪些？ jQuery(expression, [context]) jQuery(elements) jQuery(callback) jQuery(html, [ownerDocument])
11
jQuery选择器
• 表单选择器
说明 匹配所有 input, textarea, select 和 button 元素 匹配所有的单行文本框 匹配所有密码框 匹配所有单选按钮 匹配所有复选框 匹配所有提交按钮 匹配所有文件域 匹配所有不可见元素，或者type为hidden的元素
选择器 :input :text :password :radio :checkbox :submit :file :hidden
5
操作样式
• css – css(“样式名”) 取得样式的值 – css(“样式名”, “样式值”) 修改样式的值 例： $(“#divTest”).css(“background”); $(“#divTest”).css(“background”,”blue”);
6
操作样式
• addClass/removeClass/toggleClass – addClass(“css类名”) 添加一个css类 – removeClass(“css类名”) 删除一个css类 – toggleClass (“css类名”) 切换css类 例： $(“#divTest”).addClass(“highlight”); $(“#divTest”).removeClass(“highlight”);
9
jQuery选择器
• 层次选择器 – ancestor descendant • 在给定的祖先元素下匹配所有的后代元素 • 例：$(“#divTest p”) – parent > child • 在给定的父元素下匹配所有的子元素 • 例：$(“#divTest>p”)
10
jQuery选择器
• 基本过滤器
而执行$(“#divTest”).addClass(“other”);后
<div id=“divTest” class=“test other”></div>
8
jQuery选择器
• 基本选择器.class再探
<div class=“test other”></div>
使用.class选择器如何取得上面所示的层？ $(“.test”) or $(“.other”)
17