1.層級選擇器 後代選擇器 "父元素 後代元素" 比如:$("div p") 選取div元素下所有的p元素 子元素選擇器 "父元素 > 子元素" 比如:$("div>p") 選取div的子元素中的p元素 第一個向後兄弟元素 "元素名+兄弟元素" 比如:$("div+p") 選取div元素後的第一個p ...
1.層級選擇器
後代選擇器 "父元素 後代元素"
比如:$("div p") 選取div元素下所有的p元素
子元素選擇器 "父元素 > 子元素"
比如:$("div>p") 選取div的子元素中的p元素
第一個向後兄弟元素 "元素名+兄弟元素"
比如:$("div+p") 選取div元素後的第一個p元素
向後所有的兄弟元素 "元素名~兄弟元素"
比如:$("div~p") 選取div元素後的所有p元素
2.篩選選擇器
:first $("p:first") 第一個<p>元素
:last $("p:last"); 最後一個<p>元素
:gt $("p:gt(1)"); 編號大於1的所有<p>元素
:eq $("p:eq(1)"); 編號等於1的<p>元素
:odd $("td:odd"); 編號是奇數的所有<td>元素
:even $("td:even"); 編號是偶數的所有<td>元素
:not $("p:not(.notr)") 選取不帶有類名為notr的所有<p>元素
根據內容來篩選
:contains(內容)
:empty()
根據顯示來篩選
:hidden 選出隱藏的元素(display:none 或 type="hidden" 或 隱藏父元素 或 長度和寬度為 0的 ,這些元素是隱藏元素 )
:visible
3.表單選擇器
:input
:text
:button
:file
:radio
:submit
4.屬性--篩選選擇器
[屬性名] 選擇到帶這個屬性的元素
[屬性名='值'] 選擇到屬性等於某個值的元素
[屬性名!='值'] 選擇到屬性不等於某個值的元素
比如:$("input[name='newlatter']"); 選取name屬性為newlatter的input元素
5.表單屬性選擇器
利用 :checked :selected :enabled :disabled 來對元素進行篩選
對屬性篩選選擇器的簡化
比如: $(":radio:checked") 選中所有的已經選中的radio元素
$("select option:selected") 選中的所有的已經選中的select下的option元素
6.屬性方法
attr("屬性名") 獲取屬性
attr("屬性名",屬性值) 設置屬性
removeAttr("屬性名") 移除屬性
7.獲取和設置value屬性的方法
val() 和 val("值")
8. html() html("值")
html()對應innerHTML
html("值")對應innnerHTML="值"
text() text("值")
text()對應innerText()
text("值")對應innerText="值"
9.樣式函數
css("樣式的名字") 獲取樣式對應的值
css("樣式的名字","樣式的值") 設置對應的樣式 一次設置一個
css({"樣式的名字":"樣式的值","樣式的名字":"樣式的值"}) 一次設置多個樣式
addClass("class名") 增加一個class屬性對應的值
removeClass("class名") 刪除class屬性對應的值
toggleClass("class名") 切換
width() 獲取寬度
height() 獲取高度
innerWidth() 獲取寬度(包括內邊距)
outerWidth() 獲取寬度 (包括 內邊距 和 邊框 )
outerWidth(true) 獲取寬度 (包括 內邊距 和 邊框 和 外邊距)
10.顯示和隱藏函數
show() 顯示
hide() 隱藏
toggle() 切換
show(speed) 在規定的時間內顯示
hide(speed) 在規定的時間內隱藏
toggle(speed) 在規定的時間內切換
slideUp(speed) 在規定的時間內向上收縮
slideDown(speed) 在規定的時間內向下展開
slideToggle(speed) 在規定的時間內切換上面的兩種狀態
fadeIn(speed) 在規定的時間內淡入
fadeOut(speed) 在規定的時間內淡出
fadeToggle(speed) 切換上面的兩種狀態
11.自定義動畫
選擇器.animate({"參數"},[時間],[動畫回調函數]);
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
},2000);
});
});
12.綁定事件
選擇器.bind("事件",事件處理函數); 元素的事件 關聯上對應的事件處理函數 推薦使用on
選擇器.unbind("事件"); 斷開元素的事件 和 對應處理函數的關聯 推薦使用off
選擇器.trigger("事件"); 觸發事件調用
創建常用的事件函數:
click(fn)/click()
dblclick(fn)/dblclick()
blur(fn)/blur()
focus(fn)/focus()
change(fn)/change()
keydown(fn)/keydown()
keyup(fn)/keyup()
mouseover(fn)/mouseover()
mouseout(fn)/mouseout()
submit(fn)/submit()
load(fn)/unload(fn)
比如:$("div").click(function(e){});//e是事件對象
$("div").bind("click",function(){});
13.event事件對象常用的屬性和方法
target 事件源
pageX 滑鼠點擊的X坐標
pageY 滑鼠點擊的Y坐標
stopPropagation() 取消事件冒泡
比如:$(":button").click(function(e){
alert(e.pageX+":"+e.pageY);
});
14.組合事件函數
hover(over,out)
滑鼠移上去觸發over函數,移開觸發out函數
15.動態事件函數
on(事件類型,選擇器,處理函數)
可以給某元素中現有和未來與選擇器匹配的元素綁定事件
比如:$("table").on("click","tr",function(){
//事件處理邏輯
});
16.文檔處理函數
$(html); 創建元素
append() 向每個匹配的元素內部追加內容
prepend() 向每個匹配的元素內部前置內容
after() 在每個匹配的元素之後插入內容
before() 在每個匹配的元素之前插入內容
remove() 刪除節點
empty() 清空節點
clone() 複製節點元素
clone(true) 複製節點元素以及綁定的事件處理
children() 查找子元素
next() 查找後面的兄弟元素
prev() 查找前面的兄弟元素
siblings() 查找兄弟元素
find(selector) 查找子元素以及後代元素
parent() 查找父元素
parent(selector) 查找祖先元素
eq(index) 返回index+1位置處的jQuery對象
first() 獲取第一個元素
last() 獲取最後一個元素
is(expr) 判斷元素是否滿足expr條件
not(expr) 返回不符合一定條件的元素
get(index) 取得其中一個匹配的DOM元素
17.工具函數
$.each(object,[callback])
遍歷方法,用於遍曆數組和對象
$.unique(array)
刪除數組中重覆的元素,註意:只能刪除DOM元素數組、字元串或數字數組
$.merge(first,second)
合併兩個數組,合併兩個數組到第一個數組上
$.trim(str)
去掉字元串起始和結尾的空格