jQuery用法總結

標籤：控制   mat   過濾   預設   改變   依次   next   項目   取出   

　　　　　　　　　-- 該筆記的整理引用自【http://www.cnblogs.com/Chenfengtao/archive/2012/01/12/2320490.html】,感謝博主的整理！--

jQuery簡介

　　jQuery是一個javascript的函數庫,本質是對JS的一個封裝,可以更加方便使用。比如JS中取對象document.getElementById()但用jquery的話$("#id")即可。使用Jquery可以:

　　1.快速擷取文件項目
　　　jQuery的選擇機制構建於CSS的選取器，它提供了快速查詢DOM文檔中元素的能力，而且大大強化了JavaScript中擷取頁面元素的方式。
　　2.提供漂亮的頁面動態效果
　　　jQuery中內建了一系列的動畫效果，可以開發出非常漂亮的網頁，許多網站都使用jQuery的內建的效果，比如淡入淡出、元素移除等動態特效。
　　3.建立AJAX無重新整理網頁
　　　AJAX是非同步JavaScript和ML的簡稱，可以開發出非常靈敏無重新整理的網頁，特別是程式開發伺服器端網頁時，比如PHP網站，需要往返地與伺服器通訊，如果不使用AJAX，每次資料更新不得不重新重新整理網頁，而使用AJAX特效後，可以對頁面進行局部重新整理，提供動態效果。
　　4.提供對JavaScript語言的增強
　　　jQuery提供了對基本JavaScript結構的增強，比如元素迭代和數組處理等操作。
　　5.增強事件處理
　　　jQuery提供了各種頁面事件，它可以避免程式員在HTML中添加太事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器安全色性問題。
　　6.更改網頁內容
　　　jQuery可以修改網頁中的內容，比如更改網頁的文本、插入或者翻轉網頁映像，jQuery簡化了原本使用JavaScript代碼需要處理的方式。

前期準備

　　從官網下載jQuery庫後貼到項目中。(jQuery2.0及後續版本將不再支援IE6/7/8瀏覽器)

→

jQuery使用

 

　　首先需要引入jQuery,其實就是引入javascript。(此處從該html檔案的父目錄下，找到js檔案下的jQuery庫)

<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>

1.從網頁文檔中找到DOM 節點

$(document)  //選擇整個文檔對象$(‘#myId‘)  //選擇ID為myId的網頁元素  $(‘div.myClass‘)  //選擇class為myClass的div元素    $(‘input[name=first]‘)  //選擇name屬性等於first的input元素$(‘a:first‘)  //選擇網頁中第一個a元素  $(‘tr:odd‘)  //選擇表格的奇數行  $(‘#myForm :input‘)  //選擇表單中的input元素  $(‘div:visible‘)  //選擇可見的div元素  $(‘div:gt(2)‘)  //選擇所有的div元素，除了前三個  $(‘div:animated‘)  //選擇當前處於動畫狀態的div元素

2.改變結果集

　　如果選中多個元素,jQuery提供過濾器,可以縮小結果集:

$(‘div‘).has(‘p‘);  //選擇包含p元素的div元素  $(‘div‘).not(‘.myClass‘);  //選擇class不等於myClass的div元素  $(‘div‘).filter(‘.myClass‘);  //選擇class等於myClass的div元素  $(‘div‘).first();  //選擇第1個div元素  $(‘div‘).eq(5);  //選擇第6個div元素  

　　有時候,我們需要從結果集出發,移動到附近的相關元素,jQuery也提供了在DOM樹上的移動方法:

$(‘div‘).next(‘p‘);  //選擇div元素後面的第一個p元素  $(‘div‘).parent();  //選擇div元素的父元素  $(‘div‘).closest(‘form‘);  //選擇離div最近的那個form父元素  $(‘div‘).children();  //選擇div的所有子項目  $(‘div‘).siblings();  //選擇div的同級元素  

3.鏈式操作

　　選中網頁元素以後,就可以對它進行某種操作。
　　jQuery允許將所有操作串連在一起,以鏈條的形式寫出來,比如:

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

　　可以這樣拆封開來:

$(‘div‘)  //找到div元素  .find(‘h3‘)  //選擇其中的h3元素  .eq(2)  //選擇第3個h3元素  .html(‘Hello‘);  //將它的內容改為Hello  

　　它的原理在於每一步的jQuery操作,返回的都是一個jQuery對象,所以不同操作可以連在一起。
　　jQuery還提供了.end()方法,使得結果集可以後退一步:

$(‘div‘)  .find(‘h3‘)  .eq(2)  .html(‘Hello‘)  .end()  //退回到選中所有的h3元素的那一步  .eq(0)  //選中第一個h3元素  .html(‘World‘);  //將它的內容改為World  

4.元素的取值和賦值

　　jQuery使用同一個函數,來完成取值(getter)和賦值(setter)。到底是取值還是賦值,由函數的參數決定。

$(‘h1‘).html();  //html()沒有參數,表示取出h1的值 $(‘h1‘).html(‘Hello‘);  //html()有參數Hello,表示對h1進行賦值  //常見的取值和賦值函數如下：.html()  .text()  //取出或設定text內容  .attr()  //取出或設定某個屬性的值  .width()  //取出或設定某個元素的寬度  .height()  //取出或設定某個元素的高度  .val()  //取出或設定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),不必選中元素,就可以直接使用。
　　它本質上就是定義在jQuery建構函式上的方法,即jQuery.method(),就像javascript的原生函數那樣,所以可以直接使用。而那些操作元素的方法,是定義在建構函式的prototype對象上的方法,即jQuery.prototype.method(),所以必鬚生成執行個體(即選中元素)後使用。

　　常用的工具方法有以下幾種：

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

8.實踐操作

　　jQuery可以對網頁元素繫結事件。根據不同的事件,運行相應的函數。

$(‘p‘).click(function(){  　　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‘， //同時綁定click和change事件  function(){  　　alert(‘Hello‘);  }  );

　　如果你只想讓事件運行一次,這時可以使用.one()方法。

$("p").one("click"， function(){  　　alert("Hello");  //只運行一次,以後的點擊不會運行  });

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

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

　　所有的事件處理函數,都可以接受一個事件對象(event object)作為參數,比如下面例子中的e:

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

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

event.pageX  //事件發生時,滑鼠距離網頁左上方的水平距離event.pageY  //事件發生時,滑鼠距離網頁左上方的垂直距離 event.type  //事件的類型(比如click)event.which  //按下了哪一個鍵event.data  //在事件對象上綁定資料,然後傳入事件處理函數event.target  //事件針對的網頁元素event.preventDefault()  //阻止事件的預設行為(比如點選連結,會自動開啟新頁面)event.stopPropagation()  //停止事件向上層元素冒泡

　　在事件處理函數中,可以用this關鍵字,返回事件針對的DOM元素:

$(‘a‘).click(function(){      if ($(this).attr(‘href‘).match(‘evil‘)){  //如果確認為有害連結          e.preventDefault();  //阻止開啟          $(this).addClass(‘evil‘);  //加上表示有害的class      }  });    

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

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

9.特殊效果

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

$(‘h1‘).show();  //展現一個h1標題

　　常用的特殊效果如下:

.fadeIn()  //淡入.fadeOut()  //淡出.fadeTo()  //調整透明度.hide()  //隱藏元素.show()  //顯示元素.slideDown()  //向下展開.slideUp()  //向上捲起.slideToggle()  //依次展開或捲起某個元素.toggle()  //依次展示或隱藏某個元素

　　除了.show()和.hide(),所有其他特效的預設執行時間都是400ms(毫秒),但是你可以改變這個設定。

$(‘h1‘).fadeIn(300);  //300毫秒內淡入  $(‘h1‘).fadeOut(‘slow‘);  //緩慢地淡出

　　在特效結束後,可以指定執行某個函數。

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

　　更複雜的特效,可以用.animate()自訂。

$(‘div‘).animate(  {  left : "+=50"，  //不斷右移  opacity : 0.25   //指定透明度  },300,  // 期間  function(){     alert(‘done!‘);  //回呼函數});

 

.stop()和.delay()用來停止或延緩特效的執行。$.fx.off如果設定為true,則關閉所有網頁特效。

 

jQuery用法總結