DOM
Attribute
(“p”).addClass(css中定义的样式类型);给某个元素添加样式
(
“
p
”
)
.
a
d
d
C
l
a
s
s
(
c
s
s
中
定
义
的
样
式
类
型
)
;
给
某
个
元
素
添
加
样
式
(“img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值,参数是map
(“img”).attr(“src”,”test.jpg”);给某个元素添加属性/值
(
“
i
m
g
”
)
.
a
t
t
r
(
“
s
r
c
”
,
”
t
e
s
t
.
j
p
g
”
)
;
给
某
个
元
素
添
加
属
性
/
值
(“img”).attr(“title”, function() { return this.src }); 给某个元素添加属性/值
(“元素名称”).html();获得该元素内的内容(元素,文本等)
(
“
元
素
名
称
”
)
.
h
t
m
l
(
)
;
获
得
该
元
素
内
的
内
容
(
元
素
,
文
本
等
)
(“元素名称”).html(“new stuff“); 给某元素设置内容
(“元素名称”).removeAttr(“属性名称”)给某元素删除指定的属性以及该属性的值
(
“
元
素
名
称
”
)
.
r
e
m
o
v
e
A
t
t
r
(
“
属
性
名
称
”
)
给
某
元
素
删
除
指
定
的
属
性
以
及
该
属
性
的
值
(“元素名称”).removeClass(“class”) 给某元素删除指定的样式
(“元素名称”).text();获得该元素的文本
(
“
元
素
名
称
”
)
.
t
e
x
t
(
)
;
获
得
该
元
素
的
文
本
(“元素名称”).text(value); 设置该元素的文本值为value
(“元素名称”).toggleClass(class)当元素存在参数中的样式的时候取消,如果不存在就设置此样式
(
“
元
素
名
称
”
)
.
t
o
g
g
l
e
C
l
a
s
s
(
c
l
a
s
s
)
当
元
素
存
在
参
数
中
的
样
式
的
时
候
取
消
,
如
果
不
存
在
就
设
置
此
样
式
(“input元素名称”).val(); 获取input元素的值
$(“input元素名称”).val(value); 设置input元素的值为value
Manipulation
(“元素名称”).after(content);在匹配元素后面添加内容
(
“
元
素
名
称
”
)
.
a
f
t
e
r
(
c
o
n
t
e
n
t
)
;
在
匹
配
元
素
后
面
添
加
内
容
(“元素名称”).append(content); 将content作为元素的内容插入到该元素的后面
(“元素名称”).appendTo(content);在content后接元素
(
“
元
素
名
称
”
)
.
a
p
p
e
n
d
T
o
(
c
o
n
t
e
n
t
)
;
在
c
o
n
t
e
n
t
后
接
元
素
(“元素名称”).before(content); 与after方法相反
(“元素名称”).clone(布尔表达式)当布尔表达式为真时,克隆元素(无参时,当作true处理)
(
“
元
素
名
称
”
)
.
c
l
o
n
e
(
布
尔
表
达
式
)
当
布
尔
表
达
式
为
真
时
,
克
隆
元
素
(
无
参
时
,
当
作
t
r
u
e
处
理
)
(“元素名称”).empty() 将该元素的内容设置为空
(“元素名称”).insertAfter(content);将该元素插入到content之后
(
“
元
素
名
称
”
)
.
i
n
s
e
r
t
A
f
t
e
r
(
c
o
n
t
e
n
t
)
;
将
该
元
素
插
入
到
c
o
n
t
e
n
t
之
后
(“元素名称”).insertBefore(content); 将该元素插入到content之前
(“元素”).prepend(content);将content作为该元素的一部分,放到该元素的最前面
(
“
元
素
”
)
.
p
r
e
p
e
n
d
(
c
o
n
t
e
n
t
)
;
将
c
o
n
t
e
n
t
作
为
该
元
素
的
一
部
分
,
放
到
该
元
素
的
最
前
面
(“元素”).prependTo(content); 将该元素作为content的一部分,放content的最前面
(“元素”).remove();删除所有的指定元素
(
“
元
素
”
)
.
r
e
m
o
v
e
(
)
;
删
除
所
有
的
指
定
元
素
(“元素”).remove(“exp”); 删除所有含有exp的元素
(“元素”).wrap(“html”);用html来包围该元素
(
“
元
素
”
)
.
w
r
a
p
(
“
h
t
m
l
”
)
;
用
h
t
m
l
来
包
围
该
元
素
(“元素”).wrap(element); 用element来包围该元素
Traversing
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)
Core
(html).appendTo(“body”)相当于在body中写了一段html代码
(
h
t
m
l
)
.
a
p
p
e
n
d
T
o
(
“
b
o
d
y
”
)
相
当
于
在
b
o
d
y
中
写
了
一
段
h
t
m
l
代
码
(elems) 获得DOM上的某个元素
(function()……..);执行一个函数
(
f
u
n
c
t
i
o
n
(
)
…
…
.
.
)
;
执
行
一
个
函
数
(“div > p”).css(“border”, “1px solid gray”); 查找所有div的子节点p,添加样式
(“input:radio”,document.forms[0])在当前页面的第一个表单中查找所有的单选按钮
(
“
i
n
p
u
t
:
r
a
d
i
o
”
,
d
o
c
u
m
e
n
t
.
f
o
r
m
s
[
0
]
)
在
当
前
页
面
的
第
一
个
表
单
中
查
找
所
有
的
单
选
按
钮
.extend(prop) prop是一个jQuery对象,
举例:
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery( expression, [context] ) —
(expression,[context]);在默认情况下,
(
e
x
p
r
e
s
s
i
o
n
,
[
c
o
n
t
e
x
t
]
)
;
在
默
认
情
况
下
,
()查询的是当前HTML文档中的DOM元素。
each( callback ) 以每一个匹配的元素作为上下文来执行一个函数
举例:1
(“span”).click(function()$(“li”).each(function()$(this).toggleClass(“example”);););举例:2
(
“
s
p
a
n
”
)
.
c
l
i
c
k
(
f
u
n
c
t
i
o
n
(
)
$
(
“
l
i
”
)
.
e
a
c
h
(
f
u
n
c
t
i
o
n
(
)
$
(
t
h
i
s
)
.
t
o
g
g
l
e
C
l
a
s
s
(
“
e
x
a
m
p
l
e
”
)
;
)
;
)
;
举
例
:
2
(“button”).click(function () {
(“div”).each(function (index, domEle) {
// domEle == this
(“div”).each(function (index, domEle) { // domEle == this
(domEle).css(“backgroundColor”, “yellow”);
if ((this).is(“#stop”)) {
(this).is(“#stop”)) {
(“span”).text(“Stopped at div index #” + index);
return false;
}
});
});
jQuery Event
ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行。在每个页面中可以有很多个函数被加载执行,按照fn的顺序来执行。
bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,keyup, error。
one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。
triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动。
unbind( [type], [data] ) 反绑定,从每一个匹配的元素中删除绑定的事件。
(“p”).unbind()移除所有段落上的所有绑定的事件。
(
“
p
”
)
.
u
n
b
i
n
d
(
)
移
除
所
有
段
落
上
的
所
有
绑
定
的
事
件
。
(“p”).unbind( “click” ) 移除所有段落上的click事件。
hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
(“p”).hover(function(){
(“p”).hover(function(){
(this).addClass(“over”);
},
function(){
$(this).addClass(“out”);
}
);
toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。
(“p”).toggle(function(){
(“p”).toggle(function(){
(this).addClass(“selected”);
},
function(){
$(this).removeClass(“selected”);
}
);
元素事件列表说明
注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset事件。
事件 描述 支持元素或对象
blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
change( ) 用户改变域的内容 input, textarea, select
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window
JQuery Ajax 方法说明
load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
(“#feeds”).load(“feeds.html”); 将feeds.html文件载入到id为feeds的div中
(“#feeds”).load(“feeds.html”); 将feeds.html文件载入到id为feeds的div中
(“#feeds”).load(“feeds.php”, {limit: 25}, function(){
alert(“The last 25 entries in the feed have been loaded”);
});
jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get(“test.cgi”, { name: “John”, time: “2pm” }, function(data){
alert(“Data Loaded: ” + data);
});
jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON(“test.js”, { name: “John”, time: “2pm” }, function(json){
alert(“JSON Data: ” + json.users[3].name);
});
jQuery.getScript( url, [callback] ) 使用GET请求JavaScript文件并执行。
$.getScript(“test.js”, function(){
alert(“Script loaded and executed.”);
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。
ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
(“#msg”).ajaxComplete(function(request, settings){ (“#msg”).ajaxComplete(function(request, settings){ (this).append(“
- Request Complete.
- “);
});
ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件
(“#msg”).ajaxError(function(request, settings){ (“#msg”).ajaxError(function(request, settings){ (this).append(“ - Error requesting page ” + settings.url + “
- “);
});
ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件(“#msg”).ajaxSend(function(evt, request, settings){ (“#msg”).ajaxSend(function(evt, request, settings){ (this).append(“