當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

尚硅谷_jQuery_学习笔记

發布時間：2023/12/20 编程问答 46 豆豆

生活随笔收集整理的這篇文章主要介紹了尚硅谷_jQuery_学习笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript 庫作用及對比

為了簡化 JavaScript 的開發, 一些 JavsScript 庫誕生了. JavaScript 庫封裝了很多預定義的對象和實用函數。能幫助使用者建立有高難度交互的 Web2.0 特性的富客戶端頁面, 并且兼容各大瀏覽器。
當前流行的 JavaScript 庫有:
prototype、**、Ext JS、mootools、jQuery

jQuery 簡介

jQuery 是繼 Prototype 之后又一個優秀的 JavaScript 庫。
jQuery 理念: 寫得少, 做得多. 優勢如下:

輕量級
強大的選擇器
出色的 DOM 操作的封裝
可靠的事件處理機制
完善的 Ajax
出色的瀏覽器兼容性
鏈式操作方式
……

jQuery：helloworld

jQuery 對象

jQuery 對象就是通過 jQuery($()) 包裝 DOM 對象后產生的對象
jQuery 對象是 jQuery 獨有的。如果一個對象是 jQuery 對象, 那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
jQuery 對象無法使用 DOM 對象的任何方法, 同樣 DOM 對象也不能使用 jQuery 里的任何方法
約定：如果獲取的是 jQuery 對象, 那么要在變量前面加上 $
var $variable = jQuery 對象
var variable = DOM 對象

jQuery 對象轉成 DOM 對象

jQuery 對象不能使用 DOM 中的方法, 但如果 jQuery 沒有封裝想要的方法, 不得不使用 DOM 對象的時候, 有如下兩種處理方法:
(1) jQuery 對象是一個數組對象, 可以通過 [index] 的方法得到對應的 DOM對象。

var $cr = $("#cr"); var cr = $cr[0];

(2) 使用 jQuery 中的 get(index) 方法得到相應的 DOM 對象

var $cr = $("#cr"); var cr = $cr.get(0);

DOM 對象轉成 jQuery 對象

對于一個 DOM 對象, 只需要用 $() 把 DOM 對象包裝起來(jQuery 對象就是通過 jQuery 包裝 DOM 對象后產生的對象), 就可以獲得一個 jQuery 對象.

var cr = document.getElementById("cr"); var $cr = $(cr);

轉換后就可以使用 jQuery 中的方法了。

jQuery 選擇器

選擇器是 jQuery 的根基, 在 jQuery 中, 對事件處理, 遍歷 DOM 和 Ajax 操作都依賴于選擇器。
jQuery 選擇器的優點：

簡潔的寫法
完善的事件處理機制

基本選擇器

基本選擇器是 jQuery 中最常用的選擇器, 也是最簡單的選擇器, 它通過元素 id, class 和標簽名來查找 DOM 元素(在網頁中 id 只能使用一次, class 允許重復使用).

基本選擇器示例

改變 id 為 one 的元素的背景色為 # bbffaa
改變 class 為 mini 的所有元素的背景色為 # bbffaa
改變元素名為<div> 的所有元素的背景色為 # bbffaa
改變所有元素的背景色為 # bbffaa
改變所有的<span>元素和 id 為 two 的元素的背景色為 # bbffaa

層次選擇器

如果想通過 DOM 元素之間的層次關系來獲取特定元素, 例如后代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使用層次選擇器.

注意: (“prev ~ div”) 選擇器只能選擇 “# prev ” 元素后面的同輩元素; 而 jQuery 中的方法 siblings() 與前后位置無關, 只要是同輩節點就可以選取。

層次選擇器示例
- 改變 <body> 內所有 <div> 的背景色為 # bbffaa
- 改變<body>內子<div> 的背景色為 # bbffaa
- 改變 id 為 one 的下一個 <div> 的背景色為 # bbffaa
- 改變 id 為 two 的元素后面的所有兄弟<div>的元素的背景色為 # bbffaa
- 改變 id 為 two 的元素所有 <div> 兄弟元素的背景色為 # bbffaa

過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需的 DOM 元素, 該選擇器都以 “:” 開頭

按照不同的過濾規則, 過濾選擇器可以分為1.基本過濾, 2.內容過濾, 3.可見性過濾, 4.屬性過濾, 5.子元素過濾, 6.表單對象屬性過濾選擇器.

1.基本過濾選擇器

基本過濾選擇器示例

改變第一個 div 元素的背景色為 # bbffaa
改變最后一個 div 元素的背景色為 # bbffaa
改變class不為 one 的所有 div 元素的背景色為 # bbffaa
改變索引值為偶數的 div 元素的背景色為 # bbffaa
改變索引值為奇數的 div 元素的背景色為 # bbffaa
改變索引值為大于 3 的 div 元素的背景色為 # bbffaa
改變索引值為等于 3 的 div 元素的背景色為 # bbffaa
改變索引值為小于 3 的 div 元素的背景色為 # bbffaa
改變所有的標題元素的背景色為 # bbffaa
改變當前正在執行動畫的所有元素的背景色為 # bbffaa

2.內容過濾選擇器

內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文本內容上

內容過濾選擇器示例

改變含有文本 ‘di’ 的 div 元素的背景色為 # bbffaa
改變不包含子元素(或者文本元素) 的 div 空元素的背景色為 # bbffaa
改變含有 class 為 mini 元素的 div 元素的背景色為 # bbffaa
改變含有子元素(或者文本元素)的div元素的背景色為 # bbffaa

3.可見性過濾選擇器

可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素

可見選擇器 :hidden 不僅包含樣式屬性 display 為 none 的元素, 也包含文本隱藏域 (<input type=“hidden”>)和 visible:hidden 之類的元素。

可見性過濾選擇器示例

改變所有可見的div元素的背景色為 # bbffaa
選取所有不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來，并設置其背景色為 # bbffaa
選取所有的文本隱藏域, 并打印它們的值

4.屬性過濾選擇器

屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素

屬性過濾選擇器示例

選取下列元素,改變其背景色為 # bbffaa
含有屬性title 的div元素.
屬性title值等于”test”的div元素.
屬性title值不等于”test”的div元素(沒有屬性title的也將被選中).
屬性title值以”te”開始的div元素.
屬性title值以”est”結束的div元素.
屬性title值含有”es”的div元素.
選取有屬性id的div元素，然后在結果中選取屬性title值含有“es”的 div 元素.

5.子元素過濾選擇器

nth-child() 選擇器詳解如下：

(1) :nth-child(even/odd): 能選取每個父元素下的索引值為偶(奇)數的元素
(2):nth-child(2): 能選取每個父元素下的索引值為 2 的元素
(3):nth-child(3n): 能選取每個父元素下的索引值是 3 的倍數的元素
(3):nth-child(3n + 1): 能選取每個父元素下的索引值是 3n + 1的元素

子元素過濾選擇器示例

選取下列元素,改變其背景色為 # bbffaa
每個class為one的div父元素下的第2個子元素.
每個class為one的div父元素下的第一個子元素
每個class為one的div父元素下的最后一個子元素
如果class為one的div父元素下的僅僅只有一個子元素，那么選中這個子元素

6.表單對象屬性過濾選擇器

此選擇器主要對所選擇的表單元素進行過濾

表單對象屬性過濾選擇器示例

利用 jQuery 對象的 val() 方法改變表單內可用 <input>元素的值
利用 jQuery 對象的 val() 方法改變表單內不可用<input>元素的值
利用 jQuery 對象的 length 屬性獲取多選框選中的個數
利用 jQuery 對象的 text() 方法獲取下拉框選中的內容

表單選擇器

jQuery 中的 DOM 操作

DOM(Document Object Model—文檔對象模型)：一種與瀏覽器, 平臺, 語言無關的接口, 使用該接口可以輕松地訪問頁面中所有的標準組件
DOM 操作的分類:
- DOM Core: DOM Core 并不專屬于 JavaScript, 任何一種支持 DOM 的程序設計語言都可以使用它. 它的用途并非僅限于處理網頁, 也可以用來處理任何一種是用標記語言編寫出來的文檔, 例如: XML
- HTML DOM: 使用 JavaScript 和 DOM 為 HTML 文件編寫腳本時,　有許多專屬于 HTML-DOM 的屬性
- CSS-DOM:針對于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于獲取和設置 style 對象的各種屬性

查找節點

查找節點:

查找屬性節點: 通過 jQuery 選擇器完成.
操作屬性節點: 查找到所需要的元素之后, 可以調用 jQuery 對象的 attr() 方法來獲取它的各種屬性值
操作文本節點：通過 text() 方法

創建節點

創建節點: 使用 jQuery 的工廠函數 ():(html); 會根據傳入的 html 標記字符串創建一個 DOM 對象, 并把這個 DOM 對象包裝成一個 jQuery 對象返回.
注意:
動態創建的新元素節點不會被自動添加到文檔中, 而是需要使用其他方法將其插入到文檔中;
當創建單個元素時, 需注意閉合標簽和使用標準的 XHTML 格式. 例如創建一個
元素, 可以使用$(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”)或 $(“<P>”)
創建文本節點就是在創建元素節點時直接把文本內容寫出來; 創建屬性節點也是在創建元素節點時一起創建

插入節點(1)

動態創建 HTML 元素并沒有實際用處, 還需要將新創建的節點插入到文檔中, 即成為文檔中某個節點的子節點

插入節點(2)

以上方法不但能將新創建的 DOM 元素插入到文檔中, 也能對原有的 DOM 元素進行移動.

刪除節點

remove(): 從 DOM 中刪除所有匹配的元素, 傳入的參數用于根據 jQuery 表達式來篩選元素. 當某個節點用 remove() 方法刪除后, 該節點所包含的所有后代節點將被同時刪除. 這個方法的返回值是一個指向已被刪除的節點的引用.
empty(): 清空節點 – 清空元素中的所有后代節點(不包含屬性節點).

復制節點

clone(): 克隆匹配的 DOM 元素, 返回值為克隆后的副本. 但此時復制的新節點不具有任何行為.
clone(true): 復制元素的同時也復制元素中的的事件

替換節點

replaceWith(): 將所有匹配的元素都替換為指定的 HTML 或 DOM 元素
replaceAll(): 顛倒了的 replaceWith() 方法.
注意: 若在替換之前, 已經在元素上綁定了事件, 替換后原先綁定的事件會與原先的元素一起消失

包裹節點

wrap(): 將指定節點用其他標記包裹起來. 該方法對于需要在文檔中插入額外的結構化標記非常有用, 而且不會破壞原始文檔的語義.
wrapAll(): 將所有匹配的元素用一個元素來包裹. 而 wrap() 方法是將所有的元素進行單獨包裹.
wrapInner(): 將每一個匹配的元素的子內容(包括文本節點)用其他結構化標記包裹起來.

屬性操作

attr(): 獲取屬性和設置屬性
- 當為該方法傳遞一個參數時, 即為某元素的獲取指定屬性
- 當為該方法傳遞兩個參數時, 即為某元素設置指定屬性的值
jQuery 中有很多方法都是一個函數實現獲取和設置. 如: attr(), html(), text(), val(), height(), width(), css() 等.
removeAttr(): 刪除指定元素的指定屬性

設置和獲取 HTML, 文本和值

讀取和設置某個元素中的 HTML 內容: html() . 該方法可以用于 XHTML, 但不能用于 XML 文檔
讀取和設置某個元素中的文本內容: text(). 該方法既可以用于 XHTML 也可以用于 XML 文檔.
讀取和設置某個元素中的值: val() — 該方法類似 JavaScript 中的 value 屬性. 對于文本框, 下拉列表框, 單選框該方法可返回元素的值(多選框只能返回第一個值).如果為多選下拉列表框, 則返回一個包含所有選擇值的數組

常用的遍歷節點方法

取得匹配元素的所有子元素組成的集合: children(). 該方法只考慮子元素而不考慮任何后代元素.
取得匹配元素后面緊鄰的同輩元素的集合(但集合中只有一個元素): next()
取得匹配元素前面緊鄰的同輩元素的集合(但集合中只有一個元素): prev()
取得匹配元素前后所有的同輩元素: siblings()

樣式操作

獲取 class 和設置 class : class 是元素的一個屬性, 所以獲取 class 和設置 class 都可以使用 attr() 方法來完成.
追加樣式: addClass()
移除樣式: removeClass() — 從匹配的元素中刪除全部或指定的 class
切換樣式: toggleClass() — 控制樣式上的重復切換.如果類名存在則刪除它, 如果類名不存在則添加它.
判斷是否含有某個樣式: hasClass() — 判斷元素中是否含有某個 class, 如果有, 則返回 true; 否則返回 false

CSS-DOM 操作

獲取和設置元素的樣式屬性: css()
獲取和設置元素透明度: opacity 屬性
獲取和設置元素高度, 寬度: height(), width(). 在設置值時, 若只傳遞數字, 則默認單位是 px. 如需要使用其他單位則需傳遞一個字符串, 例如 $(“p:first”).height(“2em”);
獲取元素在當前視窗中的相對位移: offset(). 其返回對象包含了兩個屬性: top, left. 該方法只對可見元素有效

jQuery 中的事件– 加載 DOM

在頁面加載完畢后, 瀏覽器會通過 JavaScript 為 DOM 元素添加事件. 在常規的 JavaScript 代碼中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

事件綁定

對匹配的元素進行特定的事件綁定: bind()

提示：使用 jQuery 的 is() 方法判斷元素是否可見

合成事件

hover(): 模擬光標懸停事件. 當光標移動到元素上時, 會觸發指定的第一個函數, 當光標移出這個元素時, 會觸發指定的第二個函數.
toggle(): 用于模擬鼠標連續單擊事件. 第一次單擊元素, 觸發指定的第一個函數, 當再一次單擊同一個元素時, 則觸發指定的第二個函數, 如果有更多個函數, 則依次觸發, 直到最后一個.
toggle() 的另一個作用: 切換元素的可見狀態.

事件冒泡

事件會按照 DOM 層次結構像水泡一樣不斷向上只止頂端
解決: 在事件處理函數中返回 false, 會對事件停止冒泡. 還可以停止元素的默認行為.

事件對象的屬性

事件對象: 當觸發事件時, 事件對象就被創建了. 在程序中使用事件只需要為函數添加一個參數. 該事件對象只有事件處理函數才能訪問到. 事件處理函數執行完畢后, 事件對象就被銷毀了.
event.pageX, event.pageY: 獲取到光標相對于頁面的 x, y 坐標.

移除事件

移除某按鈕上的所有 click 事件: $(“btn”).unbind(“click”)
移除某按鈕上的所有事件: $(“btn”).unbind();
one(): 該方法可以為元素綁定處理函數. 當處理函數觸發一次后, 立即被刪除. 即在每個對象上, 事件處理函數只會被執行一次.

$("a").one("click", function(){alert("click me just once!");return false; });

jQuery 中的動畫: 隱藏和顯示

hide(): 在 HTML 文檔中, 為一個元素調用 hide() 方法會將該元素的 display 樣式改為 none. 代碼功能同 css(“display”, “none”);
show(): 將元素的 display 樣式改為先前的顯示狀態.
以上兩個方法在不帶任何參數的情況下, 作用是立即隱藏或顯示匹配的元素, 不會有任何動畫. 可以通過制定速度參數使元素動起來.
以上兩個方法會同時減少(增大)內容的高度, 寬度和不透明度.

jQuery 中的動畫(2)

fadeIn(), fadeOut(): 只改變元素的透明度. fadeOut() 會在指定的一段時間內降低元素的不透明度, 直到元素完全消失. fadeIn() 則相反.
slideDown(), slideUp(): 只會改變元素的高度. 如果一個元素的 display 屬性為 none, 當調用 slideDown() 方法時, 這個元素將由上至下延伸顯示. slideUp() 方法正好相反, 元素由下至上縮短隱藏.

jQuery 中的動畫(3)

toggle(): 切換元素的可見狀態: 如果元素時可見的, 則切換為隱藏; 如果元素時隱藏的, 則切換為可見的.
slideToggle(): 通過高度變化來切換匹配元素的可見性.
fadeTo(): 把不透明度以漸近的方式調整到指定的值(0 – 1 之間).

JQuery 加載并解析 XML

JQuery 可以通過$.get()或$.post()方法來加載 xml.

JQuery 解析 XML 與解析 DOM 一樣, 可以使用 find(), children() 等函數來解析和用 each() 方法來進行遍歷

總結

以上是生活随笔為你收集整理的尚硅谷_jQuery_学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：尚硅谷_JavaScript_学习笔记
下一篇：尚硅谷_Ajax_学习笔记