Jquery选择器和.css,.addClass,.toggleClass

参考：http://www.css88.com/jqapi-1.5/

 

1.      .css( propertyName ) 返回： String

为匹配的元素集合中获取第一个元素的样式属性值。

propertyName一个css属性名

 

2.      .addClass( className ) 返回: jQuery

为每个匹配的元素添加指定的类名

className为每个匹配元素所要增加的一个或多个样式名。

version added: 1.4.addClass(function(index, class) )

function(index, class)这个函数返回一个或更多用空格隔开的要增加的样式名。接收元素的索引位置和元素旧的样式名作为参数。

 

3.      .toggleClass( className ) 返回： jQuery

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或价值切换属性。即：如果存在（不存在）就删除（添加）一个类。

className在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。

className在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。

switch一个用来判断样式类添加还是移除的boolean 值。

function(index, class)用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。

switch一个用来判断样式类添加还是移除的boolean 值。

 

jQuery选择器Selectors

基本选择器
层次选择器

过滤选择器（简单，内容，可见性，子元素，属性）

表单选择器（表单，表单过滤选择器）

 

Basics(基本选择器)

#id

IDSelector (“#id”)

Id: 一个用来搜索的ID，通过指定一个元素的id属性。

对于ID选择，jQuery使用JavaScript函数document.getElementById()，这是非常有效的。

 

element

ElementSelector (“element”)

element一个用来搜索的元素。 指DOM节点的标签名。

选择所有给定标签名的元素。

调用JavaScript的 getElementsByTagName()函数，当该表达式使用时返回相应的元素。

 

.class, .class.class

ClassSelector (“.class”)

class

一个用来搜索的类名。一个元素可以有多个类；其中只有一个必须匹配。

选择给定类名的所有元素。

对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数。

 

ClassSelector (“.class”)

class

一个用来搜索的类名。一个元素可以有多个类；其中只有一个必须匹配。

选择给定类名的所有元素。

对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数。

 

*

AllSelector (“*”)

all selector

version added: 1.0jQuery('*')

警告：所有，或普遍的，这个选择器非常缓慢的，除了自身使用。

 

selector1, selector2

MultipleSelector (“selector1, selector2, selectorN”)

multiple selector

version added: 1.0jQuery('selector1,selector2, selectorN')

selector1

任何有效的选择

selector2

其他有效的选择<

selectorN

更多有效的选择只要你喜欢。

将每一个选择器匹配到的元素合并后一起返回。

您可以指定任何数量的选择器组合成一个单一的结果。这个多个表达组合是一种有效的方法来选择不同的元素。因为他们将在文件的顺序，DOM元素的顺序在返回的jQuery对象中可能不相同。另一种选择器组合是 .add() 方法。

 

Hierarchy（层次选择器）

ancestor descendant

DescendantSelector (“ancestor descendant”)

descendant selector

version added: 1.0jQuery('ancestordescendant')

ancestor

任何有效的选择器。

descendant

一个用来筛选后代元素的选择器。

选择所有给定的祖先的后代元素。

一个元素的后代可能是该元素的一个孩子，孙子，曾孙等。

例如：<script>$("forminput").css("border", "2px dottedblue");</script>

 

parent > child

ChildSelector (“parent > child”)

child selector

version added: 1.0jQuery('parent >child')

parent

任何有效的选择器。

child

一个用来筛选子元素的选择器。

选择所有通过“parent”给定的元素直接子元素，该子元素“child”给定。

像一个CSS选择器，这个子组合器被Safari, Firefox, Opera, Chrome, 和 Internet Explorer 7及以上版本等现代浏览器支持，但尤其不被Internet Explorer6及以下版本支持。然而在jQuery中，这个选择器（与其他所有选择器）能在所有支持的浏览器中工作，包括IE6。

这个子组合器(E > F)可以被认为是作为后代组合子(E F)不同，更具体的形式是它只会选择第一级的后代。

例如：<script>$("ul.topnav> li").css("border", "3px doublered");</script>

 

prev + next

 

prev ~ siblings

NextSiblings Selector (“prev ~ siblings”)

next siblings selector

version added: 1.0jQuery('prev ~siblings')

prev

任何有效的选择器

siblings

一个选择器来过滤第一选择器以下的兄弟元素。

匹配 “prev” 元素之后的所有 “siblings” 元素。

(prev + next) 和 (prev ~ siblings)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。

<script>$("#prev~ div").css("border", "3px grooveblue");</script>

 

Basic Filters（简单过滤选择器）

:first

first selector

version added: 1.0jQuery(':first')

选择第一个匹配的元素。

:first伪类相当于:eq(0)。它也可以写为:lt(1)。虽然:first只匹配一个单独的元素，但是:first-child选择器可以匹配超过一个：为每个父级元素匹配第一个子元素。

<script>$("tr:first").css("font-style","italic");</script>

 

:last

:lastSelector

last selector

version added: 1.0jQuery(':last')

选择最后一个匹配的元素。

注意:last选择一个过滤和匹配当前jQuery集合在它的最后一个单独的元素。

<script>$("tr:last").css({backgroundColor:'yellow', fontWeight: 'bolder'});</script>

 

:not(selector)

:even

:odd

:eq(index)

:gt(index)

:lt(index)

:header

:animated

Content Filters（内容过滤选择器）

:contains(text)

:empty

:has(selector)

:parent

Visibility Filters（可见性过滤选择器）

:hidden

:visible

Child Filters（子元素过滤选择器）

:nth-child(expr)

:first-child

:last-child

:only-child

Attribute Filters（属性过滤选择器）

[attribute]

[attribute=value]

[attribute!=value]

[attribute^=value]

[attribute$=value]

[attribute*=value]

[attribute|=value]

[attribute~=value]

[attribute][attribute2]

Forms（表单选择器）

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

Form Filters（表单过滤选择器）

:enabled

:disabled

:checked

:selected