jQuery补充
属性操作
1.attr
attr(属性名) 返回第一个匹配的属性值
attr(属性名,值) 给所有匹配元素添加属性值
attr({k1:v1,k2:v2}) 为所有匹配元素添加多个属性值
removeAttr(属性名) 从每一匹配的元素中删除一个属性
2.prop
prop(属性名) 返回的是bool值
removeProp 移除属性
区别:
1.
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。
2.prop不支持获取标签的自定义属性,且返回的是布尔值
总结:
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
文档处理
1.添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
2.添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
3.添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
4.添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
5.移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
事件
1.事件绑定
$('p').event(function(){}) 方法一
$('p').on('event',(可选加'选择器'),function(){}) 方法二
2.移除事件
$('p').off('event',(可选加'选择器'),function(){})
阻止后续事件执行
阻止后续事件执行
1.return false; 常见阻止表单提交
2.e.preventDefault(); 需要一个参数e(function的参数)
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<form action="">
<button id="b1">点我</button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
</script>
</body>
</html>
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation();
});
$("p").click(function () {
alert("p");
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>
动画效果
// 基本
jQ对象.show([s,[e],[fn]]) 出现
jQ对象.hide([s,[e],[fn]]) 消失
jQ对象.toggle([s],[e],[fn]) 有消失没有出现
// 滑动
jQ对象.slideDown([s],[e],[fn]) 出现
jQ对象.slideUp([s,[e],[fn]]) 消失
jQ对象.slideToggle([s],[e],[fn]) 有消失没有出现
// 淡入淡出
jQ对象.fadeIn([s],[e],[fn]) 浮现
jQ对象.fadeOut([s],[e],[fn]) 淡出
jQ对象.fadeTo([[s],o,[e],[fn]]) 淡出到透明度为多少
jQ对象.fadeToggle([s,[e],[fn]]) 有淡出,没有浮现
s:毫秒
fn:函数
each
1.迭代数字索引其他对象通过其属性名进行迭代。
jQuery.each(collection, callback(indexInArray, valueOfElement)):
例子:
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//i是索引,v是每次循环的具体元素。
})
2.遍历一个jQuery对象,为每个匹配元素执行一个函数。
.each(function(index, Element)):
例子:
$("li").each(function(){
$(this).addClass("c1");
});
data
1.$("div").data("k");//返回第一个div标签中保存的"k"的值
2.$("div").data("k",100);//给所有div标签都保存一个名为k,值为100
3.$("div").removeData("k"); //移除元素上存放k对应的数据