jQuery的介紹和選擇器詳解

時間 2020-05-22

標籤 jquery 介紹選擇器詳解欄目 JQuery 简体版

原文原文鏈接

本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一塊兒入門和進階前端。javascript

如下是正文。css

jQuery 的介紹

引入 jQuery 的緣由

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

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

以下圖所示：api

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

什麼是 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初體驗

如今用原生 js 來寫下面這一段代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            height: 100px;
            background-color: pink;
            margin: 10px;
            display: none;
        }
    </style>

    <script>
        //原生js
        window.onload = function () {
            var btn = document.getElementsByTagName("button")[0];
            var divArr = document.getElementsByTagName("div");

            btn.onclick = function () {
                for (var i = 0; i < divArr.length; i++) {
                    divArr[i].style.display = "block";
                    divArr[i].innerHTML = "生命壹號";
                }
            }
        }
    </script>
</head>
<body>

<button>顯示五個div盒子和設置內容</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>

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

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

        //jquery版
        $(document).ready(function () {
            //獲取元素
            var jQbtn = $("button");//根據標籤名獲取元素
            var jQdiv = $("div");//根據標籤名獲取元素
            //綁定事件
            jQbtn.click(function () {
                jQdiv.show(1000);//顯示盒子。
                jQdiv.html("tomorrow！");//設置內容
                //上面的兩行能夠寫成鏈式編程：jQdiv.show(3000).html(1111);

            });//事件是經過方法綁定的。

        });
    </script>

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版本。

咱們以 v1.11.1版本爲例，下載下來後發現，裏面有兩個文件：

它們的區別是：

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

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-1.11.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 class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>

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

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

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

//獲取的是數組，裏面包含着原生 JS 中的DOM對象。
    var jqBox1 = $("#box");
    var jqBox2 = $(".box");
    var jqBox3 = $("div");

咱們打印出來看看：

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

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

兩者的相互轉換

一、 DOM 對象轉爲 jQuery對象：

$(js對象);

舉例：（拿上一段的代碼舉例）

//轉換。
	jqBox1 = $(myBox);
	jqBox2 = $(boxArr);
	jqBox3 = $(divArr);

DOM 對象轉換成了 jquery 對象以後，皮上面的功能能夠直接調用。

二、jQuery對象轉爲 DOM 對象：

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

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

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

//jquery對象轉換成 DOM 對象以後
    jqBox3[0].style.backgroundColor = "black";
    jqBox3.get(4).style.backgroundColor = "pink";

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

舉例：隔行變色

代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.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>
    <li>生命壹號，永不止步</li>
</ul>
</body>
</html>

效果以下：

jQuery 選擇器

咱們之前在CSS中學習的選擇器有：

今天來學習一下jQuery 選擇器。

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

一、jQuery 的基本選擇器

解釋以下：

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //入口函數
        jQuery(document).ready(function () {

            //三種方式獲取jquery對象
            var jqBox1 = $("#box");
            var jqBox2 = $(".box");
            var jqBox3 = $("div");

            //操做標籤選擇器
            jqBox3.css("width", 100);
            jqBox3.css("height", 100);
            jqBox3.css("margin", 10);
            jqBox3.css("background", "pink");

            //操做類選擇器(隱式迭代，不用一個一個設置)
            jqBox2.css("background", "red");

            //操做id選擇器
            jqBox1.css("background", "yellow");

        });
    </script>
</head>
<body>

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

</body>
</html>

效果以下：

二、層級選擇器

解釋以下：

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //獲取ul中的li設置爲粉色
            //後代：兒孫重孫曾孫玄孫....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：親兒子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

效果：

三、基本過濾選擇器

解釋：

舉例：

<script src="jquery-1.11.1.js"></script>
    <script>
        $(document).ready(function () {

            // :odd
            $("li:odd").css("background", "red");

            // :even
            $("li:even").css("background", "green");

            // :eq(index)
            $("ul li:eq(3)").css("font-size", "30px");  //設置第四個li的字體

            // :lt(index)
            $("li:lt(6)").css("font-size", "30px");

            // :gt(index)
            $(".ulList1 li:gt(7)").css("font-size", "40px");

            // :first
            $(".ulList li:first").css("font-size", "40px");

            // :last
            $("li:last").css("font-size", "40px");
        });
    </script>

四、屬性選擇器

五、篩選選擇器

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            var jqul = $("ul");

            //find(selector); 從jquery對象的後代中查找
            //必須制定參數，若是不指定獲取不到元素。length === 0
            jqul.find("li").css("background", "pink");
            console.log(jqul.find());

            //chidlren(selector); 從jquery對象的子代中查找
            //不寫參數表明獲取全部子元素。
            jqul.children("li").css("background", "green");

            //eq(索引值); 從jquery對象的子代中查找該索引值的元素
            //要寫該數組中的第幾個。
            jqul.children().eq(0).css("background", "red");

            //next(); 該元素的下一個兄弟元素
            jqul.children().eq(0).next().css("background", "yellow");

            //siblings(selector); 該元素的全部兄弟元素
            jqul.children().eq(0).next().siblings().css("border", "1px solid blue");

            //parent(); 該元素的父元素（和定位沒有關係）
            console.log(jqul.children().eq(0).parent());
        });
    </script>
</head>
<body>

<ul>
    <li>生命壹號，永不止步</li>
    <li class="box">生命壹號，永不止步</li>
    <span>生命壹號，永不止步</span>
    <li class="box">生命壹號，永不止步</li>
    <i>生命壹號，永不止步</i>
    <li>生命壹號，永不止步</li>
    <a id="box" href="#">生命壹號，永不止步</a>
    <ol>
        <li>我是ol中的li</li>
        <li>我是ol中的li</li>
        <li>我是ol中的li</li>
        <li>我是ol中的li</li>
    </ol>
</ul>

</body>
</html>

效果：