1、選擇網頁元素javascript
2、改變結果集html
3、鏈式操做java
4、元素的操做:取值和賦值數組
5、元素的操做:移動瀏覽器
6、元素的操做:複製、刪除和建立app
7、工具方法ide
8、事件操做函數
9、特殊效果工具
1、選擇網頁元素動畫
jQuery的基本設計和主要用法,就是"選擇某個網頁元素,而後對其進行某種操做"。這是它區別於其餘函數庫的根本特色。
使用jQuery的第一步,每每就是將一個選擇表達式,放進構造函數jQuery()(簡寫爲$),而後獲得被選中的元素。
選擇表達式能夠是CSS選擇器:
$(document) //選擇整個文檔對象 $('#myId') //選擇ID爲myId的網頁元素 $('div.myClass') // 選擇class爲myClass的div元素 $('input[name=first]') // 選擇name屬性等於first的input元素 |
也能夠是jQuery特有的表達式:
$('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對象,因此不一樣操做能夠連在一塊兒。
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() 取出或設置html內容 .text() 取出或設置text內容 .attr() 取出或設置某個屬性的值 .width() 取出或設置某個元素的寬度 .height() 取出或設置某個元素的高度 .val() 取出某個表單元素的值 |
須要注意的是,若是結果集包含多個元素,那麼賦值的時候,將對其中全部的元素賦值;取值的時候,則是隻取出第一個元素的值(.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>'); |
7、工具方法
除了對選中的元素進行操做之外,jQuery還提供一些工具方法(utility),沒必要選中元素,就能夠直接使用。
若是你懂得Javascript語言的繼承原理, 那麼就能理解工具方法的實質。它是定義在jQuery構造函數上的方法,即jQuery.method(),因此能夠直接使用。而那些操做元素的方法,是 定義在構造函數的prototype對象上的方法,即jQuery.prototype.method(),因此必須生成實例(即選中元素)後使用。若是 不理解這種區別,問題也不大,只要把工具方法理解成,是像javascript原生函數那樣,能夠直接使用的方法就好了。
經常使用的工具方法有如下幾種:
$.trim() 去除字符串兩端的空格。 |
8、事件操做
jQuery能夠對網頁元素綁定事件。根據不一樣的事件,運行相應的函數。
$('p').click(function(){ |
目前,jQuery主要支持如下事件:
.blur() 表單元素失去焦點。 |
以上這些事件在jQuery內部,都是.bind()的便捷方式。使用.bind()能夠更靈活地控制事件,好比爲多個事件綁定同一個函數:
$('input').bind( |
有時,你只想讓事件運行一次,這時可使用.one()方法。
$("p").one("click", function() { |
.unbind()用來解除事件綁定。
$('p').unbind('click'); |
全部的事件處理函數,均可以接受一個事件對象(event object)做爲參數,好比下面例子中的e:
$("p").click(function(e) { |
這個事件對象有一些頗有用的屬性和方法:
event.pageX 事件發生時,鼠標距離網頁左上角的水平距離 |
在事件處理函數中,能夠用this關鍵字,返回事件針對的DOM元素:
$('a').click(function() { if ($(this).attr('href').match('evil')) { //若是確認爲有害連接 |
有兩種方法,能夠自動觸發一個事件。一種是直接使用事件函數,另外一種是使用.trigger()或.triggerHandler()。
$('a').click(); |
9、特殊效果
jQuery容許對象呈現某些特殊效果。
$('h1').show(); //展示一個h1標題 |
經常使用的特殊效果以下:
.fadeIn() 淡入 |
除了.show()和.hide(),全部其餘特效的默認執行時間都是400ms(毫秒),可是你能夠改變這個設置。
$('h1').fadeIn(300); // 300毫秒內淡入 |
在特效結束後,能夠指定執行某個函數。
$('p').fadeOut(300, function() { $(this).remove(); }); |
更復雜的特效,能夠用.animate()自定義。
$('div').animate( |
.stop()和.delay()用來中止或延緩特效的執行。
$.fx.off若是設置爲true,則關閉全部網頁特效。