jQuery使用方法

jquery 使用方法

   jQuery是目前使用最普遍的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其餘庫。微軟公司甚至把jQuery做爲他們的官方庫。對於網頁開發者來講

 

1、選擇網頁元素jQuery的基本設計和主要用法，就是"選擇某個網頁元素，而後對其進行某種操做"。這是它區別於其餘函數庫的根本特色。

　　　　使用jQuery的第一步，每每就是將一個選擇表達式，放進構造函數jQuery()(簡寫爲$)，而後獲得被選中的元素。

選擇表達式能夠是CSS選擇器：

 

 

 $(document) $('#myId') $('div.myClass') $('input[name=first]')

 
也能夠是jQuery特有的表達式：

 $('a:first') $('tr:odd') $('#myForm :input') $('div:visible')  $('div:gt(2)') $('div:animated')

2、改變結果集

若是選中多個元素，jQuery提供過濾器，能夠縮小結果集：

 $('div').has('p');  $('div').not('.myClass');  $('div').filter('.myClass');  $('div').first();  $('div').eq(5);

有一些時候，咱們須要從結果集出發，移動到附近的相關元素，jQuery也提供了在DOM樹上的移動方法：

 $('div').next('p');  $('div').parent();  $('div').closest('form');  $('div').children();  $('div').siblings();

3、鏈式操做

選中網頁元素之後，就能夠對它進行某種操做。

jQuery容許將全部操做鏈接在一塊兒，以鏈條的形式寫出來，好比：

1 $('div').find('h3').eq(2).html('Hello');

咱們能夠這樣拆封開來，就是下面這樣：

 $('div') .find('h3') .eq(2) .html('Hello');

 

  

這是jQuery最使人稱道、最方便的特色。它的原理在於每一步的jQuery操做，返回的都是一個jQuery對象，因此不一樣操做能夠連在一塊兒。

jQuery還提供了.end()方法，使得結果集能夠後退一步：

 $('div')  
 .find('h3')  
 .eq(2)  
 .html('Hello')  
 .end() .eq(0) .html('World');

4、元素的操做：取值和賦值

操做網頁元素，最多見的需求是取得它們的值，或者對它們進行賦值。

jQuery使用同一個函數，來完成取值(getter)和賦值(setter)。究竟是取值仍是賦值，由函數的參數決定。

 

View Code

 

取出或設置html內容 取出某個表單元素的值

　　　　須要注意的是，若是結果集包含多個元素，那麼賦值的時候，將對其中全部的元素賦值;取值的時候，則是隻取出第一個元素的值(.text()例外，它取出全部元素的text內容)。

5、元素的操做：移動

　　　　若是要移動選中的元素，有兩種方法：一種是直接移動該元素，另外一種是移動其餘元素，使得目標元素達到咱們想要的位置。

假定咱們選中了一個div元素，須要把它移動到p元素後面。

第一種方法是使用.insertAfter()，把div元素移動p元素後面：

$('div').insertAfter('p');

第二種方法是使用.after()，把p元素加到div元素前面：

$('p').after('div');

 

　　　　表面上看，這兩種方法的效果是同樣的，惟一的不一樣彷佛只是操做視角的不一樣。可是實際上，它們有一個重大差異，那就是返回的元素不同。第一種方法返回div元素，第二種方法返回p元素。你能夠根據須要，選擇到底使用哪種方法。

使用這種模式的操做方法，一共有四對

 .insertAfter()和.after()：在現存元素的外部，從後面插入元素  
 .insertBefore()和.before()：在現存元素的外部，從前面插入元素  
 .appendTo()和.append()：在現存元素的內部，從後面插入元素  
 .prependTo()和.prepend()   
 ：在現存元素的內部，從前面插入元素

6、元素的操做：複製、刪除和建立

複製元素使用.clone()。

　　　　刪除元素使用.remove()和.detach()。二者的區別在於，前者不保留被刪除元素的事件，後者保留，有利於從新插入文檔時使用。

清空元素內容(可是不刪除該元素)使用.empty()。

建立新元素的方法很是簡單，只要把新元素直接傳入jQuery的構造函數就好了：

 $('<p>Hello</p>');  
 $('<li class="new">new list item</li>');  
 $('ul').append('<li>list item</li>');

7、工具方法

　　　　除了對選中的元素進行操做之外，jQuery還提供一些工具方法(utility)，沒必要選中元素，就能夠直接使用。

　　　　若是你懂得Javascript語言的繼承原理，那麼就能理解工具方法的實質。它是定義在jQuery構造函數上的方法，即jQuery.method()，因此能夠直接使用。而那些操做元素的方法，是定義在構造函數的prototype對象上的方法，即jQuery.prototype.method()，因此必須生成實例(即選中元素)後使用。若是不理解這種區別，問題也不大，只要把工具方法理解成，是像javascript原生函數那樣，能夠直接使用的方法就好了。

 

 

經常使用的工具方法有如下幾種：

 

 $.trim() 去除字符串兩端的空格。  
 $.each() 遍歷一個數組或對象。  
 $.inArray() 返回一個值在數組中的索引位置。若是該值不在數組中，則返回-1。  
 $.grep() 返回數組中符合某種標準的元素。   
 $.extend() 將多個對象，合併到第一個對象。   
 $.makeArray() 將對象轉化爲數組。  
 $.type() 判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等）。  
 $.isArray() 判斷某個參數是否爲數組。  
 $.isEmptyObject() 判斷某個對象是否爲空（不含有任何屬性）。  
 $.isFunction() 判斷某個參數是否爲函數。  
 $.isPlainObject() 判斷某個參數是否爲用"{}"或"new Object"創建的對象。  
 $.support() 判斷瀏覽器是否支持某個特性。

 

 

8、事件操做

jQuery能夠對網頁元素綁定事件。根據不一樣的事件，運行相應的函數。

 $('p').click((){  
 alert('Hello');  
 });

目前，jQuery主要支持如下事件：

 .blur() 表單元素失去焦點。  
 .change() 表單元素的值發生變化  
 .click() 鼠標單擊  
 .dblclick() 鼠標雙擊  
 .focus() 表單元素得到焦點  
 .focusin() 子元素得到焦點  
 .focusout() 子元素失去焦點  
 .hover() 同時爲mouseenter和mouseleave事件指定處理函數  
 .keydown() 按下鍵盤（長時間按鍵，只返回一個事件）  
 .keypress() 按下鍵盤（長時間按鍵，將返回多個事件）  
 .keyup() 鬆開鍵盤  
 .load() 元素加載完畢  
 .mousedown() 按下鼠標  
 .mouseenter() 鼠標進入（進入子元素不觸發）  
 .mouseleave() 鼠標離開（離開子元素不觸發）  
 .mousemove() 鼠標在元素內部移動  
 .mouseout() 鼠標離開（離開子元素也觸發）  
 .mouseover() 鼠標進入（進入子元素也觸發）  
 .mouseup() 鬆開鼠標  
 .ready() DOM加載完成  
 .resize() 瀏覽器窗口的大小發生改變  
 .scroll() 滾動條的位置發生變化  
 .select() 用戶選中文本框中的內容  
 .submit() 用戶遞交表單  
 .toggle() 根據鼠標點擊的次數，依次運行多個函數  
 .unload()  用戶離開頁面

以上這些事件在jQuery內部，都是.bind()的便捷方式。使用.bind()能夠更靈活地控制事件，好比爲多個事件綁定同一個函數：

 $('input').bind(  
 'click change'，  (){  
 alert('Hello');  
 }  
 );

若是你只想讓事件運行一次，這時可使用.one()方法。

 $("p").one("click"， (){  
 alert("Hello");  });

.unbind()用來解除事件綁定。

$('p').unbind('click');

全部的事件處理函數，均可以接受一個事件對象(event object)做爲參數，好比下面例子中的e：

 $("p").click((e){  
 alert(e.type);  });

這個事件對象有一些頗有用的屬性和方法：

 event.pageX 事件發生時，鼠標距離網頁左上角的水平距離
 
 event.pageY 事件發生時，鼠標距離網頁左上角的垂直距離
 
 event.type 事件的類型(好比click)
 
 event.which 按下了哪個鍵
 
 event.data 在事件對象上綁定數據，而後傳入事件處理函數
 
 event.target 事件針對的網頁元素
 
 event.preventDefault() 阻止事件的默認行爲(好比點擊連接，會自動打開新頁面)
 
 event.stopPropagation() 中止事件向上層元素冒泡

在事件處理函數中，能夠用this關鍵字，返回事件針對的DOM元素：

 $('a').click((){  
  ($().attr('href').match('evil')){ e.preventDefault();  $().addClass('evil');  }  
 });

有兩種方法，能夠自動觸發一個事件。一種是直接使用事件函數，另外一種是使用.trigger()或.triggerHandler()。

 $('a').click();
 $('a').trigger('click');

9、特殊效果

jQuery容許對象呈現某些特殊效果。

$('h1').show(); //展示一個h1標題

經常使用的特殊效果以下：

 $('h1').show();  經常使用的特殊效果以下：
 .fadeIn() 淡入
 .fadeOut() 淡出
 .fadeTo() 調整透明度
 .hide() 隱藏元素
 .show() 顯示元素
 .slideDown() 向下展開
 .slideUp() 向上捲起
 .slideToggle() 依次展開或捲起某個元素
 .toggle() 依次展現或隱藏某個元素

 

除了.show()和.hide()，全部其餘特效的默認執行時間都是400ms(毫秒)，可是你能夠改變這個設置。

 $('h1').fadeIn(300);  $('h1').fadeOut('slow');

在特效結束後，能夠指定執行某個函數。

$('p').fadeOut(300, function(){$(this).remove(); });

更復雜的特效，能夠用.animate()自定義。

 $('div').animate(  
 {  
 left : "+=50"， opacity : 0.25  },
 300, (){ alert('done!'); } );

 

 

.stop()和.delay()用來中止或延緩特效的執行。

$.fx.off若是設置爲true，則關閉全部網頁特效。