jQuery介绍
1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
jQuery的优势
1. 加载速度快
2. 选择器更多更好用
3. 一行代码走天下
4. 支持ajax请求(重点)
5. 兼容多浏览器
jQuery的两种导入方式
导入方式1.下载核心文件到本地引入(没有网络也可以使用)
下载渠道1：
步骤一：打开官网点击download jQuery
步骤二：点击下面两个选项可以分别得到压缩过的和未压缩的jQuery文件
步骤三：点击跳转后，会进入一个新的网页，打开浏览器的控制台功能，选择网络（network）选项，在控制台打开的情况下点击刷新，在控制台界面会出面jquery
文件
步骤四：右键点击另存为，选择合适的文件夹保存即可。
下载渠道2：CDN
官网加载太慢，我们可以选用CDN网络资源
CDN介绍
CDN 是构建在数据网络上的一种分布式的内容分发网。 CDN 的作用是采用流媒体服务器集群技术，克服单机系统输出带宽及并发能力不足的缺点，可极大提升系统支持的并发流数目，减少或避免单点失效带来的不良影响。
简单来说，就是在全国各地部署了很多分布式的小服务器，将一些数据保存到这些小服务器中，当有很远的客户端远程请求的主服务器的时候，如果一些资源（比如图片等资源）在小服务器上有保存，就会直接发送给客户端，加快访问速度。
1. 打开后进入下图界面，然后点击jquery图标
2. 选择复制链接，将其在浏览器打开，同样出来jquery的代码页，按照上述步骤下载即可
复制链接 https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
也可以复制上述代码，创建一个本地js文件将其保存起来：
创建一个js文件
将代码拷贝到js文件中
注意：使用之前必须先导入文件：
导入方式2：CDN网络资源加载(必须有网络才可以使用)
直接复制上述script标签导入html文件：
复制scrip标签 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
为了避免下次使用时忘记导入，可以将其做成模板
1. 依次点击：File——Settings——Editor——File and Code Templates
2. 将复制的script标签粘贴在我们要放置的位置，点击Apply——OK，模板就设置好了。
jQuery中文学习网站：jQuery AP中文文档
jQuery对象
标签对象与jQuery对象
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换
标签对象转jQuery对象 $(标签对象) jQuery对象转标签对象 jQuery对象[0]
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像 var variable = DOM对象 $variable[0] //jQuery对象转成DOM对象
jQuery对象和DOM对象的使用
$("#i1").html(); //jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML; // DOM对象使用DOM的方法
jQuery基础语法
$(selector).action()
查找标签
1. 基本筛选器
$('#d1') // id选择器
$('.c1') // class选择器
$('div') // 标签选择器
2.组合选择器
$('div#d1') // 查找id是d1的div标签
$('span.c1') // 查找含有c1样式类的span标签
$('div,span,p') // 查找div或者span或者p标签
$('#d1,.c1,span') // 查找id是d1的或者class含有c1的或者span标签
3.层级选择器
$('div p') // 查找div里面所有的后代p标签
$('div>p') // 查找div里面的儿子p标签
$('div+p') // 查找div同级别下面紧挨着的p标签
$('div~p') // 查找div同级别下面所有的p标签
4.属性选择器
$('[username]') // 查找含有username属性名的标签
$('[username="jason"]') // 查找含有username属性名并且值等于jason的标签
$('input[username="jason"]') //查找含有username属性名并且值等于jason的input标签
5.基本筛选器
:first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子：
$("div:has(h1)") // 找到所有后代中有h1标签的div标签
$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)") // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签
优化：
$('li:first') 优化 $('li').first()
练习
自定义模态框，使用jQuery实现弹出和隐藏功能。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定义模态框</title>
<style>
.cover {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: darkgrey;
z-index: 999;
}
.modal {
width: 600px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<input type="button" value="弹" id="i0">
<div class="cover hide"></div>
<div class="modal hide">
<label for="i1">姓名</label>
<input id="i1" type="text">
<label for="i2">爱好</label>
<input id="i2" type="text">
<input type="button" id="i3" value="关闭">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var tButton = $("#i0")[0];
tButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).removeClass("hide");
$(modalEle).removeClass("hide");
};
var cButton = $("#i3")[0];
cButton.onclick=function () {
var coverEle = $(".cover")[0];
var modalEle = $(".modal")[0];
$(coverEle).addClass("hide");
$(modalEle).addClass("hide");
}
</script>
</body>
</html>
jQuery版自定义模态框
6.表单筛选器
$(':text')
$(':password')
$(':checked') // checked与selected都会找到
$(':selected') // selected
7.筛选器方法
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children(); // 儿子们
$("#id").siblings(); // 兄弟们
操作标签
1.class操作
| JQuery | JS |
addClass() |
classList.add() |
removeClass() |
classList.remove() |
hasClass() |
classList.contains() |
toggleClass() |
classList.toggle() |
2.位置操作
$(window).scrollTop() // 获取匹配元素相对滚动条顶部的偏移
3. 文本操作（重要）
| JQuery | JS |
text() |
innerText |
html() |
innerHTML |
val() |
value |
jQuery对象[0].files |
files[0] |
4.创建标签
| JQuery | JS |
| $('<a>') | document.createElement() |
5.属性操作
用于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和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
举个例子：
<input type="checkbox" id="i1" value="1">
针对上面的代码，
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
如果换成下面的代码：
<input type="checkbox" checked id="i1" value="1">
再执行：
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
接下来再看一下针对自定义属性，attr和prop又有什么区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码：
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
总结一下：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
6.文档处理
$(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() // 删除匹配的元素集合中所有的子节点。
jQuery事件
JS绑定事件
| jQuery绑定事件 | JS绑定事件 |
方式1:
jQuery对象.事件名(function(){})
|
标签对象.on事件名 = function(){} |
方式2:
jQuery对象.on('事件名称',function(){})
|
ps:补充
clone属性
clone(true) // 只克隆样式，默认不克隆事件，加true就可以克隆事件
克隆示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>克隆</title>
<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 src="jquery-3.2.1.min.js"></script>
<script>
// clone方法不加参数true，克隆标签但不克隆标签带的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
});
// clone方法加参数true，克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
事件相关补充
1.取消后续事件
1. 事件函数的最后return false即可
2.事件函数的最后e.stopPropagation()
示例：
<!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>
2.阻止事件冒泡
事件冒泡：当多个标签处理嵌套关系的时候，并且有相同的事件绑定，当点击某一个标签时，会先执行此标签的点击事件，并汇报给它的父标签，并继续往上汇报，依次触发此事件。
1. return false
2. e.stopPropagation()
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.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')
return false
})
$('span').click(function (e) {
alert('我是span')
// return false
e.stopPropagation()
})
</script>
</body>
</html>
3.页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
文档加载完绑定事件，并且阻止默认事件发生
登录校验示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录注册示例</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form id="myForm">
<label for="name">姓名</label>
<input type="text" id="name">
<span class="error"></span>
<label for="passwd">密码</label>
<input type="password" id="passwd">
<span class="error"></span>
<input type="submit" id="modal-submit" value="登录">
</form>
<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>
function myValidation() {
// 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
var $myForm = $("#myForm");
$myForm.find(":submit").on("click", function () {
// 定义一个标志位，记录表单填写是否正常
var flag = true;
$myForm.find(":text, :password").each(function () {
var val = $(this).val();
if (val.length <= 0 ){
var labelName = $(this).prev("label").text();
$(this).next("span").text(labelName + "不能为空");
flag = false;
}
});
// 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
return flag;
});
// input输入框获取焦点后移除之前的错误提示信息
$myForm.find("input[type!='submit']").on("focus", function () {
$(this).next(".error").text("");
})
}
// 文档树就绪后执行
$(document).ready(function () {
myValidation();
});
</script>
</body>
</html>
4.事件委托（重要）
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例
表格中每一行的编辑和删除按钮都能触发相应的事件。
主要针对动态创建的标签也可以使用绑定的事件
$('body').on('click','button',function(){})
// 将body内所有的单击事件委托给button标签执行
jQuery动画效果(了解)
// 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定义（了解即可） animate(p,[s],[e],[fn])
自定义动画示例（点赞）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
标签：类库,jQuery,function,标签,prop,div,属性 From： https://www.cnblogs.com/chen-ao666/p/16963788.html