jQuery是一款同prototype一样优秀js开发库类特别是对css和XPath的支持使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果jQuery可以帮你达到目的！
下载地址Starterkit（starterkitzip）
jQueryDownloads（）
下载完成后先加载到文档中然后我们来看个简单的例子！
<scriptlanguage=javascripttype=text/javascript>
$(document)ready(function(){
$(a)click(function(){
alert(Helloworld!);
});
});
<script>
上边的效果是点击文档中所有a标签时将弹出对话框$(a)是一个jQuery选择器$本身表示一个jQuery类所有$()是构造一个jQuery对象click()是这个对象的方法同理$(document)也是一个jQuery对象ready(fn)是$(document)的方法表示当document全部下载完毕时执行函数
在进行下面内容之前我还要说明一点$(p)和$(#p)的区别$(p)表示取所有p标签(<p></p>)的元素$(#p)表示取id为p(<spanid=p></span>)的元素
我将从以下几个内容来讲解jQuery的使用:
:核心部分
:DOM操作
:css操作
:javascript处理
:动态效果
:event事件
:ajax支持
:插件程序
一核心部分
$(expr)
说明该函数可以通过css选择器Xpath或html代码来匹配目标元素所有的jQuery操作都以此为基础
参数expr字符串一个查询表达式或一段html字符串
例子
未执行jQuery前
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a#id=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
alert($(div>pl());
}
运行当点击id为test的元素时弹出对话框文字为two即div标签下p元素的内容
functionjq(){
$(<div><p>Hello</p></div>)appendTo(body);
}
运行当点击id为test的元素时向body中添加<div><p>Hello</p></div>
$(elem)
说明限制jQuery作用于一个特定的dom元素这个函数也接受xml文档和windows对象
参数elem通过jQuery对象压缩的DOM元素
例子
未执行jQuery前
<p>one</p>
<div>
<p>two</p>
</div><p>three</p>
<a#id=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
alert($(document)find(div>pl());
}
运行当点击id为test的元素时弹出对话框文字为two即div标签下p元素的内容
functionjq(){
$(documentbody)background(black);
}
运行当点击id为test的元素时背景色变成黑色
$(elems)
说明限制jQuery作用于一组特定的DOM元素
参数elem一组通过jQuery对象压缩的DOM元素
例子
未执行jQuery前
<formid=form>
<inputtype=textname=textfield>
<inputtype=submitname=Submitvalue=提交>
</form>
<a#id=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
$(formelements)hide();
}
运行当点击id为test的元素时隐藏form表单中的所有元素
$(fn)
说明$(document)ready()的一个速记方式当文档全部载入时执行函数可以有多个$(fn)当文档载入时同时执行所有函数！
参数fn(Function):当文档载入时执行的函数！
例子
$(function(){
$(documentbody)background(black);
})
运行当文档载入时背景变成黑色相当于onLoad
$(obj)
说明复制一个jQuery对象
参数obj(jQuery):要复制的jQuery对象
例子
未执行jQuery前
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a#id=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
varf=$(div);
alert($(f)find(pl())
}
运行当点击id为test的元素时弹出对话框文字为two即div标签下p元素的内容
each(fn)
说明将函数作用于所有匹配的对象上
参数fn(Function):需要执行的函数
例子
未执行jQuery前
<imgsrc=jpg/>
<imgsrc=jpg/>
<a#id=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
$(img)each(function(){
thissrc=jpg;});
}
运行当点击id为test的元素时img标签的src都变成了jpg
eq(pos)
说明减少匹配对象到一个单独得dom元素
参数pos(Number):期望限制的索引从开始
例子
未执行jQuery前
<p>Thisisjustatest</p>
<p>Soisthis</p>
<a#id=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
alert($(p)eq(l())
}
运行当点击id为test的元素时alert对话框显示Soisthis即第二个<p>标签的内容
get()get(num)
说明获取匹配元素get(num)返回匹配元素中的某一个元素
参数get(Number):期望限制的索引从开始
例子
未执行jQuery前
<p>Thisisjustatest</p>
<p>Soisthis</p>
<a#id=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
alert($(p)get()innerHTML);
}
运行当点击id为test的元素时alert对话框显示Soisthis即第二个<p>标签的内容
注意get和eq的区别eq返回的是jQuery对象get返回的是所匹配的dom对象所有取$(p)eq()对象的内容用jQuery方法html()而取$(p)get()的内容用innerHTML
index(obj)
说明返回对象索引
参数obj(Object):要查找的对象
例子
未执行jQuery前
<divid=test></div>
<divid=test></div>
<a#id=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
alert($(div)index(documentgetElementById(test)));
alert($(div)index(documentgetElementById(test)));
}
运行当点击id为test的元素时两次弹出alert对话框分别显示
size()Length
说明当前匹配对象的数量两者等价
例子
未执行jQuery前
<imgsrc=testjpg/>
<imgsrc=testjpg/>
<a#id=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
alert($(img)length);
}
运行当点击id为test的元素时弹出alert对话框显示表示找到两个匹配对象
二DOM操作
属性
我们以<imgid=ascr=jpg/>为例在原始的javascript里面可以用varo=documentgetElementById(a)取的id为a的节点对象在用osrc来取得或修改该节点的scr属性在jQuery里$(#a)将得到jQuery对象[<imgid=ascr=jpg/>]然后可以用jQuery提供的很多方法来进行操作如$(#a)scr()将得到jpg$(#a)scr(jpg)将该对象src属性改为jpg下面我们来讲jQuery提供的众多jQuery方法方便大家快速对DOM对象进行操作
herf()herf(val)
说明对jQuery对象属性herf的操作
例子
未执行jQuery前
<aid=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
alert($(#test)href());
$(#test)href(l);
}
运行先弹出对话框显示id为test的连接url在将其url改为l当弹出对话框后会看到转向到l
同理jQuery还提供类似的其他方法大家可以分别试验一下
herf()herf(val)html()html(val)id()id(val)name()name(val)rel()rel(val)
src()src(val)title()title(val)val()val(val)
操作
after(html)在匹配元素后插入一段html
<a#id=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
$(#test)after(<b>Hello</b>);
}
执行后相当于
<a#id=testonClick=jq()>jQuery</a><b>Hello</b>
after(elem)after(elems)将指定对象elem或对象组elems插入到在匹配元素后
<pid=test>after</p><a#onClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
$(a)after($(#test));
}
执行后相当于
<a#onClick=jq()>jQuery</a><pid=test>after</p>
append(html)在匹配元素内部且末尾插入指定html
<a#id=testonClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
$(#test)append(<b>Hello</b>);
}
执行后相当于
<a#onClick=jq()>jQuery<b>Hello</b></a>
同理还有append(elem)append(elems)before(html)before(elem)before(elems)请执行参照append和after的方来测试理解！
appendTo(expr)与append(elem)相反
<pid=test>after</p><a#onClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
$(a)appendTo($(#test));
}
执行后相当于
<pid=test>after<a#onClick=jq()>jQuery</a></p>
clone()复制一个jQuery对象
<pid=test>after</p><a#onClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
$(#test)clone()appendTo($(a));
}
复制$(#test)然后插入到<a>后执行后相当于
<pid=test>after</p><a#onClick=jq()>jQuery</a><pid=test>after</p>
empty()删除匹配对象的所有子节点
<divid=test>
<span>span</span>
<p>after</p>
</div>
<a#onClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
$(#test)empty();
}
执行后相当于
<divid=test></div><a#onClick=jq()>jQuery</a>
insertAfter(expr)insertBefore(expr)
按照官方的解释和我的几个简单测试insertAfter(expr)相当于before(elem)insertBefore(expr)相当于after(elem)
prepend(html)prepend(elem)prepend(elems)在匹配元素的内部且开始出插入
通过下面例子区分append(elem)appendTo(expr)prepend(elem)
<pid=a>p</p>
<div>div</div>
执行$(#a)append($(div))后相当于
<pid=a>
P
<div>div</div>
</p>
执行$(#a)appendTo($(div))后相当于
<div>
div
<pid=a>p</p>
</div>
执行$(#a)prepend($(div))后相当于
<pid=a>
<div>div</div>
P
</p>
remove()删除匹配对象
注意区分empty()empty()移出匹配对象的子节点remove()移出匹配对象
wrap(htm)将匹配对象包含在给出的html代码内
<p>TestParagraph</p><a#onClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
$(p)wrap(<divclass=wrap></div>);
}
执行后相当于
<divclass=wrap><p>TestParagraph</p></div>
wrap(elem)将匹配对象包含在给出的对象内
<p>TestParagraph</p><divid=content></div>
<a#onClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
$(p)wrap(documentgetElementById(content));
}
执行后相当于
<divid=content><p>TestParagraph</p></div>
遍历组合
add(expr)在原对象的基础上在附加符合指定表达式的jquery对象
<p>Hello</p><p><span>HelloAgain</span></p>
<a#onClick=jq()>jQuery</a>
jQuery代码及功能
functionjq(){
varf=$(p)add(span);
for(vari=;i<$(f)size();i++){
alert($(f)eq(l());}
}
执行$(p)得到匹配<p>的对象有两个add(span)是在(p)的基础上加上匹配<span>的对象所有一共有个从上面的函数运行结果可以看到$(p)add(span)是个对象的集合分别是[<p>Hello</p>][<p><span>HelloAgain</span></p>][<span>HelloAgain</span>]
add(el)在匹配对象的基础上在附加指定的dom元素
$(p)add(documentgetElementById(a));
add(els)在匹配对象的基础上在附加指定的一组对象els是一个数组
<p>Hello</p><p><span>HelloAgain</span></p>
jQuery代码及功能
functionjq(){
varf=$(p)add([documentgetElementById(a)documentgetElementById(b)])
for(vari=;i<$(f)size();i++){
alert($(f)eq(l());}
}
注意els是一个数组这里的[]不能漏掉
ancestors()一依次以匹配结点的父节点的内容为对象根节点除外（有点不好理解看看下面例子就明白了）
<div>
<p>one</p>
<span>
<u>two</u>
</span>
</div>
jQuery代码及功能
functionjq(){
varf=$(u)ancestors();
for(vari=;i<$(f)size();i++){
alert($(f)eq(l());}
}
第一个对象是以<u>的父节点的内容为对象[<u>two</u>]
第一个对象是以<u>的父节点的父节点（div）的内容为对象[<p>one</p><span><u>two</u></span>]
一般一个文档还有<body>和<html>依次类推下去
ancestors(expr)在ancestors（）的基础上之取符合表达式的对象
如上各例子讲varf改为varf=$(u)ancestors(div)则只返回一个对象
[<p>one</p><span><u>two</u></span>]
children()返回匹配对象的子介点
<p>one</p>
<divid=ch>
<span>two</span>
</div>
jQuery代码及功能
functionjq(){
alert($(#ch)children(l());
}
$(#ch)children()得到对象[<span>two</span>]所l()的结果是two
children(expr)返回匹配对象的子介点中符合表达式的节点
<divid=ch>
<span>two</span>
<spanid=sp>three</span>
</div>
jQuery代码及功能
functionjq(){
alert($(#ch)children(#spl());
}
$(#ch)children()得到对象[<span>two</span><spanid=sp>three</span>]
$(#ch)children(#sp)过滤得到[<spanid=sp>three</span>]
parent()parent(expr)取匹配对象父节点的参照children帮助理解
contains(str)返回匹配对象中包含字符串str的对象
<p>Thisisjustatest</p><p>Soisthis</p>
jQuery代码及功能
functionjq(){
alert($(pntains(testl());
}
$(p)得到两个对象而包含字符串test只有一个所有$(pntains(test)返回[<p>Thisisjustatest</p>]
end()结束操作返回到匹配元素清单上操作前的状态
filter(expr)filter(exprs)过滤现实匹配符合表达式的对象exprs为数组注意添加[]
<p>Hello</p><p>HelloAgain</p><pclass=selected>AndAgain</p>
jQuery代码及功能
functionjq(){
alert($(p)filter(selectedl())
}
$(p)得到三个对象$(pntains(test)只返回class为selected的对象
find(expr)在匹配的对象中继续查找符合表达式的对象
<p>Hello</p><pid=a>HelloAgain</p><pclass=selected>AndAgain</p>
Query代码及功能
functionjq(){
alert($(p)find(#al())
}
在$(p)对象中查找id为a的对象
is(expr)判断对象是否符合表达式返回boolen值
<p>Hello</p><pid=a>HelloAgain</p><pclass=selected>AndAgain</p>
Query代码及功能
functionjq(){
alert($(#a)is(p));
}
在$(#a)是否符合jquery表达式
大家可以用$(#a)is(div);(#a)is(#a)多来测试一下
next()next(expr)返回匹配对象剩余的兄弟节点
<p>Hello</p><pid=a>HelloAgain</p><pclass=selected>AndAgain</p>
jQuery代码及功能
functionjq(){
alert($(p)next(l());
alert($(p)next(selectedl());
}
$(p)next()返回[<pid=a>HelloAgain</p><pclass=selected>AndAgain</p>]两个对象
$(p)next(selected)只返回[<pclass=selected>AndAgain</p>]一个对象
prev()prev(expr)参照next理解
not(el)not(expr)从jQuery对象中移出匹配的对象el为dom元素expr为jQuery表达式
<p>one</p><pid=a>two</p>
<a#onclick=js()>jQuery</a>
jQuery代码及功能
functionjs(){
alert($(p)not(documentgetElementById(a)l());
alert($(p)not(#al());
}
$(p)由两个对象排除后的对象为[<p>one</p>]
siblings()siblings(expr)jquery匹配对象中其它兄弟级别的对象
<p>one</p>
<div>
<pid=a>two</p>
</div>
<a#onclick=js()>jQuery</a>
jQuery代码及功能
functionjs(){
alert($(div)siblings()eq(l());
}
$(div)siblings()的结果实返回两个对象[<p>one</p><a#onclick=js()>jQuery</a>]
alert($(div)siblings(a)返回一个对象[<a#onclick=js()>jQuery</a>]
其他
addClass(class)为匹配对象添加一个class样式
removeClass(class)将第一个匹配对象的某个class样式移出
attr(name)获取第一个匹配对象的属性
<imgsrc=testjpg/><a#onclick=js()>jQuery</a>
jQuery代码及功能
functionjs(){
alert($(img)attr(src));
}
返回testjpg
attr(prop)为第一个匹配对象的设置属性prop为hash对象用于为某对象批量添加众多属性
<img/><a#onclick=js()>jQuery</a>
jQuery代码及功能
functionjs(){
$(img)attr({src:testjpgalt:TestImage});
}
运行结果相当于<imgsrc=testjpgalt=TestImage/>
attr(keyvalue)为第一个匹配对象的设置属性key为属性名value为属性值
<img/><a#onclick=js()>jQuery</a>
jQuery代码及功能
functionjs(){
$(img)attr(srctestjpg);
}
运行结果相当于<imgsrc=testjpg/>
removeAttr(name)将第一个匹配对象的某个属性移出
<imgalt=test/><a#onclick=js()>jQuery</a>
jQuery代码及功能
functionjs(){
$(img)removeAttr(alt);
}
运行结果相当于<img/>
toggleClass(class)将当前对象添加一个样式不是当前对象则移出此样式返回的是处理后的对象
<p>Hello</p><pclass=selected>HelloAgain</p><a#onclick=js()>jQuery</a>
$(p)的结果是返回对象[<p>Hello</p><pclass=selected>HelloAgain</p>]
$(p)toggleClass(selected)的结果是实返回对象[<pclass=selected>Hello</p><p>HelloAgain</p>]
三CSS操作
传统javascript对css的操作相当繁琐比如<divid=a>css</div>取它的background语法是documentgetElementById(a)stylebackground而jQuery对css更方便的操作$(#a)background()$(#a)background(red)
$(#a)得到jQuery对象[<divid=a…/div>]
$(#a)background()将取出该对象的background样式
$(#a)background(red)将该对象的background样式设为redjQuery提供了以下方法来操作css
background()background(val)color()color(val)css(name)css(prop)
css(keyvalue)float()float(val)height()height(val)width()width(val)
left()left(val)overflow()overflow(val)position()position(val)top()top(val)
这里需要讲解一下css(name)css(prop)css(keyvalue)其他的看名字都知道什么作用了！
<divid=a>css</div><Pid=b>test</P>
css(name)获取样式名为name的样式
$(#a)css(color)将得到样式中color值red(#a)css(background)将得到blue
css(prop)prop是一个hash对象用于设置大量的css样式
$(#b)css({color:redbackground:blue});
最终效果是<pid=b>test</p>{color:redbackground:blue}hash对象color为keyred为value
css(keyvalue)用于设置一个单独得css样式
$(#b)css(colorred);最终效果是<pid=b>test</p>
四JavaScript处理
$browser()判断浏览器类型返回boolen值
$(function(){
if($browsermsie){
alert(这是一个IE浏览器);}
elseif($browseropera){
alert(这是一个opera浏览器);}
})
当页面载入式判断浏览器类型可判断的类型有msiemozillaoperasafari
$each(objfn)obj为对象或数组fn为在obj上依次执行的函数注意区分$()each()
$each([]function(i){alert(Item#+i+:+this);});
分别将为参数传入到function(i)中
$each({name:Johnlang:JS}function(i){alert(Name:+i+Value:+this);
{name:Johnlang:JS}为一个hash对象依次将hash中每组对象传入到函数中
$extend(objprop)用第二个对象扩展第一个对象
varsettings={validate:falselimit:name:foo};
varoptions={validate:truename:bar};
$extend(settingsoptions);
执行后settings对象为{validate:truelimit:name:bar}
可以用下面函数来测试
$(function(){
varsettings={validate:falselimit:name:foo};
varoptions={validate:truename:bar};
$extend(settingsoptions);
$each(settingsfunction(i){alert(i+=+this);});
})
$grep(arrayfn)通过函数fn来过滤array将array中的元素依次传给fnfn必须返回一个boolen如fn返回true将被过滤
$(function(){
vararr=$grep([]function(i){returni>;});
$each(arrfunction(i){alert(i);});
})
我们可以看待执行$grep后数组[]变成[]
rge(firstsecond)两个参数都是数组排出第二个数组中与第一个相同的再将两个数组合并
$(function(){
vararr=rge([][])
$each(arrfunction(i){alert(i);});
})
可以看出arr的结果为[]
$trim(str)移出字符串两端的空格
$trim(hellohowareyou?)的结果是hellohowareyou?
五动态效果
在将这部分之前我们先看个例子相信做网页的朋友都遇到n级菜单的情景但点击某菜单按钮时如果它的子菜单是显示的则隐藏子菜单如果子菜单隐藏则显示出来传统的javascript做法是先用getElementById取出子菜单所在容器的id在判断该容器的styledisplay是否等于none如果等于则设为block如果不等于这设为none如果在将效果设置复杂一点当点击按钮时不是忽然隐藏和显示子菜单而是高度平滑的转变这时就要通过setTimeout来设置子菜单的height了再复杂一点透明度也平滑的消失和显现这时显现下来需要编写很多代码如果js基础不好的朋友可能只能从别人写好的代码拿过来修改了！jQuery实现上面效果只需要句话就行$(#a)toggle(slow)学完jQuery后还需要抄袭修改别人的代码吗？下面我们逐个介绍jQuery用于效果处理的方法
hide()隐藏匹配对象
<pid=a>HelloAgain</p><a#onClick=(#a)hide()>jQuery</a>
当点击连接时id为a的对象的display变为none
show()显示匹配对象
hide(speed)以一定的速度隐藏匹配对象其大小（长宽）和透明度都逐渐变化到speed有级(slownormalfast)也可以是自定义的速度
show(speed)以一定的速度显示匹配对象其大小（长宽）和透明度都由逐渐变化到正常
hide(speedcallback)show(speedcallback)当显示和隐藏变化结束后执行函数callback
toggle()toggle(speed)如果当前匹配对象隐藏则显示他们如果当前是显示的就隐藏toggle(speed)其大小（长宽）和透明度都随之逐渐变化
<imgsrc=jpg/>
<a#onClick=$(img)toggle(slow)>jQuery</a>
fadeIn(speeds)fadeOut(speeds)根据速度调整透明度来显示或隐藏匹配对象注意有别于hide(speed)和show(speed)fadeIn和fadeOut都只调整透明度不调整大小
<imgsrc=jpg/><a#onClick=$(img)fadeIn(slow)>jQuery</a>
点击连接后可以看到图片逐渐显示
fadeIn(speedcallback)fadeOut(speedcallback)callback为函数先通过调整透明度来显示或隐藏匹配对象当调整结束后执行callback函数
<imgsrc=jpg/>
<a#onClick=$(img)fadeIn(slowfunction(){alert(AnimationDone);})>jQuery</a>
点击连接后可以看到图片逐渐显示显示完全后弹出对话框
fadeTo(speedopacitycallback)将匹配对象以speed速度调整倒透明度opacity然后执行函数callbackOpacity为最终显示的透明度()
<imgsrc=jpg/><br>
<a#onClick=$(img)fadeTo(slowfunction(){alert(AnimationDone);})>jQuery</a>
大家可以看一下自己看看效果如果不用jQuery编写原始javascript脚本可能很多代码！
slideDown(speeds)将匹配对象的高度由以指定速率平滑的变化到正常！
<imgsrc=jpg/>
<a#onClick=$(img)slideDown(slow)>jQuery</a>
slideDown(speedscallback)将匹配对象的高度由变化到正常！变化结束后执行函数callback
slideUp(slow)slideUp(speedcallback)匹配对象的高度由正常变化到
slideToggle(slow)如果匹配对象的高度正常则逐渐变化到若为则逐渐变化到正常
六事件处理
hover(FunctionFunction)当鼠标moveover时触发第一个function当鼠标moveout时触发第二个function
样式<style>red{color:#FF}</style>
Html代码<divid=a>sdf</div>
jQuery代码及效果
$(function(){
$(#a)hover(function(){$(this)addClass(red);}
function(){$(this)removeClass(red);
});
})
最终效果是当鼠标移到id为a的层上时图层增加一个red样式离开层时移出red样式
toggle(FunctionFunction)当匹配元素第一次被点击时触发第一个函数当第二次被点击时触发第二个函数
样式<style>red{color:#FF}</style>
Html代码<divid=a>sdf</div>
jQuery代码及效果
$(function(){
$(#a)toggle(function(){$(this)addClass(red);}
function(){$(this)removeClass(red);
});
})
最终效果是当鼠标点击id为a的层上时图层增加一个red样式离开层时移出red样式
bind(typefn)用户将一个事件和触发事件的方式绑定到匹配对象上
trigger(type)用户触发type形式的事件$(p)trigger(click)
还有unbind()unbind(type)unbind(typefn)
Dynamicevent(Function)绑定和取消绑定提供函数的简捷方式
例
$(#a)bind(clickfunction(){
$(this)addClass(red);
})
也可以这样写
$(#a)click(function(){
$(this)addClass(red);
});
最终效果是当鼠标点击id为a的层上时图层增加一个red样式
jQuery提供的函数
用于browers事件
error(fn)load(fn)unload(fn)resize(fn)scroll(fn)
用于form事件
change(fn)select(fn)submit(fn)
用于keyboard事件
keydown(fn)keypress(fn)keyup(fn)
用于mouse事件
click(fn)dblclick(fn)mousedown(fn)mousemove(fn)
mouseout(fn)mouseover(fn)mouseup(fn)
用于UI事件
blur(fn)focus(fn)
以上事件的扩展再扩展为类
举例click(fn)扩展click()unclick()oneclick(fn)unclick(fn)
click(fn)增加一个点击时触发某函数的事件
click()可以在其他事件中执行匹配对象的click事件
unclick()不执行匹配对象的click事件
oneclick(fn)只增加可以执行一次的click事件
unclick(fn)增加一个点击时不触发某函数的事件
上面列举的用于browersformkeyboardmouseUI的事件都可以按以上方法扩展
七Ajax支持
通用方式
$ajax(prop)通过一个ajax请求回去远程数据prop是一个hash表它可以传递的key/value有以下几种
(String)type数据传递方式(get或post)
((String)url数据请求页面的url
((String)data传递数据的参数字符串只适合post方式
((String)dataType期待数据返回的数据格式(例如xmlhtmlscript或json)
((Boolean)ifModified当最后一次请求的相应有变化是才成功返回默认值是false
((Number)timeout:设置时间延迟请求的时间可以参考$ajaxTimeout
((Boolean)global是否为当前请求触发ajax全局事件默认为true
((Function)error当请求失败时触发的函数
((Function)success当请求成功时触发函数
((Function)complete当请求完成后出发函数
jQuery代码及说明
$ajax({url:
success:function(msg){
$(div#al(msg);
}
});
将返回的内容作为id为a的div内容
$ajax({url:ajaxaspx
type:get
dataType:html
data:name=John&location=Boston
success:function(msg){
$(#al(msg);
}
});
用get方式向ajaxaspx页面传参数并将返回内容负给id为a的对象
$ajaxTimeout(time)设置请求结束时间
$ajaxTimeout()
其它简化方式
$get(urlparamscallback)用get方式向远程页面传递参数请求完成后处理函数除了url外其它参数任意选择！
$get(function(data){$(#al(data)})
$get(ajaxasp
{name:youngage:}
function(data){alert(DataLoaded:+data);}
)
$getIfModified(urlparamscallback)用get方式向远程页面传递参数从最后一次请求后如果数据有变化才作出响应执行函数callback
$getJSON(urlparamscallback)用get方式向远程json对象传递参数请求完成后处理函数callback
$getScript(urlcallback)用get方式载入并运行一个远程javascript文件请求完成后处理函数callback
$post(urlparamscallback)用post方式向远程页面传递参数请求完成后处理函数callback
load(urlparamscallback)载入一个远程文件并载入页面DOM中并执行函数callback
$(#a)load(function(){alert(loadisdone);});
仰天一笑徐羽向页面发出请求将返回结果装入id为a的内容中然后再执行函数callback
loadIfModified(urlparamscallback)用get方式向远程页面传递参数从最后一次请求后如果数据有变化才作出响应将返回结果载入页面DOM中并执行函数callback
ajaxStart(callback)当ajax请求发生错误是时执行函数callback
ajaxComplete(callback)当ajax请求完成时执行函数callback
ajaxError(callback)当ajax请求发生错误时执行函数callback
ajaxStop(callback)当ajax请求停止时执行函数callback
ajaxSuccess(callback)当ajax请求成功时执行函数callback
八jQuery插件
随着jQuery的广泛使用已经出现了大量jQuery插件如thickboxiFXjQuerygoogleMap等简单的引用这些源文件就可以方便的使用这些插件这里我简单的介绍一些网址供大家参考这些网站头提供了大量的demo并且使用及其简单及时E文不好也能快速掌握！
至此jQuery已经介绍完毕并合并整理提供给大家下载更多详细的使用请大家参考官方网站下面我再推荐一些jQuery的学习网站方便大家更好的掌握这项工具！
