1. 程式人生 > >jQuery中的屬性操作,jQuery中的事件處理、jQuery 中的動畫簡單介紹

jQuery中的屬性操作,jQuery中的事件處理、jQuery 中的動畫簡單介紹

jQuery中的屬性操作,jQuery中的事件處理、jQuery 中的動畫簡單介紹

getAttribute(name)

setAttribute(nameTom)

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 屬性(css 的一個屬性)

獲取和設定元素高度寬度: 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(): 該方法可以為元素繫結處理函式當處理函式觸發一次後立即被刪除即在每個物件上事件處理函式只會被執行一次.

jQuery 中的動畫隱藏和顯示

hide(): 在 HTML 文件中為一個元素呼叫 hide() 方法會將該元素的 display 樣式改為 none. 程式碼功能同 css(displaynone);

show(): 將元素的 display 樣式改為先前的顯示狀態.

以上兩個方法在不帶任何引數的情況下作用是立即隱藏或顯示匹配的元素不會有任何動畫可以通過制定速度引數使元素動起來.

以上兩個方法會同時減少(增大)內容的高度寬度和不透明度.

jQuery 中的動畫(2)

fadeIn(), fadeOut(): 只改變元素的透明度. fadeOut() 會在指定的一段時間內降低元素的不透明度直到元素完全消失. fadeIn() 則相反.

slideDown(), slideUp(): 只會改變元素的高度如果一個元素的 display 屬性為 none, 當呼叫 slideDown() 方法時這個元素將由上至下延伸顯示. slideUp() 方法正好相反元素由下至上縮短隱藏

jQuery 中的動畫(3)

toggle(): 切換元素的可見狀態如果元素時可見的則切換為隱藏如果元素時隱藏的則切換為可見的

slideToggle(): 通過高度變化來切換匹配元素的可見性

fadeTo(): 把不透明度以漸近的方式調整到指定的值(0 – 之間). 

JQuery 載入並解析 XML

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

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