一)jQuery九類選擇器【參見手冊】
目的:通過九類選擇器,能定位web頁中的任何標籤
(1)基本選擇器
(2)層次選擇器
(3)增強基本選擇器
(4)內容選擇器
(5)可見性選擇器
(6)屬性選擇器
(7)子元素選擇器
(8)表單選擇器
(9)表單對象屬性選擇器
注意:項目中,通常是多種選擇器一起使用
二)jQuery常用Method-API
標準規則下的常用,注意:以下方法均由對象調用
each():是中專用於迭代數組的方法,參數爲一個處理函數,this表示當前需要迭代的js對象
append():追加到父元素之後
prepend():追加到父元素之前
after():追加到兄弟元素之後
before():追加到兄弟元素之前
attr(name):獲取屬性值
attr(name,value):給符合條件的標籤添加key-value屬性對
$("<div id='xxID'>HTML代碼</div>"):創建元素,屬性,文本
remove():刪除自已及其後代節點
val():獲取value屬性的值
val(""):設置value屬性值爲""空串,相當於清空
text():獲取HTML或XML標籤之間的值
text(""):設置HTML或XML標籤之間的值爲""空串
clone():只複製樣式,不復制行爲
clone(true):既複製樣式,又複製行爲
replaceWith():替代原來的節點
removeAttr():刪除已存在的屬性
addClass():增加已存在的樣式
removeClass():刪除已存在的樣式
hasClass():判斷標籤是否有指定的樣式,true表示有樣式,false表示無樣式
toggleClass():如果標籤有樣式就刪除,否則增加樣式
offset():獲取對象的left和top座標
offset({top:100,left:200}):將對象直接定位到指定的left和top座標
width():獲取對象的寬
width(300):設置對象的寬
height():獲取對象的高
height(500):設置對象的高
children():只查詢子節點,不含後代節點
next():下一下兄弟節點
prev():上一下兄弟節點
siblings():上下兄弟節點
show():顯示對象
hide():隱藏對象
fadeIn():淡入顯示對象
fadeOut():淡出隱藏對象
slideUp():向上滑動
slideDown():向下滑動
slideToggle():上下切換滑動,速度快點
面試題--find("9類選擇器"):查詢指定的節點和多重each()迭代
var $tr = $("table tr:lt(4):even");
$tr.each(function(){
//tr中查找td標籤,$(this)表示tr
var $td = $(this).find("td");
$td.each(function(){
//$(this)表示td
vartxt = $(this).text();
alert(txt);
});
});
三)jQuery常用Event-API
目的:對web頁面(HTML/JSP)進行事件觸發,完成特殊效果的處理
window.onload:在瀏覽器加載web頁面時觸發,可以寫多次onload事件,但後者覆蓋前者
ready:在瀏覽器加載web頁面時觸發,可以寫多次ready事件,不會後者覆蓋前者,依次從上向下執行,我們常用$(函數)簡化
ready和onload同時存在時,二者都會觸發執行,ready快於onload
change:當內容改變時觸發
focus:焦點獲取
select:選中所有的文本值
keyup/keydown/keypress:演示在IE和Firefox中獲取event對象的不同
mousemove:在指定區域中不斷移動觸發
mouseover:鼠標移入時觸發
mouseout:鼠標移出時觸發
submit:在提交表單時觸發,true表示提交到後臺,false表示不提交到後臺
click:單擊觸發
dblclick:雙擊觸發
blur:焦點失去