目录
jQuery
# jQuery它的内部封装了很多的js代码，并且额外增加了很多功能----->它就是js 的一个类库
'''在python中，我们有模块这个概念，js中没有模块的概念，与类库的概念，类库就相当于是我们的模块'''
# 使用了jquery我们能够写更少的js代码了，所以，以后我们也大多时候都会写jquery代码，而很少写js代码了
jquery是对js 的一个高度封装，我们直接学习封装之后的代码
# jquery介绍：
1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。------->使用jquery不能担心兼容性问题
2. 它的宗旨就是：“Write less, do more.“ #
3. 要想使用jquery，必须下载使用它，然后引入都我们的html文档中
4. 下载的这个jquery文件大小只要即是KB，很小，几乎不影响加载速度
# 学习jQuery内容：
1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax(放在Django中学---》重要)
# jQuery版本
1.x
2.x
3.x # 直接学习最新版本
# jQuery文件去哪里下载？
1. 去官网：https://jquery.com/
2. 第三方：https://jquery.cuishifeng.cn/index.html
3. bootcdn网站下载：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js
4. 使用jquery文件有两种方式：
1、 把文件下载下来，离线使用
2、 不下载，直接通过cdn链接使用(你的电脑必须有网)
5. 下载。
# jquery基本使用
jQuery("selector").action()
jQuery("#d1").css('color', 'red');
# jQuery === $
jQuery("#d1").css('color', 'red');=============>$("#d1").css('color', 'red')
# 学习jQuery的步骤：
1. 先学会如何查找标签
2. 找到标签之后在进行操作标签
先学会如何查找标签
基本选择器
1. id $("#id")
2. class $(".className")
3. 标签选择器 $("tagName")
补充：标签对象和jQuery对象
var h1 = $("#h1"); // S.fn.init(1) =================> 它是jquery对象，标签对象
'''两个对象之间可以进行互相转换'''
jquery对象转为标签对象:
# 直接通过下标取值
标签对象如何转为jquery对象：
document.getElementById('id')================>$(document.getElementById('id'));
'''如果是jquery对象的话，可以使用jquery给你封装的好多好多的方法'''
其他选择器
$(".c1")-------------->具有class=c1的所有标签
$("div.c1")-------------->具有class=c1的div标签
基本筛选器：
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子：
$('ul li:first') # 大儿子
$('ul li:last') # 小儿子
$('ul li:eq(2)') # 放索引
$('ul li:even') # 偶数索引 0包含在内
$('ul li:odd') # 奇数索引
$('ul li:gt(2)') # 大于索引
$('ul li:lt(2)') # 小于索引
$('ul li:not("#d1")') # 移除满足条件的标签
$("div:has('h1')")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
表单属性选择器
属性选择器：
[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
$('input[type="text"]')---------->$(':text')
$('input[type="password"]')---------->$(':password')
表单对象属性
:enabled
:disabled
:checked
:selected
例子：
找到可用的input标签
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
找到被选中的option：
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
$(':checked') # 它会将checked和selected都拿到
$(':selected') # 它不会 只拿selected
$('input:checked') # 自己加一个限制条件
筛选器方法
# 下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
# 上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
# 父亲元素：
$("#id").parent()
# 儿子元素
$("#id").children();// 儿子们
var div = $('#d1').children()[0];
console.log(div);
# 查找
$("div").find("p")----------------->等价于$("div p")
$(".c1").find("a")----------------->等价于$(".c1 a")
# 补充：
.first() // 获取匹配的第一个元素
$('div span:first')-------------->$('div span').first()
.last() // 获取匹配的最后一个元素
$('div span:last')----------------->$('div span').last()
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
$('div span:not("#d3")') --------------->$('div span').not('#d3')
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
样式操作
classList.add()------------------>addClass();// 添加指定的CSS类名。
classList.reomve()----------------->removeClass();// 移除指定的CSS类名。
classList.containes()------------------>hasClass();// 判断样式存不存在
classList.toggle()--------------->toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
文本操作(掌握)
innerHTML--------------->html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
label的作用
当你选择label里面的文本时会自动跳转到id对应的表单对象中（也就是图片的输入框内）
$("input[name='gender']:checked").val()
可以得到input标签中name属性等于gender被checked的value值
属性操作
用于ID等自定义属性
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的
举个例子：
<input type="checkbox" id="i1" value="1">
针对上面的代码，
$("#i1").attr("checked") // undefined
//(会获得这个标签的v值)
$("#i1").prop("checked") // false
//存在就true，不存在就false，自定义属性undefined
1. 对于标签上有的能看到的属性和自定义属性都用attr
2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
文档处理
添加到指定元素内部的后面
let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')
$pEle.attr('id','d1')
$('#d1').append($pEle) # 内部尾部追加
createElement('p') -----------> $('<p>')
appendChild() -----------> append()
$(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()// 删除匹配的元素集合中所有的子节点。
替换 克隆
replaceWith()
replaceAll()
clone()// 参数
事件
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
阻止后续事件的执行
return false 如果标签本身有功能，想要移除掉这个功能
e.preventDefault();
<form action="">
<button id="b1">点我</button> #form表单里面没有带input的button标签会自动提交
</form>
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
</script>
阻止事件冒泡
// 阻止事件冒泡1
// return false;
// 阻止事件冒泡2
e.stopPropagation();
绑定事件
# 方式一：
// $('#btn').click(function () {
// alert(123);
// })
// 下面这种绑定方式功能更加强大，它支持:事件委托
$('#btn').on('click', function () {
alert(123);
})
hover事件
<script>
$("#p1").hover(function () {
console.log(123);
}, function () {
console.log(345);
})
</script>
# 第一个参数是鼠标移进去触发的动作，第二个参数是鼠标移走触发的动作
input事件
//会实时对input标签数据进行处理
<script>
$('#d1').on('input', function () {
console.log(this.value);
// 只需要在这里向后端发起一个请求携带这此时的值后端给我返回一个结果，我放到页面上去
// ajax朝后端发起请求----------->django中学
})
</script>
事件委托
// 利用事件委托
//class为btn的标签会同时执行这个类
$('body').on('click', '.btn', function () {
console.log('触发了');
})
each
一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。 其他对象通过其属性名进行迭代。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})
010
120
230
340
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历过程中可以使用 return false提前结束each循环。
终止each循环
return false；
.data()
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
导入css配置文件和js配置文件
link标签是用于当前文档引用外部文档的，其次，这个标签的rel属性用于设置对象和链接目的间的关系，说白了就是指明你链进来的对象是个什么东西的，
![[无依赖发布webview2程序] 固定版本运行时环境的方式来实现加载网页](https://img2023.cnblogs.com/blog/1980213/202212/1980213-20221215100856261-11844817.png)
