前端之JQuery第二篇
前端之jQuery第二篇
1.属性操作
用于ID等或自定义属性：
attr(attrName) //返回第一个匹配元素的属性值
attr(attrName,attrValue) //为所有匹配元素设置一个属性值
attr({k1:v1,k2:v2}) //为所有匹配元素设置多个属性值
removeAttr() //从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() //获取属性值
removeProp() //移除属性
注意：在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>
<!--prop返回的是true或false-->
prop和attr的区别：
attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
attr的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false
2.文档处理
添加到指定元素内部的后面
$(A).append(B) //把B追加到A后面
$(A).appendTo(B) //把A追加到B
添加到指定元素内部的前面
$(A).prepend(B) //把B放到A前面
$(A).prependTo(B) //把A放到B前面
添加到指定元素外部的后面
$(A).after(B) //把B放到A的后面
$(A).insertAfter(B) //把A放到B的后面
添加到指定元素外部的前面
$(A).before(B) //把B放到A的前面
$(A).insertBefore(B) //把A放到B的前面
移除和清空元素
remove() //从Dom中删除所有匹配的元素
empty() //删除匹配的元素集合中所有的子节点
克隆
clone() //参数
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
button {
background-color: pink;
}
</style>
</head>
<body>
<button>屠龙宝刀，点击就送！</button>
<script>
// 第一种绑定事件的方式,clone不加参数true，克隆标签但不克隆标签带的事件，即点击其他标签不会有克隆的效果
// $('button').click(function () {
//
// })
//
//第二种，加参数true，克隆标签并且克隆标签带的事件
$('button').on('click',function () {
$(this).clone(true).insertAfter(this);
})
</script>
</body>
</html>
3.事件
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){})
hover悬浮事件示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p>来玩啊,老弟!</p>
<script>
$('p').hover(
function () {
alert('How Much?')
},
function () {
alert("欢迎老板下次再来，记得我是4号哟!")
}
)
</script>
</body>
</html>
事件绑定
$('选定的标签').on.(events [,selector],function(){})
- events:事件
- selector:选择器（可选）
- function:事件处理函数
阻止后续事件执行
1.return false; //常见阻止表单提交等
2.e.preventDefault();
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="">
<input type="submit">
</form>
<script>
$('input').click(function (e) {
alert(123);
// 1.return false
e.preventDefault(); //取消提交按钮的提交功能
});
</script>
阻止事件冒泡
事件冒泡：
事件会一层一层往上级汇报
阻止事件冒泡：
在事件函数内部加一句取消事件冒泡的代码，注意要加上形参
$('p').click(function(e){
alert('p');
e.stopPropagation()
})
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>div
<p>div>p
<span>div>p>span</span>
</p>
</div>
<script>
$('div').click(function () {
alert('div')
});
$('p').click(function () {
alert('p');
});
$('span').click(function (e) {
alert('span');
e.stopPropagation()
});
</script>
</body>
</html>
文档加载
三种方式
第一种(了解)：
$(document).ready(function(){
//这里写js代码
})
第二种(了解)：
$(function(){
//这里写js代码
})
第三种：
直接在body内部最下方书写代码
事件委托
事件委托是通过事件冒泡的原理，利用父标签捕获子标签的事件
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button>我是23号技师，很高兴为您服务!</button>
<script>
// 事件委托
$('body').on('click','button',function () {
alert(123)
})
//再动态创建一个button按钮会有同样的效果
</script>
</body>
</html>
4.动画效果
//基本
show()
hide()
toggle()
//滑动
slideDown()
slideUp()
slideToggle()
//淡入淡出
fadeIn()
fadeOut()
fadeTo()
fadeToggle()
//自定义（了解）
animate()
5.补充
each
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
$('div').each(function(){
console.log(this) //this相当于div这个标签
})
注意：
在遍历过程中可以使用return false提前结束each循环
data
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
//标签存储键值对
$('p').data('username','lucas')
//获取存储的键值对
$('p').data('username')
//删除存储的键值对
$('p').removeData('username')
//获取键值对的时候如果不存在也不会报错
$('p').data('username')
