1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$("p").dblclick(function() {
$(this).css("color", "green");
})
//當鼠標指針穿過元素
$("p").mouseenter(function() {
$(this).text("鼠標指針穿過元素");
})
//鼠標指針離＊＊素
$("p").mouseleave(function() {
$(this).text("鼠標指針離＊＊素");<br>})
//鼠標指針移動到元素上，并按下鼠標按鍵
$("p").mousedown(function() {
$(this).text("鼠標指針移動到元素上方，并按下鼠標按鍵");
})
//在元素上松開鼠標按鈕時
$("p").mouseup(function() {
$(this).text("在元素上松開鼠標按鈕時");
})
//元素獲得焦點
$(":text").focus(function() {
$(this).val("元素獲得焦點");
})
//元素失去焦點
$(":text").blur(function() {
$(this).val("元素失去焦點");
})
插入方法：
1
2
3
4
5
6
7
8
9
10
11
12
var i = $("#ul1 li").length;
//append末尾插入
$("#btn1").click(function() {
i++;
$("#ul1").append("<li>add" + i + "</li>")
})
//prepend頭部插入
var j = 1;
$("#btn2").click(function() {
j--;
$("#ul1").prepend("<li>add" + j + "</li>")
})<br>before()//元素之前<br>after()//元素之后
移除方法
1
2
3
$("#btn4").click(function() {
$("#ul1 li:first").remove()
})
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素 清空
父級屬性
1
2
3
parent() 被選元素的直接父元素
parents() 被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)
parentsUntil()介于兩個給定元素之間的所有祖先元素
后代屬性
1
2
3
children() 方法返回被選元素的所有直接子元素 只一級
find() 方法返回被選元素的指定后代元素，一路向下直到最后一個后代<br> $("p").find("span");//<p> 后代的所有 <span> 元素<br> $("p").find("*");// <p> 的所有后代<br>
同胞屬性
1
2
3
4
5
6
7
8
9
10
siblings() //被選元素的所有同胞元素
$("h2").siblings().css({"color":"red","border":"2px solid red"});
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});
next()//被選元素的下一個同胞元素
$("h2").next().css({"color":"red","border":"2px solid red"});
nextAll()//被選元素的所有跟隨的同胞元素
$("h2").nextAll();
nextUntil()//介于兩個給定參數之間的所有跟隨的同胞元素
$("h2").nextUntil("h6");
prev(), prevall() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞元素向后遍歷，而不是向前）。
遍歷過濾
1
2
3
4
5
6
7
8
9
10
first() 方法返回被選元素的首個元素
$("p p").first();
last() 方法返回被選元素的最后一個元素。
$("p p").last();
eq() 方法返回被選元素中帶有指定索引號的元素。從0開始
$("p").eq(1);
filter() 方法規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
$("p").filter(".intro");
not() 方法返回不匹配標準的所有元素。not() 方法與 filter() 相反。
$("p").not(".intro");
相關推薦：
HTML中劃分框窗有哪些常用屬性
關于CSS常用屬性的詳細介紹
css3中的常用屬性介紹
以上就是js常用屬性實例分享的詳細內容，更多請關注php中文網其它相關文章！