jQuery——簡介，使用

一、jQuery簡介

 1、什么是jQuery

#jQuery 是一個高效、精簡并且功能豐富的JavaScript工具庫
 #jQuery極大的簡化了JavaScript編程

2、為何要用jQuery

jQuery的優勢（jQuery的宗旨就是：“Write less, do more.“）
#1、開源 免費
#2、一款輕量級的JS框架，jQuery核心js檔案才幾十kb，不會影響頁面加載速度，
#3、便捷的選擇器與DOM操作，
#4、鏈式運算式，jQuery的鏈式操作可以把多個操作寫在一行代碼里，更加簡潔，
#5、事件、樣式、影片支持，jQuery還簡化了js操作css的代碼，并且代碼的可讀性也比js要強，
#6、Ajax操作支持，jQuery簡化了AJAX操作，后端只需回傳一個JSON格式的字串就能完成與前端的通信，
#7、跨瀏覽器兼容，jQuery基本兼容了現在主流的瀏覽器，不用再為瀏覽器的兼容問題而傷透腦筋，
#8、插件擴展開發，jQuery有著豐富的第三方的插件，例如：樹形選單、日期控制元件、圖片切換插件、彈出視窗等等基本前端頁面上的組件都有對應插件，并且用jQuery插件做出來的效果很炫，并且可以根據自己需要去改寫和封裝插件，簡單實用，

3 、jQuery版本

#1.x：兼容IE678,使用最為廣泛的，官方只做BUG維護，功能不再新增，因此一般專案來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
#2.x：不兼容IE678，很少有人使用，官方只做BUG維護，功能不再新增，如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
#3.x：不兼容IE678，只支持最新的瀏覽器，需要注意的是很多老的jQuery插件不支持3.x版，目前該版本是官方主要更新維護的版本，

#ps：維護IE678是一件讓人頭疼的事情，一般我們都會額外加載一個CSS和JS單獨處理，
　　　值得慶幸的是使用這些瀏覽器的人也逐步減少，PC端用戶已經逐步被移動端用戶所取代，如果沒有特殊要求的話，一般都會選擇放棄對678的支持，

4 、jQuery相關網站

　　官網 https://jquery.com/

　　檔案API： http://jquery.cuishifeng.cn/index.html

二、Jquery基本使用

1、先下載到本地，然后參考，才能使用（推薦下載壓縮版）

#方式一：本地引入
<script src="https://www.cnblogs.com/guojieying/p/jquery-3.3.1.min.js"></script>
<script>
    //注意，一定在引入jQuery之后，再使用jQuery提供的各種操作
</script>

#方式二：直接使用CDN
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    code...
</script>

 ps: BootCDN jQuery各個版本地址： https://www.bootcdn.cn/jquery/

2. jQuery物件

$是jQuery的別名
$物件可以用作選擇器獲取元素，還可以創建DOM物件

jQuery('.item').show()
//等同于
$('.item').show()

3. 檔案就緒事件

DOM檔案加載的步驟(重點)

1. 決議HTML結構，
2. 加載外部腳本和樣式表檔案，
3. 決議并執行腳本代碼，
4. DOM樹構建完成，
5. 加載圖片等外部檔案，
6. 頁面加載完畢，

等待檔案加載完畢后執行函式，有兩種方式

#1、執行時間不同
window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行，

$(document).ready()是DOM結構繪制完畢后就執行，不必等到加載完畢，

#2、撰寫個數不同
window.onload不能同時撰寫多個，如果有多個window.onload方法，只會執行一個

$(document).ready()可以同時撰寫多個，并且都可以得到執行

#3、簡化寫法不同
window.onload沒有簡化寫法

$(document).ready(function(){})可以簡寫成$(function(){});

 4. 鏈式操作

#鏈式呼叫，原理就是 呼叫一個實體化方法回傳的是當前的物件
$('.box1').css('color','red').next().css('width','200px').css('height','200px').css('background','green').removeAttr('class') 

5. jQueryDom和jsDom

#1、通過原生js獲取的dom物件，我們稱之為jsDOM或者原生DOM

#2、通過jQuery選擇器獲取的dom物件，我們稱之為 jQuery DOM

#3、jQuery DOM本質上 是由 jsDOM組成的集合，是個類陣列物件，可以通過 [索引] 獲取其中的jsDOM，$(jsDOM) 可以轉為 jQuery DOM如下
var box = document.getElementsByClassName('box'); #獲取js DOM物件
Js DOM物件 ==> JQ DOM物件$(js DOM物件)  # 例如 $(box)
JQ DOM物件 ==> JS DOM物件
$("選擇器")[0] # 或者$("選擇器").get(0)

三、 選擇器

1、id選擇器

$("#id")

2、標簽選擇器

$("tagName")

3、class選擇器

$(".className")

4、所有元素選擇器

$("*")

5、交集選擇器

$("div.c1")  // 找到類為c1的div標簽

6、并集選擇器

$("#id, .className, tagName")

7、層級選擇器

//x和y可以為任意選擇器

$("x y");   // x的所有后代y（子子孫孫）
$("x > y"); // x的所有兒子y（兒子）
$("x + y")  // 找到所有緊挨在x后面的y
$("x ~ y")  // x之后所有的兄弟y 

8、基本篩選器

:first // 第一個
:last // 最后一個
:eq(index)// 索引等于index的那個元素
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大于給定索引值的元素
:lt(index)// 匹配所有小于給定索引值的元素
:not(選擇器)// 過濾掉所有滿足not條件的標簽
:has(選擇器)// 過濾出所有后代中滿足has條件的標簽

#例如
$("div:has(h1)")// 找到所有后代中有h1標簽的div標簽
$("div:has(.c1)")// 找到所有后代中有c1樣式類的div標簽
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")// 找到所有！！！后代中！！！不含a標簽的li標簽

9、屬性選擇器

[attribute]
[attribute=value]// 屬性等于
[attribute!=value]// 屬性不等于

舉例

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox型別的input標簽
$("input[type!='text']");// 取到型別不是text的input標簽

表單常用篩選

:text
:password:file
:radio
:checkbox
:submit
:reset
:button

舉例

$(":checkbox")  // 找到所有的checkbox

表單物件屬性:

:enabled
:disabled
:checked
:selected

舉例

找到可用的input標簽

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input標簽 

找到被選中的option：

<select id="s1">
  <option value="https://www.cnblogs.com/guojieying/p/beijing">北京市</option>
  <option value="https://www.cnblogs.com/guojieying/p/shanghai">上海市</option>
  <option selected value="https://www.cnblogs.com/guojieying/p/guangzhou">廣州市</option>
  <option value="https://www.cnblogs.com/guojieying/p/shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被選中的option

四、篩選器

下一個兄弟元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一個兄弟元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父親元素：

$("#id").parent()
$("#id").parents()  // 查找當前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，

兒子和兄弟元素：

$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們

查找

搜索所有與指定運算式匹配的元素，這個函式是找出正在處理的元素的后代元素的好方法，

$("div").find("p")  //等價于  $("div p")

篩選

篩選出與指定運算式匹配的元素集合，這個方法用于縮小匹配的范圍，用逗號分隔多個運算式，

$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的  等價于  $("div.c1")

補充：

.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最后一個元素
.not() // 從匹配元素的集合中洗掉與指定運算式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素，
.eq() // 索引值等于指定值的元素

舉例：

標籤：JavaScript

上一篇：jQuery——標簽操作之（樣式、文本內容、屬性、檔案處理）操作

下一篇：關于 【順序執行Promise】 的一些理解