jQuery中的屬性操作，jQuery中的事件處理、jQuery 中的動畫簡單介紹
jQuery中的屬性操作，jQuery中的事件處理、jQuery 中的動畫簡單介紹
getAttribute(‘name’)
setAttribute(‘name’, ‘Tom’)
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(“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() 方法來進行遍歷