【技術(shù)分享】WEB前端全棧成長計劃(二階段)-jQuery入門篇

學(xué)完HTML+CSS+JavaScript后通過課程接觸到j(luò)Query，jQuery不能算是前端框架，最多是個Js函數(shù)庫，但它同樣經(jīng)典。jQuery的對于自己的定義“write?less,do?more（寫得更少，又能做更多的事情），學(xué)完js后已經(jīng)學(xué)習(xí)過通過JS操作DOM（網(wǎng)頁文檔對象模型），原生的js語法在使用上非常的繁瑣，jQuery的出現(xiàn)很好的幫助了開發(fā)者高效的完成效果，減少了代碼量。雖然現(xiàn)在bootstrap、vue這類前端框架橫空出世，但作為經(jīng)典之作的jQuery還是很有必要掌握一下它的基本使用。

由于初學(xué)，本篇不會過多深入研究，僅從基礎(chǔ)使用角度出發(fā)研究與學(xué)習(xí)一下。

一、下載jQuery與HTML文檔中加載jQuery庫

1、下載jQuery

官網(wǎng)地址：https://jquery.com/download/

jQuery已經(jīng)歷3個版本，目前最新版為3.5.1，簡單說明一下

完整版

Download?the?compressed,?production?jQuery?3.5.1?（壓縮版）

Download?the?uncompressed,?development?jQuery?3.5.1?（未壓縮版）

移除ajax和effects模塊版本

Download?the?compressed,?production?jQuery?3.5.1?slim?build?（壓縮）

Download?the?uncompressed,?development?jQuery?3.5.1?slim?build?（未壓縮版）

學(xué)習(xí)使用，下載未壓縮的完整版可滿足需求

官網(wǎng)下載有時會失敗，我的Gitee上存了一份，有需要的可以去下載

https://gitee.com/net_master/Public/tree/master/jQuery

2、HTML文檔中加載jQuery庫

???????? ???????????? ???????????????? ???????????????? ???????????????? ???????????????? ????????????????

jQuery入口函數(shù)（document?ready?文檔就緒事件）

這個函數(shù)是保證在DOM文檔全部加載完畢后才進行相關(guān)操作，如果文檔還未加載完就運行jQuery進行操作，可能出現(xiàn)失敗的情況

兩種寫法：

$(document).read(function(){ ????????????//?jQuery代碼部分 ????????}); ? ????????$(function(){ ????????????//?jQuery代碼部分 ????????});

重點：我們只要記住如果我們的HTML頁面有很多是jQuery動態(tài)處理的，那一定得將代碼寫在入口函數(shù)中，以確保在DOM加載完后才執(zhí)行操作

jQuery選擇器

允許對單個或多個HTML元素進行操作

jQuery基于CSS選擇器，支持id、類、屬性等查找HTML元素，選擇器與$()搭配使用

#id?????????查詢id ????.class???????查詢類 ????:first???????查詢第一個 ????:first-child????查詢每個元素的第一個元素 ? ????$(".btn-class")??????????查詢class為btn-class的元素 ????$("span.newBox")??????????查詢class為newBox中的元素 ????$("h3:first")???????????查詢第一個h3元素 ????$("ul?li:first")?????????查詢第一個

元素中的第一個
• 元素 ????$("ul?li:first-child")??????查詢每個
  元素中的第一個
  • 元素 ????$("*")???????????????查詢html中所有元素 ????$("this")?????????????查詢當(dāng)前html元素

    重點：學(xué)過CSS選擇器應(yīng)該很容易理解jQuery選擇器，但是要特別注意?class中某一元素的查詢語法與CSS選擇器略有不同

    三、理解jQuery事件

    當(dāng)我們在網(wǎng)頁中移動鼠標，點擊鼠標的時候會有一些響應(yīng)，這些響應(yīng)就叫做事件。處理事件是我們提前寫了處理邏輯，當(dāng)網(wǎng)頁中觸發(fā)我們定義事件時，事件將按照我們寫的代碼邏輯進行處理。

    jQuery事件有：鼠標事件、鍵盤事件、表單事件、文檔/窗口事件，在這里我們重點說一下鼠標事件，因為初學(xué)CSS后，我們希望盡快掌握一些頁面特效

    鼠標事件

    click???????單擊

    dblclick????雙擊

    mouseenter??移入

    mouseleave??移出

    hover???????懸停

    語法結(jié)構(gòu)：?$("選擇符").事件函數(shù)(可選值)

    1、click和dblclick事件

    為HTML元素添加一個點擊事件，不是按鈕元素也可以添加點擊事件，但是同一個元素只能添加一種點擊事件，兩種事件是不能疊加的

    單擊點我看看
    ????
    雙擊點我看看
    ????

    2、mouseenter和mouseleave事件

    和點擊事件不一樣，mouseenter和mouseleave事件可以單獨使用，也可以搭配使用

    我這個無情的DIV