jQuery基礎知識介紹

這篇文章主要為大家詳細介紹了jQuery的基礎知識，內容包括jQuery的語法、選擇器、事件的使用、方法和效果的使用以及元素等等，非常適合初學者入門，感興趣的小伙伴們可以參考一下。

JQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 編程。
jQuery 庫可以通過一行簡單的標記被添加到網頁中。
jQuery是一個JavaScript函數庫。
jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。
jQuery庫包含以下功能：
1、html，的元素選取
2、html的，元素操作
3、html dom，遍歷和修改
4、js，特效和動畫效果
5、css，操作
6、html，事件操作
7、ajax，異步請求方式
提示： 除此之外，Jquery還提供了大量的插件。

jQuery 語法
通過 jQuery，您可以選取（查詢，query） HTML 元素，并對它們執行"操作"（actions）。
jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作。
基礎語法： $(selector(選擇器)).(行為)action()
美元符號定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執行對元素的操作
jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。

文檔就緒事件
您也許已經注意到在我們的實例中的所有 jQuery 函數位于一個 document ready 函數中，這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成后才可以對 DOM 進行操作。
兩種寫法：

1. $(document).ready(function(){
   // 開始寫 jQuery 代碼...
   });
2. 簡寫 $(function(){
   // 開始寫 jQuery 代碼...
   });
   如果在文檔沒有完全加載之前就運行函數，操作可能失敗。
   
   jQuery 選擇器
   jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
   jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基于已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
   jQuery 中所有選擇器都以美元符號開頭：$()。
   jQuery 元素選擇器基于元素名選取元素。
   
   #id 選擇器
   jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
   頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
   通過 id 選取元素語法如右側所示：$("#test")
   
   .class 選擇器
   jQuery 類選擇器可以通過指定的 class 查找元素。
   語法如右側所示：$(".test")
   
   $("*")，選取所有元素  
   $(this)，選取當前 HTML 元素    
   $("p.intro")，選取 class 為 intro 的 <p> 元素  
   $("p:first")，選取第一個 <p> 元素  
   $("ul li:first")，選取第一個 <ul> 元素的第一個 <li> 元素  
   $("ul li:first-child")，選取每個 <ul> 元素的第一個 <li> 元素
   $("[href]")，選取帶有 href 屬性的元素
   $("a[target='_blank']")，選取所有 target 屬性值等于 "_blank" 的 <a> 元素
   $("a[target!='_blank']")，選取所有 target 屬性值不等于 "_blank" 的 <a> 元素  
   $(":button")，選取所有 type="button" 的 <input> 元素 和 <button> 元素  
   $("tr:even")，選取偶數位置的 <tr> 元素    
   $("tr:odd")，選取奇數位置的 <tr> 元素
   
   獨立文件中使用 jQuery 函數，如果您的網站包含許多頁面，并且您希望您的 jQuery 函數易于維護，那么請把您的 jQuery 函數放到獨立的 .js 文件中。
   
   jQuery 事件
   jQuery 是為事件處理特別設計的。
   頁面對不同訪問者的響應叫做事件。
   事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
   實例：
   在元素上移動鼠標。
   選取單選按鈕
   點擊元素
   在事件中經常使用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress(按鍵響應) 事件"。
   常見 DOM 事件：
   鼠標事件：
   click(單擊)
   dblclick(雙擊鼠標)
   mouseenter(鼠標移入)，mouseleave(鼠標移出)
   mousedown(按下鼠標按鍵)，mouseup(松開鼠標按鈕)
   hover()方法用于模擬光標懸停事件，當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter)，當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。
   鍵盤事件：keypress(按鍵響應)，keydown(按鍵按下)，keyup(按鍵恢復)
   表單事件：submit(提交)，change(更換)，focus(焦點)， blur(失去焦點)
   文檔/窗口事件： load(負荷)，resize(調整尺寸)， scroll(文本框中的起始滾動行)， unload(卸載)
   fadeOut(淡出時間)              
   在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。
   $(document).ready() 方法允許我們在文檔完全加載完后執行函數。
   
   jQuery 效果- 隱藏和顯示
   隱藏、顯示、切換，滑動，淡入淡出，以及動畫。
   slow(緩慢的)，可用作動作時間。
   
   jQuery hide(spaad) 和 show(spaad)：
   通過 jQuery，您可以使用 "hide(隱藏)" 和 "show(顯示)" 方法來隱藏和顯示 HTML 元素。
   speed 參數規定隱藏/顯示的速度，可以取以下值："slow(緩慢的)"、"fast(快速的)" 或毫秒，可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。
   
   jQuery toggle(切換)：
   通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
   
   jQuery 效果 - 淡入淡出
   通過 jQuery，您可以實現元素的淡入淡出效果。
   jQuery 擁有下面四種 fade 方法：
   fadeIn()，用于淡入已隱藏的元素。
   fadeOut()，用于淡出顯示的元素。
   fadeToggle()，可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
   fadeTo()，允許漸變為給定的不透明度（值介于 0 與 1 之間）。      
   
   jQuery 效果 - 滑動
   通過 jQuery，您可以在元素上創建滑動效果。
   jQuery 擁有以下滑動方法：
   slideDown()，用于向下滑動元素。
   slideUp()，用于向上滑動元素。
   slideToggle()，可以在 slideDown() 與 slideUp() 方法之間進行切換。如果元素向下滑動，則 slideToggle() 可向上滑動它們。如果元素向上滑動，則 slideToggle() 可向下滑動它們。
   
   jQuery 效果- 動畫
   jQuery animate() 方法允許您創建自定義的動畫。
   語法：$(selector).animate({params},speed,callback)，必需的 params 參數定義形成動畫的 CSS 屬性。
   默認情況下，所有 HTML 元素都有一個靜態位置，且無法移動，如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute！  
   jQuery animate() - 使用相對值，也可以定義相對值（該值相對于元素的當前值）。需要在值的前面加上 "+=" 或 "-=" 。
   jQuery animate() - 使用預定義的值，您也可以把屬性的動畫值設置為 "show"、"hide" 或 "toggle" 。
   jQuery animate() - 使用隊列功能，默認地，jQuery 提供針對動畫的隊列功能。
   這意味著如果您在彼此之后編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的"內部"隊列。然后逐一運行這些 animate 調用。
   
   jQuery 停止動畫
   jQuery stop() 方法用于在動畫或效果完成前對它們進行停止。
   jQuery stop() 方法，jQuery stop() 方法用于停止動畫或效果，在它們完成之前，stop() 方法適用于所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。
   語法：$(selector).stop(stopAll,goToEnd);
   可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行。
   可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
   因此，默認地，stop() 會清除在被選元素上指定的當前動畫。
   
   jQuery Callback(回調函數) 方法
   Callback 函數在當前動畫 100% 完成之后執行。
   許多 jQuery 函數涉及動畫。這些函數也許會將 speed 或 duration 作為可選參數。
   例子：$("p").hide("slow")
   speed 或 duration 參數可以設置許多不同的值，比如 "slow", "fast", "normal" 或毫秒。
   
   jQuery - 鏈(Chaining)
   通過 jQuery，可以把動作/方法鏈接在一起。
   Chaining 允許我們在一條語句中運行多個 jQuery 方法（在相同的元素上）。
   jQuery 方法鏈接：直到現在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。
   不過，有一種名為鏈接（chaining）的技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條。
   提示： 這樣的話，瀏覽器就不必多次查找相同的元素。
   如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。
   如果需要，我們也可以添加多個方法調用。
   提示：當進行鏈接時，代碼行會變得很長。不過，jQuery 語法不是很嚴格；您可以按照希望的格式來寫，包含換行和縮進。
   jQuery 會拋掉多余的空格，并當成一行長代碼來執行上面的代碼行。
   
   jQuery - 獲取內容和屬性
   jQuery 擁有可操作 HTML 元素和屬性的強大方法。
   jQuery DOM 操作：
   jQuery 中非常重要的部分，就是操作 DOM 的能力，jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
   DOM = Document Object Model（文檔對象模型）
   DOM 定義訪問 HTML 和 XML 文檔的標準："W3C 文檔對象模型獨立于平臺和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式"。
   獲得內容 - text()、html() 和 val()：
   三個簡單實用的用于 DOM 操作的 jQuery 方法：
   text() - 設置或返回所選元素的文本內容
   html() - 設置或返回所選元素的內容（包括 HTML 標記）
   val() - 設置或返回表單字段的值
   attr("要獲取的屬性") - 方法用于獲取屬性值
   
   jQuery - 設置內容和屬性
   設置內容 - text()、html() 和 val()
   text() - 設置或返回所選元素的文本內容
   html() - 設置或返回所選元素的內容（包括 HTML 標記）
   val() - 設置或返回表單字段的值
   
   text()、html() 以及 val() 的回調函數：
   text()、html() 以及 val()，同樣擁有回調函數。回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回您希望使用的字符串。
   attr() 方法也用于設置/改變屬性值。attr() 方法也允許您同時設置多個屬性。
   attr()，也提供回調函數。回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回您希望使用的字符串。
   
   jQuery - 添加元素
   通過 jQuery，可以很容易地添加新元素/內容。
   添加新內容的四個 jQuery 方法：
   append() - 在被選元素的結尾插入內容，（仍然該元素的內部），可無限追加。
   prepend() - 在被選元素的開頭插入內容，可無限追加。
   after() - 在被選元素之后插入內容
   before() - 在被選元素之前插入內容
   
   jQuery - 刪除元素
   通過 jQuery，可以很容易地刪除已有的 HTML 元素。
   可使用以下兩個 jQuery 方法：
   remove() - 刪除被選元素（及其子元素），remove() 方法也可接受一個參數，允許您對被刪元素進行過濾，該參數可以是任何 jQuery 選擇器的語法。
   empty() - 從被選元素中刪除子元素
   
   jQuery - 獲取并設置 CSS 類
   通過 jQuery，可以很容易地對 CSS 元素進行操作。
   jQuery 擁有若干進行 CSS 操作的方法：
   addClass() - 向被選元素添加一個或多個類
   removeClass() - 從被選元素刪除一個或多個類
   toggleClass() - 對addClass()和removeClass() 的切換
   
   jQuery css() 方法
   css() - 設置或返回被選元素的一個或多個樣式屬性
   如需返回指定的 CSS 屬性的值，請使用如右所示語法：css("(屬性名)propertyname")。
   如需設置指定的 CSS 屬性，請使用如右所示語法：css("(屬性名)propertyname","(值)value")。
   如需設置多個 CSS 屬性，請使用如下語法：css({"propertyname":"value","propertyname":"value",...})。
   jQuery 尺寸
   通過 jQuery，很容易處理元素和瀏覽器窗口的尺寸。
   jQuery 提供多個處理尺寸的重要方法：
   width()
   height()
   innerWidth()
   innerHeight()
   outerWidth()
   outerHeight()
   jQuery width() 和 height() 方法：
   width() 方法設置或返回元素的寬度（不包括內邊距，邊框或外邊距）。
   height() 方法設置或返回元素的高度（不包括內邊距，邊框或外邊距）。
   jQuery innerWidth() 和 innerHeight() 方法：
   innerWidth() 方法返回元素的寬度（包括內邊距，不包括外邊距）。
   innerHeight() 方法返回元素的高度（包括內邊距，不包括外邊距）。
   jQuery outerWidth() 和 outerHeight() 方法：
   outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
   outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
   jQuery 遍歷
   jQuery 遍歷，意為"移動"，用于根據其相對于其他元素的關系來"查找"（或選取）HTML 元素。以某項選擇開始，并沿著這個選擇移動，直到抵達您期望的元素為止。
   遍歷 DOM：jQuery 提供了多種遍歷 DOM 的方法，遍歷方法中最大的種類是樹遍歷（tree-traversal）。
   jQuery 遍歷 - 祖先：
   祖先是父、祖父或曾祖父等等，通過 jQuery，您能夠向上遍歷 DOM 樹，以查找元素的祖先。
   這些 jQuery 方法很有用，它們用于向上遍歷 DOM 樹：
   parent()方法，返回被選元素的直接父元素，該方法只會向上一級對 DOM 樹進行遍歷。
   parents()方法，返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)。
   parentsUntil()方法，返回介于兩個給定元素之間的所有祖先元素。
   jQuery 遍歷 - 后代：
   后代是子、孫、曾孫等等，通過 jQuery，您能夠向下遍歷 DOM 樹，以查找元素的后代。
   下面是用于向下遍歷 DOM 樹的 jQuery 方法：
   children()方法，返回被選元素的所有直接子元素，該方法只會向下一級對 DOM 樹進行遍歷。
   find()方法，返回被選元素的后代元素，一路向下直到最后一個后代。
   jQuery 遍歷 - 同胞(siblings)：
   同胞擁有相同的父元素，通過 jQuery，您能夠在 DOM 樹中遍歷元素的同胞元素。
   在 DOM 樹中水平遍歷，有許多有用的方法讓我們在 DOM 樹進行水平遍歷：
   siblings() 方法，返回被選元素的所有同胞元素。
   next()方法，返回被選元素的下一個同胞元素，該方法只返回一個元素。
   nextAll()方法，返回被選元素的所有跟隨的同胞元素。
   nextUntil()方法，返回介于兩個給定參數之間的所有跟隨的同胞元素。
   prev()，prevAll()，prevUntil()方法，工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞之前元素遍歷，而不是之后元素遍歷）。
   jQuery 遍歷- 過濾：
   縮小搜索元素的范圍：
   三個最基本的過濾方法是：first(), last() 和 eq()，它們允許您基于其在一組元素中的位置來選擇一個特定的元素。
   其他過濾方法，比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標準的元素。
   first()方法，返回被選元素的首個元素。
   last()方法，返回被選元素的最后一個元素。
   eq()方法，返回被選元素中帶有指定索引號的元素，索引號從 0 開始，因此首個元素的索引號是 0 而不是 1。
   filter()方法，允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
   not()方法，返回不匹配標準的所有元素，提示：not() 方法與 filter() 相反。
   jQuery - AJAX(創建交互式 Web 應用程序而無需犧牲瀏覽器兼容性的流行方法)
   AJAX 是與服務器交換數據的技術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。
   AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）,簡短地說，在不重載整個網頁的情況下，AJAX 通過后臺加載數據，并在網頁上進行顯示。
   jQuery 提供多個與 AJAX 有關的方法。
   通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。
   jQuery - AJAX load() 方法：
   jQuery load() 方法是簡單但強大的 AJAX 方法，load() 方法從服務器加載數據，并把返回的數據放入被選元素中。
   語法：$(selector).load(負荷)(URL(地址),data(數據),callback)。
   必需的 URL 參數規定您希望加載的 URL。
   可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
   可選的 callback 參數是 load() 方法完成后所執行的函數名稱。
   responseTxt - 包含調用成功時的結果內容
   statusTXT - 包含調用的狀態
   xhr - 包含 XMLHttpRequest 對象
   jQuery - AJAX get() 和 post() 方法：
   jQuery get() 和 post() 方法用于通過 HTTP GET 或 POST 請求從服務器請求數據。
   HTTP 請求：GET vs. POST：
   兩種在客戶端和服務器端進行請求-響應的常用方法是：GET 和 POST。
   GET - 從指定的資源請求數據
   POST - 向指定的資源提交要處理的數據
   GET 基本上用于從服務器獲得（取回）數據。注釋：GET 方法可能返回緩存數據。
   POST 也可用于從服務器獲取數據。不過，POST 方法不會緩存數據，并且常用于連同請求一起發送數據。
   $.get() 方法通過 HTTP GET 請求從服務器上請求數據，語法：$.get(URL,callback)，必需的 URL 參數規定您希望請求的 URL，可選的 callback 參數是請求成功后所執行的函數名。
   $.post() 方法通過 HTTP POST 請求向服務器提交數據，語法：$.post(URL,data,callback)，必需的 URL 參數規定您希望請求的 URL。可選的 data 參數規定連同請求發送的數據。
   可選的 callback 參數是請求成功后所執行的函數名。
   jQuery - noConflict(無抵觸) 方法
   如何在頁面上同時使用 jQuery 和其他框架？
   
   jQuery 和其他 JavaScript 框架：
   正如您已經了解到的，jQuery 使用 $ 符號作為 jQuery 的簡寫。
   noConflict() 方法，會釋放對 $ 標識符的控制，這樣其他腳本就可以使用它了，您也可以創建自己的簡寫。noConflict() 可返回對 jQuery 的引用，您可以把它存入變量，以供稍后使用。
   如果你的 jQuery 代碼塊使用 $ 簡寫，并且您不愿意改變這個快捷方式，那么您可以把 $ 符號作為變量傳遞給 ready 方法。這樣就可以在函數內使用 $ 符號了 - 而在函數外，依舊不得不使用 "jQuery"。
   JSONP(跨域) 
   Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。
   為什么我們從不同的域（網站）訪問數據需要一個特殊的技術(JSONP )呢？這是因為同源策略。
   同源策略，它是由Netscape提出的一個著名的安全策略，現在所有支持JavaScript 的瀏覽器都會使用這個策略。

看完上述內容，你們對jQuery有進一步的了解嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀。