jQuery精华篇

#id

根据元素Id选择

$("divId")

选择ID为divId的元素

element

根据元素的名称选择,

$("a")

选择所有<a>元素

.class

根据元素的css类选择

$(".bgRed")

选择所有CSS类为bgRed的元素

*

选择所有元素

$("*")

选择页面所有元素

selector1, selector2, selectorN

可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.

$("#divId, a, .bgRed")

选择页面所有ID为divId的元素、所有<a>元素和所有CSS类为bgRed的元素

名称

说明

举例

#id

根据元素Id选择

$("divId")

选择ID为divId的元素

element

根据元素的名称选择,

$("a")

选择所有<a>元素

.class

根据元素的css类选择

$(".bgRed")

选择所有CSS类为bgRed的元素

*

选择所有元素

$("*")

选择页面所有元素

selector1, selector2, selectorN

可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.

$("#divId, a, .bgRed")

选择页面所有ID为divId的元素、所有<a>元素和所有CSS类为bgRed的元素

名称

说明

举例

ancestor descendant

使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input.

$(".bgRed div")

选择CSS类为bgRed的元素中的所有<div>元素.

parent > child

选择parent的直接子节点child.  child必须包含在parent中并且父类是parent元素.

$(".myList>li")

选择CSS类为myList元素中的直接子节点<li>对象.

prev + next

prev和next是两个同级别的元素. 选中在prev元素后面的next元素.

$("#hibiscus+img")

选在id为hibiscus元素后面的img对象.

prev ~ siblings

 选择prev后面的根据siblings过滤的元素

注:siblings是过滤器

$("#someDiv~[title]")

选择id为someDiv的对象后面所有带有title属性的元素

名称

说明

举例

ancestor descendant

使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input.

$(".bgRed div")

选择CSS类为bgRed的元素中的所有<div>元素.

parent > child

选择parent的直接子节点child.  child必须包含在parent中并且父类是parent元素.

$(".myList>li")

选择CSS类为myList元素中的直接子节点<li>对象.

prev + next

prev和next是两个同级别的元素. 选中在prev元素后面的next元素.

$("#hibiscus+img")

选在id为hibiscus元素后面的img对象.

prev ~ siblings

 选择prev后面的根据siblings过滤的元素

注:siblings是过滤器

$("#someDiv~[title]")

选择id为someDiv的对象后面所有带有title属性的元素

名称

说明

举例

:enabled

匹配所有可用元素

$("input:enabled")

查找所有可用的input元素

:disabled

匹配所有不可用元素

$("input:disabled")

查找所有不可用的input元素

:checked

匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

$("input:checked")

查找所有选中的复选框元素

:selected

匹配所有选中的option元素

$("select option:selected")

查找所有选中的选项元素:

方法名

描述

html()

获取元素中 HTML 内容

html(value)

设置元素中 HTML 内容

text()

获取元素中文本内容

text(value)

设置原生中文本内容

val()

获取表单中的文本内容

val(value)

设置表单中的文本内容

类型选择器

Element

以文档语言对象类型作为选择器

div{color:blue}

所有div中的文字设置为蓝色

通配选择器

*

选定文档目录树（DOM）中的所有类型的单一对象

*{font-size:12px}

所有的文档中的文字设置为12px

ID选择器

#sID

以文档目录树（DOM）中作为对象的唯一标识符的ID作为选择

#username{border:1px solid black}

id为username的输入框设置为黑色单线边框

类选择器

El.className

在HTL中可以使用此种选择器

.button{background-color:gray}  所有带有class="gray"的元素背景都设置成灰色

群组选择器

E1，E2，E3

将同样的定义应用于多个选择器，可以将选择器以逗号分隔的方式并为组

.a,#b,div{font-size:9pt}

3个选择器能选中的元素字体都设置成9pt

包含选择器

E1 E2

选择所有被E1包含的E2。即E1.contains(E2）==true

.intro li{list-style:none}    带有class="intro"的元素下面的所有的li元素项目符号去掉