jQuery 設計思想

原文引用:http://www。ruanyifeng。com/blog/2011/07/jquery_fundamentals。html

jquery 是目前使用最廣泛的JavaScript函式庫。

選擇網頁元素

jQuery的基本設計思想和主要用法,就是“

選擇某個網頁元素,然後對其進行某種操作

”。這是它區別於其他JavaScript庫的根本特點。

css選擇器

$(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元素

改變結果集

jquery設計思想2,就

是特供各種強大的過濾器

,對結果集進行篩選,縮小選擇結果。

$(‘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元素$(‘div’)。next(‘p’); //選擇div元素後面的第一個p元素$(‘div’)。parent(); //選擇div元素的父元素$(‘div’)。closest(‘form’); //選擇離div最近的那個form父元素 **$(‘div’)。children(); //選擇div的所有子元素$(‘div’)。siblings(); //選擇div的同級元素

鏈式操作

最終選中網頁元素以後,可以對它進行一系列操作,並且所有的操作可以連線在一起,以鏈條的形式寫出來,比如:

$(‘div’)。find(‘h3’)。eq(2)。html(‘Hello’);分解開來,就是下面這樣:$(‘div’) //找到div元素 。find(‘h3’) //選擇其中的h3元素 。eq(2) //選擇第3個h3元素 。html(‘Hello’); //將它的內容改為Hello

jquery還提供了

.end()

方法,使得結果集可以後退一步:

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

元素的操作:取值和賦值

操作網頁元素,最常見的需求是取得它們的值,或者對它們進行賦值。

jQuery設計思想之四,就是使用同一個函式,來完成取值(getter)和賦值(setter),即“取值器”與“賦值器”合一。到底是取值還是賦值,由函式的引數決定。

$(‘h1’)。html(); //html()沒有引數,表示取出h1的值$(‘h1’)。html(‘Hello’); //html()有引數Hello,表示對h1進行賦值常見的取值和賦值函式如下: 。html() 取出或設定html內容 。text() 取出或設定text內容 。attr() 取出或設定某個屬性的值 。width() 取出或設定某個元素的寬度 。height() 取出或設定某個元素的高度 。val() 取出某個表單元素的值

需要注意的是,如果結果集包含多個元素,那麼賦值的時候,將對其中所有的元素賦值;取值的時候,則是隻取出第一個元素的值(

。text()

例外,它取出所有元素的text內容)。

元素的操作:移動

假定我們選中了一個div元素,需要把它移動到p元素後面。

//第一種方法是使用。insertAfter(),把div元素移動p元素後面:$(‘div’)。insertAfter($(‘p’));//第二種方法是使用。after(),把p元素加到div元素前面:$(‘p’)。after($(‘div’));區別,第一種返回的是div元素,第二種返回的是p元素。

移動模式的操作方法,一共有四對:

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

元素的操作:複製、刪除和建立

。clone() //複製元素。remove() 和。detach() //刪除元素前者不保留被刪除元素的事件,後者保留,有利於重新插入 文件時使用。。empty() //清空元素內容(但是不刪除該元素)

工具方法

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

事件操作

事件直接繫結在網頁元素zhi shang

。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’);});

也許你也想用這些

$(“p”)。one(“click”, function() {alert(“Hello”); //只執行一次,以後的點選不會執行});$(‘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() 停止事件向上層元素冒泡

特殊效果

。fadeIn() 淡入。fadeOut() 淡出。fadeTo() 調整透明度。hide() 隱藏元素。show() 顯示元素。slideDown() 向下展開。slideUp() 向上捲起。slideToggle() 依次展開或捲起某個元素。toggle() 依次展示或隱藏某個元素 //在特效結束後,可以指定執行某個函式 $(‘p’)。fadeOut(300, function() { $(this)。remove(); });