jQuery第二章

一、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”)选取所有不可见元素

原文地址:https://www.cnblogs.com/koto/p/5161496.html