今天簡單地學習了jQuery，爲加深自己的印象，在此總結一下。
jQuery的簡單介紹：jQuery是一個JS庫，在這個庫中將經常使用的JavaScript複雜的操作封裝成了一個又一個方法，以後如果相對網頁進行相關的操作，直接調用jQuery中的方法即可，說白了就是jQuery比JavaScript更簡單，更方便，更好用。並且jQuery不存在兼容性的問題。jQuery官網：http://jquery.com/
如何使用jQuery？三個基本步驟
1、引包：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery初體驗</title>
<script src="jquery-3.4.1.js"></script>
</head>
2、入口函數（兩種不同的寫法）：
$(document).ready(function () {
});
$(function(){
});
3、功能實現：
$("#btnShowDiv").click(function () {
$("div").show(1000);
});
簡單小練習：jQuery初體驗（通過點擊按鈕實現div的顯示和文字的添加）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 200px; margin-bottom: 10px; background-color: #a43035; display: none; } </style> <!--1. 需要引入jQuery文件--> <script src="jquery-1.12.4.js"></script> <script> //2. 入口函數的標準 $(document).ready(function(){ //註冊事件，把on去掉，是一個方法 $("#btn1").click(function () { //隱式迭代：偷偷的遍歷，jQuery會自動的遍歷，不需要我們遍歷。 $("div").show(1000); }); $("#btn2").click(function () { $("div").text("我是內容"); }); }); </script> </head> <body> <input type="button" value="btn1" id="btn1"> <input type="button" value="設置內容" id="btn2"> <div></div> <div></div> <div></div> </body> </html>
容易混淆的知識：DOM對象和jQuery對象的區別
DOM對象:用js方式獲取到的對象叫DOM對象
jQuery對象:用jQuery方式獲取到的對象爲jQuery對象
DOM和jQuery是兩個不同的對象，兩者不能相互調用對方的方法。但可以通過轉化來調用各自的方法。
DOM->jQuery
var text1=document.getelementById('text1');
$(text1).text('哈哈');
jQuery->DOM
var $li=$("li");
$li[1].style.background="red";
$的實質：$的實質是一個function（）即函數，所以以後用$時記得加上小括號 $();
括號內的參數：參數類型不同，執行的方法（功能）也不同。
1、參數是一個function,即入口函數。
$(function(){
});
2、參數是一個DOM對象，把DOM對象轉化爲jQuery對象
//入口函數
$(document).ready(function{
});
3、參數是一個字符串，可是是標籤類型，id類型，類類型
$("div"); $("#btn1"); $(".current");
jQuery選擇器的使用：jQuery選擇器是jQuery爲我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。注意：jQuery選擇器返回的是jQuery對象。
基本選擇器：
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $(“#id”); | 獲取指定ID的元素 |
| 類選擇器 | $(“.class”); | 獲取同一類class的元素 |
| 標籤選擇器 | $(“div”); | 獲取同一類標籤的所有元素 |
| 並集選擇器 | $(“div,p,li”); | 使用逗號分隔，只要符合條件之一就可。 |
| 交集選擇器 | $(“div.redClass”); | 獲取class爲redClass的div元素 |
層級選擇器：
| 名稱 | 用法 | 描述 |
|---|---|---|
| 子代選擇器 | $(“ul>li”); | 使用>號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素 |
| 後代選擇器 | $(“ul li”); | 使用空格，代表後代選擇器，獲取ul下的所有li元素，包括孫子等 |
篩選選擇器：篩選選擇器的功能與過濾選擇器有點類似，但是用法不一樣，篩選選擇器主要是方法。
| 名稱 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(“ul”).children(“li”) | 相當於$(“ul>li”)，子類選擇器 |
| find(selector) | $(“ul”).find(“li”); | 相當於$(“ul li”),後代選擇器 |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟節點，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找父親 |
| eq(index) | $(“li”).eq(2); | 相當於$(“li:eq(2)”),index從0開始 |
| next() | $(“li”).next() | 找下一個兄弟 |
| prev() | $(“li”).prev() | 找上一次兄弟 |