Web前端開發(fā)-JQuery

1、 Web前端開發(fā)是從網(wǎng)頁制作演變而來的，之前使用Photoshop和Dreamweaver就可以方便的制作網(wǎng)頁。但如果要讓網(wǎng)頁的內(nèi)容更加生動，提供更多交互形式的用戶體驗，以滿足企業(yè)級別的需求。那么還需要掌握基本的Web前端開發(fā)技術(shù)，其中包括：CSS、HTML、DOM、Ajax、JavaScript等。jQuery的由來及簡介一jQuery對象和DOM對象二jQuery選擇器三jQuery中的DOM操作四使用jQuery創(chuàng)建動畫效果三五 DOM(Document Object Model文檔對象模型)：一種與瀏覽器, 平臺, 語言無關(guān)的接口, 使用該接口可以輕松地訪問頁面中所有的標(biāo)準(zhǔn)組件 DOM

2、 操作的分類: DOM Core: DOM Core 并不專屬于 JavaScript, 任何一種支持 DOM 的程序設(shè)計語言都可以使用它.它的用途并非僅限于處理網(wǎng)頁, 也可以用來處理任何一種是用標(biāo)記語言編寫出來的文檔, 例如: XML HTML DOM: 使用JavaScript 和DOM為HTML 文件編寫腳本時,有許多專屬于 HTML-DOM 的屬性 CSS-DOM:針對于CSS操作,在JavaScript中,CSS-DOM主要用于獲取和設(shè)置style對象的各種屬性 查找節(jié)點: 查找元素節(jié)點: 通過 jQuery 選擇器完成. 查找屬性節(jié)點: 查找到所需要的元素之后, 可以調(diào)用 jQue

3、ry 對象的 attr() 方法來獲取它的各種屬性值 創(chuàng)建節(jié)點: 使用jQuery的工廠函數(shù)$():$(html);會根據(jù)傳入的html 標(biāo)記字符串創(chuàng)建一個 DOM 對象,并把這個DOM對象包裝成一個 jQuery對象返回.注意: 動態(tài)創(chuàng)建的新元素節(jié)點不會被自動添加到文檔中, 而是需要使用其他方法將其插入到文檔中; 當(dāng)創(chuàng)建單個元素時, 需注意閉合標(biāo)簽和使用標(biāo)準(zhǔn)的 XHTML 格式. 例如創(chuàng)建一個元素, 可以使用 $(“”) 或 $(“”), 但不能使用 $(“”) 或 $(“創(chuàng)建文本節(jié)點就是在創(chuàng)建元素”) 節(jié)點時直接把文本內(nèi)容寫出來; 創(chuàng)建屬性節(jié)點也是在創(chuàng)建元素節(jié)點時一起創(chuàng)建 插入節(jié)點:動態(tài)創(chuàng)

4、建了 HTML 元素之后, 還需要將新創(chuàng)建的節(jié)點插入到文檔中, 即成為文檔中某個節(jié)點的子節(jié)點 以上方法不但能將新創(chuàng)建的 DOM 元素插入到文檔中,也能對原有的DOM元素進(jìn)行移動. 刪除節(jié)點： remove(): 從 DOM 中刪除所有匹配的元素, 傳入的參數(shù)用于根據(jù) jQuery 表達(dá)式來篩選元素. 當(dāng)某個節(jié)點用 remove() 方法刪除后, 該節(jié)點所包含的所有后代節(jié)點將被同時刪除. 這個方法的返回值是一個指向已被刪除的節(jié)點的引用. empty(): 清空節(jié)點 清空元素中的所有后代節(jié)點(不包含屬性節(jié)點). 替換節(jié)點: replaceWith(): 將所有匹配的元素都替換為指定的 HTML 或

5、 DOM 元素 replaceAll(): 與replaceWith()方法相反. 注意: 若在替換之前, 已經(jīng)在元素上綁定了事件, 替換后原先綁定的事件會與原先的元素一起消失 attr(): 獲取html屬性和設(shè)置屬性 當(dāng)為該方法傳遞一個參數(shù)時, 即為某元素的獲取指定屬性 當(dāng)為該方法傳遞兩個參數(shù)時, 即為某元素設(shè)置指定屬性的值 jQuery 中有很多方法都是一個函數(shù)實現(xiàn)獲取和設(shè)置. 如: attr(), html(), text(), val(), height(), width(), css() 等. removeAttr(): 刪除指定元素的指定屬性 設(shè)置和獲取 HTML, 文本和值 h

6、tml()- 讀取和設(shè)置某個元素中的 HTML 內(nèi)容,可用于 XHTML, 但不能用于 XML 文檔 text()- 讀取和設(shè)置某個元素中的文本內(nèi)容,既可以用于 XHTML 也可以用于 XML 文檔. val() - 讀取和設(shè)置表單中的值,類似JavaScript 中的value屬性. 對于文本框, 下拉列表框, 單選框該方法可返回元素的值(多選框只能返回第一個值).如果為多選下拉列表框, 則返回一個包含所有選擇值的數(shù)組 Class的獲取和設(shè)置: class是元素的一個屬性,所以都可以使用attr()方法來完成. addClass()- 追加樣式: removeClass()- 移除樣式，從匹

7、配的元素中刪除全部或指定的class toggleClass()- 切換樣式，控制樣式上的重復(fù)切換.如果類名存在則刪除它, 如果類名不存在則添加它. hasClass() - 判斷是否含有某個class, 有則返回 true;否則返回 false CSS-DOM 操作 獲取和設(shè)置元素的樣式屬性: css() 獲取和設(shè)置元素透明度: opacity 屬性 獲取和設(shè)置元素高度,寬度: height(), width(). 在設(shè)置值時, 若只傳遞數(shù)字, 則默認(rèn)單位是px. 如需要使用其他單位則需傳遞一個字符串,例如 $(“p:first”).height(“2em”); 獲取元素在當(dāng)前視窗中的相對位

8、移: offset(). 其返回對象包含了兩個屬性: top, left.該方法只對可見元素有效 children()- 取得匹配元素的所有直接子元素組成的集合。 next()- 取得匹配元素后面緊鄰的同輩元素的集合（只有一個元素）。 prev()- 取得匹配元素前面緊鄰的同輩元素的集合（只有一個元素）。 siblings()- 取得匹配元素前后所有的同輩元素。 find() 取得匹配元素的符合條件的后代元素，直到最后一個后代 parent()- 取得匹配元素的直接父元素。 parents()- 取得匹配元素的所有祖先元素，直到文檔的根元素。 parentsUntil()-返回介于兩個匹配元素

9、之間的所有祖先元素。 加載 DOM 在頁面加載完畢后, 瀏覽器會通過 JavaScript 為 DOM 元素添加事件.在常規(guī)的 JavaScript 代碼中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready()方法. 事件綁定 對匹配的元素進(jìn)行特定的事件綁定: bind() 直接綁定指定事件，事件類型即方法名，支持click、focus、blur、submit等。 合成事件 hover(): 模擬光標(biāo)懸停時間. 當(dāng)光標(biāo)移動到元素上時, 會觸發(fā)指定的第一個函數(shù), 當(dāng)光標(biāo)移出這個元素時, 會觸發(fā)指定的第二個函數(shù). toggle(): 用于模

10、擬鼠標(biāo)連續(xù)單擊事件. 第一次單擊元素, 觸發(fā)指定的第一個函數(shù), 當(dāng)再一次單擊同一個元素時, 則觸發(fā)指定的第二個函數(shù), 如果有更多個函數(shù), 則依次觸發(fā), 直到最后一個. toggle() 的另一個作用: 切換元素的可見狀態(tài). 移除事件 移除某按鈕上的所有 click 事件: $(“btn”).unbind(“click”) 移除某按鈕上的所有事件: $(“btn”).unbind(); one(): 該方法可以為元素綁定處理函數(shù). 當(dāng)處理函數(shù)觸發(fā)一次后, 立即被刪除. 即在每個對象上, 事件處理函數(shù)只會被執(zhí)行一次. 移除事件 移除某按鈕上的所有 click 事件: $(“btn”).unbind

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

12、ick”) 移除某按鈕上的所有事件: $(“btn”).unbind(); one(): 該方法可以為元素綁定處理函數(shù). 當(dāng)處理函數(shù)觸發(fā)一次后, 立即被刪除. 即在每個對象上, 事件處理函數(shù)只會被執(zhí)行一次.jQuery的由來及簡介一jQuery對象和DOM對象二jQuery選擇器三jQuery中的DOM操作四使用使用jQueryjQuery創(chuàng)建動畫效果創(chuàng)建動畫效果三五 hide(): 在 HTML 文檔中, 為一個元素調(diào)用 hide() 方法會將該元素的 display 樣式改為 none. 代碼功能同 css(“display”, “none”); show(): 將元素的 display

13、樣式改為先前的顯示狀態(tài). 以上兩個方法在不帶任何參數(shù)的情況下, 作用是立即隱藏或顯示匹配的元素, 不會有任何動畫. 可以通過制定速度參數(shù)使元素動起來. 以上兩個方法會同時減少(增大)內(nèi)容的高度, 寬度和不透明度. fadeIn(), fadeOut(): 只改變元素的透明度. fadeOut() 會在指定的一段時間內(nèi)降低元素的不透明度, 直到元素完全消失. fadeIn() 則相反. slideDown(), slideUp():只會改變元素的高度. 如果一個元素的 display 屬性為 none, 當(dāng)調(diào)用 slideDown()方法時, 這個元素將由上至下延伸顯示. slideUp() 方法正好相反, 元素由下至上縮短隱藏. toggle(): 切換元素的可見狀態(tài): 如果元素時可見的, 則切換為隱藏; 如果元素時隱藏的, 則切