锋利的JQuery 学习笔记


第一章                认识JQuery

·页面加载事件(可以写多个ready()
$(document).ready(function(){
alert(
hello world);
})

·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素、父元素等
//
选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式
$(
#myDiv).addClass(css1).children(a).removeClass(css2);

·JQuery中获得一个对象的所有子元素内容
$(
#myDiv).html()

·JQuery中的变量 与 DOM中的变量
var $myVar = 
“”;
var myVar = 
“”;

·DOM对象 转换成 JQuery对象
var obj = documnet.getElementById(
myDiv);
var $obj = $(obj);

·JQuery对象 转换成 DOM对象
var $obj = $(
#myDiv);
var obj = $obj.get(0);  //
或者var obj = $obj[0];

·释放JQuery$符号的控制权
JQuery.noConflict();

第二章                JQuery选择器

·JQuery完善的处理机制
document.getElementById(
test).style.color = red; //如果test不存在,则页面出现异常
$(
#test).css(color,red); //哪怕页面没有名称为test的元素,也不会报错。它是一个JQuery对象

·判断页面是否选择的对象
if( $(
.class).length > 0 ){
// todo something
}

·基本选择器
$(
#myDiv)    //根据给定的ID选择匹配的元素,返回:单个元素
$(
.myClass) //根据给定的样式名称选择匹配的元素,返回:集合元素
$(
div) //根据给定的元素名称选择匹配的元素,返回:集合元素
$(
#myDiv,div.myClass,span) //根据给定的规则选择匹配的元素,返回:集合元素
$(
*) //选择页面所有元素,返回:集合元素

·层次选择器
$(
div span) //选择所有DIV元素下的所有SPAN元素(所有后代元素),返回:集合元素
$(
div>span) //选择所有DIV元素下的SPAN子元素(仅子元素),返回:集合元素
$(
.myClass+div) //选择样式名称为myClass的下一个DIV元素,返回:集合元素
$(
.myClass+div) //等价于 $(.myClass).next(div);
$(
.myClass~div) //选择样式名称为myClass之后的所有DIV元素,返回:集合元素
$(
.myClass~div) //等价于 $(.myClass).nextAll();
$(
.myClass).siblings(div) //选择样式名称为myClass的元素的所有同辈DIV元素(无论前后),返回集合元素

·过滤选择器(index0开始)
$(
div:first) //选择所有DIV元素下的第一个DIV元素,返回:单个元素
$(
div:last) //选择所有DIV元素下的最后一个DIV元素,返回:单个元素
$(
div:not(.myClass)) //选择所有样式不包括myClassDIV元素,返回:集合元素
$(
div:even) //选择所有索引是偶数的DIV元素,返回:集合元素
$(
div:odd) //选择所有索引是奇数的DIV元素,返回:集合元素
$(
div:eq(index)) //选择所有索引等于indexDIV元素,返回:集合元素
$(
div:gt(index)) //选择所有索引大于indexDIV元素,返回:集合元素
$(
div:lt(index)) //选择所有索引小于indexDIV元素,返回:集合元素
$(
:header) //选择所有标题元素(h1,h2,h3),返回:集合元素
$(
div:animated) //选择所有正在执行去画的DIV元素,返回:集合元素

·子元素过滤选择器(index1开始)
$(
:nth-child(index/even/odd)) //选择每个父元素下的第index/偶数/奇数个子元素,返回:集合元素
$(
:first-child) //选择每个父元素下的第一个子元素,返回:集合元素
$(
:last-child) //选择每个父元素下的最后一个子元素,返回:集合元素
$(
ul li:only-child) //UL元素中选择只有一个LI元素的子元素,返回:集合元素

·内容过滤选择器
$(
:contains(text)) //选择所有内容包含text的元素,返回:集合元素
$(
div:empty) //选择所有内容为空的DIV元素,返回:集合元素
$(
div:has(span)) //选择所有含有SPAN子元素的DIV元素,返回:集合元素
$(
div:parent) //选择所有含有子元素的DIV元素,返回:集合元素

·可见性选择器
$(
:hidden) //选择所有不可见的元素(type=hidden style=display:none style=visibility:none”),返回:集合元素
$(
:visible) //选择所有可见的元素,返回:集合元素

·属性过滤选择器
$(
[id]) //选择所有含有id属性的元素,返回:集合元素
$(
[class=myClass]) //选择所有class属性值是myClass的元素,返回:集合元素
$(
[class!=myClass]) //选择所有class属性值不是myClass的元素,返回:集合元素
$(
[alt^=begin]) //选择所有alt属性值以begin开始的元素,返回:集合元素
$(
[alt^=end]) //选择所有alt属性值以end结束的元素,返回:集合元素
$(
[alt*=some]) //选择所有alt属性值含有some的元素,返回:集合元素
$(
div[id][class=myClass]) //选择所有含有id属性的并且class属性值是myClass的元素,返回:集合元素

·表单对象属性选择器
$(
#myForm:enabled) //选择ID属性为myForm的表单的所有可用元素,返回:集合元素
$(
#myForm:disabled) //选择ID属性为myForm的表单的所有不可用元素,返回:集合元素
$(
#myForm:checked) //选择ID属性为myForm的表单的所有所有被选中的元素,返回:集合元素
$(
#myForm:selected) //选择ID属性为myForm的表单的所有所有被选中的元素,返回:集合元素

·表单选择器
$(
:input) //选择所有<input> <select> <button> <textarea>元素,返回:集合元素
$(
:text) //选择所有单行文本框元素,返回:集合元素
$(
:password) //选择所有密码框元素,返回:集合元素
$(
:radio) //选择所有单选框元素,返回:集合元素
$(
:checkbox) //选择所有复选框元素,返回:集合元素
$(
:submit) //选择所有提交按钮元素,返回:集合元素
$(
:image) //选择所有图片按钮元素,返回:集合元素
$(
:reset) //选择所有重置按钮元素,返回:集合元素
$(
:button) //选择所有按钮元素,返回:集合元素
$(
:file) //选择所有上传域元素,返回:集合元素
$(
:hidden) //选择所有不可见域元素,返回:集合元素
$(
:text) //选择所有单选文本框元素,返回:集合元素

第三章 JQuery中的DOM操作

·查找元素节点
var str = $(
#myDiv).text(); //<div id=myDiv title=hello>123</div>
alert(str); //
结果:123

·查找属性节点
var str = $(
#myDiv).attr(title); //<div id=myDiv title=hello>123</div>
alert(str); //
结果:hello

·创建元素节点
var $li1 = $(
<span></span>); //传入元素标记,自动包装并创建第一个li元素对象
var $li2 = $(
<span></span>); //第二个,创建时需要遵循XHTML规则(闭合、小写)
$(
#myDiv).append($li1); //idmyDiv的元素中添加一个元素
$(
#myDiv).append($li2); //结果:<div id=myDiv><span></span><span></span></div>

$(#myDIv).append($li1).append($li2); //客串:传说中的链式写法,省一行代码 ^_^

·创建文本节点
var $li1 = $(
<span>first</span>);
var $li2 = $(
<span>second</span>);
$(
#myDIv).append($li1).append($li2);
// 
结果:<div id=myDiv><span>first</span><span>second</span></div>

·创建属性节点
var $li1 = $(
<span title=111>first</span>);
var $li2 = $(
<span title=222>second</span>);
$(
#myDIv).append($li1).append($li2);
// 
结果:<div id=myDiv><span title=111>first</span><span title=222>second</span></div>

·插入节点
$(
#myDiv).append(<span></span>); //idmyDiv的元素插入span元素
$(
<span></span>).appendTo(#myDiv); //倒过来,将span元素插入到idmyDiv的元素

$(#myDiv).prepend(<span></span>); //idmyDiv的元素内最前面插入span元素
$(
<span></span>).prependTo(#myDiv); //倒过来,将span元素插入到idmyDiv的元素内的最前面

$(#myDiv).after(<span></span>); //idmyDiv的元素后面插入span元素(同级,不是子元素)
$(
<span></span>).insertAfter(#myDiv); //倒过来,将span元素插入到idmyDiv的元素后面(同级,不是子元素)

$(#myDiv).before(<span></span>); //idmyDiv的元素前面插入span元素(同级,不是子元素)
$(
<span></span>).insertBefore(#myDiv); //倒过来,将span元素插入到idmyDiv的元素前面(同级,不是子元素)

·删除节点
$(
#myDiv).remove(); //idmyDiv的元素移除

·清空节点
$(
#myDiv).remove(span); //idmyDiv的元素内的所有span元素移除

·复制节点
$(
#myDiv span).click( function(){ //点击idmyDiv的元素内的span元素,触发click事件
$(this).clone().appendTo(
#myDiv); //span元素克隆,然后再添加到idmyDiv的元素内
$(this).clone(true).appendTo(
#myDiv); //如果clone传入true参数,表示同时复制事件
})

·替换节点
$(
p).replaceWith(<strong> 您好</strong>); //将所有p元素替换成后者 <p>您好</p> > <strong>您好</strong>
$(
<strong>您好</strong>).replaceAll(p); //倒过来写,同上

·包裹节点
$(
strong).wrap(<b></b>); //b元素把所有strong元素单独包裹起来 <b><strong>您好</strong>< /b><b><strong>您好< /strong></b>
$(
strong).wrapAll(<b></b>); //b元素把所有strong元素全部包裹起来 <b><strong>您 好</strong><strong>您好< /strong></b>
$(
strong).wrapInner(<b></b>); //b元素包裹在strong元素内 <strong><b>您好</b>< /strong>

·属性操作
var txt = $(
#myDiv).arrt(title); //获取idmyDiv的元素的title属性
$(
#myDiv).attr(title,”我是标题内容”); //设置idmyDiv的元素的title属性的值
$(
#myDiv).attr({title:”我是标题内容”alt:”我还是标题”); //一次性设置多个属性的值
$(
#myDiv).removeArrt(alt); //移除idmyDiv的元素的title属性

·样式操作
var txt = $(
#myDiv).arrt(class); //获取idmyDiv的元素的样式
$(
#myDiv).attr(class,myClass); //设置idmyDiv的元素的样式
$(
#myDiv).addClass(other); //idmyDiv的元素中追加样式
$(
#myDiv).removeClass(other); //idmyDiv的元素中移除other样式
$(
#myDiv).removeClass(myClass other); //idmyDiv的元素中移除myClassother多个样式
$(
#myDiv).removeClass(); //idmyDiv的元素中移除所有样式
$(
#myDiv).toggleClass(other); //切换样式,在有other样式和没other样式之间切换
$(
#myDiv).hasClass(other); //判断是否有other样式

·设置和获取HTML、文本和值
alert( $(
#myDiv).html() ); //获取idmyDiv的元素的HTML代码(相当于innerHTML
$(
#myDiv).html(<span>hello</span>); //设置idmyDiv的元素的HTML代码

alert( $(#myDiv).text() ); //获取idmyDiv的元素的HTML代码(相当于innerText
$(
#myDiv).text(hello); //设置idmyDiv的元素的HTML代码

alert( $(#myInput).val() ); //获取idmyDiv的元素的value值(支持文本框、下拉框、单选框、复选框等)
$(
#myInput).val(hello); //设置idmyDiv的元素的value值(下拉框、单选框、复选框带有选中效果)

·遍历节点
var $cList = $(
#myDiv).children(); //获取idmyDiv的元素的子元素(只考虑子元素,不考虑后代元素)
var $sNext = $(
#myDiv).next(); //获取idmyDiv的元素的下一个同辈元素
var $sPrev = $(
#myDiv).prev(); //获取idmyDiv的元素的上一个同辈元素
var $sSibl = $(
#myDiv).siblings(); //获取idmyDiv的元素的所有同辈元素
var $pClos = $(
#myDiv).closest(span); //获取idmyDiv的元素本身开始,最接近的span元素(向上查找)

·CSS-DOM操作
$(
#myDiv).css(color); //获取idmyDiv的元素的color样式的值
$(
#myDiv).css(colorblue); //设置idmyDiv的元素的color样式的值
$(
#myDiv).css({color:bluefontSize:12px}); //设置idmyDiv的元素的color样式的值(多个)

$(#myDiv).css(opacity0.5); //设置idmyDiv的元素的透明度(兼容浏览器)

$(#myDiv).css(height); //获取idmyDiv的元素的高度(单位:px,兼容浏览器)
$(
#myDiv).height(); //同上(实际高度)

$(#myDiv).css(width); //获取idmyDiv的元素的宽度(单位:px,兼容浏览器)
$(
#myDiv).width(); //同上(实际宽度)

var offset = $(#myDiv).offset(); //获取idmyDiv的元素在当前窗口的相对偏移量
alert( offset.top + 
| + offset.left );

var offset = $(#myDiv).position(); //获取idmyDiv的元素相对于最近一个position设置为relativeabsolute的父元素的相对偏移量
alert( offset.top + 
| + offset.left );

$(#txtArea).scrollTop(); //获取idtxtArea的元素滚动条距离顶端的距离
$(
#txtArea).scrollLeft(); //获取idtxtArea的元素滚动条距离左侧的距离
$(
#txtArea).scrollTop(100); //设置idtxtArea的元素滚动条距离顶端的距离
$(
#txtArea).scrollLeft(100); //设置idtxtArea的元素滚动条距离左侧的距离

第四章 JQuery中的事件和动画

·加载DOM
$(window).load() 
等价于 window.onload 事件

$(document).ready() 相当于window.onload事件,但有些区别:
(1)
执行时机:
window.onload 
是在网页中所有元素(包括元素的所有关联文件)完全加载后才执行
$(document).ready() 
是在DOM完全就绪时就可以被调用,此时,并不意味着这些元素关系的文件都已经下载完毕

(2)多次使用:可以在同一个页面注册多个$(document).ready()事件
(3)
简写方式:可以缩写成 $(function(){ })    $().ready()

·事件绑定
当文档装载完成后,可以通过bind()方法,为特定的元素进行事件的绑定,可重复多次使用
bind( type, [data, ] fn );
type
:指事件的类型:
blur
(失去焦点)、focus(获得焦点)
load
(加载完成)、unload(销毁完成)
resize
(调整元素大小)、scroll(滚动元素)
click
(单击元素事件)、dbclick(双击元素事件)
mousedown
(按下鼠标)、mouseup(松开鼠标)
mousemove
(鼠标移过)、mouseover(鼠标移入)、mouseout(鼠标移出)
mouseenter
(鼠标进入)、mouseleave(鼠标离开)
change
(值改变)、select(下拉框索引改变)、submit(提交按钮)
keydown
(键盘按下)、keyup(键盘松开)、keypress(键盘单击)
error
(异常)
data
:指事件传递的属性值,event.data 额外传递给对象事件的值
fn
:指绑定的处理函数,在此函数体内,$(this)指携带相应行为的DOM元素

·合并事件
hover(enter,leave)
:鼠标移入执行enter、移出事件执行leave
$(
#myDiv).hover( function(){
$(this).css(
border1px solid black);0
}, function(){
$(this).css(
bordernone);
});

toggle(fn1,fn2,fnN):鼠标每点击一次,执行一个函数,直到最后一个后重复
$(
#myDiv).toggle( function(){
$(this).css(
border1px solid black);0
}, function(){
$(this).css(
bordernone);
});

·事件冒泡
下面的例子,BODY元素下有DIV元素,DIV元素下有SPAN元素,分别将三种元素都注册click事件。
那么,click事件会按照DOM的层次结构,像水泡一样不断向上直到顶端,所以称之为事件冒泡。
<body><div><span> 
我是SPAN我怕谁</span></div></body>
$(
span).bind(click, function(){ alert(span click); });
$(
div).bind(click, function(){ alert(div click); });
$(
body).bind(click, function(){ alert(body click); });

·阻止冒泡
解决这个问题的办法是:在SPAN执行完click事件后,停止事件冒泡。
$(
span).bind(click, function(event){
alert(
span click);
event.stopPropagation(); //
停止冒泡
});

·阻止默认行为
提交按钮在提交前做相应的逻辑判断,当不满足时
$(
#btnSubmit).bind(click, function(event){
event.preventDefault(); //
阻止默认行为 相当于return false;
});

·事件对象的属性
$(
#myDiv).bind(click, function(event){ });
event.type() //
返回:click
event.target() //
获取当前元素
event.relatedTarget() //
引发事件的元素
event.pageX()/event.pageY() //
获取鼠标相对于页面的XY坐标
event.which() //
在单击事件中获取到对应的按键 鼠标左中右分别是123
event.metaKey() //
获取操作中的相关功能键(ctrl/alt/shift

·移除事件
$(
#myDiv).bind(click, fn1 = function(){
alert(
function1);
}).bind(
click, fn2 = function(){
alert(
function2);
}).bind(
click, fn3 = function(){
alert(
function3);
});
$(
#myDiv).unbind(); //移除idmyDiv的元素的所有事件
$(
#myDiv).unbind(click); //移除idmyDiv的元素的所有click事件
$(
#myDiv).unbind(click,fn1); //移除idmyDiv的元素的名称为fn1click事件

·一次性事件:绑定的事件执行一次后自动移除
$(
#myDiv).one(click, [data], function(){
alert(
function1);
});

·触发事件
$(
#btn).trigger(click, [data]); //代码方式触发click事件
$(
#btn).click(); //另一种简写方式

·事件命名空间
$(
#myDiv).bind(click.hello, function(){
alert(
function1);
});
$(
#myDiv).bind(click, function(){
alert(
function1);
})
$(
div).unbind(click); //两个事件都被移除
$(
div).unbind(.hello); //只移除第一个
$(
div).unbind(click!); //只移除第二个(注意感叹号,指没有名字空间的)

·JQuery中的动画
$(
div).hide(); //隐藏所有DIV元素,相当于sytle=display:none
$(
div).show(); //显示所有DIV元素

$(div).hide(1000); //一秒内隐藏所有DIV元素,其它参数还有:slow(600) normal(400) fast(200)
$(
div).show(1000); //一秒内显示所有DIV元素

$(div).fadeOut(); //降低元素的不透明度,直至消失(支持速度参数,不会改变宽高)
$(
div).fadeIn(); //升高元素的不透明度,直至显示

$(div).slideUp(); //由下至上收缩元素,直至消失(支持速度参数)
$(
div).slideDown(); //由上至下展开元素,直至显示

·自定义动画animate
$(elem).animate(params, speed, callback);
params
:样式属性及值的映射 {protected:value, protected:value}
speed: 
速度参数
callback: 
动画完成后执行函数,可选

$(#myDiv).animate({left:500px}, 2000); //两秒内IDmyDiv的元素移至左边距500px的位置
$(
#myDiv).animate({left:+=500px}, 2000); //同上,支持累加、累减
$(
#myDiv).animate({top:200px, left:+=500px}, 2000); //同上,多重动画,同时执行

$(#myDiv).animate({opacity:0.5}, 1000) //先变成50%透明
.animate({top:
500px}, 500) //移至离顶端500px
.animate({left:
500px}, 500) //移至离左边500px
.fadeOut(1000); //
显示出来 (四个动作为队列,一步步执行)

$(#myDiv).stop([cleanQuene] [,gotuEnd]); //停止动画,参数为boolean

$(#myDiv).is(:animate) //判断元素是否在执行动画

·其它动画
$(
#myDiv).toggle(); //显示与隐藏元素
$(
#myDiv).slideToggle(); //展开与收缩元素
$(
#myDiv).fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%

第五章 JQuery对表单、表格的操作及更多应用

·单选文本框应用(获得焦点时,加了个特殊的样式,失去焦点时还原,兼容所有浏览器)
$(
:input).focus(function(){ this.addClass(inputFocus); })
.blur(function(){ this.removeClass(
inputFocus); });

·多行文本框的应用(放大、缩小多行文本框的高度,限制最大500px,兼容所有浏览器)
var $txt = $(
#textArea);
$(
.bigger).click(function(){
if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
//if( $txt.height() < 500) $txt.animate({height:
+=50}, 500 );
});
$(
.smaller).click(function(){
if( $txt.height() > 100) $txt.height( $txt.height() 
 50 );
//if( $txt.height() < 500) $txt.animate({height:
-=50}, 500 );
});

·复选框的应用(实现全选、全不选、反选)
$(
#btnCheckedAll).click(function(){ //全选
$(
[name=items]:checkbox).attr(checked, true);
});
$(
#btnCheckedNone).click(function(){ //全不选
$(
[name=items]:checkbox).attr(checked, false);
});
$(
#btnCheckedRev).click(function(){ //反选
$(
[name=items]:checkbox).each(function(){
$(this).attr(
checked, !$(this).attr(checked));
//this.checked = !this.checked;
}
});

·下拉框的应用(将一个下拉列表的选中项搬至另一个下拉列表)
$(
#btnAdd).click(function(){ //将选中选项搬过去
$(
#mySelect1 option:selected).appendTo(#mySelect2);
});
$(
#btnAddAll).click(function(){ //将全部选项搬过去
$(
#mySelect1 option).appendTo(#mySelect2);
});
$(
#mySelect1).dblclick(function()[ //双击项搬过去
$("#mySelect1 option:selected").appendTo("#mySelect2");
}

·表单验证
<form>
<div>
<label>
用户名:</label>
<input type="text" id="txtUid" value="" />
</div>
</form>
$("form :input.required").each(function(){ //
往每个classrequired样式的input元素后面添加*
$(this).parent().append( $("<span class='star'>*</span>") );
});
$("form :input.required").blur(function(){ //
失去焦点时验证域
if( this.value == "" ){
$(this).parent().append( $("<span class='error'>
必填字段</span>") );
}
else{
$(this).parent().append( $("<span class='success'>
验证正确</span>") );
$(this).parent().find(".error").remove();
}
}).keyup(function(){ //
用户每点一个键触发
$(this).triggerHandler("blur");
}).focus(function(){ //
控制有焦点时触发
$(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
$("form :input.required").trigger("blur"); //
让所有需要验证的域失去焦点
var errNum = $("form .error").length;
if( errNum ){
alert("
有验证字段失败,请重新填写");
return false;
}
});

·表格应用
$("tr:odd").addClass("oddTr"); //
给奇数行添加oddTr样式
$("tr:even").addClass("evenTr"); //
给偶数行添加evenTr样式

$("tr:contains('王五')").addClass("highlightTr"); //查找包含”王五”的行,添加highlightTr样式

$("tr").click(function(){
$(this).addClass("selectedTr") //
给当前行添加选中样式
.siblings().removeClass("selectedTr") //
反选移除选中样式
.end() //
结束,返回$(this),否则则是反选的行
.find(':radio").attr("checked",true); //
在当前行查找单选框,选中它
});

第六章 JQueryAjax的应用

·load( url [,data] [,callback] )方法
url
:要请求的页面的地址
data
:要发送的相关参数
callback
:回调函数

$(#myDiv).load(hello.html); //myDiv元素加载hello.html的内容
$(
#myDiv).load(hello.html .myClass); //筛选,只加载hello.htmlmyClass样式的内容

$(#myDiv).load(hello.html, function(){} ); //没参数的,使用GET方式
$(
#myDiv).load(hello.html, {id:123, name:dier}, function(){} ); //有参数的,使用POST方式

$(#myDiv).load(hello.html, function(responseText, textStatus, XMLHttpRequest){ //回调函数
//responseText : 
请求返回的内容
//textStatus : 
请求状态 success error notmodified timeout
//XMLHttpRequest : Ajax
对象
});

·$.get( url [,data] [,callback] [,type])$.post( url [,data] [,callback] [,type])方法
url
:要请求的页面的地址
data
:要发送的相关参数
callback
:回调函数
type
:指定服务器返回内容的格式 xml html script json text _default

$.get( test.aspx, {id:123, name:dier}, function(data,textStatus){ //回调函数只有当状态是success才触发
//data : 
请求返回的内容
//textStatus : 
请求状态 success error notmodified timeout

//dataHTML时,直接加载
$(
#myDiv).html(data);

//dataXML时,可筛选 <user id=123 name=dier age=27 />
var age = $(data).find(
user).attr(age);

//dataJSON时,可直接点出属性来 {id:123, name:dier, age:27}
var age = data.age;
});

·getScript(url [,callback])方法
$(function(){ //
动态加载JS脚本
$.getScript(
test.js);

$.getScript(test.js, function(){ //回调函数
//do something..
});
});

·getJSON(url [,callback])方法
$(function(){ //
动态加载JS脚本
$.getJSON(
test.js);

$.getJSON(test.js, function(data){ //回调函数
//do something..
//data : 
返回的数据
$.each( data, function(index, item){ //
遍历,相当于foreach
//index : 
索引
//item : 
当前项内容
//return false; 
退出循环
});
});
});

·ajax(options)方法
url : 
请求的地址
type : 
请求的方式 GET POST 默认为GET
timeout : 
请求超时时间(单位:毫秒)
data : 
请求时发送的参数(String,Object
dataType : 
预期返回的数据类型 xml html script json jsonp text
bdforeSend : 
发送请求前触发事件,如果return false则取消发送 function(XmlHttpRequest){}
complete : 
请求完成后触发事件,不管成功与否 function(XmlHttpRequest, textStatus){}
success : 
请求完成并且成功时触发事件 function(data, textStatus){}
error : 
请求完成并且失败时触发事件 function(XmlHttpRequest, textStatus, errorThrown){}
global : 
是否为全局请求,默认为true,可使用AjaxStartAjaxStop控制各种事件

$.ajax({
url : 
test.aspx,
type : 
POST,
timeout : 
3000,
data : {id:
123, name:dier},
dataType : 
HTML,
success : function(data,textStatus){
$(
#myDiv).html( data );
}
error : function(XmlHttpRequest, textStatus, errThrown){
$(
#myDiv).html( “请求失败:” + errThrown );
}
});

·序列化字符串 serialize()
$.get( 
test.aspx, $(#form1).serialize(), function(data,textStatus){
//
form1整个表单中的所有域序列化成提交的参数,支持自动编码
});

·序列化数组 serializeArray()
var arr = $(
:checkbox, :radio).serializeArray();

·对象序列化 param()
var obj = {id:
123, name:dier, age:27};
var kv = $.param(obj); //id=123&name=dier&age=27

·JQuery中的全局Ajax事件
ajaxStart(callback) //
请求开始时触发
ajaxStop(callback) //
请求结束时触发
ajaxComplete(callback) //
请求完成时触发
ajaxSuccess(callback) //
请求成功时触发
ajaxError(callback) //
请求失败时触发
ajaxSend(callback) //
请求发送前触发

$(#loading).ajaxStart(function(){ //当有AJAX请求时显示,完成时隐藏
$(this).show();
}.ajaxStop(function(){
$(this).hide();
}
);

//第七章是插件的使用及编写 第八章则是一个实例 此处忽略

posted @ 2014-07-29 13:15  JAVA之迷  阅读(143)  评论(0编辑  收藏  举报