还剩16页未读，继续阅读
本资源只提供10页预览，全部文档请下载后查看！喜欢就下载吧，查找使用更方便
文本内容:
基于属性的选择器在HTML中，几乎所有元素都具有属性，例如
1.imgsrc=nn alt=nn width=n height=nn border=nOn/
2.inputtype=ntextn name=nemailn value=nn size=n80n/上面两个HMTL元素中包括了九个属性运用jQue”，我们可以根据元素的属性和属性值来对元素进行选择一起看看如下例子中的选择器
3.$document.readyfunction{
4.
5.//All theimageswhosewidthis600px
6.
7.$img[width=600].click function{
8.
9.alertYou vejustselectedanimagewhosewidthisGOOpx^;
10.
11.};
12.
13.//Allthe imageshavingawidthdi fferentto600px
14.
15.$，zimg[width!=
6001.click function{
16.
17.alert YouvejustselectedanimagewhosewidthisnoteOOpx/7;
18.
19.};
20.
21.//Allthe inputswho senameendswithJ emaiT
22.
23.$input[name$=emaiT].focus function{
24.
25.alert/zThisinputhasanamewhichendswith，email.;
26.
27.};
28.
29.}〉},function{$this.removeClassselected0;；•作用每次点击时切换要调用的函数假如点击了一种匹配的元素，则触发指定的第一种函数，当再次点击同一元素时，则触发指定的第二个函数挺有趣的一种函数,在动态实现某些功能的时候也许会用到像click,focus,keydown这样的事件这里就不提了，那些都是开发中比较常用到的•jQuery外观效果•addClass class和removeClass class•代码I$”・stripe trn.mouseoverfunction{$this.addClassover;}.mouseoutfunction{$this.removeClassover;}}；•也可以写成i---------------------------------------------------------------------------------------------------------------------------$”・stripe trn.mouseoverfunction{$this.addClassnovern};$n.stripe trn.mouseoutfunction{$this.removeClassnovern};•作用为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码•css name,value•代码$npn.css ncolorn,nredM;•作用很简朴，就是在匹配的元素中，设置一种样式属性的值这个个人感觉和上面的addClass class有点类似•si ide,hi de,fadeTn,fadeout,si idelJp,si ideDown•代码$n#btnShown.bindclick”，functionevent{$n#divMsgH.show};$n#btnHiden.bindclick”,functionevnet{$n#divMsgn.hide};•作用jQuery中提供的比较常用的几种动态效果的函数还可以添加参数show speed,[callback]以优雅的动画显示所有匹配的元素，并在显示完毕后可选地触发一种回调函数•animate params[,duration[,easingE,callback]]]•作用制作动画效果用到的函数，功能非常的强大，可以持续使用此函数•查找筛选•mapcallback•HTML代码Values:INPUT value=John name=name INPUT value=password name=password INPUT value=n A href=n name=url%22ejohn.org http:/A FORM•jQuery代码/FORM$npn,append$ninputn.mapfunction{return$this.val;”，11;}.get.join•成果\----------------------------------------------------------------------------------------------------------------------------------[John,password,A href=nn/A]•作用将一组元素转换成其他数组不管与否是元素数组你可以用这个函数来建立一种列表，不管是值、属性还是CSS样式，或者其他尤其形式这都可以用$.map来以便的建立findexpr•HTML代码〉，SPANHello/SPAN howare you代码jQuery$p.findspan”成果〉][SPANHello/SPAN作用搜索所有与指定体现式匹配的元素这个函数是找出正在处理的元素的后裔元素的好措施文档处理--------------------------------------------------------------------------------------------------------------------Iattr key,valueHTML代码IMGX IMOjQuery代码$img.attr,,srcH,test.jpgn;作用获得或设置匹配元素的属性值通过这个措施可以以便地从第一种匹配元素中获取一种属性的值假如元素没有对应属性,则返回undefined在控制HTML标识上是必备的工具html/html val•HTML代码DIVHello/DIV•JQuery代码•$div〃.html;•成果Hello作用获得或设置匹配元素的html内容，同类型的措施尚有text和val前者是获得所有匹配元素的内容，后者是获得匹配元素的目前值三者有相似的地方常用在内容的操作上wraphtml代码HTMLTest Paragraph.代码jQuery$p”.wrap DIV class=wrap/DIVH;成果DIVclass=wrapTest Paragraph.•作用把所有匹配的元素用其他元素的构造化标识包裹起来这种包装对于在文档中插入额外的构造化标识最有用，并且它不会破坏原始文档的语义品质可以灵活的修改我们的DOMo••empty•HTML代码--------------------------------------------------------------------------------------------------------------------Hello,PersonAhref=nnand person/A•jQuery代码•$〃p〃.empty;•成果•作用删除匹配的元素集合中所有的子节点•Ajax处理•loadurl,[data],[callback]•url String:待装入HTML网页网址•data Map:可选发送至服务器的key/value数据callback Callback:可选载入成功时回调函数•代码:$n#feedsn.loadnfeeds.aspx”,{limit:25},function{alert HThelast25entries inthe feedhave beenloaded11;}；作用载入远程HTML文献代码并插入至DOM中这也是Jque与操作Ajax最常用最有效的措施*serialize•HTML代码•Results:〉FORM工〉SELECT name=singleOPTION selectedSingle/OPT ONOPTIONSingle2/OPTION/SELECT SELECTmultiple name=multipleOPTION selectedMultiple/OPTION OPTIONMultiple2/OPTIONOPTIONselectedMultiple3/OPTION/SELECT INPUTvalue=checkl type=checkbox name=check checklINPUTvalue=check2type=checkbox name=check checked=ncheckedn/check2INPUTvalue=radiol type=radio name=radio checked=checked”/radiol INPUTvalue=radio2type=radio name=radio radio2/FORM•jQuery代码:$n#resultsn.append nTTn+$nformn.serialize+n/TTn;•作用序列化表格内容为字符串c用于Ajax祈求c•工具•jQuery.eachobj,calIback代码:$.each[0,1,2],functioni n{alertnItem#”+i+”+n;z};//遍历数组$.each{name:John，lang:nJSH},function in{alertName:+i+”，z;//遍历对象}；Value:”+n•作用通用例遍措施，可用于例遍对象和数组•jQuery.makeArrayobj•HTML代码First DIVSecond/DIVThird/DIV DIVFourth/DIVJQuery代码var arr=j Query.makeArraydocument.getElementsByTagNamediv”;•成果•Fourth•Third•Second•First•作用将类数组对象转换为数组对象使我们可以在数组和对象之间灵活的转换•jQuery.trimstr•作用这个大家应当很熟悉，就是去掉字符串起始和结尾的空格•小结在实际的开发中我们也许会用到其他的措施和属性，以上只是个人认为新手初学jQu^y时，必须掌握的某些措施仅供大家学习的参照有什么不对的高手指教5种措施教你用jQuery重写表单验证1・百度空间我要评论♦-05-2709:11qibaiyilang0这里给大家简介使用jQuery的load措施、$.get$.post$.ajax和表单插件Form Plugin5种措施分别重写“表单验证”的实例，并且深入阐明中文乱码的问题前面我们曾简介过使用jQuery技巧来提高代码质量,由于jQuery非常轻易上手并使用简朴重写表单验证是程序员们常常做的事情，使用jQu^y我们有五种措施可以选择，同步也可以处理乱码的问题首先，对编码知识进行简要的阐明，请务必理解后再看下面的代码发送中文字符祈求时，假如使用get方式，运行正常；而使用post措施则会出现乱码这是由于异步对象XMLHttpRequest在处理返回的responseText的时候，是按UTF-8编码进行解码的假如你本来的网页编码是gb2312的话，当然会发生编码的冲突了；假如你本来的网页编码是utf-8,那么就不会出现中文乱码的问题了出现了中文乱码该怎么办呢？一般的处理措施是用escape对发送的数据进行编码，然后在返回的responseText上再用unescape进行解码然而在JavaScript编程中一般不推荐使用escape和unescape,而推荐使用encodeURI和decodeURI请看下面的“表o单验证明例”，或许对你学习编码知识有一定的协助第
一、jQuery的load第rl,[data],[callback]措施语法阐明url为异步祈求的地址，data用来向服务器传送祈求数据，为可选参数一旦data参数启用，整个祈求过程将以post的方式进行，否则默认为get方式假如但愿在get方式下也传递数据，可以在url地址背面用类似udatanamel=dataldataName2=data2,,的措施callback为Ajax加载成功后运行的回调函数此外使用load措施返回的数据,不再需要考虑是文本还是XML,jQue灯都会自动进行处理好了，下面立虽然用load措施实现“自动表单验证”实例首先是，html框架，5个例子都是同样的，如下form
1.顾客昵
2.称〈inputtype=ntext onblur=nstartCheckthisn name=nUsern id=nUserspan id=nUserResultnX/spanXbr/输入密码〈input Xbr/
3..type=npassword name=npasswdln
4..确认密码v/tdxtdxinputtype=npassword0name=npasswd2nxbr/input注册
5..type=nsubmitn class=buttonninput
6.type=nresetn value=nSSn class=nbuttonn/£orm
7.必要阐明:
1、onblur=startCheck this〃这是JavaScript代码简称js,意思是text文本框失去焦点时触发自定义函数startCheck,this是指代text文本框的值
2、span id=UserResult〃X/span〉用来寄存异步对象返回的成果代码如下
8.jQuery
9.script snX/script
10..language=n javascript*1src=Hjquery.min.jscript
11.language=nj avascriptn
12.function startCheckolnput{//首先判断与否有输入，没有输入直接返回，并提醒
13.
14.if!olnput.value{//聚焦到顾客名的输入框
15.olnput.focus;
16.document.getElementByldUserResultn.innerHTML=User cannotbe empty.n;
17.return;
18.}//使用的$.措施过滤左右空格
19..olnput=$,trim olnput.value;j Querytrim
20.var sUrl=action.aspuser=n+olnput;//使用工编码，处理中文乱码问题㊀
21.sUrl=encodeURI sUrl;ncodeUR
22.$n#UserResultn.loadsUrl,functiondata{//使用解
23..$n#UserResultn.html decodeURIdata;decodeURI码
24.}
25.;
26./script
27.必要阐明
1、使用jQuery时,都必须加载jquery.min.js文献，可以到
2、判断与否有输入时，用的全是JavaScript语法
3、对传递给“处理页”的参数进行encodeURI编码，以处理中文乱码问题
4、load中的function函数是为了对返回成果进行decodeURI解码，以处理中文乱码问题
5、对$.trim、$〃#UserResult〃、html等jQuery语法不理解的,可以参照jQuery中文手册本站提供下载处理页代码如下
28..action.asp
29.
30.%
31.ifRequestnusern=nekon then
32.Response.Write Sorry,Requestnusernn already exists.n
33.else
34.Response.Write Requestuser””is ok.”
35.end if
36.%必要阐明1action,asp处理页的编码是GB2312,假如把“Sorry..alreadyexists..is ik〃等英文改为中文，请看下面的阐明
2、使用post措施会出现乱码，这是由于异步对象XMLHttpRequest在处理返回的responseText的时候，是按UTF-8编码进行解码的
3、因此post方式的话，必须把action.asp页另存为时，第三项的编码由ANST改为UTF-8请务必记住！！基于属性的选择器在HTML中，儿乎所有元素都具有属性，例如
1.imgsrc=nn alt=nn width=n height=nn border=nOn/
2.inputtype=ntextn name=nemailn value=nn size=”80”/上面两个HMTL元素中包括了九个属性运用jQuery,我们可以根据元素的属性和属性值来对元素进行选择一起看看如下例子中的选择器
3.$document.readyfunction{
4.
5.//Alltheimageswhosewidthis600px
6.$/zimg[width=600]/z,click function{
1.
8.
9.alert YouvejustselectedanimagewhosewidthisGOOpx7;
10.
11.};
12.
13.//Allthe imageshavingawidthdi fferentto600px
14.
15.$/zimg[width!=600]^.click function{
16.
17.alertYou vejustselectedanimagewhosewidthisnotGOOpx^;
18.
19.};
20.
21.//AlltheinputswhosenameendswitemaiT
22.
23.$input[name$=emaiT],focus function{
24.
25.alert/zThisinputhasanamewhichendswith，emaiT.;
26.
27.};
28.
29.};..Widget组件选择器除了插件的选择器之前，尚有某些基于元素某些属性或位置的选择器下面让我们看看这些更为重要的选择器
1.$document.readyfunction{
2.
3.//Allthehiddenimagesareshown
4.
5.$img:hidden・show;
6.
7.//Thefirstpi sgoingtobeorange
8.
9.$p:first,csscolor,orange;.
10.
11.//Inputwithtypepassword
12.
13.〃thisis$input[type=password].
14.
15.$input:password focusfunction{
16.
17.alert Thisisapassword!;
18.
19.}；..
20.
21.//Divswithparagraph
22.
23.$div:hasp”・csscolor,green;
24.
25.//Wecanalsocombinethem.with
26.
27.//AlInotdisabledcheckboxes
28.
29.$input:checkbox:not:disabled.hoverfunction{
30.
31.alertThischeckboxisworking.;
32.
33.};
34.
35.};对树进行选择和转换选择就想树同样，网站构造中叶存在子与父在jQueu中，我们可以运用这一构造假设我们拥有相似的html,不过目前我们想要选择名为“main”的div中的p元素，不过不想对任何有关p元素的东西导致变化我们有三种也许的方案，如下:1・$n#wrappern.children#main*.children1p
1.css“color,“orange;
2.・$n#wrappern.children.children1p*.csscolor,“orange”;
3..$n#mainn.children.css ncolor,,norangen;z运用chil山.n措施可以选择树中位于其他元素下的某个元素假如我们传递给它一种选择器，该措施将仅选择我们需要的元素，假如不是这样，父元素的所有子元素都将被选中让我们看看第一种和第二个选择器直接的区别唯一的不一样之处在于第二个选择器中我们什么也没有指定，所有每一种子元素都会被选中此处的关键在于在上图中wrapper这个div元素下除main之外并没有其他子元素，因此我们得到的成果是同样的添加元素目前我们在树中添加元素这个元素可以是段落、div元素、表格等等，假设我们想要添加一种列表，如下ul
4..
5.liDog/li
6.
7.liCat/li
8.
9.liFrog/li
10.
11./ul
12.只是某些字符串，因此我们可以在JavaScript代码中这样写
13.var list=nul\nn
14.+nliDog/li\nn
15.
16.+nliCat/li\nn
17.
18.+nliFrog/li\nn
19.
20.n/uln;
21.目前我们要在html中某个地方添加字符串例如，在之前我们选择的p元素之后最终我们可以输入完整的代码，如下所示:
22..$document.readyfunction{
23.
24.var list=nul\nn
25.+nliDog/li\nn
26.
27.+nliCat/li\nn
28.
29.+nliFrog/li\n,
130..
31.n/uln;
32.
33.
34.$n#wrappern.children#main
1.appendlist;
35.
36.};字面上我们将字符串附加到HTML中的/p,成果是这个列表显示在p元素之后移除元素移除元素并不难，当我们谈到对树进行转换时，在这一过程一定会波及元素的移除下面我们来移除之前选择的那个段落注意我们可以再次使用选择器
1.$n#wrappern.children#main*.childrenp.remove;
2.在这一代码中，位于选中元素之中的所有元素都将被移除，因此必须十分小心假如div下有一种列表，当我们移除该div时，div和列表都会被移除表面之下jQue叮类似只露出一角的冰山，在水面之下尚有更多内容这一小结中，我们将向你展示某些表面之下的内容绑定Bind绑定是一种措施，运用它，我们可以将一种事件鼠标点击、悬置等等与一种措施连接起来这有点类似当顾客单击此处时，调用该措施听起来很熟悉，对吗？没错，我们常常这样做看看如下示例・
3.$document,readyfunction{
4.
5..$n#idn.clickfunction{
6.
7.alertnThatclickwasamazing!;
8.；
9.}
10.；
11.}上文中click措施在如下代码相对于wrapper
12..$document.readyfunction{
13.
14.$,#id,.bind1click\function{
15.
16.alert nThatclickwasamazing!n;
17.
18.};
19.
20.};此外，使用unbind措施可以解除事件与元素的连接定义你自己的jQuery措施目前我们看到了某些措施，如click、bind、hover等等，不过我们怎样定义自己的措施？怎样使用$selector，.mymethod这样的语句调用这些措施？如下代码提供了这些问题的处理方案定义一种措施，显示一种元素的值
1.•//ThenamewillbealertVal
2.jQuery.fn.alertVal=function{
3.
4..var element=$this
[0];//That1sourelement
5.
6..if element.val
7.
8.alertelement.val;//That1sourelement1svalue
9.
10.};
11.//Thisisthewaywecanuseit
12.$nselectorn.alertVal;回调callback是常用的处理方案使用回调，我们可以在其他措施完毕时执行某个措施你可以将回调措施看做对他人说但你做完时，给我电话，由于我要做我的那份工作不过目前的问题是怎样使用回调？
13.$document.readyfunction{
14.
15.myCallBack=function{
16.工,
17.alert macallbackalert.n;
18.
19.}
20.
21.//WhenthegetfinishesthenmyCallBackisexecuted
22.
23..$.geL!niyhLmlpage.liLml1,myCallBack;
24.
25.};注意假如该函数包括参数，我们必须使用如下方式
26.$document.readyfunction{
27.
28.$.get1myhtmlpage.html,function{
29.
30.myCallBackparaml,param2;
31.
32.};
33.
34.};•jQuery中为我们提供了诸多有用的措施和属性，文章总结了某些常用的函数和措施个人认为在开发中会比较常用的，在实际的开发中我们也许会用到其他的措施和属性，文中只是个人认为新手初学jQu^y时，必须掌握的某些措施•51CTO推荐专题入门到精通jQuery开发手册•jQuery事件处理•ready fn•代码---------------------------------------------------------------------------------------$document.readyfunction{//Your codehere...}；•作用它可以极大地提高web应用程序的响应速度通过使用这个措施，可以在DOM载入就绪可以读取并操纵时立即调用你所绑定的函数，而
99.99%的JavaScript函数都需要在那一刻执行•bindtype,[data],fn•代码$npn.bindclick”，function{alert$this.text;}；•作用为每一种匹配元素的特定事件像click绑定一种事件处理器函数起到事件监听的作用•togglefn,fn•代码$tdn.toggle function{$this.addClass selected11;。
个人认证
优秀文档
获得点赞 0
