前端之jQuery
目录
jQuery简单介绍
jQuery它的内部封装了很多的js代码，并且额外增加了很多功能。它就是js 的一个类库。与python相比较，在python中，我们有模块这个概念，js中的类库就相当于是我们的模块。
jquery是对js的一个高度封装，我们直接学习封装之后的代码。
jquery介绍
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。使用jquery不能担心兼容性问题。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“(写的更少做的更多)
jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
jQuery内容
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档处理
- 事件
- 动画效果
- 插件
- each、data、Ajax(重点，后期在Django中学习)
下载链接：https://jquery.com/
中文文档：https://jquery.cuishifeng.cn/
jQuery版本
1.x
2.x
3.x，直接学习最新版本
jQuery下载
-
bootcdn网站下载：https://www.bootcdn.cn/
（CDN是什么？内容分发网络） -
使用jquery文件有两种方式
1、 把文件下载下来，离线使用。
文档下载：复制连接 --> 在新网页中打开 --> 右击另存为
2、 不下载，直接通过cdn链接使用(你的电脑必须有网)
引入方式
1.离线的
把下载文件导入pycharm中，例如：文件名是jqury.min.js
<script src="jquery.min.js"></script>
2.必须联网的
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
上述的语句每次打开一个html文件都要添加一次语句，就可以直接把语句添加到模板中。
settings --> Editor --> File and Code Templates
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。
jquery基础语法
jQuery("selector").action()
具体使用：
jQuery("#d1").css('color', 'red');
# jQuery <==> $
jQuery("#d1").css('color', 'red');
$("#d1").css('color', 'red'); // 两个语句相同
标签对象和jQuery对象
var h1 = $("#h1");
// S.fn.init(1) ===========> 它是jquery对象
document.getElementById('id'); // 这是标签对象
两个对象之间可以进行互相转换
jquery对象转为标签对象
直接通过下标取值
jQuery对象[0]
举例：
var h1 = $("#h1")[0]; // ===========> 已经转成了标签对象
标签对象转为jquery对象
直接在外面加个jQuery()或者$()
$(标签对象)
举例：
document.getElementById('id'); // 这是标签对象
$(document.getElementById('id')); // 这就是jquery对象
DOM对象使用DOM的方法
jQuery对象可以使用jQuery的方法
学习jQuery的步骤
- 先学会如何查找标签
- 找到标签之后在进行操作标签
查找标签
基本选择器
1. id $("#id")
2. class $(".className")
3. 标签选择器 $("tagName")
配合使用：
$(".c1") // 具有class=c1的所有标签
$("div.c1") // 具有class=c1的div标签
$('div#d1') // 具有id=d1的div标签，但是id是唯一的，这样写没有意义
组合选择器
$("#id, .className, tagName")
$('#d1,.c1,p') # 并列+混用
$('div span') # 后代
$('div>span') # 儿子
$('div+span') # 毗邻
$('div~span') # 弟弟
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素 --> equal相等
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
具体使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<ul>
<li>11111</li>
<li>22222</li>
<li class="c1">33333</li>
<li>44444</li>
<li>55555</li>
</ul>
<div><h1>h1h1h1h1h1h1</h1></div>
<div>divdiv
<span class="c1">spanspan</span>
</div>
<script>
$("ul li:first").css('color', 'red'); // ul中的第一个li标签
$("ul li:last").css('color', 'green'); // ul中的最后一个li标签
$("ul li:eq(3)").css('color', 'brown'); // ul中的索引为3的li标签
$("ul li:even").css('color', 'brown'); // 偶数索引 0包含在内
$("ul li:odd").css('color', 'red'); // 奇数索引
$("ul li:gt(1)").css('color', 'red'); // 索引大于0的标签
$("ul li:lt(3)").css('color', 'red'); // 索引小于3的标签
$("ul li:not(.c1)").css('color', 'red'); // 除去类为c1的li标签的剩余标签
$("div:has(h1)").css('color', 'red'); // 找到所有后代中有h1标签的div标签
$("div:has(.c1)").css('color', 'red'); // 找到所有后代中有c1样式类的div标签
</script>
</body>
</html>
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
例子：
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例子：
$(":checkbox") // 找到所有的checkbox
$(':text')
$(':text') // <==> $('input[type="text"]')
$(':password') // <==> $('input[type="password"]')
表单对象属性:
:enabled
:disabled
:checked
:selected
实例：找到默认数据的option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<input type="radio" value="1" name="gender"> 男
<input type="radio" value="2" checked name="gender"> 女
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
<script>
$(":selected") // 找到所有被选中的option
$(':checked') // 它会将checked和selected都拿到
$('input:checked') // 可以自己加一个限制条件
$(':selected') // 它只拿selected
</script>
</body>
</html>
筛选器方法
元素有关
下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
例子：
var div = $('#d1').children()[0];
console.log(div);
查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") //--------->等价于$("div p")
$(".c1").find("a") //-------->等价于$(".c1 a")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的 -------->等价于$("div.c1")
补充
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
例子：
$('div span').first() //--------->等价于$('div span:first')
$('div span').last() //--------->等价于$('div span:last')
$('div span').not('#d3') //--------->等价于$('div span:not("#d3")')
筛选器方法的具体应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<div id="d1">div</div>
<p class="c1">pppppp</p>
<p class="c1">pppppp</p>
<p class="c1">pppppp</p>
<p class="c1">pppppp</p>
<span class="s1" id="i2">span</span>
<div id="d2">divvvvvvv
<p>ppppp
<span class="c1"></span>
</p>
<span>spam</span>
</div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<script>
// jquery调用方法之后返回的结果还是jquery对象，所以你就可以继续点jquery给你提供的方法,这叫链式操作
// 例1：
var res = $("#d1").next().css('color', 'red').css('border', '1px solid red');
console.log(res);
var res = $("#d1").nextAll().css('color', 'green');
var res = $("#d1").nextUntil("#i2") // 除了id="d1"之外的同级别标签直到遇到id="i2"为止的所有标签
console.log(res);
// 例2：
var span = $('.c1');
span.parentElement.parentElement.parentElement; // js操作
span.parent().parent().parent(); // jQuery操作，与上一个语句等价
span.parent().css('color', 'red');
// 例3：
var span = $('.c1');
var p = span.parents(); // 找到所有的父标签
console.log(p); // S.fn.init(4) [p, div#d2, body, html, prevObject: S.fn.init(5)]
// 例4：
var div = $('#d2').children()[0];
console.log(div); // <p>...</p>
// 例5：
$('ul li').first().css('color', 'red'); // $('ul li:first').css('color', 'red');
$('ul li').last().css('color', 'red'); // $('ul li:last').css('color', 'red');
$('ul li').eq(2).css('color', 'red'); // $('ul li:eq(2)').css('color', 'red');
</script>
</body>
</html>
操作标签
样式操作
操作样式类
addClass(); // 添加指定的CSS类名。 //等价于----->classList.add()
removeClass(); // 移除指定的CSS类名。 //等价于----->classList.reomve()
hasClass(); // 判断样式存不存在 //等价于----->classList.containes()
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。 //等价于----->classList.toggle()
操作CSS
css("color","red") //等价于------>tag.style.color="red"
css("color", "red").css('','').css('',''); // 多种类型的css操作
示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色
文本操作
# HTML代码：
innerHTML // --------------->html() // 取得第一个匹配元素的html内容
html(val) // 设置所有匹配元素的html内容
# 文本值
text() // 取得所有匹配元素的内容
text(val) // 设置所有匹配元素的内容
# value值
val() // 取得第一个匹配元素的当前值 -- 括号内没有值，是获取
val(val) // 设置所有匹配元素的值 -- 括号内有值，是设置新值
val([val1, val2]) // 设置多选的checkbox、多选select的默认值
示例：
例1：获取文本
<body>
<div class="c1"><h1>我很帅啊</h1></div>
<script>
// console.log($('.c1').html()); // 获取标签文本内容--------->识别标签
// <h1>我很帅啊</h1>
// $('.c1').html('我不帅哈'); // 重新设置标签文本内容
// console.log($('.c1').text());// 获取标签文本内容-------->不识别标签
// 我很帅啊
// $('.c1').text('hahahahha') // 重新设置标签文本内容
</script>
</body>
例2：input获取值
<body>
<input type="text" id="inp1" value="hahahaha">
<script>
var inp1 = $('#inp1').val();
console.log(inp1); // hahahaha
var inp2 = $('#inp1').val('helloworld');
console.log(inp2); // 获取值只能是val(),设置值这个步骤赋值给变量inpt2,是标签inp1本身
</script>
</body>
例3：设置多选的select的默认值
<body>
<select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
$("#s1").val(["1", "2"]);
</script>
</body>
例4：单选的默认值
<body>
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" checked value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
<script>
console.log($("input[name='gender']:checked").val()); // 0
</script>
</body>
自定义登录校验示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本操作之登录验证</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="input-name">用户名</label>
<input type="text" id="input-name" name="name">
<span class="error"></span>
</div>
<div>
<label for="input-password">密码</label>
<input type="password" id="input-password" name="password">
<span class="error"></span>
</div>
<div>
<input type="button" id="btn" value="提交">
</div>
</form>
<script>
// 如何在前端获取页面表单数据 submit-------------->会自动提交表单，所以这里改成button
// 如何拿到表单数据
var btn = $('#btn'); //拿到按钮button对象
// jquery中事件：jqueryu对象.click(任务)
btn.click(function () { // 给button对象添加事件
// 获取用户名和密码
var username = $('#input-name').val(); // 拿到用户名框的数据
var password = $('#input-password').val(); // 拿到密码框的数据
// 校验参数
// 用户名和密码必须填写
if (!username) { // 条件可以使用：(username.length === 0)
$("#input-name").siblings(".error").text("用户名不能为空");
}
if (!password) {
$("#input-password").siblings(".error").text("密码不能为空");
}
})
</script>
</body>
</html>
属性操作
属性操作就是给标签增加删除等的操作
复习一下，在js中是如何操作标签属性的?
div.setAttritube('k', 'v');
div.getAttritube('k');
div.removeAttritube('k');
jquery中是如何操作标签属性的?
attr
用于ID等或自定义属性：
attr(attrName) // 返回第一个匹配元素的属性值
attr(attrName, attrValue) // 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值
removeAttr() // 从每一个匹配的元素中删除一个属性
具体使用：
<body>
<div id="d1"></div>
<script>
// js操作
// var div = document.getElementById('d1');
// div.setAttribute('username','kevin');
// console.log(div.getAttribute('username')); // kevin
// jquery操作
$("#d1").attr('username','kevin'); // 括号内有两个数值是设置属性
console.log($("#d1").attr ('username')); // 括号内有一个值是获取属性
$("#d1").removeAttr('username'); // 删除属性
</script>
</body>
prop
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
具体使用：
<body>
<input type="checkbox" id="d3" name="kevin">k
<input type="checkbox" id="d2" name="jason">j
<input type="radio" id="d4">
<script>
$("#d2").prop('checked',true);
console.log($("#d2").prop('checked')); // true
$("#d2").removeProp('checked'); // 移除属性
$("#d4").prop('checked',true);
</script>
</body>
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
举个例子：
1.针对于默认的属性
<input type="checkbox" id="i1" value="1">
针对上面的代码查看：
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
// 可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
如果checked复选框设置了checked属性
<input type="checkbox" checked id="i1" value="1">
再执行：
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
// 这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
2.针对于自定义的属性
<input type="radio" id="d4" username="kevin">
执行以下代码：
console.log($("#d4").attr('username')); // kevin
console.log($("#d4").prop('username')); // undefined
// 可以看到prop不支持获取标签的自定义属性。
总结一下：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
文档处理
或者叫节点操作
例子：
# js中如何创建一个标签出来
var a = document.createElement('a');
jquery中创建标签
# jquery中如何创建一个标签
<body>
<div id="d1"></div>
<script>
// 1.创建a标签
var a = $('<a>'); // <a></a>
// 2.增加属性
a.attr('href','http://www.baidu.com');
// 3.增加文本
a.text('请点击我');
// a.html()
// 4.把a标签加到div中
var div = $('#d1');
div.append(a);
</script>
</body>
文档处理的不同情况
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() // 删除匹配的元素集合中所有的子节点。
6.替换
replaceWith()
replaceAll()
克隆
clone()// 参数
克隆的例子：点击按钮就复制按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击按钮就复制按钮</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
#b1 {
background-color: deeppink;
padding: 5px;
color: white;
margin: 5px;
}
#b2 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>
<script>
// clone方法不加参数true，克隆标签但不克隆标签带的事件
$("#b1").click(function () {
// this指代的就是当前被操作的标签对象本身
// console.log($(this)); // S.fn.init [button#b1] // 把标签对象变成jquery对象
// console.log($(this).clone()); // 克隆一个jquery对象
$(this).clone().insertAfter(this);
});
// clone方法加参数true，克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).interAfter(this);
// $(A).insertAfter(B) 把A放到B的后面
});
</script>
</body>
</html>
解析：第一种clone()，括号内不加参数true，显示的效果是点击第一个可以给后面增加一个红色的按钮，但是点击后面的红色按钮，不能增加新的按钮。
第二种clone(true)，括号内加上true参数，显示的效果是，不论点击第一个，还是后面的蓝色的按钮，都可以增加新的按钮，说明新克隆的按钮也克隆了事件。
事件
常用事件
click(function(){...}) 用户点击某个对象时触发
hover(function(){...}) 鼠标移动进去触发，移走触发
blur(function(){...}) 元素失去焦点
focus(function(){...}) 元素获得焦点
change(function(){...}) 域的内容被改变(表单元素内容改变后触发)
keyup(function(){...}) 某个键盘按键被松开。
input监控 表单内容改变的时时监控
绑定事件
# 方式一：
$('#btn').click(function () {
alert(123);
})
# 方式二：
// 这种绑定方式功能更加强大，它支持:事件委托
$('#btn').on('click', function () {
alert(123);
})
事件的具体示例
hover事件示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
p {
border: 3px solid red;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<p id="p1"></p>
<p id="p2"></p>
<script>
$("#p1").hover(function () {
console.log(111111);
}) // 绑定hover事件后只写一个函数，鼠标移进去触发一次，鼠标移出后再触发一次
$("#p2").hover(function () {
console.log(123);
}, function () {
console.log(456);
}) // 绑定内部有两个函数，第一个参数是鼠标移进去触发的动作，第二个参数是鼠标移走触发的动作
</script>
</body>
</html>
input事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实时监听input输入值变化</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<input type="text" id="d1">
<script>
$("#d1").on('input', function () {
console.log(this.value)
// 只需要在这里向后端发起一个请求携带这此时的值后端给我返回一个结果，我放到页面上去
// ajax朝后端发起请求----------->后面django中学
})
</script>
</body>
</html>
移除事件
off() 方法移除用 .on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
$('selector').off(event,function(){})
阻止后续事件执行
- return false;
- e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止后续事件执行</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<form action="">
<span class="s1"></span>
<input type="submit" id="btn" value="提交">
</form>
<script>
// $("#btn").click(function () {
// $('.s1').text('趁年轻，学技能');
// });
/*submit按钮本身有一个事件：提交数据到后台，又写代码添加了一个新的事件：点击按钮给span添加文本。
* 这就会导致问题：点击提交按钮后，立刻触发click事件，然后触发submit本身的事件，提交数据并刷新网页。这样后加的文本就只会显示很短的时间。
* 怎么修改呢？可以阻止后续事件的发生*/
// 阻止后续事件的执行
// 第一种方式：
// 添加好事件后直接return false;
// $("#btn").click(function (){
// $('.s1').text('趁年轻，学技能');
// return false;
// })
// 第二种方式：
// e.preventDefault();
$("#btn").click(function (e) {
$('.s1').text('趁年轻，学技能');
e.preventDefault();
})
</script>
</body>
</html>
阻止事件冒泡
事件冒泡：是指在文档树中某个节点触发某种事件（比如点击事件）时，该事件会先被触发该节点自身，然后逐级向上冒泡（触发）到该节点的每一个父级节点，直至到达文档根节点为止。这意味着如果在子元素和父元素上都有相同的事件监听器，那么当触发子元素上的事件时，父元素上的事件也会被触发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script>
$('p').click(function () {
console.log('ppppp');
});
$('div').click(function () {
console.log('divdivdivdivdivdivdiv');
});
$('span').click(function (e) {
console.log('span');
// 阻止事件冒泡，方式1
// return false;
// 阻止事件冒泡，方式2
e.stopPropagation();
});
</script>
</body>
</html>
页面载入
等待页面加载完毕之后再执行的代码
# js中如何做的?
window.onload = function () {}
# 在jquery中
# 1.
$(document).ready(function(){
// 在这里写你的JS代码...
})
# 2.
$(function(){
// 你在这里写你的代码
})
# 3.
# 把你的js代码放在body的最下面，最后加载就可以了
与window.onload的区别:
- window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
- jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
事件委托
前戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态创建标签不能触发之前的事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<button class="btn">按钮</button>
<script>
// 给body中得所有button按钮绑定一个点击事件
$('.btn').click(function () {
console.log('触发了'); // 这种绑定事件的方式不能影响动态创建的标签，只能影响提前写好的标签
});
// 再动态创建一个button标签
var btn = $('<button>'); // <button class="btn">按钮</button>
btn.addClass("btn");
btn.text('按钮');
$("body").append(btn);
/*后面动态创建的一模一样的按钮，点击后并不能触发，说明，后续动态创建的标签并不能绑定之前的事件。
解决方式：事件委托*/
</script>
</body>
</html>
事件委托具体使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<button class="btn">按钮</button>
<div>
<p>
</p>
</div>
<script>
// 利用事件委托
$('p').on('click', '.btn', function () {
console.log('触发了'); // 在指定的区域中委托事件的执行
})
var btn = $('<button>'); // <button class="btn">按钮</button>
btn.addClass("btn");
btn.text('按钮');
$("p").append(btn);
</script>
</body>
</html>
补充两个方法
each()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>each用法</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<!-- div{$}*10 创建10个div标签内部文本从1递增-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<script>
console.log($('div')); // S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
// 第一种用法：
// jquery对象.each(函数)
// // each,是循环这10个div
$('div').each(function (index) {
console.log(index); // 第一个参数是索引
})
$('div').each(function (index, value) {
console.log(index, value); // 两个参数是：索引+标签本身
})
// 第二种用法：
// $.each(对象, 函数)
var arr = [1, 2, 3, 4, 5]; // BBS项目中会使用
$.each(arr, function (index, value) {
console.log(index, value); //index是索引，value是每次循环的具体元素。
})
</script>
</body>
</html>
data()
用来保存一些数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data用法</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<!-- div{$}*10 创建10个div标签内部文本从1递增-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<script>
console.log($('div')); // S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
// 存储相关的数据，类似于设置属性，
$('div').data('username','kevin'); // 给每个div设置属性，但是我们看不到
// 获取数据存储的值
console.log($('div').first().data('username')); // kevin
// 移除放在元素中的值
$('div').first().removeData('username');
console.log($('div').first().data('username')); // undefined
// 如果10个div的username数据都被移除，打印username就会直接报错
</script>
</body>
</html>
在jQuery中，data()方法用于在元素上储存数据。它允许我们在DOM元素上关联任何数据，这些数据可以是JavaScript原生对象、数组、字符串、数字等任何类型的数据。该方法通常用于缓存元素的相关数据，以便在需要时快速访问而不必频繁的查询和操作DOM元素。
.data()方法可以接受两个参数：第一个参数是要设置的键，第二个参数是要存储的值。如果只有一个参数，那么返回这个键的值。如果没有参数，那么返回整个数据对象。
下面是一些例子：
// 保存和获取字符串
$('selector').data('key', 'value');
var value = $('selector').data('key');
// 保存和获取对象
$('selector').data('obj', { name: 'Lucy', age: 18 });
var obj = $('selector').data('obj');
// 保存和获取数组
$('selector').data('arr', [1, 2, 3]);
var arr = $('selector').data('arr');
使用.data()方法储存数据的好处是，数据与元素分离，即使元素被删除或修改，数据仍然存在。这使得在需要数据时不必频繁查询和操作DOM元素，从而提高代码性能。同时，多个元素可以共享同一数据对象，从而避免重复的内存消耗。
