jQuery基礎（1）

1、jQuery的介紹

一、爲何要使用jQuery？

       在用js寫代碼時，會遇到一些問題，以下：

　　　　1）window.onload 事件有事件覆蓋的問題，所以只能寫一個事件；

　　　　2）代碼容錯性差；

　　　　3）瀏覽器兼容性問題；

　　　　4）書寫很繁瑣，代碼量多；

　　　　5）代碼很亂，各個頁面處處都是；

　　　　6）動畫效果很難實現；

二、什麼是jQuery？

       jQuery 是 js 的一個庫，封裝了咱們開發過程當中經常使用的一些功能，方便咱們調用，提升開發效率。

js庫就是把咱們經常使用的功能放到一個單獨的文件中，咱們用的時候，直接引用到頁面裏便可。

      關於jQuery的相關資料：

　　　　官網：http://jquery.com/

　　　　官網API文檔：http://api.jquery.com/

　　　　漢化API文檔：http://www.css88.com/jqapi-1.9/

三、學習jQuery，主要是學什麼？

       初期，主要學習如何使用jQuery操做DOM，其實就是學習jQuery封裝好的那些功能API。這些API的共同特色是：幾乎全都是方法。因此，在使用jQuery的API時，都是方法調用，也就是說要加小括號()，小括號裏面是相應的參數，參數不一樣，功能不一樣。

四、jQuery的兩大特色

       a、鏈式編程：對同一個對象調用方法.show()和.html()能夠連寫成.show().html()；

       b、隱式迭代：意識是在方法的內部進行循環遍歷，而不用咱們本身再進行循環，簡化操做，方便咱們調用；

五、jQuery的使用

       a、使用jQuery的基本步驟，例如：

　　<!-- 第一步：引入jquery庫 -->
　　<script type="text/javascript" src="jquery-3.3.1.js"></script>
　　<script type="text/javascript">
   　　 $(document).ready(function () {   // 第二步：入口函數
       　　 $('#app').click(function () {   // 第三步：功能實現代碼
          　　  alert('jquery的事件處理函數');
      　　  })
 　　   });
　　</script>

       注意：引入jquery庫的代碼必定要放在js代碼的最上面。

 

       b、jQuery的版本

              jQuery 有三個大版本：

　　　　　　1.x版本：最新版爲 v1.11.3；

　　　　　　2.x版本：最新版爲 v2.1.4（再也不支持IE六、七、8）；

　　　　　　3.x版本：目前在持續更新；

　　　　下載jQuery包以後裏面會有兩個文件，一個是jquery-3.3.1.js，一個是jquery-3.3.1.min.js

　　　　它們的區別是：

　　　　　　第一個是未壓縮版，第二個是壓縮版；

　　　　　　平時開發過程當中，可使用任意一個版本，可是，項目上線的時候，推薦使用壓縮版；

 

七、jQuery的入口函數

       原生js的入口函數指的是：window.onload = function(){功能代碼};

　　jQuery的入口函數有以下幾種寫法：

　　寫法一：

　　// 文檔加載完畢，圖片不加載的時候，就能夠執行這個函數
　　$(document).ready(function(){
   　　 alert(1);  // 這裏寫功能代碼
　　})

寫法二（寫法一的簡化版，經常使用）：　　

　　// 文檔加載完畢，圖片不加載的時候，就能夠執行這個函數
　　$(function(){
   　　 alert(1);  // 這裏寫功能代碼
　　});

寫法三：

    // 文檔加載完畢，圖片也加載完畢的時候，再執行這個函數
    $(window).ready(function () {
        alert(1);  // 這裏是功能代碼
    })

       總結：jQuery入口函數與js入口函數 的區別：

              區別一：書寫個數不一樣

　　　　　　js 的入口函數只能出現一次，出現屢次會存在事件覆蓋的問題；

　　　　　　jQuery 的入口函數，能夠出現任意屢次，並不存在事件覆蓋問題；

              區別二：執行時機不一樣

　　　　　　js的入口函數是在全部的文件資源加載完成後，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等；

　　　　　　jQuery的入口函數，是在文檔加載完成後，就執行。文檔加載完成指的是：DOM樹加載完成後，就能夠操做DOM了，不用等到全部的外部資源都加載完成；

       注意：文檔加載的順序：從上往下，邊解析邊執行。

 

八、jQuery的$符號

       jQuery 使用 $ 符號緣由：書寫簡潔、相對於其餘字符不同凡響、容易被記住。

       jQuery佔用了咱們兩個變量：$ 和 jQuery。運行以下代碼：

　　<script type="text/javascript" src="jquery-3.3.1.js"></script>
　　<script type="text/javascript">
   　　 console.log($);
    　　console.log(jQuery);
   　　 console.log($ === jQuery); // true
　　</script>

       從打印結果能夠看出，$ 表明的就是 jQuery，那怎麼理解jQuery裏面的 $ 符號呢？

　　$實際上表示的是一個函數名，以下：

　　$(); // 調用上面咱們自定義的函數$
　　$(document).ready(function(){}); // 調用入口函數
　　$(function(){}); // 調用入口函數
　　$("#btnShow") // 獲取id屬性爲btnShow的元素
　　$("div") // 獲取全部的div標籤元素

　　如上所示，jQuery 裏面的 $ 函數，根據傳入參數的不一樣，進行不一樣的調用，實現不一樣的功能，返回的是jQuery對象。

　　jQuery這個js庫，除了$ 以外，還提供了另一個函數： jQuery。

　　jQuery函數跟 $ 函數的關係：jQuery === $。

 

九、js中的DOM對象 和 jQuery對象的比較（重點，難點）

       a、兩者的關係：經過 jQuery 獲取的元素是一個數組，數組中包含着原生JS中的DOM對象。例如：

　　　　經過原生js獲取元素節點的方式是：

　　var oApp = document.getElementById("app");           // 經過 id 獲取單個元素
　　var oBox = document.getElementsByClassName("box");  // class 獲取的是僞數組
　　var oDiv = document.getElementsByTagName("div");    // 標籤獲取的是僞數組

經過jQuery獲取元素節點的方式是：　　

    // 獲取的是數組，裏面包含着原生js中的DOM對象
　　console.log($('#app'));
　　console.log($('.box'));
　　console.log($('div'));

　　　　總結：jQuery 就是把 DOM 對象從新包裝了一下，讓其具備了 jQuery 方法。

 

       b、兩者相互轉換

              1）DOM 對象 轉爲 jQuery對象

    　　$(js對象);

              2）jQuery對象 轉爲 DOM 對象　　

　　　　 jQuery對象[index];      // 方式1（推薦）
　　　　 jQuery對象.get(index);  // 方式2

              jQuery對象轉換成了 DOM 對象以後，能夠直接調用 DOM 提供的一些功能，例如：　　

　　　　$('div')[1].style.backgroundColor = 'yellow';
　　　　$('div')[3].style.backgroundColor = 'green';

             總結：若是想要用哪一種方式設置屬性或方法，必須轉換成該類型。

 

2、jQuery的選擇器

       jQuery選擇器是jQuery強大的體現，它提供了一組方法，讓咱們更加方便的獲取到頁面中的元素。

一、jQuery的基本選擇器

符號	說明
$(「#demo」)	選擇id爲demo的元素
$(「.liItem」)	選擇全部類名是liItem的元素
$(「div」)	選擇全部標籤爲div的元素
$(「*」)	選擇頁面全部元素（少用或者配合其餘選擇器來使用）
$(「.liItem,div」)	選擇多個指定元素，這裏是選擇出了類名是liItem和標籤是div的元素

 

二、層級選擇器

符號	示例	說明
空格	$(「div span」)	後代選擇器，選擇全部的後代元素
>	$(「div>span」)	子代選擇器，選擇全部的子代元素
+	$(「div+p」)	緊鄰選擇器，選擇緊挨着的下一個元素
~	$(「div~p」)	兄弟選擇器，選擇後面的全部兄弟元素

       注意：層級選擇器選擇了 選擇符後面那個元素，好比，div>p，是選擇了「>」後面的p元素。

 

三、基本過濾選擇器

符號	示例	說明
:eq(index)	$(「li:eq(1)」)	選擇索引爲index的元素（索引從0開始）
:gt(index)	$(「li:gt(2)」)	選擇索引大於index的元素
:lt(index)	$(「li:lt(2)」)	選擇索引小於index的元素
:odd	$(「li:odd」)	選擇全部索引號爲奇數的元素
:even	$(「li:even」)	選擇全部索引號爲偶數的元素
:first	$(「li:first」)	選擇匹配的第一個元素
:last	$(「li:last」)	選擇匹配的最後一個元素

 

四、屬性選擇器

符號	說明
$(「a[href]」)	選擇全部包含href屬性的元素
$(「a[href=’baidu’]」)	選擇href屬性值爲baidu的全部a標籤元素
$(「a[href!=’baidu’]」)	選擇全部href屬性不等於baidu的元素，包括沒有href的a標籤
$(「a[href^=’www’]」)	選擇全部href屬性值以www開頭的元素
$(「a[href$=’cn’]」)	選擇全部href屬性值以cn結尾的元素
$(「a[href*=’i’]」)	選擇全部href屬性值包含i字母的元素
$(「a[href][title=’我’]」)	選擇全部符合指定屬性規則的元素，都符合纔會被選中

 

五、篩選選擇器

符號	示例	說明
find(selector)	$(「#nav」).find(「li」)	指定元素的全部後代元素（包含子子孫孫）
children()	$(「#nav」).children(「ul」)	指定元素的的直接子元素（親兒子）
siblings()	$(「#liItem」).siblings()	查找全部兄弟元素（不包括本身）
parent()	$(「#liItem」).parent(「ul」)	查找父元素（親的）
eq(index)	$(「li」).eq(2)	查找索引是index的元素（索引號從0開始）

3、jQuery的動畫效果

       jQuery提供了一組網頁中常見的動畫效果，這些動畫是標準的、有規律的效果；同時還提供給咱們了自定義動畫的功能。

一、顯示/隱藏動畫

       a、顯示

　　// 方式一：不帶參數，直接顯示，底層是經過display: block;實現
　　$("div").show();
　　// 方式二：經過控制寬高、透明度、display屬性，逐漸顯示，3秒後顯示完畢
　　$('div').show(3000);
　　// 方式三：關鍵字，slow（600ms）|normal（400ms）|fast（200ms）
　　$("div").show("slow");
　　// 方式四：show(毫秒值，回調函數);
　　$("div").show(5000,function () {
  　　  alert("動畫執行完畢！");  // 動畫執行完後，當即執行回調函數
　　});

       b、隱藏，同show()對應，也有四種方式，例如：

　　$(selector).hide();
　　$(selector).hide(1000);
　　$(selector).hide("fast");
　　$(selector).hide(1000, function(){});

       c、開關式顯示/隱藏動畫

              顯示和隱藏的來回切換採用的是toggle()方法：就是show()和hide()方法的切換執行，例如：

　　$('#btn').click(function(){
  　　  $('#box').toggle(1000,function () {
      　　  alert('切換完畢')
   　　 })
　　})

二、滑入/滑出動畫（相似於生活中的捲簾門）

       a、滑入（下拉動畫，顯示元素）

 

    $(selector).slideDown(speed, 回調函數);

       b、滑出（上拉動畫，隱藏元素）

    $(selector).slideUp(speed, 回調函數);

       c、滑入/滑出切換

    $(selector).slideToggle(speed, 回調函數);

    總結：此動畫和後面介紹的淡入/淡出動畫也有相似show()和hide()的四種方式。

三、淡入/淡出動畫

       a、淡入（讓元素以漸漸進入視線的方式展現出來）

    $(selector).fadeIn(speed, 回調函數);

       b、淡出（讓元素以漸漸消失的方式隱藏起來）

    $(selector).fadeOut(speed, 回調函數);

       c、淡入/淡出切換（經過改變透明度，切換匹配元素的顯示或隱藏狀態）

    $(selector).fadeToggle(speed, 回調函數);

四、中止動畫  

    $(selector).stop(false, false);

       stop方法有兩個參數，有不一樣的含義：

              第一個參數：

                     true：後續動畫不執行；

                     false：後續動畫會執行；

              第二個參數：

                     true：當即執行完成當前動畫；

                     false：當即中止當前動畫；

       PS：參數若是都不寫，默認兩個都是false。實際工做中，直接寫stop()用的多，一般用於在執行動畫前，先停掉以前的動畫。

五、自定義動畫

　　語法：$(selector).animate({params},speed, 回調函數);

　　做用：執行一組css屬性的自定義動畫。

　　參數說明：

　　　　第一個參數表示：要執行動畫的CSS屬性（必選）；

　　　　第二個參數表示：執行動畫時長（可選）；

　　　　第三個參數表示：動畫執行完後，當即執行的回調函數（可選）；

　　示例：

　　$("button").click(function(){
    　　var json = {"width": 50, "height": 50, "left": 30, "top": 30, "border-radius": 100};
    　　// 自定義動畫
   　　 $("div").animate(json, 1000, function(){
      　　  alert("動畫執行完畢！");
   　　 });

　　})

　　

六、延遲動畫

    delay(時間,[,queueName])  // 第二個參數可選，例如：

    $('#foo').slideUp(300).delay(800).fadeIn(400); // 以300毫秒的捲起動畫，暫停800毫秒後有400毫秒的淡入動畫