jQuery基礎

 JQuery官方網站

 http://jquery.com/

 

1、JQuery概念

A、Jquery是一個優秀的Javascript框架。它是輕量級的js庫 ，它兼容CSS3，還兼容各類瀏覽器，jQuery2.0及後續版本將再也不支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery可以使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只需定義id便可。

B、JavaScript的缺點:控件的操做方式不統一，不一樣瀏覽器容易出觀兼容問題。爲了簡化操做，出現了許多對JavaScript封裝的函數庫好比Prototype、JQuery等。

C、JQuery的優勢:小巧、方便、功能強大。插件豐富、開源、免費。

D、VS在VS2010中已經實現自動完成功能，VS2008須要安裝VSSP1補丁和VS90SP1-KB958502-X86補丁才能更好的支持，而後引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放在同目錄下，VS2008中才會有自動提示和自動完成功能。

E、JQuery文件說明:

       jquery-1.4.2.js是JQuery主文件。

       jquery-1.4.2.min.js是壓縮板JQuery主文件。

       jquery-1.4.2-vsdoc.js是JQuery在VS中的自動提示功能。

 

2、JQuery之Ready

A、JQuery的read和Dom onload的區別:onload是全部Dom元素建立完畢觸發，而ready則是Dom元素建立完就觸發，這樣能夠提升網頁的響應速度。

 

3、JQuery內置函數

A、$.map(array, function)函數:對數組array中每一個元素調用function函數逐個處理，function函數處理返回一個新的數組。如:

       var array = [3, 6, 9];

var arrary2 = $.map(array, function(item) { return item * 2 });

for (var i = 0; i < arrary2.length; i++) {

alert(arrary2[i]);

};

       或: alert(arrary2);

       注: $.map函數不能處理dictionary風格的數組。

B、$.each(array, function)對array每一個元素進行處理，但沒有返回值。

       var array = ["TOM", "湯姆", "Jerry", "傑瑞"];

$.each(array, function() { alert(this); });

或:

var dict = { "TOM": 20, "Jerry": 50 };

$.each(dict, function(key, value) { alert(key + "=" + value); });

 

4、JQuery對象與Dom對象

A、JQuery對象是經過對Dom對象的封裝產生的對象。

B、Dom對象要想經過JQuery進行操做，須要先轉換成JQuery對象。

       $(‘#div1’).html等價於:document.getElementByid(‘div1’).innerHTML;

       $(‘#div1’)獲得的是JQuery對象，JQuery對象能夠調用JQuery對象封裝的方法，不能調用Dom對象的方法，Dom對象也不能調用JQuery對象的方法。

C、將Dom對象轉換成JQuery對象的方法，$(Dom對象)。當調用JQuery沒有封裝的方法時必須用Dom對象，轉換方法:var docobj = jqobj[0]或var domobj=jqobj.get(0)。

D、樣式的修改：

JQuery修改樣式方法:$(「#div1」).css(「background」, 「red」);

JQuery得到樣式的方法:$(「#div1」).css(「background」);

   修改value值方法:

       JQuery修改value方法: $(「#div1」).val(「Dragon」);

       JQuery得到value方法: $(「#div1」).val();

 

5、JQuery選擇器

A、JQuery選擇器用於查找知足條件的元素，好比可使用$(「#控件id」)來根據控件id得到控件的JQuery對象。至關於getElementByid。

B、$(「TagName」)來獲取全部指定簽名的JQuery對象，至關於getElementsByTagName。

C、CSS選擇器，同時選擇擁有某個樣式的多個元素:

       $(「.text」).click(function(){alert($(this).text();)});

D、多條件選擇器:$(「p,div,span.menuitem」),同時選擇p標籤、div標籤和擁有menuitem樣式的span標籤。

E、層次選擇器:

       一、$(「div li」)獲取div下的全部li標籤(後代，子、子的子標籤…)。

       二、$(「div > li」)獲取div下的直接li子標籤。

       三、$(「.menuitem + div」)獲取樣式名爲menuitem以後的第一個div標籤。

       四、$(「.menuitem ~ div」)獲取樣式名爲menuitem以後的全部div標籤。

 

6、JQuery隱式迭代

A、注:若是用隱式迭代就會不容易發現錯誤。

       $(function(){

              var elements = $(「#btn1」);

              If (elements.length <= 0){

                     alert(「沒有找到提定對象」);

                     return;

       }

       elements.mouseover(function(){ alert(「找到了」)});

 

7、節點遍歷

A、next()方法用於獲取節點以後的挨着的第一個同輩標籤，$(「.menuitem」).next(「div」)、nextAll()方法用於獲取節點以後的全部同輩標籤。

B、siblings()方法用於獲取全部同級標籤。

 

8、鏈式編程

A、JQuery能夠實現鏈式編程

9、JQuery過濾選擇器

A、:first選擇第一個標籤。$(「div:first」)選取第一個<div>。

B、:last選取最後一個標籤。$(「div:last」)選取最後一個<div>。

C、:not選取不知足選擇器條件的標籤。$(「input:not(.myclass)」)選取樣式名不是myclass的<input>標籤。

D、:even、:odd，選取索引是奇數、偶數的標籤:$(「input:event」)選取索引是奇數的<input>。

E、:eq、:gt、:lt選取索引等於、大於、小於索引序號的標籤，好比$(「input:lt(1)」)選取索引小於1的<input>。

F、$(「:header」)選取全部的h1…h6標籤。

G、$(「div:animated」)選取正在執行動畫的<div>標籤。

 

10、屬性過濾選擇器

A、$(「div[id]」)選取有id屬性的<div>。

B、$(「div[title=test]」)選取title屬性爲「text」的<div>。

C、$(「div[title!=test]」)選取title屬性不爲「text」的<div>。

 

11、表單對象選擇器

A、$(「#form1:enabled」)選取id爲form1的表單內全部啓用的標籤。

B、$(「#form1:disabled」)選取id爲form1的表單內全部禁用的標籤。

C、$(「#form1:checked」)選取全部選中的標籤。(checkBox)。

D、$(「#form1:selected」)選取全部選中的選項標籤。(下拉列表)。

 

12、JQuery的Dom操做

A、使用html()方法讀取或設置標籤的innerHTML:

       alert($「a:first」).html());

       $(「a:first」).html(「hello」);

B、使用text()方法讀取或設置標籤的innerText:

       alert($(「a:first」).text());

       $(「a:first」).text(「hello」);

C、使用att()方法讀取或設置標籤的屬性:

       alert($(「a:first」).attr(href」));

       $(「a:first」).attr(「href」, http://www.rupeng.com);

D、使用removeAttr刪除屬性。

 

13、動態建立Dom節點

A、使用$(html字符串)來建立Dom節點，返回一個JQuery對象，而後調用append方法將新建立的節點添加到Dom中

       var link = $(「<a href=’http://www.baidu.com’>百度</a>」);

       $(「div:first」).append(link);

       Append方法用來在標籤的末尾追加標籤。

       prepend在標籤的開始添加標籤。

       after在標籤以後添加標籤。

       before在標籤以前添加標籤。

 

14、刪除節點

A、remove()刪除選擇的節點。

       如:清空ul中的項。$(「ul li.testitem」).remove();刪除ul下的li id=testitem的標答。

B、remove()方法返回值是被刪除的節點對象，還能夠繼續使用刪除的節點。

       var lis = $(「#ulsite li」).remove();

       $(「#ulsite2」).append(lis);

C、empty()是將節點清空。

 

15、設定按鈕的啓用時間

<script type=「text/javescript」>

       var leftseconds = 10

       var intervalid;

       $(function(){

              $(「#btnReg」).attr(「disabled」,true);

              Intervalid = setInterval(「countDown()」,1000);

       }

 

       Function CountDown(){

              if(leftseconds <= 0){

                     $(「#btnReg」).val(「贊成」);

                     $(「#btnReg」).attr(「disabled」,false);

                     clearIntervalid(Intervalid);

                     return;

              }

              Leftseconds--;

              $(「#btnReg」).val(「請仔細閱讀」+ Leftseconds + 「」);

       }

</script>

 

16、樣式操做

A、獲取樣式attr(「class」)，設置樣式attr(「class」, 「myclass」)。

B、追加樣式addclass(「myclass」)。

C、移除樣式removeclass(「myclass」)。

D、切換樣式togleclass(「myclass」)。若是存在則去掉樣式，若是不存在則添加。

E、判斷樣式是否存在:hasclass(「myclass」)。

 

17、RadioButton操做

A、取RadioButton選中值:

$(「input[name=gender]:checked」).val()

       <input id= 「radio1」 checked= 「checked」 name= 「gender」 type= 「radio」 value= 「男」 />男

       <input id= 「radio2」 checked= 「checked」 name= 「gender」 type= 「radio」 value= 「女」 />女

       <input id= 「radio3」 checked= 「checked」 name= 「gender」 type= 「radio」 value= 「未知」 />未知

B、設置RadioButton選中值:

       $(「input[name=gender]」).val([「女」]);

 

18、事件

A、JQuery中事件的綁定:$(「#btn」).bind(「click」,function(){})。

JQuery用$(「#btn」).click(function(){})來簡化。

B、調用事件對象的stopPropagation()方法終止事件冒泡。

C、阻止默認行爲: 好比超連接點擊後會轉向新的連接。若是想阻止默認行爲只要調用事件對象的preventDefault()方法。

D、屬性:pageX、pageY、target得到觸發事件的元素（冒泡的起始,和this不同）。

   which若是是鼠標事件得到按鍵(1左鍵，2中鍵，3右鍵)。

   altKey、shiftKey、ctrlKey得到alt、shift、ctrl是否按下，爲bool值。

   keyCole、charCode屬性發生事件時的keyCode、charCode。

E、移除事件綁定:unbind()方法便可移除元素上綁定的事件，若是bind(「click」)則移除click事件的綁定。

F、一次性事件:若是綁定的事件只想執行一次隨後當即unbind可使用one()方法進行綁定。

 

19、動畫

A、show、hide()方法用於顯示、隱藏標籤。用toggle()方法在顯示、隱藏之間切換。

       $(「:button[value=show]」).click(function(){$(「div」).show();});

       $(「:button[value=hide]」).click(function(){$(「div」).hide();});

B、show、hide能夠帶參數使用。fast(200毫秒)、normal(400毫秒)、slow(600毫秒)。

 

20、JQuery cookie

A、使用方法:

       一、添加對jquery.cookie.js引用。

       二、設置,$.cookie(‘名字’, ‘值’)。cookie中保存的值是文本。

       三、讀取,var v = $.cookie(‘名字’)

B、$.cookie(‘名字’, ‘值’,{expires:7,path:’/’,domain:’baidu.com’,secure:true});

expires 保存的天數。

path 設置網站那些目錄下的文件能夠讀取。

domain 保存的是哪一個域名的。

 

21、JQueryUI

 

22、JQuery輔助工具

A、DebugBar

B、IE開發人員工具