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触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发