jquery详细方法大全.docx

$（"div:

has（p）"）

返回Array

:

empty

选取所有空

$（"div:

empty"）

返回Array

:

visible

查找所有可见元素

$（"tr:

visible"）

返回Array

[attribute=value]

选取文本输入框的input元素

$（"input[type=text]"）

返回Array

[attribute!

=value]

选取所有不是hidden的input元素，注意，没有type属性的input也会被选取

$（"input[type!

=hidden]"）

返回Array

[attribute^=value]

选取开头为mailto:

的所有a链接

$（"a[href^='mailto']"）

返回Array

[attribute$=value]

选取所有结尾为.jpg的img图片

$（"img[src$='.jpg']"）

返回Array

表单选择器

:

input

查找所有的input元素（包括input,textarea,select和button）

$（":

input"）

返回Array

:

password

查找所有密码框

$（":

password"）

返回Array

:

text

查找所有单行文本框

$（":

text"）

返回Array

:

radio

查找所有单选按钮

$（":

radio"）

返回Array

:

checkbox

查找所有复选框

$（":

checkbox"）

返回Array

:

checked

查找所有选中的checkbox,radio

$（"input:

checked"）

返回Array

:

selected

查找所有选中的选项元素

$（"select:

selected"）

返回Array

属性

attr（key）attr（key,value）设置一个属性的值

HTML:

jQuery:

$（"img"）.attr（"src"）;

Result:

test.jpg

返回jQuery

removeAttr（key）

删除一个属性

HTML:

jQuery:

$（"img"）.removeAttr（"src"）;

Result:

[]

返回jQuery

addClass（class）

追加指定的类名

HTML:

Hello

jQuery:

$（"p"）.addClass（"selectedhighlight"）;

Result:

[Hello

返回jQuery

removeClass（）

移除样式

Html:

你最喜欢的是？

JQuery:

$（"p"）.removeClass（"red"）;

Result:

你最喜欢的是？

可以同时移除多个样式：

$（"p"）.removeClass（"redbold"）;

或者全部移除样式：

$（"p"）.removeClass（）;

返回jQuery

toggleClass（）

如果节点存在该样式，则移除，不存在，则追加

$（"p"）.toggleClass（"blue"）;

返回jQuery

hasClass（class）

判断节点是否存在该样式，返回布尔值

$（"p"）.hasClass（"blue"）;该方法等价于：

$（"p"）.is（".blue"）;

返回jQuery

html（）

取得或设置文本内容

类似innerHTML（）

仅可用于html文档

返回String/jQuery

text（）

取得或设置文本内容

类似innerText（）

可以用于html和xml文档

返回String/jQuery

val（）

取得或设置input文本框的值

Html：

JQuery:

$（"searchbox"）.focus（function（）{

if（this.val（）=="搜索的内容…"）{this.val（""）}

}）;

$（"searchbox"）.blur（function（）{

if（this.val（）==""）{this.val（this.defaultValue）}

}）;

this.defaultValue表示input文本框的默认value

通过val（）还能做到将表单多选框,checkbox,radio事先选中：

$（":

checkbox"）.val（["check2","check3"]）;

$（":

radio"）.val（["radio2"]）;

返回String/Array

节点匹配

each（callback）

为每一个匹配的元素执行一个函数

迭代两个图像，并设置它们的src属性

注意此处this指代的是DOM对象而非jQuery对象

HTML:

jQuery:

$（"img"）.each（function（i）{

this.src="test"+i+".jpg";

}）;

Result:

[,]

返回jQuery

size（）/length

获取对象中元素的个数

$（"img"）.size（）;

$（"img"）.length;

返回Number

index（[subject]）

匹配的元素，并返回相应元素的索引值，从0开始计数

HTML:

foo

bar

baz

jQuery:

$（'li'）.index（$（'#bar'））;//1

$（'li'）.index（$（'li:

gt（0）'））;//1

$（'#bar'）.index（'li'）;//1

$（'#bar'）.index（）;//1

返回Number

get（）/get（index）

get（）:

以数组形式取得所有匹配的节点集合

get（index）:

index存在则从中选择某一个DOM节点

HTML:

jQuery:

$（"img"）.get（0）;

Reslut:

[]

返回Array/Element

eq（index）

以对象形式获取第index个元素，位置从0算起

获取匹配的第二个元素

HTML:

Thisisjustatest.

Soisthis

jQuery:

$（"p"）.eq

（1）

Result:

[

Soisthis

补充.get（index）和.eq（index）的区别

.get（index）返回的是一个html数组

.eq（index）返回的是一个Jquery对象

$（"ulli"）.get

（1）.css（"color","red"）;

//这个是错误的

$（"ulli"）.eq

（1）.css（"color","red"）;

//这个是正确的同理将JQuery对象转换为DOM对象可以使用get

alert一个非JQuery对象，如：

var$cr=$（"#cr"）;

varcr=$cr.get（0）;

alert（cr.checked）;

返回jQuery

first（）

获取匹配的第一个元素

$（'li'）.first（）等价于$（'li:

first'）

返回jQuery

last（）

获取匹配的最后一个元素

$（'li'）.last（）等价于$（'li:

last'）

返回jQuery

filter（fn）

筛选出与指定函数返回值匹配的元素集合

保留子元素中不含有ol的元素。

HTML:

1. Hello

Howareyou?

jQuery:

$（"p"）.filter（function（index）{

return$（"ol",this）.length==0;

}）;

Result:

[

Howareyou?

返回jQuery

has（expr）

保留包含特定后代的元素，去掉那些不含有指定后代的元素

HTML:

• listitem1
• listitem2

  • listitem2-a
  • listitem2-b

• listitem3
• listitem4

jQuery:

$（'li'）.has（'ul'）.css（'background-color','red'）;

返回jQuery

not（expr）

删除与指定表达式匹配的元素

从p元素中删除带有select的ID的元素

HTML:

Hello