jQuery第二章

Posted 2020-06-09

一、jQuery选择器

jQuery的行为规则都必须在获取到元素后才能生效。来看一个简单的例子：

         <p class = “demo”>jQuery Demo</p>

         <script type = “text/javascript”>

                  $(“.class”).click(function(){

　　　　　　　　alert(“jQuery demo!”);

　　　　　　})

本段代码的作用是为<p>元素设置一个onclick事件，当单击此元素时，会弹出一个对话框。

二、jQuery选择器

1.jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

（1）基本选择器：

         基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。基本选择器的介绍说明如下：

$(“#test”)选取id为test的元素

$(“.test”)选取所有class为test的元素

$(“p”)选取所有的<p>元素

$(“div,span,p.myClass”)选取所有<div>，<span>，和拥有class为myClass的<p>标签的一组元素

 

（2）层次选择器：

         如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。层次选择器的介绍说明如下：

$(“div span”)选取<div>里的所有的<span>元素

$(“div > span”)选取<div>元素下元素名是<span>的子元素

$(“.one + div”)选取class为one的下一个<div>同辈元素

$(“#two ~ div”)选取id为two的元素后面的所有<div>同辈元素

可以使用next()来代替$(“prev+next”)选择器，例如

$(“ .one + div ”);等价于$(“ . one ”). next(“ div ”) ;

可以使用nextAll()来代替$(“prev ~ siblings”)选择器，例如

$(“ #prev ~ div”)等价于$(“ #prev ”).nextAll(“div”) ;

         siblings()方法与$(“prev ~ siblings”)选择器的对比：

$(“prev ~ div”)选择器只能选择“prev”元素后面的同辈<div>元素。而      sibling()方法与前后位置无关，只要是同辈节点就能匹配。

（3）过滤选择器：

         过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号：开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

①基本过滤选择器

：first 选取第一个元素，例如：$(“div : first”)选取所有<div>元素中第1个<div>元素

：last 选取最后一个元素，例如：$(“div : last”)选取所有<div>元素中最后一个<div>元素

：not(selector) 去除所有与给定选择器匹配的元素，例如：$(“input : not(myClass)”)选取class不是myClass的<input>元素

：even 选取索引是偶数的所有元素，索引从0开始，例如：$(“input : even”)选取索引是偶数的<input>元素

：odd 选取索引是奇数的所有元素，索引从0开始，例如：$(“input : odd”)选取索引是奇数的<input>元素

：eq(index) 选取索引等于index的元素(index从0开始)，例如：$(“input : eq(1)”)选取索引等于1的<input>元素

：gt(index) 选取索引大于index的元素(index从0开始)，例如：$(“input : gt(1)”)选取索引大于1的<input>元素(注，大于1而不包括1)

：lt(index) 选取索引小于index的元素(index从0开始)，例如：$(“input : lt(1)”)选取索引小于1的<input>元素(注，小于1而不包括1)

：header 选取所有的标题元素，例如h1,h2,h3等等 ，例如：$(“:header”)选取网页中所有的<h1>，<h2>，<h3>……

：animated 选取当前正在执行动画的所有元素，例如：$(“div : animated”)选取正在执行动画的<div>元素

：focus 选取当前获取焦点的元素 $(“: focus”)选取当前获取焦点的元素

②内容过滤选择器：

：contains(text) 选取含有文本内容为”text”的元素，例如：$(“div : contains(‘我’)”)选取不包含子元素的<div>元素

：empty 选取不包含子元素或者文本的空元素，例如：$(“div : empty”)选取不包含子元素的<div>空元素

：has(selector)选取含有选择器所匹配的元素的元素，例如：$(“div : has(p)”)选取含有<p>元素的<div>元素

：parent选取含有子元素或者文本的元素，例如：$(“div : parent”)选取拥有子元素的<div>元素

③可见性过滤选择器

：hidden 选取所有不可见的元素，例如：$(“: hidden”)选取所有不可见的元素。包括<input type=”hidden”/>，<div style=”display : none;”>和<div style=”visibility : hidden;”>等元素。如果只想选取<input>元素，可以使用$(“input : hidden”)

：visible 选取所有可见的元素，例如：$(“div : visible”)选取所有可见的<div>元素

④属性过滤选择器

属性过滤选择器的过滤规则是通过属性来获取相应的元素。

[attribute]选取拥有此属性的元素，例如：$(“div[id]”)选取拥有属性id的元素

[attribute=value]选取属性的值为value的元素，例如：$(“div[title = test]”)选取属性title为“test”的元素

[attribute!=value]选取属性的值不等于value的元素，例如：$(“div[title!=test]”)选取属性title不等于“test”的<div>元素

[attribute^=value]选取属性的值以value开始的元素，例如：$(“div[title^=test]”)选取属性title以“test”开始的<div>元素

[attribute$=value]选取属性的值含以value结束的元素，例如：$(“div[title$=test]”)选取属性title以“test”结束的<div>元素

[attribute*=value]选取属性的值含有value的元素，例如：$(“div[title*=test]”)选取属性以“test”结束的<div>元素

[attribute|=value]选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素，例如：$(“div[title|=”en”]”)选取属性title等于en或以en为前缀（该字符串后跟一个连字符‘-’）的元素

[attribute~=value]选取属性用空格分隔的值中包含一个给定值的元素，例如：$(“div[title~=”uk”]”)选取属性title用空格分隔的值中包含字符uk的元素

[attribute1][attribute2][attributeN]用属性选择器合并成一个符合属性选择器，满足多个条件。每选择一次，缩小一次范围，例如：$(“div[div][title$=’test’]”)选取拥有属性id，并且属性title以“test结束的<div>元素”

⑤子元素过滤选择器

：nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素（index从1算起），例如：:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的。

：first-child选取每个父元素的第1个子元素，:first-child选择符将为每个父元素匹配第1个子元素，例如：$(“ul li:first-child”)；选取meige<ul>中第1个<li>元素

：last-child选取每个父元素的最后一个子元素，同样，:last只返回单个元素，而：last-child选取将为每个父元素匹配最后一个子元素，例如：$(“ul li:last-child”)；选择每个<ul>中最后一个<li>元素

：only-child如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配，例如：$(“ul li : only-child”)在<ul>中选取时唯一子元素的<li>元素

⑥表单对象属性过滤性选择器

：enabled选取所有可用元素，例如：$(“#form1 : enabled”)选取id为”form1”的表单内的所有可用元素

：disabled选取所有不可用元素，例如：$(“#form2 : disabled”)选取id为“form2”的表单内的所有不可用元素

：checked选取所有被选中的元素（单选框，复选框），例如：$(“input : checked”)选取所有被选中的<input>元素

：selected选取所有被选中的选项元素（下拉列表），例如：$(“select option : selected”)选取所有被选中的选项元素

（4）表单选择器

表单对象属性过滤示例

：input选取所有的<input>、<textarea>、<select>、<button>元素，例如：$(“:input”)选取所有<input>、<textarea>、<select>、<button>元素

：text选取所有的单行文本框，例如：$(“:text”)选取所有的单行文本框

：password选取所有的密码框，例如：$(“:password”)选取所有的密码框

：radio选取所有的单选框，例如：$(“:radio”)选取所有的单选框

：checkbox选取所有的多选框，例如：$(“:checkbox”)选取所有的多选框

：submit选取所有的提交按钮，例如：$(“:submit”)选取所有的提交按钮

：image选取所有的图像按钮，例如：$(“:image”)选取所有的图像按钮

：reset选取所有的重置按钮，例如：$(“:reset”)选取所有的重置按钮

：button选取所有的按钮，例如：$(“:button”)选取所有的按钮

：file选取所有的上传域，例如：$(“:file”)选取所有的上传域

：hidden选取所有不可见元素，例如：$(“:hidden”)选取所有不可见元素