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、赛选器?️‍?

基本筛选器

​ 通过查找到的标签对象，可使用筛选器进行二次筛选

• 用法：
  • $('标签对象：筛选器关键词')
• 优化：
  • $('标签对象').赛选器关键词（）

表单筛选器

​ 表单筛选器只能针对表单标签使用，可以通过表单标签独有的属快速找到对应的表单标签

$(':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操作

2.位置操作

3.文本操作

4.创建标签

5.操作属性

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])