一:核心部分
$(expr)
说明:该函数可以通过
css
选择器,
Xpath
或
html
代码来匹配目标元素,所有的
jQuery
操作都以此为基础
参数:
expr
:字符串,一个查询表达式或一段
html
字符串
例子:
未执行
jQuery
前:
<
p
>
one
</
p
>
<
div
>
<
p
>
two
</
p
>
</
div
>
<
p
>
three
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery
代码及功能:
function
jq(){
alert($("div > p").html());
}
运行:当点击 id 为 test 的元素时,弹出对话框文字为 two ,即 div 标签下 p 元素的内容
function
jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}
运行:当点击
id
为
test
的元素时,向
body
中添加
“<div><p>Hello</p></div>”
$(elem)
说明:限制
jQuery
作用于一个特定的
dom
元素,这个函数也接受
xml
文档和
windows
对象
参数:
elem
:通过
jQuery
对象压缩的
DOM
元素
例子:
未执行
jQuery
前:
<
p
>
one
</
p
>
<
div
>
<
p
>
two
</
p
>
</
div
><
p
>
three
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()">
jQuery
</
a
>
jQuery 代码及功能:
function
jq(){
alert($(document).find("div > p").html());
}
运行:当点击 id 为 test 的元素时,弹出对话框文字为 two ,即 div 标签下 p 元素的内容
function
jq(){
$(document.body).background("black");
}
运行:当点击
id
为
test
的元素时,背景色变成黑色
$(elems)
说明:限制
jQuery
作用于一组特定的
DOM
元素
参数:
elem
:一组通过
jQuery
对象压缩的
DOM
元素
例子:
未执行
jQuery
前:
<
form
id
="form1">
<
input
type
="text"
name
="textfield">
<
input
type
="submit"
name
="Submit"
value
="
提交
">
</
form
>
<
a
href
="#"
id
="test"
onClick
="jq()">
jQuery
</
a
>
jQuery 代码及功能:
function
jq(){
$(form1.elements ).hide();
}
运行:当点击
id
为
test
的元素时,隐藏
form1
表单中的所有元素。
$(fn)
说明:
$(document).ready()
的一个速记方式,当文档全部载入时执行函数。可以有多个
$(fn)
当文档载入时,同时执行所有函数!
参数:
fn (Function):
当文档载入时执行的函数!
例子:
$(
function
(){
$(document.body).background("black");
})
运行:当文档载入时背景变成黑色,相当于
onLoad
。
$(obj)
说明:复制一个
jQuery
对象,
参数:
obj (jQuery):
要复制的
jQuery
对象
例子:
未执行
jQuery
前:
<
p
>
one
</
p
>
<
div
>
<
p
>
two
</
p
>
</
div
>
<
p
>
three
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()">
jQuery
</
a
>
jQuery 代码及功能:
function
jq(){
var
f = $("div");
alert($(f).find("p").html())
}
运行:当点击
id
为
test
的元素时,弹出对话框文字为
two
,即
div
标签下
p
元素的内容。
each(fn)
说明:将函数作用于所有匹配的对象上
参数:
fn (Function):
需要执行的函数
例子:
未执行
jQuery
前:
<
img
src
="1.jpg"/>
<
img
src
="1.jpg"/>
<
a
href
="#"
id
="test"
onClick
="jq()">
jQuery
</
a
>
jQuery 代码及功能:
function
jq(){
$("img").each(
function
(){
this
.src = "2.jpg"; });
}
运行:当点击
id
为
test
的元素时,
img
标签的
src
都变成了
2.jpg
。
eq(pos)
说明:减少匹配对象到一个单独得
dom
元素
参数:
pos (Number):
期望限制的索引,从
0
开始
例子:
未执行
jQuery
前:
<
p
>
This is just a test.
</
p
>
<
p
>
So is this
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()">
jQuery
</
a
>
jQuery 代码及功能:
function
jq(){
alert($("p").eq(1).html())
}
运行:当点击
id
为
test
的元素时,
alert
对话框显示:
So is this
,即第二个
<p>
标签的内容