前端三劍客-07jQuery

介紹

jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。

jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，可以極大地簡化JavaScript編程。它的宗旨就是：「Write less, do more.「

優點

一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面加載速度。

豐富的DOM選擇器,jQuery的選擇器用起來很方便，好比要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再好比要將一個表格的隔行變色，jQuery也是一行代碼搞定。

鏈式表達式。jQuery的鏈式操做能夠把多個操做寫在一行代碼裏，更加簡潔。

事件、樣式、動畫支持。jQuery還簡化了js操做css的代碼，而且代碼的可讀性也比js要強。

Ajax操做支持。jQuery簡化了AJAX操做，後端只需返回一個JSON格式的字符串就能完成與前端的通訊。

跨瀏覽器兼容。jQuery基本兼容瞭如今主流的瀏覽器，不用再爲瀏覽器的兼容問題而傷透腦筋。

插件擴展開發。jQuery有着豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件，而且用jQuery插件作出來的效果很炫，而且能夠根據本身須要去改寫和封裝插件，簡單實用。

jQuery對象

查找標籤

基本選擇器

1. id選擇器

   • 開頭對應id $("#id")

2. 標籤選擇器
   • 直接標籤 $("input")
3. class選擇器
   • .開頭對應類 $(".error")
4. 配合使用
   • $("div.c1")

全部元素選擇器

• $("*")

組合選擇器

• $("#id, .className, tagName")

層級選擇器

1. $("x y"); // x的全部後代y（子子孫孫）
2. $("x > y"); // x的全部兒子y（兒子）
3. $("x + y"); // 找到全部緊挨在x後面的y
4. $("x ~ y"); // x以後全部的兄弟y

基本篩選器

• :first // 第一個
• :last // 最後一個
• :eq(index) // 索引等於index的那個元素
• :even // 匹配全部索引值爲偶數的元素，從 0 開始計數
• :odd // 匹配全部索引值爲奇數的元素，從 0 開始計數
• :gt(index) // 匹配全部大於給定索引值的元素
• :lt(index) // 匹配全部小於給定索引值的元素
• :not(元素選擇器) // 移除全部知足not條件的標籤
• :has(元素選擇器) // 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

屬性選擇器

• [attribute]
• [attribute=value]// 屬性等於
• [attribute!=value]// 屬性不等於

表單篩選器

• :text
• :password
• :file
• :radio
• :checkbox
• :submit
• :reset
• :button

表單對象屬性

• :enabled
• :disabled
• :checked
• :selected

篩選器方法

下一個元素：

• $("#id").next()
• $("#id").nextAll()
• $("#id").nextUntil("#i2")

上一個元素：

• $("#id").prev()
• $("#id").prevAll()
• $("#id").prevUntil("#i2")

父類元素

• $("#id").parent()
• $("#id").parents() // 查找當前元素的全部的父輩元素
• $("#id").parentsUntil()

兒子和兄弟元素

• $("#id").children(); // 兒子們
• $("#id").siblings(); // 兄弟們

篩選

• $("div").filter(".c1") // 從結果集中過濾出有c1樣式類的
• .first() // 獲取匹配的第一個元素
• .last() // 獲取匹配的最後一個元素
• .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
• .has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
• .eq() // 索引值等於指定值的元素

操做標籤

樣式類

• addClass(); // 添加指定的CSS類名。
• removeClass(); // 移除指定的CSS類名。
• hasClass(); // 判斷樣式存不存在
• toggleClass(); // 切換CSS類名，若是有就移除，若是沒有就添加。

CSS

• css("color","red")

位置操做

• offset() // 獲取匹配元素在當前窗口的相對偏移或設置元素位置

• position() // 獲取匹配元素相對父元素的偏移

• scrollTop() // 獲取匹配元素相對滾動條頂部的偏移

• scrollLeft() // 獲取匹配元素相對滾動條左側的偏移

尺寸

• height()

• width()

• innerHeight()

• innerWidth()

• outerHeight()

• outerWidth()

文本操做

HTML代碼

• html() // 取得第一個匹配元素的html內容
• html(val) // 設置全部匹配元素的html內容

文本值

• text() // 取得全部匹配元素的內容
• text(val) // 設置全部匹配元素的內容

值

• val() // 取得第一個匹配元素的當前值
• val(val) // 設置全部匹配元素的值
• val([val1, val2]) // 設置多選的checkbox、多選select的值

設置值

<input type="checkbox" value="basketball" name="hobby">籃球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

• $("[name='hobby']").val(['basketball', 'football']);
• $("#s1").val(["1", "2"])

屬性操做

addr用於ID等或自定義屬性

• attr(attrName) // 返回第一個匹配元素的屬性值
• attr(attrName, attrValue) // 爲全部匹配元素設置一個屬性值
• attr({k1: v1, k2:v2}) // 爲全部匹配元素設置多個屬性值
• removeAttr() // 從每個匹配的元素中刪除一個屬性

prop用於checkbox和radio

• prop() // 獲取屬性
• removeProp() // 移除屬性

總結:

對於標籤上有的能看到的屬性和自定義屬性都用attr

對於返回布爾值的好比checkbox、radio和option的是否被選中都用prop。

文檔處理

添加到指定元素內部的後面

• $(A).append(B) // 把B追加到A
• $(A).appendTo(B) // 把A追加到B

添加到指定元素內部的前面

• $(A).prepend(B) // 把B前置到A
• $(A).prependTo(B) // 把A前置到B

添加到指定元素外部的後面

• $(A).after(B) // 把B放到A的後面
• $(A).insertAfter(B) // 把A放到B的後面

添加到指定元素外部的前面

• $(A).after(B) // 把B放到A的後面
• $(A).insertAfter(B) // 把A放到B的後面

移除和清空元素

• remove() // 從DOM中刪除全部匹配的元素。
• empty() // 刪除匹配的元素集合中全部的子節點。

替換

• replaceWith()
• replaceAll()

克隆

• clone() // 無參數,單純複製樣式
• clone(true) // true參數, 全複製(包括綁定事件等)

事件

經常使用事件

• click(function(){...})
• hover(function(){...})
• blur(function(){...})
• focus(function(){...})
• change(function(){...})
• keyup(function(){...})

事件綁定

• .on( events [, selector ],function(){})
  列如: $("body").on("click","button",function(){}) 這邊意思爲button的點擊事件 委託給了body去執行

移除事件

• .off( events [, selector ][,function(){}])

阻止後續事件執行

1. return false; // 常見阻止表單提交等
2. e.preventDefault();

阻止事件冒泡

• e.stopPropagation();
• return false

頁面載入

當DOM載入就緒能夠查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數，由於它能夠極大地提升web應用程序的響應速度。

$(document).ready(function(){
// 在這裏寫你的JS代碼...
})

簡寫:

$(function(){
// 你在這裏寫你的代碼
})

與window.onload的區別

• window.onload()函數有覆蓋現象，必須等待着圖片資源加載完成以後才能調用
• jQuery的這個入口函數沒有函數覆蓋現象，文檔加載完成以後就能夠調用（建議使用此函數）

事件委託

事件委託是經過事件冒泡的原理，利用父標籤去捕獲子標籤的事件。

示例：

表格中每一行的編輯和刪除按鈕都能觸發相應的事件。

$("table").on("click", ".delete", function () {
  // 刪除按鈕綁定的事件
})

動畫效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定義（瞭解便可）
animate(p,[s],[e],[fn])

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

一個通用的迭代函數，它能夠用來無縫迭代對象和數組。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循環的具體元素。
})


輸出：

010
120
230
340

.each(function(index, Element))：

描述：遍歷一個jQuery對象，爲每一個匹配元素執行一個函數。

.each() 方法用來迭代jQuery對象中的每個DOM元素。每次回調函數執行時，會傳遞當前循環次數做爲參數(從0開始計數)。因爲回調函數是在當前DOM元素爲上下文的語境中觸發的，因此關鍵字 this 老是指向這個元素。

// 爲每個li標籤添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素 - 被稱爲隱式迭代的過程。當這種狀況發生時，它一般不須要顯式地循環的 .each()方法：

也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就能夠了：

$("li").addClass("c1");  // 對全部標籤作統一操做

注意：

在遍歷過程當中可使用 return false提早結束each循環。

data

在匹配的元素集合中的全部元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。

.data(key, value):

描述：在匹配的元素上存儲任意相關數據。

$("div").data("k",100);//給全部div標籤都保存一個名爲k，值爲100

.data(key):

描述: 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值—經過 .data(name, value)或 HTML5 data-*屬性設置。

$("div").data("k");//返回第一個div標籤中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的數據，不加key參數表示移除全部保存的數據。

$("div").removeData("k");  //移除元素上存放k對應的數據

插件

jQuery.extend(object)

jQuery的命名空間下添加新的功能。多用於插件開發者向 jQuery 中添加新函數時使用。