选择器(selectors)整理记录

unicac 学习分享 2012-06-06

$("*"),表示获取所有的对象

$("#element")等同于document.getElementById("element");

$(".abc")表示获得HTML中所有使用了abc这个样式的元素

$("div")表示获得HTML中所有的div元素

$("#a,.b,p")表示获得ID是a的元素和使用了类样式b的元素以及所有的p元素

$("#a .b p")表示获得了ID是a的元素所包含的使用了类样式的b元素中的所有的p元素

$("Element1 Element2 Element3 Element...")css定义层级元素方式一样,只需要不同的元素之间有空格表示,前者父级后者子级以此类推。

$("div > input")表示获取div下所有的input

$("div + p")表示匹配紧跟在 div 元素后的 p 一个元素

$("div ~ p")表示匹配跟在 div 元素后的所有 p 元素

$("Element:first")获得在HTML页面中某种元素的第一个,比如$("div:first")表示获得第一个div

$("Element:last")获得在HTML页面中某种元素的最后一个,比如$("div:last")表示获得最后一个div

$("Element:not(selector)")去除所有与给定选择器匹配的元素,比如$("input:not(:checked)") 表示选择所有没有选中的复选框

$("Element:even")获得偶数行,从0开始计数

$("Element:odd")获得奇数行,从0开始计数

$("Element:eq(index)")匹配一个给定索引值的元素,从0开始计数,比如$("div:eq(3)")表示获得HTML中的第4个div

$("Element:gt(index)")匹配所有大于给定索引值的元素,从0开始计数,比如$("p:gt(3)")表示获得比索引3也就是第4个p开始,之[后]所有的p

$("Element:lt(index)")匹配所有小于给定索引值的元素,从0开始计数,比如$("p:lt(3)")表示获得比索引3也就是第3个p开始,之【前】所有的p

$(":header")匹配h1,h2,h3...标题之类的元素

$("Element:animated")匹配所有没有在执行动画效果中的元素(关于动画效果,在后面会讲到,在此只是一提,不必要在意,看不懂不要紧)

$("Element:contains(text)")匹配元素对象中的文本是否包含某个字母或者某个字符串(符串或串(String)是由零个或多个字符组成的有限序列。)

$("Element:empty")获得对象元素不包含文本或子元素

$("Element:parent")以上面相反,获得对象元素包含文本或子元素

$("Element:has(selector)")匹配含有某个元素是否包含某个元素 比如$("p:has(span)")表示所有包含span元素的p元素

$("Element:hidden")匹配所有不可见元素,包括display:none以及input的属性是hidden都可以匹配得到。

$("Element:visible")与上面相反,匹配所有可见元素

$("Element[id]")获得所有带有ID属性的元素

$("Element[attribute=KwooShung]")获得所有某个属性为KwooShung的元素

$("Element[attribute!=KwooShung]")获得所有某个属性不为KwooShung的元素,我想如果学过C#和java的人都明白"!"在程序中表示非

$("Element[attribute^=Kwoo]")获得所有某个属性值是以Kwoo开头的元素

$("Element[attribute$=Kwoo]")获得所有某个属性值是以Kwoo结尾的元素

$("Element[attribute*=Kwoo]")获得所有某个属性值包含Kwoo的元素

$("Element[selector1][selector2][....]")符合属性选择器,比如$("input[id][name][value=kwooshung]")表示获得带有ID、Name以及value是KwooShung的input元素。

$("Element:nth-child(index)")选择父级下的第N个子级元素,索引从1开始,而eq函数(eq函数会在后面学习到)从0开始。

┣━:nth-child(even)偶数
┣━:nth-child(odd)奇数
┣━:nth-child(3n)表达式
┣━:nth-child(2)索引
┣━:nth-child(3n+1)表达式
┗━:nth-child(3n+2)表达式

$("Element:first-child")匹配父级下的第一个子级元素

$("Element:last-child")匹配父级下的最后一个子级元素

$("Element:only-child")匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt

$(:input)只能匹配Input元素类型为input button select textarea

$(:text)匹配所有的单行文本框

$(:password)匹配所有的密码框

$(:radio)匹配所有的单选按钮

$(:checkbox)匹配所有的复选框

$(:submit)匹配所有的提交按钮

$(:image)匹配所有的图像域,例如<input type="image" />

$(:reset)匹配所有的重置按钮

$(:button)匹配所有的按钮

$(:file)匹配所有的文件上传域

$(:hidden)匹配所有的不可见元素或者type为hidden的元素

$(:enabled)匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮

$(:disabled)匹配所有的不可用input元素,作用与上相反

$(:checked)匹配所有选中的复选框元素

$(:selected)匹配所有的下拉列表

$("Element").attr(name)取得第一个匹配元素的属性值,比如$("img").attr("src")

$("Element").attr({key:value,key,value,....})表示为某一个元素一次性设置多个属性

$("Element").attr(key,value)为某一个元素设置属性

$("Element").attr(key,function)为所有匹配的元素设置一个计算的属性值。

$("Element").removeAttr(name)移除某一个属性

评论(2)

发布评论
  1. 都复制下来了,真详细,辛苦了。

  2. i++ i++

    辛苦LZ了