jQuery第三天(特殊屬性操做、事件機制、補充、插件)

03.jQuery特殊屬性操做

val方法

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

//設置值
$("#name").val(「張三」);
//獲取值
$("#name").val();
複製代碼

html方法與text方法

html方法至關於innerHTML text方法至關於innerText

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

//設置內容
$(「div」).text(「<span>這是一段內容</span>」);
//獲取內容
$(「div」).text()
複製代碼

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

width方法與height方法

設置或者獲取高度(相比css方法，獲取到的是數字)

//帶參數表示設置高度
$(「img」).height(200);
//不帶參數獲取高度
$(「img」).height();

複製代碼

獲取網頁的可視區寬高

//獲取可視區寬度
$(window).width();
//獲取可視區高度
$(window).height();
複製代碼

擴展：獲取的樣式值 width()---width
innerWidth()---padding + width
outerWidth()---padding + width + border
outerWidth(true)---padding + width + border + margin

scrollTop與scrollLeft

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

//獲取頁面被捲曲的高度
$(window).scrollTop();
//獲取頁面被捲曲的寬度
$(window).scrollLeft();
複製代碼

【案例：03-06固定導航案例】 【案例：03-07小火箭返航案例】

offset方法與position方法

offset方法獲取元素距離document的位置，position方法獲取的是元素距離有定位的父元素的位置。

//獲取元素相對於document的位置,返回值爲對象：{left:100, top:100}
$(selector).offset();
//獲取相對於其最近的有定位的父元素的位置。
$(selector).position();
複製代碼

jQuery事件機制

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

jQuery事件發展歷程(瞭解)

簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定(推薦)

簡單事件註冊

click(handler)			單擊事件
mouseenter(handler)		鼠標進入事件
mouseleave(handler)		鼠標離開事件
複製代碼

缺點：不能同時註冊多個事件

bind方式註冊事件

//第一個參數：事件類型
//第二個參數：事件處理程序
$("p").bind("click mouseenter", function(){
    //事件響應方法
});
複製代碼

缺點：不支持動態事件綁定

• delegate註冊委託事件 給父元素註冊委託事件，最終仍是由子元素執行（利用了事件冒泡）

//給類爲.parentBox的元素註冊一個委託事件，由p執行
// 第一個參數：selector，要綁定事件的元素
// 第二個參數：事件類型
// 第三個參數：事件處理函數
$(".parentBox").delegate("p", "click", function(){
    //爲 .parentBox下面的全部的p標籤綁定事件
});
複製代碼

缺點：只能註冊委託事件，所以註冊事件須要記的方法太多了

on註冊事件(重點)

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

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

on註冊簡單事件

// 表示給$(selector)綁定事件，而且由本身觸發，不支持動態綁定。
$(selector).on( "click", function() {});
複製代碼

on註冊委託事件

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

複製代碼

on註冊事件的語法：

// 第一個參數：events，綁定事件的名稱能夠是由空格分隔的多個事件（標準事件或者自定義事件）
// 第二個參數：selector, 執行事件的後代元素（可選），若是沒有後代元素，那麼事件將有本身執行。
// 第三個參數：data，傳遞給處理函數的數據，事件觸發的時候經過event.data來使用（不常使用）
// 第四個參數：handler，事件處理函數
$(selector).on(events[,selector][,data],handler);

複製代碼

事件執行順序的問題：（子元素自身事件，父元素委託事件，父元素自身事件） 執行子元素自身事件--->父元素委託事件--->父元素自身事件

事件解綁

unbind方式（不用）

$(selector).unbind(); //解綁全部的事件
$(selector).unbind("click"); //解綁指定的事件
複製代碼

undelegate方式（不用）

$( selector ).undelegate(); //解綁全部的delegate事件
$( selector).undelegate( 「click」 ); //解綁全部的click事件
複製代碼

off方式（推薦）

// 解綁匹配元素的全部事件
$(selector).off();
// 解綁匹配元素的全部 click事件
$(selector).off("click");
複製代碼

觸發事件

$(selector).click(); //觸發 click事件
$(selector).trigger("click");
複製代碼

jQuery事件對象

jQuery事件對象其實就是js事件對象的一個封裝，處理了兼容性。

//screenX和screenY 對應屏幕最左上角的值
//clientX和clientY 距離頁面左上角的位置（忽視滾動條）
//pageX和pageY 距離頁面最頂部的左上角的位置（會計算滾動條的距離）

//event.keyCode 按下的鍵盤代碼
//event.data 存儲綁定事件時傳遞的附加數據

//event.stopPropagation() 阻止事件冒泡行爲
//event.preventDefault() 阻止瀏覽器默認行爲
//return false:既能阻止事件冒泡，又能阻止瀏覽器默認行爲。
複製代碼

【案例：03-16鋼琴案例.html】

jQuery補充知識點

delay

設置一個延時來推遲執行隊列中以後的項目
例：$("#foo").slideUp(300).delay(800).fadeIn(400);//在slideUp() 和 fadeIn()之間延時800毫秒

節流閥

定義一個flag，控制事件觸發次數

鏈式編程

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

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

【案例：03-18五星評分案例.html】

隱式迭代

描述：在方法的內部會爲匹配到的全部元素進行循環遍歷，執行相應的方法，而不用咱們再進行循環，簡化咱們的操做，方便咱們調用 若是獲取的是多元素的值，大部分狀況返回的是第一個元素對應的值。

each方法

jQuery的隱式迭代會對全部的DOM對象設置相同的值，可是若是咱們須要給每個對象設置不一樣的值的時候，就須要本身進行迭代了。

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

// 參數一表示當前元素在全部匹配元素中的索引號
// 參數二表示當前元素（DOM對象）
$(selector).each(function(index,element){});
複製代碼

多庫共存

jQuery使用衝突時，jQuery能夠釋放$符的控制權.

var c = $.noConflict();//釋放$的控制權,而且把$的能力給了c
複製代碼

---

04.插件

經常使用插件

插件：jquery不可能包含全部的功能，咱們能夠經過插件擴展jquery的功能。

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

jquery.color.js

顏色最好用十六進制#000000 animate不支持顏色的漸變，可是使用了jquery.color.js後，就能夠支持顏色的漸變了。

使用插件的步驟

1. 引入jQuery文件
2. 引入插件（若是有用到css的話，須要引入css）
3. 使用插件

複製代碼

jquery.lazyload.js

懶加載插件

How to Use?

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

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

$("img.lazy").lazyload();
複製代碼

jquery.ui.js插件

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

官方API：api.jqueryui.com/category/al…

其餘教程：jQueryUI教程

基本使用:

2.	1.	引入jQueryUI的樣式文件
2.	引入jQuery
3.	引入jQueryUI的js文件
4.	使用jQueryUI功能
複製代碼

【案例：04-01-jqui新聞模塊】

製做jquery插件

原理：jquery插件其實說白了就是給jquery對象增長一個新的方法，讓jquery對象擁有某一個功能。

//經過給$.fn添加方法就可以擴展jquery對象
$.fn. pluginName = function() {};
複製代碼

【案例：04-02-手風琴插件】