jQuery (02) 重點知識點總結

時間 2019-11-08

標籤 jquery 重點知識總結欄目 JQuery 简体版

原文原文鏈接

jQueryjavascript

若是用戶未登陸，當加入購物車，會將商品相關信息存入 cookie 或者 session，這兩個都是能夠標識用戶信息的東西css

是一個 JavaScript 庫，封裝了經常使用的開發功能，和一些須要的方法，來提升開發效率。html

jQuery 2.0 之前，以跨瀏覽器 Web 爲主要任務。

jQuery 的級聯調用（鏈式方法調用）。 size()，add()，not()，filter() 這四個方法返回原包裝集
- .end() 返回前一個 jQuery 對象
- .andSelf() 用於合併最近的兩個包裝集
- .replaceAll();
- .append();
- .appendTo();
- .prepend();
- .prependTo();
- .insertBefore();
- .before();
- .after();
- .insertAfter();
- .is(); 是否包含某個元素包裝集中有一個包含，則返回 true
- .each(); 隱式調用

jQuery 調用多對象的方法，或屬性時，默認操做第一個對象。
- ```
$("ul li").text();    // 只會打印第一個 li 的文本內容
```

jQuery 的獨立開源組件 Sizzle ，支持CSS選擇器語法以及特有的僞類插件

:header    選中標題元素
:animated    正在繪製動畫效果的元素
:lang("en") lang="en" 的元素
:first
:last
:nth-child(1) 第一個元素索引是 1 :nth-last-child(1) 最後一個元素索引是 1 :parent 全部父元素

:lt(3) 在同時調用 lt 和 gt 時，正確順序是 :lt(5):gt(3) 選中小於 5，大於 3 的 jQuery 對象
:gt(3) 


:has(":checked")    
:checked
:selected
:enable
:disable

:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:file

jQuery 包裝集

使用 jQuery(""); 這樣的 CSS選擇器語法得到的一組元素
使用在 jquery-1.3 新增長了 $("#curLi").closest(".curBox"); 從元素自己開始，向祖先元素找
獲取包裝集中元素的個數
- ```
$("ul li").length;

$("ul li").size();
```
獲取包裝集中 DOM 元素（jQuery 對象轉 DOM 對象）
- ```
$("table tr")[0];

$("table tr").get(0);
```

獲取某元素在包裝集中的索引

$("tr.current").index();    // 在同輩兄弟元素中的索引
 $("#ulList li").index( $ele ); // 在包裝集中的索引

往包裝集添加元素
- ```
("table tr").add("#ulList li");
```
刪除包裝集中元素
- ```
("table tr").not(".lastTr");
```

過濾包裝集中某些元素

("table tr").filter(".current");    // 獲得 class=current 的 tr 元素

("table tr").filter(func);    // 每一個元素都執行func，刪除返回 false 的元素

獲取包裝集的子集

// 傳入 start， end     返回元素不包括 end
$("#ulList li").slice(1, 3);    // 獲得索引 1 2 的 li

搜索包裝集中的元素

$("ul").find("li.current");    // ul li.current 元素被選中


區別於
$("ul").has("li.current"); // 後代元素中有 li.current 的 ul 被選中

根據文本內容獲取元素

$("#ulList li").contains("kjf");    // 返回 文本內容中包含 kjf 的元素

經過關係獲取包裝集

$("li.current").parent();
               .parents();
               .children();
               .siblings();
               .contents(); 得到匹配元素集合中 每一個元素的子節點，包括文本和註釋節點

               .first();
               .last();
               .next();
               .nextAll();
               .prev();
               .prevAll();
               .eq();

用法

1. 下載 jQuery-1.12.4.js 放到 js 文件夾下面java

官網有兩個版本的 js 庫

jquery-1.12.4.js    // 具備代碼編程規範，即代碼能夠看，有註釋
jquery-1.12.4-min.js    // 由以上 js 代碼壓縮，去掉了無關空格，換行，註釋，變量命名更短    網頁加載速度更快

2. index.html 導入 js 庫jquery

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



// HTML5 已將 JavaScript 設置爲默認腳本語言，可以下編寫
<script>
    // js代碼
</script>

3. 將 js 代碼寫在 DOM加載完成事件處理函數中。ajax

$(function(){ // js 代碼 });

以上代碼等同於編程

$(document).ready(function(){
    // js 代碼 

 // 此代碼會在 頁面 DOM 加載完成後 觸發 DOMContentLoaded 事件 而執行，而不用等待圖片加載完成。。。
 // 能夠寫多個 $(function(){}); 且都會執行


 // 優於 window.onload() ， load事件 必需要等到頁面全部資源都加載完成纔會觸發
        // window.onload();    若是寫多個，則只會生效最後一個
});


還等同於
$().ready(function(){
　　// js 代碼    jQuery 默認參數是 document
});

// 一個網頁的加載順序是：
 // 1. 域名加載
 // 2. HTML 加載 DOM 這裏加載完了就觸發 DOMContentLoaded 事件
 // 3. 加載 js、css 
 // 4. 加載圖片、視頻等等資源， 這裏加載完了就觸發 load 事件


// 用法 document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);

jQuery 的兩把利器

jQuery 核心對象 $ jQuery

作爲對象使用，調用 jQuery 的方法

$.each();

隱式遍歷數組

$.each(arr, function(index, eleVal){
    console.log("arr["+index+"] :  "+eleVal);
});

$.trim();
- 去掉字符串首尾空格
- ```
$.trim("   哈啊    ");    // "哈啊"
```

$.type();

判斷數據的類型

$.type(jQuery);    // "object" 證實 jQuery 也是一個對象

$.isArray();

判斷是不是數組

$.isArray( $("#content") );    // false 證實 jQuery 的 css選擇器獲得的是 類數組對象

$.isFunction()

判斷數據是不是函數

$.isFunction(jQuery);    // true  證實 jQuery 也是一個函數

$.ajax({url,data,type,success})

這兩個是庫提供給外界的接口

枚舉對象的屬性

for(var eleIndex in aObj ){
    console.log(aObj[eleIndex]);
}

// 或者
arr.forEach(eachValue, index, self){};

- jQuery 核心函數

jQuery();
- jQuery 提供給用戶的 API 接口 有兩個變量
  - ```
  jQuery();
  
  
  //等價於
  $();
```

- 多庫共存
  - 因爲除了 jQuery 庫，其餘的庫可能也使用了 $ 做爲 API 接口，
  - jQuery 提供了 .noConflict() 函數，釋放對 $ 的全部權，還能夠指定新的變量做爲接口
    - var myJQ = jQuery.noConflict(); // 此行如下代碼， myJQ(); 等同於 jQuery();
      此行代碼之後，$ 就能夠供其餘庫調用了。數組

jQuery對象轉成 DOM 對象
- jQuery對象，使用 $("#id") 這樣的選擇器獲取到的對象
  - 爲了區別於 DOM 對象，變量命名以 $ 開頭
  - ```
  var $firstA = $("#content a:nth-child(1)");
```

轉爲 DOM 對象，

$("#content a:first")[0];    // 返回對應 DOM 對象    由於 jQuery 使用 css 選擇器獲取元素時，老是返回一個類數組對象，成員爲獲取到的一個或多個元素


// 或者
$firstA[0];    // 返回對應 DOM 對象


// 或者
$("#content a:first").get(0);
$firstA.get(0);

操做 jQuery 對象的二值屬性

.prop("checked", true);瀏覽器

.prop("checked", false)；cookie

$("input:checked").prop("checked", false);
$("input:checked").prop("selected", false);
$("input:checked").prop("disable", false);
$("input:checked").prop("enable", false);

元素的高度/寬度

// content  支持設置
$("#box").height();
$("#box").width();



// content+padding 不支持設置
$("#box").innerHeight();
$("#box").innerWidth();



// content+padding+border    不支持設置
$("#box").outerHeight();

// 若是傳入 true 則獲取 content + padding+border+margin
$("#box").outerWidth(true);

獲取/設置元素的位置
- 相對於網頁頁面左上角 .offset()
  - 讀取位置
    - $("#box").offset().top; $("#box").offset().left;

設置位置

$("#box").offset({
    top: 100,
    left: 200 
});

- 相對於父元素左上角 .position()
  - 讀取位置
    - $("#box").position().top; $("#box").position().left;

設置位置

$("#box").position({
    top: 100,
    left: 200 
});

移除元素 .remove()

// <body>    <div id="box"> 我是一個div </div>    </body>

$("#box").remove();

// <body>        </body>

移除元素文本內容 .empty();

// <p>哈哈哈哈哈</p>

$("p").empty();

// <p></p>

事件綁定 .on("click", func1); 與解綁 .off("click", func1);

on 還能夠用於事件委派（根據事件冒泡原理實現: 子元素的事件，會向祖先元素傳遞）
- ```
$("#ulList").on("click", "li", function(){
    alert("I am "+ $(this).text() );
});
```

- jQuery 函數的 this 老是返回 DOM對象
  - 若是要使用 jQuery 對象的方法，須要 $() 轉換成 jQuery 對象

- 事件觸發 trigger
  - ```
  $("#box").trigger("click");
```

鼠標移入/移出事件
- 只在移入綁定元素時觸發，移入子元素不重複觸發（經常使用）
  - - mouseenter
      - 原理是取消了事件冒泡
      - 建議使用 event.stopPropagation(); 取消某個事件的冒泡。。。（IE 使用 window.event.cancelBubble() 取消事件冒泡）
    - mouseleave
  - .hover(enter, leave);
    - 其實 .hover() 函數內部封裝的是 mouseenter 和 mouseleave 事件

- 在移入綁定元素時觸發，移入子元素時還會觸發 （先觸發 out 再觸發 over）
  - - mouseover
    - mouseout

重要事件

$("#box").click();    // 單擊時 觸發
$("#box").dbclick();    // 雙擊時 觸發

$("#box").blur();    // 元素失去焦點時 觸發
$("#box").focus();    // 元素獲取焦點時 觸發
$("#box").focusIn();    // 元素獲取焦點瞬間 觸發
$("#box").focusOut();    // 元素失去焦點瞬間 觸發

.keypress([data], func);    沒插入一個字符時 觸發

.keydown([data], func);    按鍵按下 觸發
.keyup([data], func);    按鍵 鬆開觸發

$("input:text").select();    // 當文本內容被選中時 觸發
$("textarea").select();    // 當文本內容被選中時 觸發

$("input:text").change();    // 當值發生改變，失去焦點時 觸發
$("textarea").change();    // 當值發生改變，失去焦點時 觸發
$("select").change();    // 選中某選項時 觸發

// 點擊提交時觸發
$("#form_one").submit(function(){
    return false;    // 阻止瀏覽器默認行爲：阻止提交表單
});

.resize([data], func);    當調整瀏覽器窗口大小時 觸發

操做 jQuery 對象的 class

增長
- $("#ulList li:last").addClass("current");
刪除
- $("#ulList li:last").removeClass("current");
切換
- $("#ulList li:last").toggleClass("current");

- 過濾包裝集
  - $("#ulList li:last").hasClass("current");

toggle 切換函數
- 若是不傳參數，或者只傳一個時間（毫秒）
  - $("#box").toggle(); // 兩次執行會在 show() 和 hide(); 函數之間操做 $("#box")
  - $("#box").toggle(200); // 每 200ms 切換 show() 和 hide() 操做 $("#box")
- 若是傳參數，傳入 2 個以上的函數，點擊交替觸發事件，依次切換
  - $("#box").toggle(chgToRed, chgToBlue, chgToBlue); // 第一次 click 執行chgToRed，第二次 click 執行chgToBlue，第三次 click 執行chgToGreen

動畫函數
- - 實質上是 display:none; 的切換
  - 參數可選值：
    - - 最後一個參數，能夠傳一個函數。在動畫執行完畢後執行
      - normal 表明 400 毫秒
      - slow 表明 200 毫秒
      - fast 表明 600 毫秒
      - 過渡效果 'swing' 變速運動
      - 過渡效果 'linear' 勻速直線運動
- 顯示 show(); 隱藏 hide(); toggle();
- 淡入顯示 fadeIn(); 淡出隱藏 fadeOut(); fadeToggle();
- 下滑顯示 slideDown(); 上滑隱藏 slideUp(); slideToggle();
- 動畫定製 :
  - ```
  $('#message').animate( { 
      left： '650px',
      opacity： 0.5,
      backgroundColor: skyblue,
      fontSize： '24px' 
  }， 1500， 'linear' )； 
```
  清除動畫隊列：
  - $("#box").stop(true, true); // 第一個 true 清除動畫隊列裏的動畫 // 第二個 true 馬上到執行完畢狀態