前端基礎之jQuery

前端基礎之jQuery

1、jQuery介紹

1. jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
2. jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，可以極大地簡化JavaScript編程。它的宗旨就是：「Write less, do more.「

2、jQuery的優點

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

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

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

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

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

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

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

   
   

3、jQuery內容

1. 選擇器
2. 篩選器
3. 樣式操做
4. 文本操做
5. 屬性操做
6. 文檔處理
7. 事件
8. 動畫效果
9. 插件
10. each、data、Ajax

下載連接：jQuery官網

中文文檔：jQuery AP中文文檔

4、jQuery版本

• 1.x：兼容IE678,使用最爲普遍的，官方只作BUG維護，功能再也不新增。所以通常項目來講，使用1.x版本就能夠了，最終版本：1.12.4 (2016年5月20日)
• 2.x：不兼容IE678，不多有人使用，官方只作BUG維護，功能再也不新增。若是不考慮兼容低版本的瀏覽器可使用2.x，最終版本：2.2.4 (2016年5月20日)
• 3.x：不兼容IE678，只支持最新的瀏覽器。須要注意的是不少老的jQuery插件不支持3.x版。目前該版本是官方主要更新維護的版本。

維護IE678是一件讓人頭疼的事情，通常咱們都會額外加載一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減小，PC端用戶已經逐步被移動端用戶所取代，若是沒有特殊要求的話，通常都會選擇放棄對678的支持。

5、jQuery對象

jQuery對象就是經過jQuery包裝DOM對象後產生的對象。jQuery對象是 jQuery獨有的。若是一個對象是 jQuery對象，那麼它就可使用jQuery裏的方法：例如$(「#i1」).html()。

$("#i1").html()的意思是：獲取id值爲 i1的元素的html代碼。其中 html()是jQuery裏的方法。

至關於： document.getElementById("i1").innerHTML;

雖然 jQuery對象是包裝 DOM對象後產生的，可是 jQuery對象沒法使用 DOM對象的任何方法，同理 DOM對象也沒不能使用 jQuery裏的方法。

一個約定，咱們在聲明一個jQuery對象變量的時候在變量名前面加上$：

var $variable = jQuery對象
var variable = DOM對象
$variable[0]//jQuery對象轉成DOM對象

拿上面那個例子舉例，jQuery對象和DOM對象的使用：

$("#i1").html();//jQuery對象可使用jQuery的方法
$("#i1")[0].innerHTML;// DOM對象使用DOM的方法

6、查找標籤

1. 基本選擇器

   • id選擇器：

     $("#id")

   • 標籤選擇器

     $("tagName")

   • class選擇器：

     $(".className")

   • 配合使用：

     $("div.c1")  // 找到有c1 class類的div標籤

   • 全部元素選擇器：

     $("*")

   • 組合選擇器：

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

   
   

2. 層級選擇器

   x和y能夠爲任意選擇器

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

   
   

3. 基本篩選器

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

   例子：

   $("div:has(h1)")// 找到全部後代中有h1標籤的div標籤
   $("div:has(.c1)")// 找到全部後代中有c1樣式類的div標籤
   $("li:not(.c1)")// 找到全部不包含c1樣式類的li標籤
   $("li:not(:has(a))")// 找到全部後代中不含a標籤的li標籤

   
   

4. 屬性選擇器

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

   例子：

   // 示例
   <input type="text">
   <input type="password">
   <input type="checkbox">
   $("input[type='checkbox']");// 取到checkbox類型的input標籤
   $("input[type!='text']");// 取到類型不是text的input標籤

   
   

5. 表單篩選器

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

   表單對象屬性:

   :enabled
   :disabled
   :checked
   :selected

   例子：

   找到可用的input標籤

   <form>
     <input name="email" disabled="disabled" />
     <input name="id" />
   </form>
   
   $("input:enabled")  // 找到可用的input標籤

   找到被選中的option：

   <select id="s1">
     <option value="beijing">北京市</option>
     <option value="shanghai">上海市</option>
     <option selected value="guangzhou">廣州市</option>
     <option value="shenzhen">深圳市</option>
   </select>
   
   $(":selected")  // 找到全部被選中的option

   
   

7、篩選器方法

下一個元素：

$("#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").find("p")

等價於$("div p")

篩選

篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。

$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的

等價於 $("div.c1")

補充：

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

8、操做標籤

1. 樣式操做

   樣式類

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

   示例：

   $("p").css("color", "red"); //將全部p標籤的字體設置爲紅色

   
   

2. 位置操做

   offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置
   position()// 獲取匹配元素相對父元素的偏移
   scrollTop()// 獲取匹配元素相對滾動條頂部的偏移
   scrollLeft()// 獲取匹配元素相對滾動條左側的偏移

   .offset()方法容許咱們檢索一個元素相對於文檔（document）的當前位置。

   和 .position()的差異在於： .position()是相對於相對於父級元素的位移。

   例子：返回頂部

   <script>
     $(window).scroll(function () {
       if ($(window).scrollTop() > 100) {
         $("#b2").removeClass("hide");
       }else {
         $("#b2").addClass("hide");
       }
     });
     $("#b2").on("click", function () {
       $(window).scrollTop(0);
     })
   </script>

   
   

3. 尺寸

   height()
   width()
   innerHeight()
   innerWidth()
   outerHeight()
   outerWidth()

   
   

4. 文本操做

   HTML代碼：

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

   文本值：

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

   值：

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

   示例：

   獲取被選中的checkbox或radio的值：

   <label for="c1">女</label>
   <input name="gender" id="c1" type="radio" value="0">
   <label for="c2">男</label>
   <input name="gender" id="c2" type="radio" value="1">

   可使用：

   $("input[name='gender']:checked").val()

   
   

5. 屬性操做

   用於ID等或自定義屬性：

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

   用於checkbox和radio：

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

   注意：

   在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操做時會出bug，在3.x版本的jQuery中則沒有這個問題。爲了兼容性，咱們在處理checkbox和radio的時候儘可能使用特定的prop()，不要使用attr("checked", "checked")。

   prop和attr的區別：

   attr全稱attribute(屬性)

   prop全稱property(屬性)

   雖然都是屬性，但他們所指的屬性並不相同，attr所指的屬性是HTML標籤屬性，而prop所指的是DOM對象屬性，能夠認爲attr是顯式的，而prop是隱式的。

   總結：

   1. 對於標籤上有的能看到的屬性和自定義屬性都用attr
   2. 對於返回布爾值的好比checkbox、radio和option的是否被選中都用prop。

   
   

6. 文檔處理

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

   $(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).before(B)// 把B放到A的前面
   $(A).insertBefore(B)// 把A放到B的前面

   移除和清空元素

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

   替換

   replaceWith()
   replaceAll()

   克隆

   clone(true)
   // clone方法加參數true，克隆標籤而且克隆標籤帶的事件
   // clone方法不加參數true，克隆標籤但不克隆標籤帶的事件

9、事件

1. 經常使用事件

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

   
   

2. 事件綁定

   .on( events [, selector ],function(){})

   • events： 事件

   • selector: 選擇器（可選的）

   • function: 事件處理函數

     
     

3. 移除事件

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

   • events： 事件
   • selector: 選擇器（可選的）
   • function: 事件處理函數

   
   

4. 阻止事件後續執行

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

   注意：

   像click、keydown等DOM中定義的事件，咱們均可以使用.on()方法來綁定事件，可是hover這種jQuery中定義的事件就不能用.on()方法來綁定了。

   想使用事件委託的方式綁定hover事件處理函數，能夠參照以下代碼分兩步綁定事件：

   $('ul').on('mouseenter', 'li', function() {//綁定鼠標進入事件
       $(this).addClass('hover');
   });
   $('ul').on('mouseleave', 'li', function() {//綁定鼠標劃出事件
       $(this).removeClass('hover');
   });

   
   

5. 阻止事件冒泡

   e.stopPropagation();

   
   

6. 頁面載入

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

   兩種寫法：

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

   簡寫：

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

   與window.onload的區別：

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

   
   

7. 事件委託

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

   示例：

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

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

10、動畫效果

// 基本
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])

11、each和data

1. jQuery.each

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

   描述：一個通用的迭代函數，它能夠用來無縫迭代對象和數組。數組和相似數組的對象經過一個長度屬性（如一個函數的參數對象）來迭代數字索引，從0到length - 1。其餘對象經過其屬性名進行迭代。

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

   
   

2. jQuery obj.each

   .each(function(index, Element))：

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

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

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

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

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

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

   注意：

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

   終止each循環：

   return false；

   
   

3. jQuery obj.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對應的數據