jQuery介紹（下篇）

jQuery介紹（下篇）

今天接着昨天的來介紹jQuery的相關屬性和用法。

 

一：jQuery操做DOM

 

1. jQuery操做屬性

  1.1設置屬性

Ø1.1.1 設置單個屬性

//第一個參數：須要設置的屬性名

//第二個參數：對應的屬性值

attr(name, value);

//用法舉例

$(「img」).attr(「title」,」美女」);

$(「img」).attr(「alt」,「加載失敗」);

Ø1.1.2 設置多個屬性

//參數是一個對象，包含了須要設置的屬性名和屬性值

attr(obj)

//用法舉例

$("img").attr({

    title:"美女",

    alt:"加載失敗",

    style:"opacity:  .5"

});

Ø1.2獲取屬性

//傳入須要獲取的屬性名稱，返回對應的屬性值

attr(name)

//用法舉例

var oTitle = $("img").attr("title");

alert(oTitle);

注意：

1.獲取屬性時，只會獲取到第一個元素對應的屬性，與css方法同樣

2.獲取屬性時，若是該屬性不存在，那麼會返回undefined

Ø1.3移除屬性

//參數：須要移除的屬性名，若是傳空，那麼不會有任何操做，注意，並非移除全部的屬性。區分removeClass。

removeAttr(name);

//用法舉例

$("img").removeAttr("title");

Øprop

注意：在jQuery1.6以後，對於checked、selected、disable這類boolean類型的屬性來講，若是使用attr方法獲取屬性值，獲得的不是true和false，而是checked以及undefined。，使用prop方法來獲取或者設置checked、selected、disable這類的值。prop方法使用跟attr方法同樣。

//設置屬性

$(「:checked」).prop(「checked」,true);

//獲取屬性

$(「:checked」).prop(「checked」);//返回true或者false

2.jQuery操做值與內容

Ø2.1val方法

val方法用於設置和獲取表單元素的值，例如input、select、textarea的值

//設置值

$(「#name」).val(「張三」);

//獲取值

$(「#name」).val();

Ø2.2html方法

//設置內容

$(「div」).html(「<span>這是一段內容</span>」);

//獲取內容

$(「div」).html()

Ø2.3text方法

//設置內容

$(「div」).text(「<span>這是一段內容</span>」);

//獲取內容

$(「div」).text()

注：html方法與text方法的區別：

html方法會識別html標籤，text方法會那內容直接當成字符串，並不會識別html標籤。

3.jQuery操做尺寸

Ø3.1height

設置或者獲取高度

//帶參數表示設置高度

$(「img」).height(200);

//不帶參數獲取高度

$(「img」).height();

返回值是number類型（好比200），而使用$(「img」).css(「width」)返回的是字符串（好比200px）

Ø3.2width

設置獲取寬度，與高度操做功能同樣

//帶參數表示設置寬度

$(「img」).width(200);

//不帶參數獲取寬度

$(「img」).width();

4. jQuery操做座標值

Ø4.1  offset

設置或者獲取元素相對於文檔document的位置。

//設置位置

$(selector).offset({left:100, top: 150});

//獲取位置

$(selector).offset();

注意：使用offset操做，若是元素沒有設置定位(默認position:static)，則會把position修改成relative.會修改left、top

Ø4.2position

獲取相對於其最近的有定位的父元素的位置。

// 獲取，返回值爲對象：{left:num, top:num}

$(selector).position();

注意：position方法只能獲取，不能設置

Ø4.3scrollTop

設置或者獲取垂直滾動條的位置

// 有參數表示設置偏移，參數爲數值類型

$(selector).scrollTop(100);

// 無參數表示獲取偏移

$(selector).scrollTop();

Ø4.4scrollLeft

設置或者獲取水平滾動條的位置

// 有參數表示設置偏移，參數爲數值類型

$(selector).scrollLeft(100);

// 無參數表示獲取偏移

$(selector).scrollLeft();

 

二：jQuery事件機制

 

    jQuery對JavaScript事件進行了封裝，增長並擴展了事件處理機制。jQuery不只提供了更加優雅的事件處理語法，並且極大的加強了事件的處理能力。

1.  jQuery事件的發展歷程

簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定(更經常使用)

Ø1.1簡單事件綁定

click(handler) 單擊事件

mouseenter(handler) 鼠標進入事件

mouseleave(handler) 鼠標離開事件

scroll(handler) 滾動事件

缺點：一次只能綁定一個事件

Ø1.2  bind事件綁定

不推薦使用，jQuery1.7版本後被on取代

//綁定多個事件

//第一個參數：事件類型

//第二個參數：事件處理程序

$("p").bind("click mouseenter", function(){

    //事件響應方法

});

缺點：不支持動態建立出來的元素綁定事件。

Ø1.3 delegate事件綁定

支持動態綁定事件

// 第一個參數：selector，要綁定事件的元素

// 第二個參數：事件類型

// 第三個參數：事件處理函數

$(".parentBox").delegate("p", "click", function(){

    //爲 .parentBox下面的全部的p標籤綁定事件

});

注意：爲何delegate支持動態綁定事件？緣由是事件冒泡機制。由於事件是綁定到父元素上的，由子元素觸發。

Ø1.4  on事件綁定

jQuery1.7以後，jQuery用on統一了全部事件的處理方法。

   on事件綁定

優點：最現代的方式，兼容zepto(移動端相似jQuery的一個庫)，強烈建議使用。

// 第一個參數：events，綁定事件的名稱能夠是由空格分隔的多個事件（標準事件或者自定義事件）

// 第二個參數：selector, 執行事件的後代元素（可選），若是沒有後代元素，那麼事件將由本身來執行。

// 第三個參數：data，傳遞給處理函數的數據，事件觸發的時候經過event.data來使用（不常使用）

// 第四個參數：handler，事件處理函數

$(selector).on(events[,selector][,data],handler);

 

例子：

// 表示給$(selector)綁定代理事件，當必須是它的內部元素span才能觸發這個事件，支持動態綁定

$(selector).on( "click",「span」, function() {});

// 表示給$(selector)綁定事件，而且由本身觸發，不支持動態綁定（不使用代理）。

$(selector).on( "click", function() {});

 

2. 事件解綁

Øunbind() 方式（不用）

做用：解綁事件

$(selector).unbind(); //解綁全部的事件

$(selector).unbind(「click」); //解綁指定的事件

Øundelegate() 方式（不用）

做用：解綁事件

$( selector ).undelegate(); //解綁全部的delegate事件

$( selector).undelegate( 「click」 ); //解綁全部的click事件

Øoff方式（經常使用）

做用：解綁事件

// 解綁匹配元素的全部事件

$(selector).off();

// 解綁匹配元素的全部click事件

$(selector).off(「click」);

// 解綁全部代理的click事件，元素自己的事件不會被解綁

$(selector).off( 「click」, 「**」 );

3. 事件觸發

簡單事件觸發

$(selector).click(); //觸發 click事件

trigger方法觸發事件

$(selector).trigger(「click」);

triggerHandler觸發 事件響應方法，不觸發瀏覽器行爲

好比:文本框得到焦點的默認行爲

$(selector).triggerHandler(「focus」);

 

4. jQuery事件對象（）

對象屬性 解釋

event.type 事件類型

event.data 存儲綁定事件時傳遞的附加數據

event.target 點了誰就是誰

event.currentTarget 當前DOM元素，等同於this

event.delegateTarget 代理對象

screenX和screenY 對應屏幕最左上角的值

offsetX和offsetY 點擊的位置距離元素的左上角的位置

clientX和clientY 距離頁面左上角的位置（忽視滾動條）

pageX和pageY 距離頁面最頂部的左上角的位置（會計算滾動條的距離）

event.switch 鼠標按鍵類型，1=鼠標左鍵 2=鼠標中鍵 3=鼠標右鍵

event.keyCode 按下的鍵盤代碼

event.stopPropagation() 阻止事件冒泡行爲

event.preventDefault() 阻止瀏覽器默認行爲

 

三：jQuery補充

 

1. 鏈式編程

鏈式編程原理：return this;

一般狀況下，只有設置操做才能把鏈式編程延續下去。由於獲取操做的時候，會返回獲取到的相應的值，沒法返回 this。

 

end(); // 篩選選擇器會改變jQuery對象的DOM對象，想要回復到上一次的狀態，而且返回匹配元素以前的狀態。

2.  隱式迭代

隱式迭代的意思是：在方法的內部會爲匹配到的全部元素進行循環遍歷，執行相應的方法；而不用咱們再進行循環，簡化咱們的操做，方便咱們調用。

若是獲取的是多元素的值，大部分狀況下返回的是第一個元素的值。

 

3.  each方法

有了隱式迭代，爲何還要使用each函數遍歷？

大部分狀況下是不須要使用each方法的，由於jQuery的隱式迭代特性。

若是要對每一個元素作不一樣的處理，這時候就須要用each方法了。

 

做用：遍歷jQuery對象集合，爲每一個匹配的元素執行一個函數

// 參數一表示當前元素在全部匹配元素中的索引號

// 參數二表示當前元素（DOM對象）

$(selector).each(function(index,element){});

 

4. 多庫共存

咱們知道jQuery佔用了$這個標識符，若是引用的其餘庫也用到$這個標識符，這時候爲了保證每一個庫都能正常使用，這時候就存在了多庫共存的問題。

後引入的$的會覆蓋掉先引入的庫中的$。

$ === jQuery

解決辦法：

jQuery的$和jQuery是兩個相同的變量，所以遇到多庫共存的時候，可讓jquery交出$符的控制權，這個時候仍是可使用$.

console.log($);//function(selector, context){}

 

//$.noConflict();//釋放$的控制權

console.log($);{name:」zhangsan」,age:12}

 

jQuery(function () {

jQuery("div").html("我不是div的內容");

});

 

5.  jQuery插件機制

  5.1第三方插件

jQuery有着豐富的插件，使用這些插件能給jQuery提供一些額外的功能。

如：jquery.color.js

animate不支持顏色的漸變，可是使用了jquery.color.js後，就能夠支持顏色的漸變了。

如何使用第三方插件：

1.引入jQuery文件

2.引入插件

3.使用插件

 5.2製做插件

全局jQuery函數擴展方法

$.pluginName = function() {};

 

jQuery對象擴展方法

$.fn. pluginName = function() {};

 5.3jQuery UI

jQueryUI專指由jQuery官方維護的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其餘教程：jQueryUI教程

基本使用:

1.引入jQueryUI的樣式文件

2.引入jQuery

3.引入jQueryUI的js文件

4.使用jQueryUI功能

 

經過jQuery(上篇)和jQuery(下篇)的詳細介紹，不知你們是否會熟練使用jQuery了呢？歡迎指正。