jQuery的attr方法
- attr(name|pro|key,val|fn)
作用：獲取或者設置屬性節點的值
可以傳遞一個參數，也可以傳遞兩個參數
如果傳遞一個參數，代表獲取屬性節點的值
如果傳遞兩個參數，代表設置屬性節點的值
注意點：
如果是獲取：無論找到多少個元素，都只會返回第一個元素指定的屬性節點的值
如果是設置：找到多少個元素就會設置多少個元素
如果是設置：如果設置的屬性節點不存在，那麼系統會自動新增
- removeAttr(name)
作用：刪除屬性節點
注意點：
會刪除所有找到元素指定的屬性節點
jQuery的prop方法
- prop(n|p|k,v|f)
特點和attr方法一致
- removeProp(name)
特點和removeAttr方法一致
注意點：
prop方法不僅能夠操作屬性，他還能操作屬性節點
官方推薦在操作屬性節點時，具有 true 和 false 兩個屬性的屬性節點
checked, selected 或者 disabled 使用 prop(), 其他的使用 attr()
jQuery操作類的方法
- addClass(class|fn)
作用：添加一個類
如果要添加多個，多個類名之間用空格隔開即可
- removeClass([class|fn])
作用：刪除一個類
如果要添加多個，多個類名之間用空格隔開即可
- toggleClass(class|fn[,sw])
作用：切換類
有就刪除，沒有就添加
jQuery文本值相關的方法
- html([val|fn])
和原生js中的innerHTML一模一樣
- text([val|fn])
和原生js中的innerText一模一樣
- val([val|fn|arr])
jQuery操作css樣式的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>21-jQuery操作CSS樣式的方法</title>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// 1. 逐個設置
// $("div").css("width", "100px");
// $("div").css("height", "100px");
// $("div").css("background", "red");
// 2. 鏈式設置
// 注意點：鏈式操作如果大於3步，建議分開
// $("div")
// .css("width", "100px")
// .css("height", "100px")
// .css("background", "red");
// 3. 批量設置
$("div").css({
width: "100px",
height: "100px",
background: "red",
});
// 4. 獲取CSS樣式值
console.log($("div").css("width"));
});
</script>
</head>
<body>
<div></div>
</body>
</html>
jQuery位置和尺寸操作方法
offset([coordinates])
作用：獲取元素距離窗口的偏移位
position()
作用：獲取元素距離定位元素的偏移位
注意點：position方法只能獲取不能設置
jQuery事件綁定
jQuery中有兩種綁定事件方式
- eventName(fn);
編碼效率略高，部分事件jQuery沒有實現，所以不能添加
- on(eventName, fn);
編碼效率略低，所有js事件都可以添加
注意點：
可以添加多個相同或不同類型的事件，不會覆蓋
事件移除
off 方法如果不傳參數，會移除所有的事件
$(“button”).off();
off方法如果傳遞一個參數，會以處所有指定類型的事件
$(“button”).off(“click”);
off方法如果傳遞兩個參數，會移除所有指定類型的指定事件
jQuery事件冒泡和默認行爲
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>26-jQuery事件冒泡和默認行爲</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: red;
}
.son {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
// 編寫jQuery代碼
$(function () {
/*
1. 什麼是事件冒泡？
2. 如何阻止事件冒泡
3. 什麼呢是默認行爲
4. 如何阻止默認行爲
*/
/*
$(".son").click(function (evnet) {
alert("son");
// event.stopPropagation();
});
$(".father").click(function () {
alert("father");
});
*/
$("a").click(function (event) {
alert("彈出註冊框");
// return false;
event.stopPropagation();
});
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<a href="http://www.baidu.com">註冊</a>
<form action="http://www.taobao.com">
<input type="text" />
<input type="submit" />
</form>
</body>
</html>
jQuery事件自動觸發
trigger: 如果利用trigger自動觸發事件，會觸發事件冒泡
triggerHandler: 如果利用triggerHanler自動觸發事件，不會觸發事件冒泡
trigger: 如果利用trigger自動觸發事件，會觸發默認行爲
triggerHandler: 如果利用triggerHanler自動觸發事件，不會觸發默認行爲
jQuery自定義事件
想要自定義事件，必須滿足兩個條件
-
事件必須是通過on綁定的
-
事件必須通過trigger來觸發
jQuery事件命名空間
想要事件的命名空間有效，必須滿足兩個條件
-
事件是通過on來綁定的
-
通過trigger觸發事件
-
利用trigger觸發子元素帶命名空間的事件，那麼父元素帶相同命名空間的事件也會被觸發，而父元素沒有命名空間的事件不會被觸發
-
利用trigger觸發子元素不帶命名空間的事件，那麼子元素所有相同類型的事件和父元素所有相同類型的事件都會被觸發