jQuery总结

1.概述

jQuery 是一个 JavaScript 函数库,用来简化JavaScript的代码

jQuery 库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

2.jQuery引入

CDN引入（网络）：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

可以在bootstrap网页查找CDN的链接地址 http://www.bootcdn.cn/jquery/

在本地导入，先下载好,src是路径

<script src="/scripts/jquery-1.5.2.min.js"></script>

3.jQuery语法

基础语法是：$(selector).action()

​                     $(‘css选择器’).事件(function（）{ js代码…})

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作(事件)
• function是JavaScript的方法，里面可以写要执行的代码

$('css选择器').事件(function（）{ js代码...})

示例

$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class=“test” 的所有元素

$("#test").hide() - 隐藏所有 id=“test” 的元素

提示： jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合

所有 jQuery 函数位于一个 document ready 函数中： 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码

$(document).ready(function(){

--- jQuery functions go here ----

});

4.jQuery事件

jQuery常用事件

bind()	当点击元素时，会发生 click 事件

语法:$(selector).click(function)

dblclick()	当双击元素时，会发生 dblclick 事件

语法:  $(selector).dblclick(function)

mouseenter()	当鼠标指针穿过元素时，会发生 mouseenter 事件

语法:  $(selector).mouseenter(function)

mouseleave()	当鼠标指针离开元素时，会发生 mouseleave 事件

语法:  $(selector).mouseleave(function)

mousedown()	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件

语法: $(selector).mousedown(function)

mouseup()	当在元素上放松鼠标按钮时，会发生 mouseup 事件

语法: $(selector).mouseup(function)

hover	当鼠标指针悬停在被选元素上时要运行事件

语法:  $(selector).hover(function)

focus()	当元素获得焦点时，发生 focus 事件

语法:  $(selector).focus(function)

blur()	当元素失去焦点时发生 blur 事件

语法:  $(selector).blur(function)

5.jQuery效果

animate()	对被选元素应用"自定义"的动画

语法 1:   $(selector).animate(styles,speed,easing,callback)
语法 2:   $(selector).animate(styles,options)

参数	描述
styles	必需。规定产生动画效果的 CSS 样式和值
speed	可选。规定动画的速度。默认是 “normal”。可能的值：毫秒 （比如 1500）“slow”,“normal”,“fast”
easing	可选。规定在不同的动画点中设置动画速度的 easing 函数
callback	可选。animate 函数执行完之后，要执行的函数
options	可选。规定动画的额外选项。 可能的值：speed - 设置动画的速度 easing - 规定要使用的 easing 函数 callback - 规定动画完成之后要执行的函数 step - 规定动画的每一步完成之后要执行的函数 queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始 specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

delay()	对被选元素的所有排队函数（仍未运行）设置延迟

语法:   $(selector).delay(speed,queueName)

参数	描述
speed	可选。规定延迟的速度。可能的值：毫秒"slow",“fast”
queueName	可选。规定队列的名称。 默认是 “fx”，标准效果队列

fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见

语法:   $(selector).fadeIn(speed,callback)

参数	描述
speed	可选。规定元素从隐藏到可见的速度。默认为 “normal”。可能的值：毫秒 （比如 1500) 在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）
callback	可选。fadeIn 函数执行完之后，要执行的函数

fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏

语法:   $(selector).fadeOut(speed,callback)

参数	描述
speed	可选。规定元素从可见到隐藏的速度。默认为 “normal”。可能的值：毫秒 （比如 1500）“slow”,“normal”,“fast” 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）

hide()	隐藏被选的元素

$(selector).hide(speed,callback)

参数	描述
speed	可选。规定元素从可见到隐藏的速度。默认为 “0”。可能的值：毫秒 （比如 1500）“slow”,“normal”,“fast” 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度

show()	显示被选的元素

语法:  $(selector).show(speed,callback)

参数	描述
speed	可选。规定元素从可见到隐藏的速度。默认为 “normal”。可能的值：毫秒 （比如 1500）“slow”,“normal”,“fast” 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）

5.jQuery文档操作

方法	描述
addClass()	向匹配的元素添加指定的类名
after()	在匹配的元素之后插入内容
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容
appendTo()	向目标结尾插入匹配元素集合中的每个元素
attr()	设置或返回匹配元素的属性和值
before()	在每个匹配的元素之前插入内容
clone()	创建匹配元素集合的副本
detach()	从 DOM 中移除匹配元素集合
empty()	删除匹配的元素集合中所有的子节点
hasClass()	检查匹配的元素是否拥有指定的类
html()	设置或返回匹配的元素集合中的 HTML 内容
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容
prependTo()	向目标开头插入匹配元素集合中的每个元素
remove()	移除所有匹配的元素
removeAttr()	从所有匹配的元素中移除指定的属性
removeClass()	从所有匹配的元素中删除全部或者指定的类
replaceAll()	用匹配的元素替换所有匹配到的元素
replaceWith()	用新内容替换匹配的元素
text()	设置或返回匹配元素的内容
toggleClass()	从匹配的元素中添加或删除一个类
unwrap()	移除并替换指定元素的父元素
val()	设置或返回匹配元素的值
wrap()	把匹配的元素用指定的内容或元素包裹起来
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来