jquery 表格控件怎么使用

1、使用簡(jiǎn)單、擴(kuò)展方便。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供杭州網(wǎng)站建設(shè)、杭州做網(wǎng)站、杭州網(wǎng)站設(shè)計(jì)、杭州網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、杭州企業(yè)網(wǎng)站模板建站服務(wù)，10年杭州做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

2、表格樣式可自定義，只需修改相應(yīng)的CSS樣式即可。

3、支持行點(diǎn)擊事件自定義。

4、支持復(fù)選框選擇行。

5、執(zhí)行列排序（支持?jǐn)?shù)字、日期時(shí)間、英文、漢字等）。

6、支持自定義行按鈕及按鈕事件（如編輯、刪除按鈕等）

7、支持自定義數(shù)據(jù)的顯示樣式（根據(jù)當(dāng)前數(shù)據(jù)或當(dāng)前行數(shù)據(jù)）

8、支持分頁(yè)顯示數(shù)據(jù)，且在插件內(nèi)部實(shí)現(xiàn)分頁(yè)處理。

二、使用說(shuō)明

該插件的使用，基本只需兩個(gè)步驟即可，一個(gè)是表格的聲明（創(chuàng)建），然后就是數(shù)據(jù)的加載。

1、表格的聲明（創(chuàng)建）

var objTable = new HyTable({

columns: [

{name: '姓名', mapping: 'username', type: 'string', width: '100', allowSort: true, renderer: function(val){return val;}}

], //(array)列信息

emptyMsg: "暫無(wú)數(shù)據(jù)", //(string)無(wú)數(shù)據(jù)時(shí)的提示信息

renderTo: "", //(string)表格容器，必須是HTML元素的ID屬性值

model: 'remote', //(string)模式，遠(yuǎn)程(remote)or本地(local)

url: '', //(string)遠(yuǎn)程模式的獲取數(shù)據(jù)的url地址

allowPaging: true, (bool)//是否分頁(yè)

pageSize: 20, //(int)每頁(yè)顯示的行數(shù)

checkSelected: false, //(bool)復(fù)選框選擇

selectedField: "", //(string)復(fù)選框選中字段

stripeRows: false, //(bool)是否啟用隔行變色 默認(rèn)不啟用

onRowClick: null //(function)行點(diǎn)擊事件

});

2、表格數(shù)據(jù)的加載

objTable.loadData(1,data);//第一個(gè)參數(shù)為加載頁(yè)的頁(yè)索引，第二個(gè)參數(shù)有兩種情況，1：如果參數(shù)內(nèi)容是JSON對(duì)象，則表示是查詢的查詢條件，如果是數(shù)據(jù)，則表示直接加載本地?cái)?shù)據(jù)到表格中。

jquery日期選擇控件怎么寫(xiě)

;!function(a){var b={path:"",defSkin:"",format:"YYYY-MM-DD",min:"1900-01-01 00:00:00",max:"2099-12-31 23:59:59",isv:!1},c={},d=document,e="createElement",f="getElementById",g="getElementsByTagName",h=["laydate_box","laydate_void","laydate_click","LayDateSkin","","abc.css"];a.laydate=function(b){b=b||{};try{a.event=a.event||laydate.caller.arguments[0]}catch(d){}return a.event(b.tagName=1),c.run(b),laydate},laydate.v="1.1",c.getPath=function(){var a=document.scripts,c=a[a.length-1].src;return b.path?b.path:c.substring(0,c.lastIndexOf("/")+1)}(),c.use=function(a,b){var f=d[e]("link");f.type="text/css",f.rel="stylesheet",f.href=c.getPath+a+h[5],b(f.id=b),d[g]("head")[0].appendChild(f),f=null},c.trim=function(a){return a=a||"",a.replace(/^\s|\s$/g,"").replace(/\s+/g," ")},c.digit=function(a){return 10a?"0"+(0|a):a},c.stopmp=function(b){return b=b||a.event,b.stopPropagation?b.stopPropagation():b.cancelBubble=!0,this},c.each=function(a,b){for(var c=0,d=a.length;dcb(c,a[c])!==!1;c++);},c.hasClass=function(a,b){return a=a||{},new RegExp("\\b"+b+"\\b").test(a.className)},c.addClass=function(a,b){return a=a||{},c.hasClass(a,b)||(a.className+=" "+b),a.className=c.trim(a.className),this},c.removeClass=function(a,b){if(a=a||{},c.hasClass(a,b)){var d=new RegExp("\\b"+b+"\\b");a.className=a.className.replace(d,"")}return this},c.removeCssAttr=function(a,b){var c=a.style;c.removeProperty?c.removeProperty(b):c.removeAttribute(b)},c.shde=function(a,b){a.style.display=b?"none":"block"},c.query=function(a){var e,b,h,i,j;return a=c.trim(a).split(" "),b=d[f](a[0].substr(1)),b?a[1]?/^\./.test(a[1])?(i=a[1].substr(1),j=new RegExp("\\b"+i+"\\b"),e=[],h=d.getElementsByClassName?b.getElementsByClassName(i):b[g]("*"),c.each(h,function(a,b){j.test(b.className)e.push(b)}),e[0]?e:""):(e=b[g](a[1]),e[0]?b[g](a[1]):""):b:void 0},c.on=function(b,d,e){return b.attachEvent?b.attachEvent("on"+d,function(){e.call(b,a.even)}):b.addEventListener(d,e,!1),c},c.stopMosup=function(a,b){"mouseup"!==ac.on(b,"mouseup",function(a){c.stopmp(a)})},c.run=function(a){var d,e,b=c.query;if(a.tagName){if(d=a.elem?b(a.elem):event.target||event.srcElement,!d||d===c.elem)return;c.view(d,a),c.stopMosup(event.type,d),c.reshow()}else{if(d=b(a.elem),!d)return;e=a.event||"click",c.each((0|d.length)0?d:[d],function(b,d){c.on(d,e,function(b){c.stopmp(b),d!==c.elem(c.view(d,a),c.reshow())}),c.stopMosup(e,d)})}},c.scroll=function(a){return a=a?"scrollLeft":"scrollTop",d.body[a]|d.documentElement[a]},c.winarea=function(a){return document.documentElement[a?"clientWidth":"clientHeight"]},c.isleap=function(a){return 0===a%40!==a%100||0===a%400},c.checkVoid=function(a,b,d){var e=[];return a=0|a,b=0|b,d=0|d,ac.mins[0]?e=["y"]:ac.maxs[0]?e=["y",1]:a=c.mins[0]a=c.maxs[0](a==c.mins[0](bc.mins[1]?e=["m"]:b==c.mins[1]dc.mins[2](e=["d"])),a==c.maxs[0](bc.maxs[1]?e=["m",1]:b==c.maxs[1]dc.maxs[2](e=["d",1]))),e},c.timeVoid=function(a,b){if(c.ymd[1]+1==c.mins[1]c.ymd[2]==c.mins[2]){if(0===bac.mins[3])return 1;if(1===bac.mins[4])return 1;if(2===bac.mins[5])return 1}else if(c.ymd[1]+1==c.maxs[1]c.ymd[2]==c.maxs[2]){if(0===bac.maxs[3])return 1;if(1===bac.maxs[4])return 1;if(2===bac.maxs[5])return 1}return a(b?59:23)?1:void 0},c.check=function(){var a=c.options.format.replace(/YYYY|MM|DD|hh|mm|ss/g,"\\d+\\").replace(/\\$/g,""),b=new RegExp(a),d=c.elem[h.elemv],e=d.match(/\d+/g)||[],f=c.checkVoid(e[0],e[1],e[2]);if(""!==d.replace(/\s/g,"")){if(!b.test(d))return c.elem[h.elemv]="",c.msg("日期不符合格式，請(qǐng)重新選擇。"),1;if(f[0])return c.elem[h.elemv]="",c.msg("日期不在有效期內(nèi)，請(qǐng)重新選擇。"),1;f.value=c.elem[h.elemv].match(b).join(),e=f.value.match(/\d+/g),e[1]1?(e[1]=1,f.auto=1):e[1]12?(e[1]=12,f.auto=1):e[1].length2(f.auto=1),e[2]1?(e[2]=1,f.auto=1):e[2]c.months[(0|e[1])-1]?(e[2]=31,f.auto=1):e[2].length2(f.auto=1),e.length3(c.timeVoid(e[3],0)(f.auto=1),c.timeVoid(e[4],1)(f.auto=1),c.timeVoid(e[5],2)(f.auto=1)),f.auto?c.creation([e[0],0|e[1],0|e[2]],1):f.value!==c.elem[h.elemv](c.elem[h.elemv]=f.value)}},c.months=[31,null,31,30,31,30,31,31,30,31,30,31],c.viewDate=function(a,b,d){var f=(c.query,{}),g=new Date;a(0|c.mins[0])(a=0|c.mins[0]),a(0|c.maxs[0])(a=0|c.maxs[0]),g.setFullYear(a,b,d),f.ymd=[g.getFullYear(),g.getMonth(),g.getDate()],c.months[1]=c.isleap(f.ymd[0])?29:28,g.setFullYear(f.ymd[0],f.ymd[1],1),f.FDay=g.getDay(),f.PDay=c.months[0===b?11:b-1]-f.FDay+1,f.NDay=1,c.each(h.tds,function(a,b){var g,d=f.ymd[0],e=f.ymd[1]+1;b.className="",af.FDay?(b.innerHTML=g=a+f.PDay,c.addClass(b,"laydate_nothis"),1===e(d-=1),e=1===e?12:e-1):a=f.FDayaf.FDay+c.months[f.ymd[1]]?(b.innerHTML=g=a-f.FDay+1,a-f.FDay+1===f.ymd[2](c.addClass(b,h[2]),f.thisDay=b)):(b.innerHTML=g=f.NDay++,c.addClass(b,"laydate_nothis"),12===e(d+=1),e=12===e?1:e+1),c.checkVoid(d,e,g)[0]c.addClass(b,h[1]),c.options.festivalc.festival(b,e+"."+g),b.setAttribute("y",d),b.setAttribute("m",e),b.setAttribute("d",g),d=e=g=null}),c.valid=!c.hasClass(f.thisDay,h[1]),c.ymd=f.ymd,h.year.value=c.ymd[0]+"年",h.month.value=c.digit(c.ymd[1]+1)+"月",c.each(h.mms,function(a,b){var d=c.checkVoid(c.ymd[0],(0|b.getAttribute("m"))+1);"y"===d[0]||"m"===d[0]?c.addClass(b,h[1]):c.removeClass(b,h[1]),c.removeClass(b,h[2]),d=null}),c.addClass(h.mms[c.ymd[1]],h[2]),f.times=[0|c.inymd[3]||0,0|c.inymd[4]||0,0|c.inymd[5]||0],c.each(new Array(3),function(a){c.hmsin[a].value=c.digit(c.timeVoid(f.times[a],a)?0|c.mins[a+3]:0|f.times[a])}),c[c.valid?"removeClass":"addClass"](h.ok,h[1])},c.festival=function(a,b){var c;switch(b){case"1.1":c="元旦";break;case"3.8":c="婦女";break;case"4.5":c="清明";break;case"5.1":c="勞動(dòng)";break;case"6.1":c="兒童";break;case"9.10":c="教師";break;case"10.1":c="國(guó)慶"}c(a.innerHTML=c),c=null},c.viewYears=function(a){var b=c.query,d="";c.each(new Array(14),function(b){d+=7===b?"li "+(parseInt(h.year.value)===a?'class="'+h[2]+'"':"")+' y="'+a+'"'+a+"年/li":'li y="'+(a-7+b)+'"'+(a-7+b)+"年/li"}),b("#laydate_ys").innerHTML=d,c.each(b("#laydate_ys li"),function(a,b){"y"===c.checkVoid(b.getAttribute("y"))[0]?c.addClass(b,h[1]):c.on(b,"click",function(a){c.stopmp(a).reshow(),c.viewDate(0|this.getAttribute("y"),c.ymd[1],c.ymd[2])})})},c.initDate=function(){var d=(c.query,new Date),e=c.elem[h.elemv].match(/\d+/g)||[];e.length3(e=c.options.start.match(/\d+/g)||[],e.length3(e=[d.getFullYear(),d.getMonth()+1,d.getDate()])),c.inymd=e,c.viewDate(e[0],e[1]-1,e[2])},c.iswrite=function(){var a=c.query,b={time:a("#laydate_hms")};c.shde(b.time,!c.options.istime),c.shde(h.oclear,!("isclear"in c.options?c.options.isclear:1)),c.shde(h.otoday,!("istoday"in c.options?c.options.istoday:1)),c.shde(h.ok,!("issure"in c.options?c.options.issure:1))},c.orien=function(a,b){var d,e=c.elem.getBoundingClientRect();a.style.left=e.left+(b?0:c.scroll(1))+"px",d=e.bottom+a.offsetHeight/1.5=c.winarea()?e.bottom-1:e.topa.offsetHeight/1.5?e.top-a.offsetHeight+1:c.winarea()-a.offsetHeight,a.style.top=d+(b?0:c.scroll())+"px"},c.follow=function(a){c.options.fixed?(a.style.position="fixed",c.orien(a,1)):(a.style.position="absolute",c.orien(a))},

jquery 簡(jiǎn)介

JQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascript庫(kù)。它是輕量級(jí)的js庫(kù) ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫(huà)效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁(yè)面保持代碼和html內(nèi)容分離，也就是說(shuō)，不用再在html里面插入一堆js來(lái)調(diào)用命令了，只需要定義id即可。

jQuery是一個(gè)兼容多瀏覽器的javascript庫(kù)，核心理念是write less,do more(寫(xiě)得更少,做得更多)。jQuery在2006年1月由美國(guó)人John Resig在紐約的barcamp發(fā)布，吸引了來(lái)自世界各地的眾多JavaScript高手加入，由Dave Methvin率領(lǐng)團(tuán)隊(duì)進(jìn)行開(kāi)發(fā)。如今，jQuery已經(jīng)成為最流行的javascript庫(kù)，在世界前10000個(gè)訪問(wèn)最多的網(wǎng)站中，有超過(guò)55%在使用jQuery。

jQuery是免費(fèi)、開(kāi)源的，使用MIT許可協(xié)議。jQuery的語(yǔ)法設(shè)計(jì)可以使開(kāi)發(fā)更加便捷，例如操作文檔對(duì)象、選擇DOM元素、制作動(dòng)畫(huà)效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開(kāi)發(fā)者編寫(xiě)插件。其模塊化的使用方式使開(kāi)發(fā)者可以很輕松的開(kāi)發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)。

jQuery，顧名思義，也就是JavaScript和查詢（Query），即是輔助JavaScript開(kāi)發(fā)的庫(kù)。

歷史

大概在 1992 年，一家稱作 Nombas 的公司開(kāi)發(fā)了一種叫做 C 減減（C-minus-minus，簡(jiǎn)稱 Cmm）的嵌入式腳本語(yǔ)言。Cmm 背后的理念很簡(jiǎn)單：一個(gè)足夠強(qiáng)大可以替代宏操作（macro）的腳本語(yǔ)言，同時(shí)保持與 C （和 C ++）足夠的相似性，以便開(kāi)發(fā)人員能很快學(xué)會(huì)。這個(gè)腳本語(yǔ)言捆綁在一個(gè)叫做 CEnvi 的共享軟件中，它首次向開(kāi)發(fā)人員展示了這種語(yǔ)言的威力。

Nombas 最終把 Cmm 的名字改成了 ScriptEase，原因是后面的部分（mm）聽(tīng)起來(lái)過(guò)于消極，同時(shí)字母 C “令人害怕”。

當(dāng) Netscape Navigator 嶄露頭角時(shí)，Nombas 開(kāi)發(fā)了一個(gè)可以嵌入網(wǎng)頁(yè)中的 CEnvi 的版本。這些早期的試驗(yàn)被稱為 Espresso Page（濃咖啡般的頁(yè)面），它們代表了第一個(gè)在萬(wàn)維網(wǎng)上使用的客戶端語(yǔ)言。而 Nombas 絲毫沒(méi)有料到它的理念將會(huì)成為萬(wàn)維網(wǎng)的一塊重要基石。

當(dāng)網(wǎng)上沖浪越來(lái)越流行時(shí)，對(duì)于開(kāi)發(fā)客戶端腳本的需求也逐漸增大。此時(shí)，大部分因特網(wǎng)用戶還僅僅通過(guò) 28.8 kbit/s 的調(diào)制解調(diào)器連接到網(wǎng)絡(luò)，即便這時(shí)網(wǎng)頁(yè)已經(jīng)不斷地變得更大和更復(fù)雜。而更加加劇用戶痛苦的是，僅僅為了簡(jiǎn)單的表單有效性驗(yàn)證，就要與服務(wù)器進(jìn)行多次地往返交互。設(shè)想一下，用戶填完一個(gè)表單，點(diǎn)擊提交按鈕，等待了 30 秒的處理后，看到的卻是一條告訴你忘記填寫(xiě)一個(gè)必要的字段。

那時(shí)正處于技術(shù)革新最前沿的 Netscape，開(kāi)始認(rèn)真考慮開(kāi)發(fā)一種客戶端腳本語(yǔ)言來(lái)解決簡(jiǎn)單的處理問(wèn)題。

當(dāng)時(shí)工作于 Netscape 的 Brendan Eich，開(kāi)始著手為即將在 1995 年發(fā)行的 Netscape Navigator 2.0 開(kāi)發(fā)一個(gè)稱之為 LiveScript 的腳本語(yǔ)言，當(dāng)時(shí)的目的是在瀏覽器和服務(wù)器（本來(lái)要叫它 LiveWire）端使用它。Netscape 與 Sun 及時(shí)完成 LiveScript 實(shí)現(xiàn)。

就在 Netscape Navigator 2.0 即將正式發(fā)布前，Netscape 將其更名為 JavaScript，目的是為了利用 Java 這個(gè)因特網(wǎng)時(shí)髦詞匯。Netscape 的賭注最終得到回報(bào)，JavaScript 從此變成了因特網(wǎng)的必備組件。

因?yàn)?JavaScript 1.0 如此成功，Netscape 在 Netscape Navigator 3.0 中發(fā)布了 1.1 版。恰巧那個(gè)時(shí)候，微軟決定進(jìn)軍瀏覽器，發(fā)布了 IE 3.0 并搭載了一個(gè) JavaScript 的克隆版，叫做 JScript（這樣命名是為了避免與 Netscape 潛在的許可糾紛）。微軟步入 Web 瀏覽器領(lǐng)域的這重要一步雖然令其聲名狼藉，但也成為 JavaScript 語(yǔ)言發(fā)展過(guò)程中的重要一步。

在微軟進(jìn)入后，有 3 種不同的 JavaScript 版本同時(shí)存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。與 C 和其他編程語(yǔ)言不同的是，JavaScript 并沒(méi)有一個(gè)標(biāo)準(zhǔn)來(lái)統(tǒng)一其語(yǔ)法或特性，而這 3 種不同的版本恰恰突出了這個(gè)問(wèn)題。隨著業(yè)界擔(dān)心的增加，這個(gè)語(yǔ)言的標(biāo)準(zhǔn)化顯然已經(jīng)勢(shì)在必行。

2006年1月，jQuery的第一個(gè)版本面世，至今已經(jīng)有10年多了（注：這個(gè)時(shí)間點(diǎn)是截止至出書(shū)時(shí)間）。雖然過(guò)了這么久，但它依然以其簡(jiǎn)潔、靈活的編程風(fēng)格讓人一見(jiàn)傾心。在本篇文章中，我們將講述jQuery的發(fā)展 歷史 ，讓讀者對(duì)jQuery有更多的了解。

在jQuery迅速發(fā)展的同時(shí)，一些大的廠商也看中了商機(jī)。2009年9月，微軟和諾基亞公司正式宣布支持開(kāi)源的jQuery庫(kù)，另外，微軟公司還宣稱他們將把jQuery作為Visual Studio工具集的一部分。他將提供包括jQuery的智能提示、代碼片段、示例文檔編制等內(nèi)容在內(nèi)的功能。微軟和諾基亞公司將長(zhǎng)期成為jQuery的用戶成員，其他成員還有Google，Intel，IBM，Intuit等公司。

2009年1月，jQuery 1.3版發(fā)布，它使用了全新的選擇符引擎Sizzle，在各個(gè)瀏覽器下全面超越其他同類型JavaScript框架的查詢速度，程序庫(kù)的性能也因此有了極大提升。這一版本的第2個(gè)變化就是提供live()方法，使用live()方法可以為當(dāng)前及將來(lái)增加的元素綁定事件，在1.3版之前，如果要為將來(lái)增加的元素綁定事件，需要使用livequery插件，而在1.3版中，可以直接用live()方法。　2005年8月，John Resig提議改進(jìn)Prototype的“Behaviour”庫(kù)，于是他在blog上發(fā)表了自己的想法，并用了3個(gè)例子做說(shuō)明。

2010年2月，jQuery 1.4.2版發(fā)布，它新增了有關(guān)事件委托的兩個(gè)方法：delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。這個(gè)方法比live()來(lái)的方便，而且也可以達(dá)到動(dòng)態(tài)添加事件的作用。比如給表格的每個(gè)td綁定hover事件

特點(diǎn)

1.動(dòng)態(tài)特效

2.AJAX

3.通過(guò)插件來(lái)擴(kuò)展

4.方便的工具 - 例如瀏覽器版本判斷

5.漸進(jìn)增強(qiáng)

6.鏈?zhǔn)秸{(diào)用

7.多瀏覽器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了對(duì)Internet Explorer6,7,8的支持）

歷史 版本

jQuery 1.0

（2006年8月）：該庫(kù)的第一個(gè)穩(wěn)定版本，已經(jīng)具有了對(duì)CSS選擇符、事件處理和AJAX交互的穩(wěn)健支持。

jQuery 1.1

（2007年1月）：這一版大幅簡(jiǎn)化了API。許多較少使用的方法被合并，減少了需要掌握和解釋的方法數(shù)量。

jQuery 1.1.3

（2007年7月）：這次小版本變化包含了對(duì)jQuery選擇符引擎執(zhí)行速度的顯著提升。從這個(gè)版本開(kāi)始，jQuery的性能達(dá)到了Prototype、Mootools以及Dojo等同類JavaScript庫(kù)的水平。

jQuery 1.2

（2007年9月）：這一版去掉了對(duì)XPath選擇符的支持，原因是相對(duì)于CSS語(yǔ)法它已經(jīng)變得多余了。這一版能夠支持對(duì)效果的更靈活定制，而且借助新增的命名空間事件，也使插件開(kāi)發(fā)變得更容易。

jQuery UI（2007年9月）：這個(gè)新的插件套件是作為曾經(jīng)流行但已過(guò)時(shí)的Interface插件的替代項(xiàng)目而發(fā)布的。jQuery UI中包含大量預(yù)定義好的部件（widget），以及一組用于構(gòu)建高級(jí)元素（例如可拖放的界面元素）的工具。

jQuery 1.2.6

（2008年5月）：這一版主要是將Brandon Aaron開(kāi)發(fā)的流行的Dimensions插件的功能移植到了核心庫(kù)中。

jQuery 1.3

（2009年1月）：這一版使用了全新的選擇符引擎Sizzle，庫(kù)的性能也因此有了極大提升。這一版正式支持事件委托特性。

jQuery 1.3.2

（2009年2月）：這次小版本升級(jí)進(jìn)一步提升了庫(kù)的性能，例如改進(jìn)了：visible/:hidden選擇符、.height()/.width()方法的底層處理機(jī)制。另外，也支持查詢的元素按文檔順序返回。

jQuery 1.4

（2010年1月14號(hào)）：對(duì)代碼庫(kù)進(jìn)行了內(nèi)部重寫(xiě)組織，開(kāi)始建立一些風(fēng)格規(guī)范。老的core.js文件被分為attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js；CSS和attribute的邏輯分離。

重要變化：

1. Ajax重寫(xiě)

Ajax模塊完全進(jìn)行了重寫(xiě)。新增一個(gè)jXHR對(duì)象，為不同瀏覽器內(nèi)置的XMLHttpRequest提供了一致的超集。對(duì)于XMLHttpRequest之外的傳輸機(jī)制，比如JSONP請(qǐng)求，jXHR對(duì)象也可以進(jìn)行處理。（詳情可以參見(jiàn)：jQuery.ajax文檔）

此外，系統(tǒng)的可擴(kuò)展性大大增強(qiáng)，可以附加各種數(shù)據(jù)處理器、過(guò)濾器和傳輸機(jī)制，為開(kāi)發(fā)新的Ajax插件提供了方便。

2. 延遲對(duì)象

延遲對(duì)象（Deferred Object，jQuery.Deferred對(duì)象）是一個(gè)可鏈接的（chainable）實(shí)用工具對(duì)象，實(shí)現(xiàn)了Promise接口，可以在回調(diào)隊(duì)列中注冊(cè)多個(gè)回調(diào)、調(diào)用回調(diào)隊(duì)列并轉(zhuǎn)發(fā)任何同步/異步函數(shù)的成敗狀態(tài)。正如Using Deferreds in jQuery 1.5一文中說(shuō)明的，其結(jié)果是在jQuery中能夠?qū)⒁蕾囉谀硞€(gè)任務(wù)（事件）結(jié)果的邏輯與任務(wù)本身解耦了。這一點(diǎn)在JavaScript中其實(shí)并不新鮮，Mochikit和Dojo等已經(jīng)實(shí)現(xiàn)有些日子了。由于jQuery 1.5的Ajax模塊內(nèi)置使用了延遲對(duì)象，因此通過(guò)jQuery編寫(xiě)Ajax程序?qū)⒆詣?dòng)獲得這一功能。

開(kāi)發(fā)人員借此可以使用無(wú)法立即獲得的返回值（如異步Ajax請(qǐng)求的返回結(jié)果），而且第一次能夠附加多個(gè)事件處理器。

例如，使用了新的jQuery內(nèi)部Ajax API就可以實(shí)現(xiàn)下面的代碼了：

// Assign handlers immediately after making the request,// and remember the jxhr object for this request var jxhr = $.ajax({ url: "example.php" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); });// perform other work here ... // Set another completion function for the request above jxhr.complete(function(){ alert("second complete"); });

此外，使用jQuery.Deferred還可以開(kāi)發(fā)自己的延遲對(duì)象。更多詳情參見(jiàn)：延遲對(duì)象文檔。

3. jQuery.sub()

jQuery 1.5提供了一種創(chuàng)建和修改jQuery副本的方式。可以用來(lái)添加不向外部公開(kāi)的方法，或者對(duì)jQuery的某些方法進(jìn)行重新定義以提供新功能，或者提供更好的封裝、避免名稱空間沖突。當(dāng)然，也可以用來(lái)開(kāi)發(fā)插件，但Resig強(qiáng)烈建議在開(kāi)發(fā)插件之前，先考慮jQuery UI widget工廠。

值得注意的是，sub函數(shù)并不提供真正的隔離，所有方法、數(shù)據(jù)、調(diào)用仍然依靠jQuery本身來(lái)支持。

4. 遍歷性能提高

在新版本中.children(),.prev(),.next()幾個(gè)常用的遍歷函數(shù)性能有了顯著提高。

5. 內(nèi)部開(kāi)發(fā)系統(tǒng)

John Resig還特別提到了jQuery團(tuán)隊(duì)內(nèi)部開(kāi)發(fā)系統(tǒng)的兩點(diǎn)改變：一是服務(wù)器端用Node.js替換了老的Java/Rhino系統(tǒng)，使得團(tuán)隊(duì)可以專注于JavaScript環(huán)境的新變化；二是所用的代碼優(yōu)化程序從Google Closure切換到UglifyJS，新工具的壓縮效果非常令人滿意。

使用方法

jQuery可以下載使用，有兩個(gè)版本的 jQuery 可供下載

Production version - 用于實(shí)際的網(wǎng)站中，已被精簡(jiǎn)和壓縮。

Development version - 用于測(cè)試和開(kāi)發(fā)（未壓縮，是可讀的代碼）

jQuery 1.8.0版時(shí)壓縮前后的對(duì)比

插件機(jī)制

jQuery的官方插件是jQuery UI。開(kāi)發(fā)者可以任意擴(kuò)展jQuery的函數(shù)庫(kù)或者按照自己的需求開(kāi)發(fā)UI組件。網(wǎng)上已經(jīng)有數(shù)以萬(wàn)計(jì)的jQuery插件，覆蓋各種各樣的需求。例如Ajax輔助、數(shù)據(jù)表格、動(dòng)態(tài)列表、XML工具、拖曳、cookie處理、彈出層等等。jQuery 的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇,例如ComponentOne Studio for ASP NET Wijmo.

隨著jQuery插件在網(wǎng)站建設(shè)過(guò)程中的使用率不斷的增加，所以有必要跟進(jìn)時(shí)代步伐開(kāi)發(fā)出一些新的插件/代碼片段，以此來(lái)鞏固并提高前端用戶體驗(yàn)，將用戶體驗(yàn)提升到一個(gè)新的高度。其中包括Flat jQuery Price Slider、Gmaps jQuery Map Plugin 、FormChimp——MailChimp Ajax plugin for jQuery 等。

控件

jQuery Gantt控件是一個(gè)基于原生HTML5/jQuery，功能豐富的控件，該控件真正實(shí)現(xiàn)了跨平臺(tái)，在許多設(shè)備和瀏覽器中無(wú)縫的運(yùn)行。

使用項(xiàng)目甘特圖中內(nèi)置的調(diào)度，依賴等功能實(shí)現(xiàn)任務(wù)分層列表的可視化。

使用資源甘特圖實(shí)現(xiàn)一個(gè)資源利用視圖。

使用基于API的jQuery或者基于API的MVC可幫您輕松地安裝甘特圖并加快應(yīng)用速度。

可與諸如KnockOut(KO),jQuery.tmpl等流行的jQuery模式一同使用。

jQuery選中select控件 無(wú)法設(shè)置selected的解決方法

解決辦法：把選中option的語(yǔ)句放到setTimeout中，例：

復(fù)制代碼

代碼如下:

setTimeout(function()

{

var

selSorts

=

$("select[id^='"

+

controls.selsort

+

"']");

$.each(selSorts,

function(index,

sort)

{

var

ope

=

$(sort).find("option[value='"

+

arrSort[index]

+

"']");

if

(ope.length

0)

ope[0].selected

=

true;

});

},

1);

如何使用jquery動(dòng)態(tài)創(chuàng)建一個(gè)select控件

jquery文檔操作的append()或?appendTo()方法可以在被選元素的結(jié)尾插入內(nèi)容，因此可用于動(dòng)態(tài)創(chuàng)建select控件

$("div").append("select/select");??????????//?在已經(jīng)存在的div標(biāo)簽下創(chuàng)建select元素

$("option/option").appendTo($("select"));??//?為select元素添加option選項(xiàng)

實(shí)例演示：動(dòng)態(tài)創(chuàng)建一個(gè)含有兩個(gè)選項(xiàng)——“黑”“白”的select控件，并默認(rèn)選中“白”這個(gè)選項(xiàng)

示例代碼如下

創(chuàng)建Html元素

div?class="box"

span點(diǎn)擊按鈕后創(chuàng)建select標(biāo)簽，并默認(rèn)選中“白”這個(gè)選項(xiàng)：/spanbr

div?class="content"/div

input?type="button"?value="創(chuàng)建select標(biāo)簽"

/div

設(shè)置css樣式

div.box{width:300px;padding:20px;margin:20px;border:4px?dashed?#ccc;}

div.box?span{color:#999;font-style:italic;}

div.content{width:250px;margin:10px?0;padding:20px;border:2px?solid?#ff6666;}

select{width:150px;height:30px;border:1px?solid?#6699FF;}

編寫(xiě)jquery代碼

$(function(){

$("input:button").click(function()?{

//?創(chuàng)建select

$("div.content").append("select/select");

//?添加選項(xiàng)

$("option/option").val('0').text("黑").appendTo($("select"));

$("option/option").val('1').text("白").appendTo($("select"));

//?設(shè)置默認(rèn)選項(xiàng)

$("select").val('1');

})

})

觀察效果

初始狀態(tài)

點(diǎn)擊按鈕創(chuàng)建select控件之后

文章題目：jquery選擇控件,jquery 類選擇器
URL地址：http://chinadenli.net/article33/dsgsops.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、ChatGPT、靜態(tài)網(wǎng)站、微信公眾號(hào)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)