01-jQuery的介紹

時間 2019-11-26

標籤 jquery 介紹欄目 JQuery 简体版

原文原文鏈接

1.爲何要使用jQuery

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

window.onload 事件有事件覆蓋的問題，所以只能寫一個事件。css
代碼容錯性差。html
瀏覽器兼容性問題。java
書寫很繁瑣，代碼量多。jquery
代碼很亂，各個頁面處處都是。編程
動畫效果很難實現。api

jQuery的出現，能夠解決以上問題。數組

什麼是 jQuery

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

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

關於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的第一個代碼

用原生js來實現下面代碼效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementsByTagName('button')[0];
            var divArr = document.getElementsByTagName('div');
            oBtn.onclick = function () {
                        for (var i = 0; i < divArr.length; i++) {
                            divArr[i].style.display = "block";
                            divArr[i].innerHTML = "趙雲";
                            }
             }
        }
    </script>
    
</head>
<body>
    
    <button>操做</button>
    <div></div>
    <div></div>
    <div></div>
    

</body>
</html>

若是用 jQuery 來寫，保持其餘的代碼不變，<script>部分的代碼修改成：（須要提早引入）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <button>操做</button>
    <div></div>
    <div></div>
    <div></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // 獲取dom元素
            var oBtn = $('button'); //根據標籤名獲取元素
            var oDiv = $('div'); //根據標籤名獲取元素
            oBtn.click(function(){
                oDiv.show(1000);//顯示盒子
                oDiv.html('趙雲'); // 設置內容
            });//事件是經過方法綁定的
        })
    </script>
    
</body>
</html>

jQuery 的兩大特色

鏈式編程：好比.show()和.html()能夠連寫成.show().html()。
隱式迭代：隱式對應的是顯式。隱式迭代的意思是：在方法的內部進行循環遍歷，而不用咱們本身再進行循環，簡化咱們的操做，方便咱們調用。

jQuery 的使用

使用 jQuery 的基本步驟

（1）引包

（2）入口函數

（3）功能實現代碼（事件處理）

如圖：

主要：導包的代碼必定要放在js代碼的最上面。

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() {}; 以下：

        //原生 js 的入口函數。頁面上全部內容加載完畢，才執行。
        //不只要等文本加載完畢，並且要等圖片也要加載完畢，才執行函數。
       window.onload = function () {
           alert(1);
       }

而 jQuery的入口函數，有如下幾種寫法：

寫法一：

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

寫法二：（寫法一的簡潔版）

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

寫法三：

  //3.文檔加載完畢，圖片也加載完畢的時候，在執行這個函數。
       $(window).ready(function () {
           alert(1);
       })

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

區別一：書寫個數不一樣：

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

區別二：執行時機不一樣：

Js的入口函數是在全部的文件資源加載完成後，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。
jQuery的入口函數，是在文檔加載完成後，就執行。文檔加載完成指的是：DOM樹加載完成後，就能夠操做DOM了，不用等到全部的外部資源都加載完成。

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

jQuery的`$`符號

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

jQuery佔用了咱們兩個變量：$ 和 jQuery。當咱們在代碼中打印它們倆的時候：

  <script src="jquery-3.3.1.js"></script>
    <script>

        console.log($);
        console.log(jQuery);
        console.log($===jQuery);


    </script>

打印結果：

從打印結果能夠看出，$ 表明的就是 jQuery。

那怎麼理解jQuery裏面的 $ 符號呢？

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

    $(); // 調用上面咱們自定義的函數$

    $(document）.ready(function(){}); // 調用入口函數

    $(function(){}); // 調用入口函數

    $(「#btnShow」) // 獲取id屬性爲btnShow的元素

    $(「div」) // 獲取全部的div標籤元素

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

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

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

兩者的區別

經過 jQuery 獲取的元素是一個數組，數組中包含着原生JS中的DOM對象。舉例：

針對下面這樣一個div結構：

<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div

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

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

經過 jQuery 獲取這些元素節點的方式是：（獲取的都是數組）

  //獲取的是數組，裏面包含着原生 JS 中的DOM對象。

　　console.log($('#app'));
　　console.log($('.box'));
　　console.log($('div'));

設置當前4個div的樣式：

　　　　　　$('div').css({
                'width': '200px',
                'height': '200px',
                "background-color":'red',
                'margin-top':'20px'
            })

因爲JQuery 自帶了 css()方法，咱們還能夠直接在代碼中給 div 設置 css 屬性。

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

兩者的相互轉換

一、 DOM 對象轉爲 jQuery對象：

$(js對象);

二、jQuery對象轉爲 DOM 對象：

  jquery對象[index];      //方式1（推薦）

  jquery對象.get(index);  //方式2

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

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

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

舉例：

隔行換色

代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函數
        jQuery(function () {
            var jqLi = $("li");
            for (var i = 0; i < jqLi.length; i++) {
                if (i % 2 === 0) {
                    //jquery對象，轉換成了js對象
                    jqLi[i].style.backgroundColor = "pink";
                } else {
                    jqLi[i].style.backgroundColor = "yellow";
                }
            }
        });
    </script>
</head>
<body>
<ul>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
    <li>小馬哥</li>
</ul>
</body>
</html>