目录
jQuery
优点
1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
jQuery的优势
1. 一款轻量级的JS框架。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
jQuery内容
1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax
下载链接：jQuery官网
中文文档：jQuery AP中文文档
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链接使用(你的电脑必须有网)
jQuery语法
$("selector").action()
标签查找
id $("#id")
class $(".class")
标签 $("tagName")
搭配使用
$("div.c1") 找到有c1 class类的div标签
$("div#id")
$(".c1")
组合选择器
$("#id, .className, tagName")
$('#d1,.c1,p') # 并列+混用
$('div span') # 后代
$('div>span') # 儿子
$('div+span') # 毗邻
$('div~span') # 弟弟
补充：标签对象和jquery对象
var h1 =$("#h1");获得一个jquery对象，可以通过索引取得标签对象
两者之间的转换
document。getElementById("id") =====>$(document。getElementById("id"))
基本选择器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
属性选择器
$("[属性条件]")
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性
:enabled
:disabled 禁用
:checked
:selected
name 返回或设置表单名称
action 返回或设置表单提交的URL
method 返回或设置表单提交方式，可取值为get或post
encoding 返回或设置表单信息提交的编码方式
id 返回或设置表单id
length 返回表单元素个数
target 返回或设置提交表单时目标窗口的打开方式
elements 返回表单对象中的元素构成的数组，数组中的元素也是对象
筛选器方法
$("#id").next() 下一个元素
$("#id").nextAll() 下面的全部
$("#id").nextUntil("#id1") 从id~id1之间的全部
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
# 补充：
.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类名，如果有就移除，如果没有就添加。
位置操作
offset()// 获取匹配元素在当前'窗口'的相对偏移或设置元素位置
position()// 获取匹配元素相对'父元素'的偏移
scrollTop()// 获取匹配元素相对'滚动条顶部'的偏移
scrollLeft()// 获取匹配元素相对'滚动条左侧'的偏移
CSS操作
$("p").css("color", "red");
$("p").css("color", "red").css('','').css('','');
尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作
innerHTML--------------->html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
属性操作
# 属性操作就是给标签增加删除等的操作
# 在js中是如何操作标签属性的?
div.setAttritube('k', 'v');
div.getAttritube('k');
div.removeAttritube('k');
# jquery中是如何操作标签属性的?
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
# 用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
# 我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
# 对于标签的自定义属性，使用attr方法获取，而不要使用prop方法
总结一下：
1. 对于标签上有的能看到的属性和自定义属性都用attr
2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
文档处理
# 或者叫节点操作
# js中如何创建一个标签出来
var a = document.createElement('a');
# jquery中如何创建一个标签
var a = $('<a>');
let pEle = $('<p>')
pEle.text('你好啊 草莓要不要来几个?')
pEle.attr('id','d1')
$('#d1').append($pEle) # 内部尾部追加
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
克隆
clone()// 参数
$("#b1").click(function () {
// console.log($(this));
// console.log($(this).clone());
$(this).clone(true).insertAfter(this);// clone克隆默认情况下只克隆标签的样子，不可隆事件
})
常见事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
input监控
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})
事件绑定
1. .on( events [, selector ],function(){})
● events： 事件
● selector: 选择器（可选的）
● function: 事件处理函数
移除事件
1. .off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
● events： 事件
● selector: 选择器（可选的）
● function: 事件处理函数
阻止后续事件执行
<script>
$("#btn").click(function (e) {
$('.s1').text('趁年轻，学技能');
// 组织手续事件的执行1
// return false;
// 组织手续事件的执行1
e.preventDefault();
})
</script>
阻止事件冒泡
// 阻止事件冒泡1
// return false;
// 阻止事件冒泡2
e.stopPropagation();
页面加载
# 等待页面加载完毕之后再执行的代码
# js中如何做的?
window.onload = function () {}
# 在jquery中
# 1.
$(document).ready(function(){
// 在这里写你的JS代码...
})
# 2.
$(function(){
// 你在这里写你的代码
})
# 3.
# 把你的js代码放在body的最下面，最后加载就可以了
事件委托
// 利用事件委托
$('body').on('click', '.btn', function () {
console.log('触发了');
})