花了两天时间系统性的学习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="milk 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(
'<p>true</p>'
); 
//设置类名为demo-container的div标签下的html内容为'<p>true</p>',相当于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(
'<p>Test</p>'
); 
//在.inner后面添加 "<p>Test</p>"

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

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

 
.attr();

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

$(
'.container'
).before(
"<b>here</b>"
); 
//将"<b>here</b>"加到.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)

 
$(
'<p>Test</p>'
).insertAfter(
'.inner'
); 
//将'<p>Test</p>'插入到.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(
'<p>Test</p>'
); 
//将'<p>Test</p>'加到.inner里的最前面

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

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

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

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

 
.removeClass();

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

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

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

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

 
.text();

 
.toggleClass();

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

 
$(
"p"
).wrap(
"<div></div>"
);

}, 
function
(){

 
$(
"p"
).unwrap();

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

 
.val();

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

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

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

 
$(
'.inner'
).wrapInner(
'<div />'
); 用<div></div>将.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(
"<p>Another paragraph!</p>"
);

}); 
//给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( 
"<div>"
 
+ msg + 
"</div>"
 
);

}

$(
"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( 
"<div>"
 
+ msg + 
"</div>"
 
);

}

$(
"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('<div>Handler for .resize() called.</div>');

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

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

 
$('
#log').append('<div>Handler for .scroll() called.</div>');

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

 
$('
#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(
"<p>Before Send!</p>"
); }, 
//在发送http请求之前执行的函数

 
complete: 
function
(XMLHttpRequest, textStatus) {

 
$(
this
).append(
"<p>XML is load completed, Stats is "
 
+ textStatus + 
"!</p>"
);

 
},

 
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(
"<p>XMLHttpRequest "
+XMLHttpRequest+
" & textStatus"
 
+ textStatus + 
"errorThrown: "
 
+ errorThrown + 
"</p>"
);

 
}, 
//错误时

 
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(
"<p>Result: "
+data+
"</p>"
);

 
$(
this
).append(
'<p>Load was performed. Stats is '
 
+ textStatus + 
'!</p>'
);

 
}, 
//成功时

 
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(
"<p>Result: "
+data+
"</p>"
);

 
$(
'.result'
).append(
'<p>Load was performed. Stats is '
 
+ textStatus + 
'!</p>'
);

 
}

}); 
//安装ajax

$.ajax();
<
div
 
style
=
"background: red;color: #fff;"
>Trigger</
div
>

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

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

<
script
>

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

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

}); //当ajax开始时

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

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

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

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

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

}); //当ajax成功时

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

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

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

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

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

}); //当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.</
p
>');

 
});

});

</
script
>

 
<
ul
 
id
=
"footerNavigation"
>

 
<
li
><
a
 
href
=
"#"
>Download</
a
></
li
>

 
<
li
><
a
 
href
=
"#"
>Documentation</
a
></
li
>

 
<
li
><
a
 
href
=
"#"
>Tutorials</
a
></
li
>

 
<
li
><
a
 
href
=
"#"
>Bug Tracker</
a
></
li
>

 
<
li
><
a
 
href
=
"#"
>Discussion</
a
></
li
>

</
ul
>

<
b
>Footer navigation:</
b
>

<
ol
 
id
=
"new-nav"
></
ol
>

<
script
>

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

</
script
>

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

<
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+"</
p
>");

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

</
script
> //转换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(
'<p>'
 
+ data.foo + 
'</p>'
 
+ 
'<p>'
 
+ data.baz[1] + 
'</p>'
);

}); 
//读取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) {

 
$(
"<div>"
 
+ i + 
" : <span>"
 
+ val + 
"</span>"
).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个了

 

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注