帮助|留言交流|
首 页 阅览室 馆友 我的图书馆
来自：2013youth > 馆藏分类
配色： 字号：大中小
JQuery教程
2013-08-16 | 阅：  转：  |  分享 
  




























使用表格的斑马线

$("#large").tableSorter({

stripingRowClass:[''odd'',''even''],//Classnamesforstriping

supplyedasaarray.

stripRowsOnStartUp:true//StriprowsontableSorterinit.

});





附录：

jQuery(expression,[context])

ThisfunctionacceptsastringcontainingaCSSselectorwhichisthenusedtomatchasetof

elements.

ThecorefunctionalityofjQuerycentersaroundthisfunction.EverythinginjQueryisbasedupon

this,orusesthisinsomeway.Themostbasicuseofthisfunctionistopassinanexpression

(usuallyconsistingofCSS),whichthenfindsallmatchingelements.

Bydefault,ifnocontextisspecified,$()looksforDOMelementswithin

thecontextofthecurrentHTMLdocument.Ifyoudospecifyacontext,

suchasaDOMelementorjQueryobject,theexpressionwillbematched

againstthecontentsofthatcontext.

这个函数接受一个包含CSS选择器的字符串，然后使用它来匹配一个元素的集

合。

jQuery的核心函数围绕这个函数，任何jQuery中的函数都基于此，或

者通过一些其他的途径使用它。最基本的使用就是传递一个CSS的选

择器，来查找匹配的元素。

默认情况下，函数如果没有指定内容，$()在当前的html文档内容中查

找元素，如果指定了内容，例如一个DOM元素或者jQuery对象，就

在其中查找。

jQuery(html)

CreateDOMelementson-the-flyfromtheprovidedStringofrawHTML.

YoucanpassinplainHTMLStringswrittenbyhand,createthemusingsometemplateengineor

plugin,orloadthemviaAJAX.Therearelimitationswhencreatinginputelements,seethesecond

example.Alsowhenpassingstringsthatmayincludeslashes(suchasanimagepath),escapethe

slashes.WhencreatingsingleelementsusetheclosingtagorXHTMLformat.Forexample,to

createaspanuse$("")or$("")insteadofwithouttheclosingslash/tag.

Donotcreate-Elementswithoutatype-attribute,duetoMicrosoftsread/write-once-rule

forthetype-attributeof-elements,seethisofficialstatementfordetails.

使用提供的原始HTML内容创建DOM元素，你可以传递纯文本的

HTML字符串，或者通过AJAX加载的内容，在创建input元素的时

候有一个限制，不要创建没有type属性的input元素，由于

Microsoft读写一次的规则。对于input元素的type属性，参看

officialstatement



jQuery



一、环境设置



下载jQuery

地址：http://jquery.com/

中文地址：http://wiki.jquery.org.cn/doku.php



下载下来的文件为：jquery-1.2.5.js，这是一个js脚本文件



在需要使用JQuery的网页中增加
type="text/javascript"/>



现在就可以在页面中使用JQuery了！



二、使用document对象



在网页载入后，我们往往需要执行一组代码，来设置对象事件的处

理，在jQuery中，这需要取得document对象，然后设置document

对象的ready事件处理程序就可以了。

取得document对象的方法非常简单，$(document)，如下就可

以得到document对象的ready事件$(document).ready。

让我们完成一个Hello,world。这个页面在文档载入之后会弹出一个对

话框，并显示Hello,world。





Hello





$(document).ready(function(){

alert("Helo,world.");});











三、使用选择器取得页面中的元素

Jquery使用两种方式来选择html的element，第一种使用CSS

和Xpath选择器联合起来形成的一个字符串，将其传送到jQuery的构造

器$()（如：$("div>ula")）；第二种是用jQuery对象的几个methods(方

法)。这两种方式还可以联合起来混合使用。

使用CSS和XPath选择器选择的方法：

通过元素的ID来取得元素：$(“#id”)

比如我们有一个list，它的ID是orderedlist，那么取得这个list

的引用的JQuery就是$(“#orderedlist”)，将它设置为红色的

$("#orderedlist").addClass("red");

取得list中的最后一个li的引用，$(“orderedlistli:last”)。

更强大的find函数，通过find可以在已经取得元素集合中进行

条件查找，例如：$("#orderedlist").find(“li”)，查找在orderedlist中

的li元素，相当于$(“#orderedlistli”)。

遍历返回的元素集合each()

处理函数可以传递一个表示顺序号的参数，顺序号从0开始。

在函数中通过this取得当前被处理的元素对象，例如，下面的函

数，将找到id为orderedlist的元素中的li元素，并将其内容依次增

加BAM!和顺序号码。

$(document).ready(function(){

$("#orderedlist").find("li").each(function(i){

$(this).html($(this).html()+"BAM!"+i);

});

});

其中没有参数的html()方法是获取对象的html代码，而有参数的方

法html(内容)则是设置元素的html。

下面的例子通过一个超级链接来实现表单的重置

超级链接的内容为

Reset!

取得这个超级链接的方法为$(“#reset”)，点击这个超级链接的

事件为click，即$(“#reset”).click，写出其处理函数为

$(“#reset”).click(function()

{

})

取得表单id为myform的表单表示为$(“#myform”)[0]，调用

其reset方法就是$("#form")[0].reset();

因此合起来的代码为：

//usethistoresetasingleform

$("#reset").click(function(){

$("#form")[0].reset();

});

如果要将所有的表单重置，那就通过元素的标记名取得元素，结合

each函数，就是如下的代码了。

$("#reset").click(function(){

$("form").each(function(){

this.reset();

});

});

过滤不需要的元素

JQuery还提供了filter()和not()方法。

filter()方法使用过滤表达式来减少不符合的被选择项，考虑一个

无序的list，我们需要选择所有的没有ul子元素的li元素。

$(“li”).not(“[ul]”)

not方法用来取消所有符合过滤表达式的被选择项。这个语法来自

于xpath表达式，可以用于在子元素和属性上实现过滤器，例如，取

得所有有name属性的超级链接$(“a[@name]”)。

还可以通过=实现部分匹配，例如取得超级链接的开始部分为

“/content/gallery”的超级链接，就是$(“a[href=/content/gallery]”)

取得上一个或者下一个元素

next()函数返回下一个元素，hide()隐藏元素。end()结束当前的子

处理，重新开始一个新处理。

找到id为raq的元素为$(“#raq”)，其中的标记为dd的元素为

$(“#raq”).find(“dd”)，将其隐藏起来为$(“#raq”).find(“dd”).hide()，

结束对dd元素的操作准备重新开始另外一组操作使用end()，再查找

raq中元素标记名为dt的元素为

$(“#raq”).find(“dd”).hide().find(“dt”)，设置其点击事件处理为：

$(“#raq”).find(“dd”).hide().find(“dt”).click(function(){});

取得当前元素的下一个元素为$(this).next()，下面为完整的例子。

$(document).ready(function(){

$(''#faq'').find(''dd'').hide().end().find(''dt'').click(function(){

varanswer=$(this).next();

if(answer.is('':visible'')){

answer.slideUp();

}else{

answer.slideDown();

}

});

});

取得父级元素为parents()

例如取得元素名为p的父级元素为parents(“p”)

简写$(document).ready(function(){})，可以简写为

$(function(){})



选择器返回什么？

使用jQuery的选择器，返回的结果为一个集合，哪怕你使用的是

#ID，所以，如果要取得结果中的第一个对象，需要再次使用下标来取

得对应的对象，例如，取得id为myForm的表单对象，需要使用入

校的代码：$("#myForm")[0]。注意，addClass和html函数为什么没

有使用下标进行处理呢？他们使用了jQuery的函数！addClass和

html都是jQuery的函数。还有下面的click。



四、元素的事件

元素的onXxxxx事件同样有效，但是JQuery不喜欢on,所以

在JQuery中直接使用事件的名字。例如DHTML中的onclick事件，

在JQuery中就是click。

Id为myButton的按钮的点击事件就是$(“#myButton”).click。

下拉列表选择不同选项的事件为change。

五、创建元素

在jQuery中创建元素非常简单，使用html(参数)就可以了。

例如：$(“”)将创建一个div元素

六、自定义函数

有两种类型的jQuery扩展

z实用工具函数直接使用$进行定义

z处理jQuery包装的集合，也称为jQuery命令

扩展的文件名命名规则：

z文件名使用jquery开头

z然后是插件的名字

z最后是.js

中间使用.分割，例如，如果要创建一个myplugin的扩展，那么

文件名应该为jquery.myplugin.js.



处理jQuery集合的命令

语法：$.fn.命令的名字=function(参数){}

在函数体内，this指向待处理的jQuery集合

如果你需要一个一个的处理集合内的元素，可以通过this.each函

数来完成。

比如，我们要将集合中的文本输入项设置为readonly,并且，如果

为readonly状态的话，透明度为0.5，否则透明度为1。

(function($){

$.fn.setReadOnly=function(readonly){

returnthis.filter(''input:text'')

.attr(''readonly'',readonly)

.css(''opacity'',readonly?0.5:1.0);

}

})(jQuery);

下面的命令将select中的项目清空

$.fn.emptySelect=function(){

returnthis.each(function(){

if(this.tagName==''SELECT'')this.options.length=0;

});

}

再看下面的设置select内容的命令

$.fn.loadSelect=function(optionsDataArray){

returnthis.emptySelect().each(function(){

if(this.tagName==''SELECT''){

varselectElement=this;

$.each(optionsDataArray,function(index,optionData){

varoption=newOption(optionData.caption,

optionData.value);

if($.browser.msie){

selectElement.add(option);

}

else{

selectElement.add(option,null);

}

});

}

});

}







七、使用AJAX

$.get用于发出一个GET请求，$.post用于发出一个POST请求

$.ajax根据传递的参数来决定使用何种方式发出请求。

$.get命令的用法$.get(url,parameters,callback)

$.post命令的用法同上



$.post("rate.php",{rating:$(this).html()},function(xml){

//formatresult

varresult=[

"Thanksforrating,currentaverage:",

$("average",xml).text(),

",numberofvotes:",

$("count",xml).text()

];

//outputresult

$("#rating").html(result.join(''''));

});

$.post函数用于向服务器发送post请求，第一个参数为服务器的地

址，第二个参数为发送的参数，参数使用{}包围起来，每一组参数有

一个名字，还有一个使用冒号:分割的值，多个参数使用,进行分割。

第三个为调用完成之后的回调函数，函数有一个参数，参数为服务器返

回的xml结果。

$.get(url,[data],[callback])用于向服务器发送get请求。

六、动起来

show()，show(''fast'');

hide()，hide(''slow'');

toggle





animate()



七、表格排序，使用tablesorter插件



首先文档中加入如下的
type="text/javascript">，以便引用tablesorter.js。

如果需要对id为large的表格进行排序，进行如下的设置

$("#large").tableSorter();现在点击表格的head，已经可以排序了！

注意，表格的表头部分定义为：

EmailIdPhoneTotalIpUrlTimeISODateUKDate
献花(0)
+1
(本文系2013youth首藏)