1. 什麼是 jQuery

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

　　js庫是把我們常用的複雜功能封裝到簡單的方法中，我們用的時候，將庫直接引入然後調用方法即可。

jquery 中把 jquery版本號去掉報錯_jQuery


2. jQuery 的兩大特點

  • 鏈式編程：比如.show()和.html()可以連寫成.show().html()。
  • 隱式迭代：隱式 對應的是 顯式。隱式迭代的意思是：在方法的內部進行循環遍歷，而不用我們自己再進行循環，簡化我們的操作，方便我們調用。

3. jQuery 版本説明

　　jQuery 有三個大版本：

  • 1.x版本：最新版為 v1.11.3。
  • 2.x版本：最新版為 v2.1.4（不再支持IE6、7、8）。
  • 3.x版本。

4. jQuery 使用

  • 下載: ：jQuery有兩個文件，一個是jquery-3.4.1.js(未壓縮版)，一個是jquery-3.4.1.min.js(壓縮版,推薦項目上線時使用)
  • 相關資料:
  • 官網：http://jquery.com/
  • 官網API文檔：http://api.jquery.com/
  • 漢化API文檔：http://www.css88.com/jqapi-1.9/
  • jquery 在線手冊 ：http://hemin.cn/jq/
  • 引用:在文件頭部引用jquery包


5.jQuery 的入口函數和 $ 符號

5.1 入口函數（重要）：

　　js原生入口: 

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

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

　　寫法一：文檔加載完畢，圖片不加載的時候，就可以執行這個函數。

$(document).ready(function () {
           alert(1);
       })

　　寫法二：文檔加載完畢，圖片不加載的時候，就可以執行這個函數。（寫法一的簡潔版）

$(function () {
           alert(1);
       });

　　寫法三：文檔加載完畢，圖片也加載完畢的時候，在執行這個函數。

$(window).ready(function () {
           alert(1);
       })

　　

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

　　區別一：書寫個數不同：

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

　　區別二：執行時機不同：

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

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

5.3 jQuery的$符號

　　jQuery 使用 $ 符號原因：書寫簡潔、相對於其他字符與眾不同、容易被記住。$ 代表的就是 jQuery

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

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


 

6. js中的DOM對象 和 jQuery對象比較

 

6.1 二者的區別

jQuery 就是把 DOM 對象重新包裝了一下，讓其具有了 jQuery 方法。

　　通過 jQuery 獲取的元素是一個jq對象數組，其中包含着原生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'));<br>console.log($('div'));

　　

6.2 二者的互相轉換

　　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';

7.jquery 標籤查找

7.1 基本選擇器

var jqBox1 = $('#app'); //id選擇器
var jqBox2 = $('.box'); //class選擇器
var jqBox3 = $('div'); //tag標籤選擇器

 

<body>　　
    <div></div>
    <div id="app"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
</body>
$(function () { //jquery函數入口
        //1.通過id class 和標籤名獲取jquery對象
        var jqBox1 = $('#app'); //id選擇器
        var jqBox2 = $('.box'); //class選擇器
        var jqBox3 = $('div'); //tag標籤選擇器

        //2.操作標籤選擇器
        jqBox3.css('width', '100');
        jqBox3.css('height','100');
        jqBox3.css('background-color','red');
        jqBox3.css('margin-top',10);

        //3.操作類選擇器
        jqBox2.css('background','green');
        jqBox2.text('這是類選擇器')

        //4.操作ID選擇器
        jqBox1.css('background','yellow');
    })

　　

7.2 層級選擇器