标签:
最近又看了下《锋利的jQuery》,想系统的再整理下jQuery的有关知识
选择器是jQuery的根基,事件处理,遍历DOM和Ajax操作都依赖于选择器,这次我们先从
选择器说起。
首先,现在的jQuery是支持CSS1到CSS3选择器
这里一共包含四大类:基本选择器、层次选择器、过滤选择器、表单选择器
一,基本选择器
(1)#id
(2).class
(3)element
(4)*
(5)selector1,selector2,......,selectorN(将每一个选择器匹配到的元素合并后返回)
exp:$(“div,span,p.myClass”)选取所有<div>,<span>和拥有class为myClass的<p>标签中的一组元素
二,层次选择器
(1)$("ancestor descendant")
exp:$("div span") 选取<div>中的<span>
(2)$("parent>child")
exp:$("div>span") 选取<div>下名为<span>的子元素
(3)$("prev+next")
exp:$(".myClass+div")选取class名为"myClass"的下一个<div>同辈元素
(4)$("prev~sibilings")
exp:$("#mine~div")选取id为“mine”元素后面所有的<div>同辈元素
三,过滤选择器(分为五种)
【1】基本过滤选择器
(1):first
exp:$("div:first")选取所有<div>元素中的第一个<div>元素
(2):last
(3):not(selector) 去除所有与给定选择器匹配的元素
exp:$("input:not(.myClass)") 选取class不是myClass的<input>
(4):even 选取索引是偶数的所有元素 索引从0开始
(5): odd 选取索引是奇数的所有元素
(6): eq(index)索引等于index的元素
(7): gt(index)索引大于index的元素
(8):lt(index)索引小于index的元素
(9):header 选取所有的标题元素
exp:$(“:header”)选取网页中所有的<h1>,<h2>,<h3>
(10):animated 选取正在执行动画的元素
(11):focus 选取当前获取焦点的元素
【2】内容过滤选择器
(1) :contains(text) 选取含有文本内容为“text”的元素
exp:$("div:contains(‘me‘)") 选取含有文本"me"的<div>元素
(2):empty 选取不包含子元素或者文本的空元素
(3):has(selector) 选取含有选择器所有匹配元素的元素
exp:$("div:has(p)") 选取含有<p>元素的<div>元素
(4):parent 选取含有子元素或者文本的元素
【3】可见性过滤选择器
(1):hidden 选取所有不可见的元素
(2):visible 选取所有可见的元素
【4】属性过滤选择器
(1)[attr] 选取拥有此属性的元素
exp:$("div[id]")选取拥有id的div
(2)[attr=val] 选取属性值等于val的元素
(3)[attr!=val] 没有该属性的元素也会不选择
(4)[attr^=val]选取属性值以val开始的元素
exp:$("div[title]^=test") 选取属性title以”test“开始的div元素
(5)[attr$=val]选取属性以val结尾的元素
(6)[attr*=val]选取属性值含有val的元素
(7)[attr|=val]选取属性等于给定字符串或以该字符串为前缀(该字符串后跟连字符”-“)的元素
exp:$(‘div[title|=”en“]’)选取属性title等于"en"或以”en“为前缀的元素
(8)[attr~=val]选取属性用空格分隔的值中包含一个给定的元素
exp:$(‘div[title~=”uk“]’)选取title用空格分隔的值中包含”uk“元素
(9)[attr1][attr2][attrN] 复合属性选择,每选择一次,缩小一次
【5】子元素过滤选择器
(1)nth-child(index/even/odd/equation) 索引从1开始
(2):first-child
(3):last-child
(4):only-child
【6】表单对象属性过滤选择器
(1):enabled 选取所有可用元素
(2):disable 选取所有不可用的元素
(3):checked
(4): selected
四,表单选择器
(1) :input 选择所有<input> <textarea> <select> <button>元素
(2):text
(3):password
(4):radio
(5):chechbox
(6):submit
(7):image
(8):reset
(9):button
(10):file
(11):hidden
注:
(1)属性值中包含”.“ ”、“ ”#“需要用”\\“进行转移,否则会报错
(2)如果使用了1.3.1一下的版本,属性选择器前需要加@
(3)选择器中的空格需要特别注意,
exp:$(‘.test :hidden‘) 选取class为”test“的元素里面隐藏的元素
$(‘.test:hidden‘) 选取隐藏class为”test“的元素
标签:
原文地址:http://www.cnblogs.com/fnncat/p/4878196.html