花了两天时间系统性的学习jQuery，获益匪浅。之前摸着石头写的一些jQuery程序也得到了相应的改良，以下便是我这两天的学习心得：

选择器 Selectors:

$(
"*"
)
//选择所有标签

$(
"div:animated"
)
//选择正在动画中的div标签

$(
'a[hreflang|=en]'
)
//选择包含en的a标签,并且en后面只能跟"-"

$(
"input[name*='man']"
)
//选择name属性中包含'man'的input标签

$(
"input[name~=man]"
)
//选择name属性中包含'man'但只能和空格相连的input标签,如 $("input[name~=man]") 匹配 

$(
"input[name$='letter']"
)
//选择以'letter'结尾的input标签

$(
"input[name='newsletter']"
)
//选择name属性等于'newsletter'的input标签

$(
"input[name!=newsletter]"
)
//选择name属性不等于'newsletter'的input标签

$(
"input[name^='news']"
)
//选择name属性中以'news'开头的input标签

$(
":button"
)
//匹配按钮

$(
"form input:checkbox"
)
//匹配多选按钮

$(
"input:checked"
)
//选择已勾选的按钮

$(
"ul.topnav > li"
)
//选择 ul.topnav 下一辈的 li 标签

$(
".myClass"
)
//选择普配class名myClass的标签

$(
"div:contains('John')"
)
//选择包含'John'字符串的div标签

$(
"form input"
)
//匹配form标签下的所有input

$(
"input:disabled"
)
//匹配已禁用的input

$(
"div"
)
//选择div标签

$(
"td:empty"
)
//选择空的td标签

$(
"input:enabled"
)
//选择启用的input标签

$(
"td:eq(2)"
)
//选择第3个td标签

$(
"tr:even"
)
//选择偶数的tr标签(0,2,4...)

$(
"input:file"
)
//选择文件域

$(
"div span:first-child"
)
//选择每个div标签下的第1个span标签(可能有多个)

$(
"tr:first"
)
//选择第1个tr标签(只有一个)

$(
"td:gt(4)"
)
//选择第5个td标签后的所有td标签(包含第5个)

$(
"div[id]"
)
//选择包含id属性的div标签

$(
"div:has(p)"
)
//选择包含p标签的div标签

$(
":header"
)
//选择h1,h2,h3,h4,h5,h6标签

$(
":hidden"
)
//选择隐藏的标签

$(
"#myDiv"
)
//选择id为myDiv的标签

$(
"input:image"
)
//选择图像域

$(
":input"
)
//选择input标签

$(
"div span:last-child"
)
//选择div下的最后一个span标签(可能有多个)

$(
"tr:last"
)
//选择最后一个tr标签(只有一个)

$(
"td:lt(4)"
)
//选择第5个以前的td标签(不包含第5个)

$(
"input[id][name$='man']"
)
//多重属性选择,选择包含id属性和name属性以'man'结尾的input标签

$(
"div,span,p.myClass"
)
//多重选择,选择div标签,span标签和class名为myClass的p标签

$(
"label + input"
)
//选择前面是label标签的input标签

$(
"#prev ~ div"
)
//选择id为prev之后的所有同辈div标签

$(
"input:not(:checked) + span"
)
//选择前面是未勾选的多选按钮的span标签

$(
"ul li:nth-child(2)"
) 
//选择ul标签下第2个li标签

$(
"tr:odd"
)
//选择奇数的tr标签

$(
"div button:only-child"
)
//选择div下只有一个button的input标签

$(
"td:parent"
)
//选择含有子元素或文本的td标签

$(
"input:password"
)
//选择密码框

$(
"input:reset"
)
//选择重设按钮

$(
"select option:selected"
)
//选择已被选的选项

$(
":submit"
)
//选择提交按钮

$(
"form input:text"
)
//选择文本输入框

$(
"div:visible"
)
//选择显示的div元素

属性 Attributes:

$(
'p'
).addClass(
'myClass yourClass'
);
//增加class名: myClass yourClass

$(
'p'
).removeClass(
'myClass noClass'
).addClass(
'yourClass'
);
//移除class名: myClass noClass, 并增加class名: yourClass

$(
'ul li:last'
).addClass(
function
() {
return

'item-'

+ $(
this
).index(); });
//增加以"item-索引值"的class名

$(
"p"
).toggleClass(
"selected"
);
//如果p标签下存在selected类,就删除该类,否则添加该类

 
$(
"em"
).attr(
"title"
)
//返回em标签的title值

$(
"img"
).attr(
"src"
,
"test.jpg"
);
//设置图片路径为"test.jpg"

$(
"img"
).attr(
"title"
,
function
() {
return

this
.src });
//为所有img标签添加值为图片路径的title

$(
"img"
).attr({ src:
"test.jpg"
, alt:
"Test Image"

});
//批量设置标签属性

 
$(
"p:last"
).hasClass(
"selected"
)
//判断最后一个p标签是否包含'selected'的class名

 
$(
'div.demo-container'
).html();
//返回类名为demo-container的div标签下的html内容,相当于innerHTML

$(
'div.demo-container'
).html(
'
true
'
);
//设置类名为demo-container的div标签下的html内容为'
true
',相当于innerHTML

$(
'div.demo-container'
).text();
//返回类名为demo-container的div标签下的html转为实体的内容

 
$(
"#multiple"
).val()
//返回#multiple的value值

筛选 Traversing:

$(
"div"
).add(
"p"
).css(
"background"
,
"yellow"
);
//在div标签中添加背景颜色为黄色的p标签

$(
"p"
).add(document.getElementById(
"a"
)) 
//在p标签中添加id为a的

 
$(
"div"
).find(
"p"
).andSelf().addClass(
"border"
);
//div下的p标签,包括div标签都增加border类

 
$(
"div"
).children(
".selected"
);
//查找每个div标签中的已经被选择的子元素

 
$(
'li.item-a'
).closest(
'ul'
).css(
'background-color'
,
'red'
);
//将li.item-a最近的ul标签的背景颜色改为红色

 
$(
"p"
).contents().not(
"[nodeType=1]"
);
//查找p标签下的所有文本节点

 
$(
'li'
).each(
function
(index) { alert(index +
': '

+ $(
this
).text()); });
//alert所有li标签的索引和内容

 
$(
"p"
).find(
"span"
).css(
'background-color'
,
'red'
).end().css(
'background-color'
,
'blue'
);
//将p标签中的span背景颜色改为红色,然后将p标签背景颜色改成蓝色

 
$(
"div"
).eq(-2).addClass(
"blue"
);
//将倒数第3个div增加blue类

 
$(
'li'
).filter(
':even'
).css(
'background-color'
,
'red'
);
//将偶数的li标签的背景颜色改成红色

$(
'li'
).filter(
function
(index) {

 
return

$(
'strong'
,
this
).length == 1;

}).css(
'background-color'
,
'red'
);
//将包含1个strong标签的li标签背景颜色改成红色

 
$(
"p"
).find(
"span"
).css(
'color'
,
'red'
);
//将p标签中找到的所有span标签的颜色改成红色

 
$(
"p span"
).first().addClass(
'highlight'
);
//p标签下的第一个span标签加上highlight的类

 
$(
'li'
).has(
'ul'
).css(
'background-color'
,
'red'
);
//将包含ul的li标签背景颜色改成红色

 
$(
'ul'
).click(
function
(event) {

 
if

($(event.target).is(
'li'
) ) {

 
$(event.target).css(
'background-color'
,
'red'
);

 
}

});
//如果在ul中点击的对象是li标签,则将li标签的背景颜色改成红色

 
$(
'li'
).last().css(
'background-color'
,
'red'
);
//将最后一个li标签的背景颜色改成红色

 
$(
"p"
).append( $(
"input"
).map(
function
(){

 
return

$(
this
).val();

}).get().join(
", "
) );
//将表单中input的所有值用", "分隔加入到p标签中去

 
$(
"button[disabled]"
).next();
//选择被禁用的按钮的下一个同辈标签

 
$(
"div:first"
).nextAll();
//选择第1个div标签后的所有同辈标签

 
$(
'#term-2'
).nextUntil(
'dt'
);
//选择#term-2后到下一个dt标签的所有标签

 
$(
'li'
).not(document.getElementById(
'notli'
));
//选择id不等于notli的li标签

$(
"div"
).not(
".green, #blueone"
);
//选择id不等于blueone和类不包含.green的div标签

 
$(
'li.item-a'
).offsetParent();
//选择li.item-a的偏移父标签(拥有relative或absolute属性的父标签,如果都没有,就是body)

 
$(
"p"
).parent();
//查找所有p标签的父元素

 
$(
'li.item-a'
).parentsUntil(
'.level-1'
);
//查找li.item-a一直到.level-1的所有父标签

 
$(
'li.third-item'
).prev();
//li.third-item的上一个同辈标签

 
$(
'#term-2'
).prevUntil(
'dt'
); #term-a前一直到dt的所有同辈标签

 
$(
'li.third-item'
).siblings();
//查找li.third-item的所有同辈函数

 
$(
"p"
).slice(0, 1);
//选择第1个p元素

文档处理 Manipulation:

addClass();

 
$(
'.inner'
).after(
'
Test
'
);
//在.inner后面添加 "
Test
"

 
$(
"p"
).append(
"Hello"
);
//在p标签里添加 "Hello"

 
$(
"span"
).appendTo(
"#foo"
);
//将span标签及其所有内容移动到$fooli

 
.attr();

 
$(
'.container'
).before($(
'h2'
));
//将h2移动到.container之前

$(
'.container'
).before(
"here"
);
//将"here"加到.container之前

 
$($(
'h2'
)).clone().appendTo(
'.container'
); 将h2复制一份加到.container里

 
$(
'#p'
).css(
"background-color"
);
//返回#p的background-color

 
var

obj = $(
"p"
).detach();
//分离函数,清除p标签,并且将被清除的对象保存在变量obj中

 
$(
"p"
).empty();
//删除p标签中的所有内容

 
hasClass();

 
$(
"p"
).height();
//p标签的高度(不包括padding, border和margin)

 
.html();

 
$(
"p"
).innerHeight();
//p标签的内部高度(包括padding, 不包括border和margin)

 
$(
"p"
).innerWidth();
//p标签的内部宽度(包括padding, 不包括border和margin)

 
$(
'
Test
'
).insertAfter(
'.inner'
);
//将'
Test
'插入到.inner后面,作用等同于after,只是主宾位置不同

 
$(
'h2'
).insertBefore($(
'.container'
));
//将h2标签插入到.container之前,作用等同于before,只是主宾位置不同

 
var

p = $(
"p:last"
);

var

offset = p.offset();

p.html(
"left: "

+ offset.left +
", top: "

+ offset.top );
//获取最后一个p标签的位移坐标

 
$(
"p:first"
).outerHeight();
//最后一个p标签的高度(包含padding,border,不包含margin)

$(
"p:first"
).outerHeight(
true
);
//最后一个p标签的高度(包含padding,border,margin)

 
$(
"p:first"
).outerWidth();
//最后一个p标签的宽度(包含padding,border,不包含margin)

$(
"p:first"
).outerWidth(
true
);
//最后一个p标签的宽度(包含padding,border,margin)

 
var

p = $(
"p:first"
);

var

position = p.position();

$(
"p:last"
).text(
"left: "

+ position.left +
", top: "

+ position.top );
//获取最后一个p标签的位置(不包含p标签的margin值)

 
$(
'.inner'
).prepend(
'
Test
'
);
//将'
Test
'加到.inner里的最前面

 
$(
'h2'
).prependTo($(
'.container'
));
//将h2移动到.container里的最前面去

 
$(
'.hello'
).remove();
//删除包含.hello的标签

$(
'div'
).remove(
'.hello'
);
//删除包含.hello的div标签

 
$(
"button"
).removeAttr(
"disabled"
);
//移除按钮的disabled属性

 
.removeClass();

 
$(
'
New heading
'
).replaceAll(
'.inner'
);
//用h2整个替换掉.inner标签

 
$(
'.second'
).replaceWith(
'
New heading
'
);
//将.second整个替换成'
New heading
'

 
$(
"p:first"
).scrollLeft();
//第1个p标签的横向滚动条值

 
$(
"p:first"
).scrollTop();
//第1个p标签的纵向滚动条值

 
.text();

 
.toggleClass();

 
$(
"button"
).toggle(
function
(){

 
$(
"p"
).wrap(
"
"
);

},
function
(){

 
$(
"p"
).unwrap();

});
//如果p标签没有被div包含则添加div标签,否则去掉div标签

 
.val();

 
$(
"p"
).width();
//p标签的宽度(不包括padding, border和margin)

 
$(
'.inner'
).wrap(
'
'
); 将.inner标签分别用
包起来

 
$(
'.inner'
).wrapAll(
'
'
); 将所有的.inner标签组合在一起用一个
包起来

 
$(
'.inner'
).wrapInner(
'
'
); 用
将.inner里的内容包起来

层叠样式表 CSS:

.addClass();

.css();

.hasClass();

.height();

.innerHeight();

.innerWidth();

.offset();

.outerHeight();

.outerWidth();

.position();

.removeClass();

.scrollLeft();

.scrollTop();

.toggleClass();

.width();

事件 Events:

$(
'#foo'
).bind(
'click'
,
function
() {

 
alert(
'User clicked on "foo."'
);

});
//注册点击事件

 
$(
'#other'
).blur(
function
() {

 
$(
'#target'
).blur();

});
//移除焦点时

 
$(
'.target'
).change(
function
() {

 
alert(
'Handler for .change() called.'
);

});
//表单改变时

 
$(
'#other'
).click(
function
() {

 
$(
'#target'
).click();

});
//单击时

 
$(
'#target'
).dblclick(
function
() {

 
alert(
'Handler for .dblclick() called.'
);

});
//双击时

 
$(
"body"
).delegate(
"p"
,
"click"
,
function
(){

 
$(
this
).after(
"
Another paragraph!
"
);

});
//给p标签注册鼠标事件

 
$(
"#theone"
).live(
"click"
, aClick);
//激活#theone上的click事件,并调用aClick函数

$(
"#theone"
).die(
"click"
, aClick);
//禁用#theone上的click事件

 
$(window).error(
function
(){

 
return

true
;

});
//隐藏js脚本错误

 
$(
"p"
).click(
function
(event) {

 
alert( event.currentTarget ===
this

);
// true

});
//当前事件的对象

 
$(
"a"
).each(
function
(i) {

 
$(
this
).bind(
'click'
, {index:i},
function
(e){

 
alert(
'my index is '

+ e.data.index);

 
});

});
//事件的索引

//在div上存储数据

$(
"div"
).data(
"blah"
);
// undefined

$(
"div"
).data(
"blah"
,
"hello"
);
// blah设置为hello

$(
"div"
).data(
"blah"
);
// hello

$(
"div"
).data(
"blah"
, 86);
// 设置为86

$(
"div"
).data(
"blah"
);
// 86

$(
"div"
).removeData(
"blah"
);
//移除blah

$(
"div"
).data(
"blah"
);
// undefined

 
$(
"a"
).click(
function
(event){

 
alert( event.isDefaultPrevented() );
// false

 
event.preventDefault();

 
alert( event.isDefaultPrevented() );
// true

});
//isDefaultPrevented?

 
function

immediatePropStopped(e) {

 
var

msg =
""
;

 
if

( e.isImmediatePropagationStopped() ) msg =
"called"

 
else

msg =
"not called"
;

 
$(
"#stop-log"
).append(
"
"

+ msg +
"
"

);

}

$(
"button"
).click(
function
(event) {

 
immediatePropStopped(event);

 
event.stopImmediatePropagation();
//停止执行该事件

 
immediatePropStopped(event);

});
//isImmediatePropagationStopped 判断函数或事件是否被禁止执行

 
function

propStopped(e) {

 
var

msg =
""
;

 
if

( e.isPropagationStopped() ) msg =
"called"

 
else

msg =
"not called"
;

 
$(
"#stop-log"
).append(
"
"

+ msg +
"
"

);

}

$(
"button"
).click(
function
(event) {

 
propStopped(event);

 
event.stopPropagation();

 
propStopped(event);

});
//isPropagationStopped? stopPropagation?

 
$(document).bind(
'mousemove'
,
function
(e){

 
$(
"#log"
).text(
"e.pageX: "

+ e.pageX +
", e.pageY: "

+ e.pageY);

});
//相对于文档的鼠标坐标

 
$(
"a"
).click(
function
(event) {

 
event.preventDefault();

});
//阻止链接的所有行为,包括打开链接

 
$(
"a"
).mouseout(
function
(event) {

 
alert(event.relatedTarget.nodeName);
// "DIV"

});
//返回与事件有关联的对象

 
$(
"button"
).click(
function
(event) {

 
return

"hey"
;

});

$(
"button"
).click(
function
(event) {

 
$(
"p"
).html( event.result );

});
//返回鱼事件相关的结果

 
$(
"p"
).click(
function
(event){

 
event.stopImmediatePropagation();

});

$(
"p"
).click(
function
(event){

 
// This function won't be executed

 
$(
this
).css(
"background-color"
,
"#f00"
);

});
//停止执行某事件

 
$(
"body"
).click(
function
(event) {

 
$(
"#log"
).html(
"clicked: "

+ event.target.nodeName);

});
//返回被点击对象

 
event.timeStamp;
//时间的时间戳,可以用来计算两次事件间隔的时间

 
$(
"a"
).click(
function
(event) {

 
alert(event.type);
// "click"

});
//返回事件类型

 
$('
#whichkey').bind('keydown',function(e){

 
$('
#log').html(e.type + ': ' +  e.which );

});
//返回按键的ascii码

 
$('
#target').focus(function() {

 
alert('Handler
for

.focus() called.
');

}); //聚焦事件时

 
$("p").focusin(function() {

 
$(this).find("span").css('
display
','
inline
').fadeOut(1000);

});

 
var fo = 0, b = 0;

$("input").focusout(function() {

 
fo++;

 
$("#fo").text("focusout fired: " + fo + "x");

}).blur(function() {

 
b++;

 
$("#b").text("blur fired: " + b + "x");

}); //移出焦点时

 
$('
#target').keydown(function() {

 
alert('Handler
for

.keydown() called.
');

}); //按下按键时

 
$('
#target').keypress(function() {

 
alert('Handler
for

.keypress() called.
');

}); //按下按键时

 
$('
#target').keyup(function() {

 
alert('Handler
for

.keyup() called.
');

}); //抬起按键时

 
$("p").live("myCustomEvent", function(e, myName, myValue){

 
$(this).text("Hi there!");

 
$("span").stop().css("opacity", 1).text("myName = " + myName).fadeIn(30).fadeOut(1000);

});

$("button").click(function () {

 
$("p").trigger("myCustomEvent");

}); //live?

 
$(window).load(function () {

 
// run code

});

$('
#book').load(function() {

 
// Handler for .load() called.

});
//读取事件

 
$('
#target').mousedown(function() {

 
alert('Handler
for

.mousedown() called.
');

}); //鼠标按下事件

 
$("div.overout").mouseover(function(){

 
$("p:first",this).text("mouse over");

 
$("p:last",this).text(++i);

}).mouseout(function(){

 
$("p:first",this).text("mouse out");

}); //鼠标经过和离开

 
$("div.enterleave").mouseenter(function(){

 
$("p:first",this).text("mouse enter");

 
$("p:last",this).text(++n);

}).mouseleave(function(){

 
$("p:first",this).text("mouse leave");

}); //鼠标进入和离开

 
$("div").mousemove(function(e){

 
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";

 
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";

 
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);

 
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);

}); //鼠标移动时

 
$('
#target').mouseup(function() {

 
alert('Handler
for

.mouseup() called.
');

}); //鼠标松开按键时

 
$("p").one("click", function(){

 
alert( $(this).text() );

}); //只执行一次事件

 
var obj = {

 
name: "John",

 
test: function() {

 
alert( this.name );

 
$("#test").unbind("click", obj.test);

 
}

};

 
$("#test").click( jQuery.proxy( obj, "test" ) );

// This also works:

// $("#test").click( jQuery.proxy( obj.test, obj ) );

// 代理事件

 
$(document).ready(function() {

 
// Handler for .ready() called.

}); //当文档完全加载时

 
$(window).resize(function() {

 
$('
#log').append('
Handler for .resize() called.
');

});
//当窗口大小改变时

 
$('
#target').scroll(function() {

 
$('
#log').append('
Handler for .scroll() called.
');

});
//当拖动滚动条时

 
$('
#target').select(function() {

 
alert('Handler
for

.select() called.
');

}); //当选择时

 
$('
#target').submit(function() {

 
alert('Handler
for

.submit() called.
');

 
return false;

}); //当表单提交时

 
$("li").toggle(

 
function () {

 
$(this).css({"list-style-type":"disc", "color":"blue"});

 
},

 
function () {

 
$(this).css({"list-style-type":"disc", "color":"red"});

 
},

 
function () {

 
$(this).css({"list-style-type":"", "color":""});

 
}

); //切换开关,第一次点击蓝色,第二次点击是红色,第三次点击是默认色,循环

 
$("button:first").trigger('
click
'); //触发第一个button的click事件

$("input").triggerHandler("focus"); //触发focus事件

 
$('
#foo').unbind('click', handler); //移除click事件

$(
"body"
).undelegate(
"#theone"
,
"click"
, aClick);
//移除委任的事件

 
$(window).unload(
function

() { alert(
"Bye now!"
); } );
//窗口关闭时

效果 Effects:

$(
"#block"
).animate({

 
width:
"70%"
,

 
opacity: 0.4,

 
marginLeft:
"0.6in"
,

 
fontSize:
"3em"
,

 
borderWidth:
"10px"

}, 1500 );
//动画效果

 
$(
"div"
).clearQueue();
//清除队列

 
$(
"div.first"
).slideUp(300).delay(800).fadeIn(400); 延迟800毫秒进入下一个动画

 
$(
"div"
).animate({left:
'+=200px'
}, 2000);

$(
"div"
).animate({top:
'0px'
}, 600);

$(
"div"
).queue(
function

() {

 
$(
this
).toggleClass(
"red"
);

 
$(
this
).dequeue();
//离队,如果没有这个就会卡在上一步

});

$(
"div"
).animate({left:
'10px'
, top:
'30px'
}, 700);

 
$(
"div:hidden:first"
).fadeIn(
"slow"
);
//慢速淡入

 
$(
'#book'
).fadeOut(
'slow'
,
function
() {

 
// Animation complete.

});
//慢速淡出,并调用动画函数

 
$(
"p:first"
).click(
function

() {

 
$(
this
).fadeTo(
"slow"
, 0.33);

});
//慢速调整不透明度到 0.33

 
var

toggleFx =
function
() {

 
$.fx.off = !$.fx.off;

};
//打开和关闭jQuery效果

toggleFx();

$(
"button"
).click(toggleFx);

$(
"input"
).click(
function
(){

 
$(
"div"
).toggle(
"slow"
);

});

 
$(
'#book'
).hide(
'slow'
,
function
() {

 
alert(
'Animation complete.'
);

});
//慢速隐藏标签,并调用函数

 
$(
"#show"
).click(
function

() {

 
var

n = $(
"div"
).queue(
"fx"
);

 
$(
"span"
).text(
"Queue length is: "

+ n.length);

});
//计算当前动画所属的队列长度

function

runIt() {

 
$(
"div"
).show(
"slow"
);

 
$(
"div"
).animate({left:
'+=200'
},2000);

 
$(
"div"
).slideToggle(1000);

 
$(
"div"
).slideToggle(
"fast"
);

 
$(
"div"
).animate({left:
'-=200'
},1500);

 
$(
"div"
).hide(
"slow"
);

 
$(
"div"
).show(1200);

 
$(
"div"
).slideUp(
"normal"
, runIt);

}

runIt();

 
$(
'#clickme'
).click(
function
() {

 
$(
'#book'
).show(
'slow'
,
function
() {

 
// Animation complete.

 
});

});
//慢速显示并调用函数

 
$(
"div"
).slideDown(
"slow"
);
//向下播放幻灯

$(
"div"
).slideUp(
"slow"
);
//向上播放幻灯

 
$(
"button"
).click(
function

() {

 
$(
"p"
).slideToggle(
"slow"
);

});
//循环切换幻灯效果

 
$(
this
).find(
'img'
).stop(
true
,
true
).fadeOut();
//停止动画,并且清除队列跳到最后,stop的两个参数默认都是false

 
.toggle();

AJAX:

$.ajax({

 
async:
true
,
//(默认: true) 是否异步,

 
cache:
true
,
//(默认: true) 是否缓存, false可用在 dataType 'script' 和 'jsonp'

 
dataType:
'text'
,
//返回的数据类型,可以是 'xml', 'html', 'json', 'jsonp', 'script', 'text'.

 
beforeSend:
function
() { $(
this
).append(
"
Before Send!
"
); },
//在发送http请求之前执行的函数

 
complete:
function
(XMLHttpRequest, textStatus) {

 
$(
this
).append(
"
XML is load completed, Stats is "

+ textStatus +
"!
"
);

 
},

 
contentType:
"application/x-www-form-urlencoded"
,
//内容类型,默认是 "application/x-www-form-urlencoded"

 
context: $(
'.result'
),
//上下文, $(this) = $('.result')

 
data: { uid: 1, foo:[
"bar1"
,
"bar2"
],
/*自动转换为 '&foo=bar1&foo=bar2' */

},
//url参数,可以是对象也可以是字符串('foo=bar1&foo=bar2')

 
dataFilter:
function
(data, type) {

 
var

data = data +
" 增加的数据"
;

 
return

data;

 
},
//对返回的数据进行过滤处理

 
error:
function
(XMLHttpRequest, textStatus, errorThrown) {

 
$(
this
).append(
"
XMLHttpRequest "
+XMLHttpRequest+
" & textStatus"

+ textStatus +
"errorThrown: "

+ errorThrown +
"
"
);

 
},
//错误时

 
global:
true
,
//(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件

 
ifModified:
false
,
//(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

 
jsonp:
'onJsonPLoad'
,
//在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

 
jsonpCallback:
'onJsonPLoad'
,
//用不上

 
password:
'12345678'
,
//用于响应HTTP访问认证请求的密码

 
processData:
true
,
//(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

 
scriptCharset:
'utf-8'
,
//只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。

 
success:
function
(data, textStatus, XMLHttpRequest) {

 
$(
this
).append(
"
Result: "
+data+
"
"
);

 
$(
this
).append(
'
Load was performed. Stats is '

+ textStatus +
'!
'
);

 
},
//成功时

 
timeout:
'20000'
,
//设置请求超时时间（毫秒）。此设置将覆盖全局设置。

 
traditional:
true
,
//如果想使用传统的参数数列,将此项设置为true

 
type:
'POST'
,
//(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

 
url:
'杂志改版颜色.txt'
,
//(默认: 当前页地址) 发送请求的地址。

 
username:
'kbzwxq'
,
//用于响应HTTP访问认证请求的用户名

 
//xhr: function() { alert("x") } //回调函数生成 XMLHttpRequest 对象. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.

});

 
$.ajaxSetup({

 
url:
'杂志改版颜色.txt'
,

 
success:
function
(data, textStatus, XMLHttpRequest) {

 
$(
'.result'
).append(
"
Result: "
+data+
"
"
);

 
$(
'.result'
).append(
'
Load was performed. Stats is '

+ textStatus +
'!
'
);

 
}

});
//安装ajax

$.ajax();

<
div style="background: red;color: #fff"
>Trigger

<
div style="background: green;color: #fff"
>

<
div style="background: blue;color: #fff"
>

<
script
>

$('.log').ajaxStart(function() {

 
$(this).append('<
p
>Triggered ajaxStart handler.');

}); //当ajax开始时

$('.log').ajaxSend(function(e, xhr, settings) {

 
if (settings.url == '杂志改版颜色.txt') $(this).append('<
p
>Triggered ajaxSend handler.');

}); //当ajax请求发送时执行

$('.log').ajaxSuccess(function(e, xhr, settings) {

 
if (settings.url == '杂志改版颜色.txt') $(this).append('<
p
>Triggered ajaxSuccess handler.');

}); //当ajax成功时

$('.log').ajaxComplete(function(e, xhr, settings) {

 
if (settings.url == '杂志改版颜色.txt') $(this).append('<
p
>Triggered ajaxComplete handler.');

}); //当ajax完成时执行

$('.log').ajaxStop(function() {

 
$(this).append('<
p
>Triggered ajaxStop handler.');

}); //当ajax停止时

$('.log').ajaxError(function(e, xhr, settings, exception) {

 
if (settings.url == '杂志改版颜色1.txt') $(this).text('Triggered ajaxError handler.');

}); //当ajax错误时执行

$('.trigger').click(function() {

 
$('.result').load('杂志改版颜色.txt', function() {

 
$('.log').append('<
p
>Load was performed.');

 
});

});



 
<
ul

id
=
"footerNavigation"
>

 
<
li
><
a

href
=
"#"
>Download

 
<
li
><
a

href
=
"#"
>Documentation

 
<
li
><
a

href
=
"#"
>Tutorials

 
<
li
><
a

href
=
"#"
>Bug Tracker

 
<
li
><
a

href
=
"#"
>Discussion



<
b
>Footer navigation:

<
ol

id
=
"new-nav"
>

<
script
>

$("#new-nav").load("#footerNavigation li"); //将#footerNavigation下的所有li读取到#new-nav



 
<
div style="background: blue;color: #fff"
>

<
script
>

var myObject = {

 
a: {

 
one: 1,

 
two: 2,

 
three: 3

 
},

 
b: [1,2,3]

};

var recursiveEncoded = $.param(myObject, true); //是否使用传统参数 true

var recursiveDecoded = decodeURIComponent($.param(myObject));

jQuery('.log').append("<
p
>"+recursiveEncoded+"");

jQuery('.log').append("<
p
>"+recursiveDecoded+"");

 //转换url参数

$.get(

 
'杂志改版颜色.txt'
,

 
{ name:
"John"
, time:
"2pm"

},

 
function
(data, textStatus, XMLHttpRequest) {

 
$(
'.result'
).html(data);

 
},

 
'text'

);
//Ajax GET

$.post(

 
'杂志改版颜色.txt'
,

 
{ name:
"John"
, time:
"2pm"

},

 
function
(data, textStatus, XMLHttpRequest) {

 
$(
'.result'
).html(data);

 
},

 
'text'

);
//Ajax POST

 
$.getJSON(
'ajax/test.json'
,
function
(data) {

 
$(
'.result'
).html(
'
'

+ data.foo +
'
'

+
'
'

+ data.baz[1] +
'
'
);

});
//读取json

$.getScript(
'ajax/test.js'
,
function
(data, textStatus) {

 
alert(
'Load was performed.'
);

});
//读取脚本

 
$(
'form'
).submit(
function
() {

 
alert($(
this
).serialize());
//返回表单的url参数

 
return

false
;

});

$(
'form'
).submit(
function
() {

 
alert($(
this
).serializeArray());
//返回表单的url参数对象数组

 
return

false
;

});

工具 Utilities:

jQuery.boxModel;
//判断浏览器是否使用了符合w3c的标准盒模型

 
jQuery.each(jQuery.browser,
function
(i, val) {

 
$(
"
"

+ i +
" : "

+ val +
""
).appendTo(document.body);

});
//判断浏览器的类型

 
$(
"#start"
).click(
function

() {

 
$(
"div"
).show(
"slow"
);

 
$(
"div"
).animate({left:
'+=200'
},5000);

 
$(
"div"
).queue(
function

() {

 
$(
this
).addClass(
"newcolor"
);

 
$(
this
).dequeue();

 
});

 
$(
"div"
).animate({left:
'-=200'
},1500);

 
$(
"div"
).queue(
function

() {

 
$(
this
).removeClass(
"newcolor"
);

 
$(
this
).dequeue();

 
});

 
$(
"div"
).slideUp();

});

$(
"#stop"
).click(
function

() {

 
$(
"div"
).clearQueue();
//清除动画队列

 
$(
"div"
).stop();

});

 
jQuery.contains(document.documentElement, document.body);
// true

jQuery.contains(document.body, document.documentElement);
// false

//判断前者是否包含后者

 
var

div = $(
"div"
)[0];

jQuery.data(div,
"test"
, { first: 16, last:
"pizza!"

});

$(
"span:first"
).text(jQuery.data(div,
"test"
).first);

$(
"span:last"
).text(jQuery.data(div,
"test"
).last);

//保存数据到标签中

 
$(
"button"
).click(
function

() {

 
$(
"div"
).animate({left:
'+=200px'
}, 2000);

 
$(
"div"
).animate({top:
'0px'
}, 600);

 
$(
"div"
).queue(
function

() {

 
$(
this
).toggleClass(
"red"
);

 
$(
this
).dequeue();
//执行下一个函数队列

 
});

 
$(
"div"
).animate({left:
'10px'
, top:
'30px'
}, 700);

});

 
$(
"button"
).click(
function

() {

 
$(
"div"
).animate({left:
'+=200px'
}, 2000);

 
$(
"div"
).animate({top:
'0px'
}, 600);

 
$(
"div"
).queue(
function

() {

 
$(
this
).toggleClass(
"red"
);

 
$.dequeue(
this

);
//执行下一个函数队列

 
});

 
$(
"div"
).animate({left:
'10px'
, top:
'30px'
}, 700);

});

 
$.each([52, 97],
function
(index, value) {

 
alert(index +
': '

+ value);

});
//通用例遍方法，可用于例遍对象和数组。

var

map = {

 
'flammable'
:
'inflammable'
,

 
'duh'
:
'no duh'

};

$.each(map,
function
(key, value) {

 
alert(key +
': '

+ value);

});
//通用例遍方法，可用于例遍对象和数组。

 
//合并 settings 和 options，修改并返回 settings。

var

settings = { validate:
false
, limit: 5, name:
"foo"

};

var

options = { validate:
true
, name:
"bar"

};

jQuery.extend(settings, options);

//合并 defaults 和 options, 不修改 defaults。

var

empty = {}

var

defaults = { validate:
false
, limit: 5, name:
"foo"

};

var

options = { validate:
true
, name:
"bar"

};

var

settings = jQuery.extend(empty, defaults, options);

 
jQuery.globalEval(
"var newVar = true;"
);
//以全局方式执行javascript

 
$.grep( [0,1,2],
function
(n,i){

 
return

n > 0;

});
//过滤小于或等于0的数组项目

 
var

arr = [ 4,
"Pete"
, 8,
"John"

];

jQuery.inArray(
"John"
, arr);
//判断'John'是否在arr数组里并返回索引值, 如果不存在则返回-1

 
$.isArray([]);
//判断参数是否为数组,return true/false.

 
jQuery.isEmptyObject({})
// true

jQuery.isEmptyObject({ foo:
"bar"

})
// false

//判断是否为空的对象

 
jQuery.isFunction(objs[i]);
//判断是否为函数

 
jQuery.isPlainObject({})
// true

jQuery.isPlainObject(
"test"
)
// false

//判断是否为简单对象

 
jQuery.isXMLDoc(document)
// false

jQuery.isXMLDoc(document.body)
// false

//判断是否为xml文档

 
var

elems = document.getElementsByTagName(
"div"
);
// returns a nodeList

var

arr = jQuery.makeArray(elems);
//将类数组对象转换为数组对象

 
var

newArr = $.map( [0,1,2],
function
(n){
return

n + 4; });
//将源数组中的所有键值+4后赋值给新数组

 
var

first = [
'a'
,
'b'
,
'c'
];

var

second = [
'd'
,
'e'
,
'f'
];

$.merge($.merge([], first), second);
//合并两个数组, 不赋值给第一个数组

$.merge(first, second);
//合并两个数组, 并将结果赋值给第一个数组

 
jQuery.noop();
//一个空函数

 
var

obj = jQuery.parseJSON(
'{"name":"John"}'
);

alert( obj.name ===
"John"

);
//从语法上分析一个JSON字符串

 
var

obj = {

 
name:
"John"
,

 
test:
function
() {

 
alert(
this
.name );

 
$(
"#test"
).unbind(
"click"
, obj.test);

 
}

};

$(
"#test"
).click( jQuery.proxy( obj,
"test"

) );
//代理对象函数

 
obj.queue();
//函数队列?

jQuery.queue();
//函数队列?

 
jQuery.removeData(div,
"test1"
);
//移除标签上的数据

 
jQuery.support.boxModel;
//是否支持w3c盒模型

 
$.trim(
"  hello, how are you?  "
);
//删除字符串首尾的空格

 
var

divs = $(
"div"
).get();
// 将对象转换为对象数组

divs = divs.concat($(
".dup"
).get());
//合并3个对象数组到divs

$(
"div:eq(1)"
).text(
"Pre-unique there are "

+ divs.length +
" elements."
);
//有9个元素

divs = jQuery.unique(divs);
//其中有3个是重复的,需要用unique函数去掉他们

$(
"div:eq(2)"
).text(
"Post-unique there are "

+ divs.length +
" elements."
).css(
"color"
,
"red"
);
//就只有6个了