前端开发：6、jQuery类库简介与基本使用
jQuery类库
目录
一、简介
Write less do more 写的更少做的更多
1.优点
1.加载速度快
2.选择器更多更好用
3.一行代码走天下
4.支持ajax请求(重点)
5.兼容多浏览器
2.准备工作
1.下载核心文件到本地引入(没有网络也可以使用)
<script src="jQuery3.6.js"></script>
2.CDN网络资源加载(必须有网络才可以使用)
资源下载地址：
https://www.bootcdn.cn/
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
3.什么是CND
CND是网络加速服务，内容分发网络
1. 不用担心自己网站访客，在任何时间，任何地点，任何网络运营商，都能快速打开网站。
2. 各种服务器虚拟主机带宽等采购成本，包括后期运维成本都会大大减少。
3. 给网站直接带来的好处就是：流量，咨询量，客户量，成单量，都会得到大幅度提升。
4.jQuery导入与用法
导入：
在< head > 标签内，通过< script > 标签导入
1、导入链接：
<script src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
2、导入文件
<script src = "jQuery文件路径.js"></script>
用法：
默认的关键字就是jQuery但是不好输入 >>>:$
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快
5.jQuery与JS代码对比
1、JS代码查询标签并修改属性
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
pEle.nextElementSibling.style.color = 'green'
2、jQuery代码查询并修改属性
$('p').first().css('color','yellow').next().css('color', 'blue')
6.标签对象与jQuery对象
注意事项
- 不同的对象能够调用的方法是不同的
- 在编写代码的时候一定要看清楚手上是什么对象
- 两者可以互相转换
- 标签对象转jQuery对象：$(标签对象)
- jQuery对象转标签对象：jQuery对象[0]
二、jQuery查找对象
1、选择器🕸️
基本选择器
$('#d1') id选择器
$('.c1') class选择器
$('div') 标签选择器
组合选择器
$('div#d1') 查找id是d1的div标签
$('span.c1') 查找含有c1样式类的span标签
$('div,span,p') 查找div或者span或者p标签
$('#d1,.c1,span') 查找id是d1的或者class含有c1的或者span标签
层级选择器
$('div p') 查找div里面所有的后代p标签
$('div>p') 查找div里面的儿子p标签
$('div+p') 查找div同级别下面紧挨着的p标签
$('div~p') 查找div同级别下面所有的p标签
属性选择器
$('[username]') 查找含有username属性名的标签
$('[username="jason"]') 查找含有username属性名并且值等于jason的标签
$('input[username="jason"]') 查找含有username属性名并且值等于jason的input标签
2、赛选器🏳️🌈
基本筛选器
通过查找到的标签对象，可使用筛选器进行二次筛选
- 用法：
- $('标签对象：筛选器关键词')
- 优化：
- $('标签对象').赛选器关键词（）
| 关键词 | 描述 |
|---|---|
| :first | 第一个 |
| :last | 最后一个 |
| :eq(index) | 索引等于index的那个元素 |
| :even | 从0开始，匹配所有索引位置为偶数的元素 |
| :odd | 从0开始，匹配所有索引位置为奇数的元素 |
| :gt(index) | 匹配所有大于指定索引值的元素 |
| :lt(index) | 匹配所有小于指定元素值的元素 |
| :not(元素选择器) | 移除所有满足not条件的标签 |
| :has(元素选择器) | 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) |
表单筛选器
表单筛选器只能针对表单标签使用，可以通过表单标签独有的属快速找到对应的表单标签
$(':text')
$(':password')
$(':selected') selected
// checked与selected都会找到
$(':checked') checked与selected都会找到
筛选器方法
1、同级向下查找
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
2、同级向上查找
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
3、所有同级标签
$("#id").siblings();// 兄弟们
4、父级查找
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
5、儿子级查找
$("#id").children(); // 所有的子类标签
3、操作标签
1.Class操作
| 关键词 | 描述 | 对比JS代码 |
|---|---|---|
| addClass() | 添加类名 | classList.add() |
| removeClass() | 删除类名 | classList.remove() |
| hasClass() | 判断指定标签下是否含有该类名，返回true/false | classList.contains() |
| toggleClass | 判断指定标签下是否含有该类名，返回false/true | classList.toggle() |
2.位置操作
| 关键词 | 描述 |
|---|---|
| $(window).scrollTop() | 返回当前所在页面滚轮距离页首的位置 |
3.文本操作
| 关键词 | 描述 | 对比JS代码 |
|---|---|---|
| text() | 给标签内部添加文本内容 | innerText |
| html() | 给标签内部添加文本，也可以直接添加标签 | innerHtml |
| val() | 给标签添加value值 | value |
| files | 获取用户上传的文件 | files[0] |
4.创建标签
| 关键词 | 描述 | 对比JS代码 |
|---|---|---|
| $('<标签类>') | 创建标签 | document.createElement() |
5.操作属性
| 关键词 | 描述 | 对比JS代码 |
|---|---|---|
| attr() | 输入属性名，获取该属性对应的值 | getAttribute() |
| renameAttr() | 删除指定的标签属性 | removeAttr（） |
| 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事件
1.click(function(){...})
当用户点击某个对象时调用
2.hover(function(){...})
鼠标移入时调用
3.blur(function(){...})
元素失去焦点调用
4.focus(function(){...})
元素获得焦点时调用
5.change(function(){...})
域的内容被改变
6.keyup(function(){...})
鼠标操作时调用
1、JS绑定事件
默认就用方式1 不行了再用方式2
使用事件触发的clone，不会复制标签的事件，想要复制标签的事件，需要再后方参数内填入 true
方法一：
jQuery对象.事件名(function(){})
方法二：
jQuery对象.on('事件名称',function(){})
clone属性
clone(true) 默认不克隆事件 加true就可以
2、取消后续事件
若一个标签自身有默认事件，我们也给其绑定了事件，那么就会先执行手动绑定的事件，后执行标签自身的事件
取消后续事件
事件函数的最后return false即可
3、阻止事件冒泡
事件冒泡是指，绑定事件的标签的父标签也绑定了事件，那么只要触发了事件执行的条件，就会由标签向其父标签的顺序执行事件
阻止事件冒泡
事件函数的最后return false即可
4、等待页面加载完毕执行
通常我们建议将JS代码放在body标签的最下方，先由HTML标签加载完毕后再执行JS代码，但是JS代码也可以放在head标签内，但是如果直接放置再head标签内的话，会产生找不到标签的问题
解决方法
$(function(){}) 缩略写法
$(document).ready(function(){}) 完整写法
四、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])
