jquery学习（转载）
花了两天时间系统性的学习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个了
