jQuery——簡介，使用

python_lover 2021-09-16

展開全文

一、jQuery簡介

1、什么是jQuery

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

2、為何要用jQuery

jQuery的優(yōu)勢（jQuery的宗旨就是：“Write less, do more.“）
#1、開源 免費
#2、一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面加載速度。
#3、便捷的選擇器與DOM操作，
#4、鏈?zhǔn)奖磉_(dá)式。jQuery的鏈?zhǔn)讲僮骺梢园讯鄠€操作寫在一行代碼里，更加簡潔。
#5、事件、樣式、動畫支持。jQuery還簡化了js操作css的代碼，并且代碼的可讀性也比js要強。
#6、Ajax操作支持。jQuery簡化了AJAX操作，后端只需返回一個JSON格式的字符串就能完成與前端的通信。
#7、跨瀏覽器兼容。jQuery基本兼容了現(xiàn)在主流的瀏覽器，不用再為瀏覽器的兼容問題而傷透腦筋。
#8、插件擴(kuò)展開發(fā)。jQuery有著豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應(yīng)插件，并且用jQuery插件做出來的效果很炫，并且可以根據(jù)自己需要去改寫和封裝插件，簡單實用。

3 、jQuery版本

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

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

4 、jQuery相關(guān)網(wǎng)站

　　官網(wǎng) https:///

　　文檔API： http://jquery./index.html

二、Jquery基本使用

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

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

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

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

2. jQuery對象

$是jQuery的別名
$對象可以用作選擇器獲取元素，還可以創(chuàng)建DOM對象

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

3. 文檔就緒事件

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

解析HTML結(jié)構(gòu)。
加載外部腳本和樣式表文件。
解析并執(zhí)行腳本代碼。
DOM樹構(gòu)建完成。
加載圖片等外部文件。
頁面加載完畢。

等待文檔加載完畢后執(zhí)行函數(shù)，有兩種方式

#1、執(zhí)行時間不同
window.onload必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。

$(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。

#2、編寫個數(shù)不同
window.onload不能同時編寫多個，如果有多個window.onload方法，只會執(zhí)行一個

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

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

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

4. 鏈?zhǔn)讲僮?/strong>

#鏈?zhǔn)秸{(diào)用，原理就是調(diào)用一個實例化方法返回的是當(dāng)前的對象 $('.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本質(zhì)上是由 jsDOM組成的集合，是個類數(shù)組對象。可以通過 [索引] 獲取其中的jsDOM，$(jsDOM) 可以轉(zhuǎn)為 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、標(biāo)簽選擇器

$("tagName")

3、class選擇器

$(".className")

4、所有元素選擇器

$("*")

5、交集選擇器

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

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 // 匹配所有索引值為偶數(shù)的元素，從 0 開始計數(shù) :odd // 匹配所有索引值為奇數(shù)的元素，從 0 開始計數(shù) :gt(index)// 匹配所有大于給定索引值的元素 :lt(index)// 匹配所有小于給定索引值的元素 :not(選擇器)// 過濾掉所有滿足not條件的標(biāo)簽 :has(選擇器)// 過濾出所有后代中滿足has條件的標(biāo)簽 #例如 $("div:has(h1)")// 找到所有后代中有h1標(biāo)簽的div標(biāo)簽 $("div:has(.c1)")// 找到所有后代中有c1樣式類的div標(biāo)簽 $("li:not(.c1)")// 找到所有不包含c1樣式類的li標(biāo)簽 $("li:not(:has(a))")// 找到所有?。?！后代中?。?！不含a標(biāo)簽的li標(biāo)簽

JQ版自定義模態(tài)框

9、屬性選擇器

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

舉例

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

表單常用篩選

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

舉例

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

表單對象屬性:

:enabled :disabled :checked :selected

舉例

找到可用的input標(biāo)簽

<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input標(biāo)簽

找到被選中的option：

<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">廣州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被選中的option

四、篩選器

下一個兄弟元素：

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

上一個兄弟元素：

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

父親元素：

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

兒子和兄弟元素：

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

查找

搜索所有與指定表達(dá)式匹配的元素。這個函數(shù)是找出正在處理的元素的后代元素的好方法。

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

篩選

篩選出與指定表達(dá)式匹配的元素集合。這個方法用于縮小匹配的范圍。用逗號分隔多個表達(dá)式。

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

補充：

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

舉例：

左側(cè)菜單示例