jQuery 安装
网页中添加 jQuery
从 jquery.com 下载 jQuery 库https://jquery.com/download/
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
下载 jQuery
有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 script 标签引用它：
<head>
<script src="下载的jQuery文件路径"></script>
</head>
替代方案
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。
//Staticfile CDN:
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
//百度 CDN:
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
//又拍云 CDN:
<head>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>
//新浪 CDN:
<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
//Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
//Microsoft CDN:
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>
使用 Staticfile CDN、百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
jQuery API
jQuery 语法
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
基础语法： $(selector).action()
美元符号$定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
入口函数
$(document).ready(function(){
// 开始写 jQuery 代码...
});
//简写写法
$(function(){
// 开始写 jQuery 代码...
});
jQuery入口函数与js入口函数的区别：
jQuery的入口函数是在 html所有标签都加载之后，就会去执行。可以执行多次，第N次都不会被上一次覆盖。
Js的window.onload事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。只能执行一次，如果第二次，那么第一次的执行会被覆盖
jQuery选择器
基本选择器
原生 JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery 给我们做了封装,使获取元素统一标准.
$(“选择器”) //里面选择器直接写CSS 选择器即可,但是要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定ID的元素 |
| 通配符选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”) | 选取多个元素 |
| 交集选择器 | $(“li.current”) | 交集元素 |
层级选择器
jQuery 设置样式
$(‘div’).css(属性’,'值)
| 符号 | 说明 | 用法 |
|---|---|---|
| 空格 | 后代选择器，选择所有的后代元素 | $(“div span”). css(“background”,”red”) |
| > | 子代选择器，选择所有的子代元素 | $(“div > span”). css(“background”,”red”) |
| + | 紧邻选择器，选择紧挨着的下一个元素 | $(“div + p”). css(“background”,”red”) |
| ~ | 兄弟选择器，选择后面的所有的兄弟元素 | $(“div ~ p”). css(“background”,”red”) |
过滤选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| :eq(index) | index是从0开始的一个数字，选择序号为index的元素。选择第一个匹配的元素。 | $(“li:eq(1)”). css(“background”,”red”) |
| :gt(index) | 选择序号大于index的元素 | $(“li:gt(2)”). css(“background”,”red”) |
| :lt(index) | 选择小于index 的元素 | $(“li:lt(2)”). css(“background”,”red”) |
| :odd | 选择所有序号为奇数行的元素 | $(“li:odd”). css(“background”,”red”) |
| :even | 选择所有序号为偶数的元素 | $(“li:even”). css(“background”,”red”) |
| :first | 选择匹配第一个元素 | $(“li:first”). css(“background”,”red”) |
| :last | 选择匹配的最后一个元素 | $(“li:last”). css(“background”,”red”) |
内容过滤选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| :contains(‘str’) | 包含括号内的文本的元素集合（括号内要加引号） | $(“div:contains(‘Runob’)”) |
| :empty | 空元素（不包含子元素或文本的元素）集合 | $(“td:empty”) |
| :has(selector) | 包含括号中选择器选中的元素集合的元素集合 | $(“div:has(selector)”) |
| :parent | 含有子元素或者文本的元素集合 | $(“td:parent”) |
可见性过滤选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| :hidden | 匹配所有不可见元素，不仅包含样式属性为（display:none）,也包括文本隐藏域为hidden()的文本框 | $(“li:hidden”) |
| :visible | 匹配所有可见元素 | $(“li:visible”) |
属性过滤选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| [attribute] | 选择拥有此属性的集合元素 | $(“div[id]”)选择拥有id属性的 div元素 |
| [attribute=value] | 选择属性值为 value的元素 | $(“div[id=test]”)选择id属性值为test的div元素 |
| [attribute!=value] | 选择属性值不为 value的元素 | $(“div[id!=test]”)选择id属性值不为test的div元素，没有id属性的 div也会被选择 |
| [attribute^=value] | 选择属性值以value开始的元素 | $(“div[id^=test]”)选择id属性 值以test开始的所有div元素 |
| [attribute$=value] | 选择属性以value值结束的元素 | ( " d i v [ i d ("div[id ("div[id=test]”）选择id属性值以test结束的所有div元素 |
| [attribute*=value] | 选择属性中含有value的元素 | $(“div[id*=test]”)选择id属性值中含有test的所有div元素 |
| [A1] [A2]…A[N] | 用属性选 择器合并成一个复合属性选择器。满足多个条件。 |
(
“
d
i
v
[
i
d
]
[
t
i
t
l
e
(“div[id] [title
(“div[id][title=test]”）选择拥有id属性，并且title属性以test结束的所有div元素 |
状态过滤选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| :enabled | 匹配可用的元素 | $(“input:enabled”) |
| :disabled | 匹配不可用的元素 | $(“input:disabled”) |
| :checked | 匹配选中的元素 | $(“input:checked”) |
| :selected | 匹配选中的元素 | $(“option:selected”) |
表单选择器
| 符号 | 说明 | 用法 |
|---|---|---|
| :input | 选取所有的input,textarea，select和button元素 | $(":input")选取所有input，textarea，select和button元素 |
| :text | 选取所有的单选文本框 | $(":text")选取所有的单选文本框 |
| :password | 选取所有的密码框 | $(":password")选取所有的密码框 |
| :radio | 选取所有的单选框 | $(":radio")选取所有的单选框 |
| :checkbox | 选取所有的多选框 | $(":checkbox");选取所有的复选框 |
| :submit | 选取所有的提交按钮 | $(":submit")选取所有的提交按钮 |
| :image | 选取所有的图像按钮 | $(":image");选取所有的图像按钮 |
| :reset | 选取所有的重置按钮 | $(":reset");选取所有的重置按钮 |
| :button | 选取所有的按钮 | $(":button"); 选取所有的按钮 |
| :file | 选取所有的上传域 | $(":hidden")选取所有不可见元素 |
jQuery 筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
parent() | $("li").parent() | 查找父级 |
children() | $("ul").children("li") | 相当于$("ul>li"),最近一级（亲儿子） |
find(selector) | $("ul").find("li") | 相当于$("ul li")后代选择器 |
siblings(selector) | $(".first").siblings("li") | 查找兄弟节点，不包括自己本身 |
nextAll([expr]) | $(".first").nextAll() | 查找当前元素之后所有的同辈元素 |
prevtAll([expr]) | $(.last).prevAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $("div").hasClass("protected") | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
eq(index) | $("li").eq(2) | 相当于$("li:eq(2)"), index从0开始 |
重点记住： parent() children() find() siblings() eq()
隐式迭代（重要)
- jQuery方法获取的元素就是jQuery对象；
- jQuery对象本质是：利用$对DOM对象包装后产生的对象（jquery对象就是伪数组，存储的是一个一个的DOM对象）
含义：
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代
简单理解：给匹配的所有元素进行循环遍历，执行相应的方法，而不是我们再进行循环，简化我们的操作，方便我们的调用。
jQuery 事件
以下事件中：data表示传入fn的额外信息 ，fn（绑定事件的处理函数）
浏览器事件
| 事件 | 描述 | 支持元素或对象 |
|---|---|---|
| error( ) | 当加载文档或图像时发生某个错误（在版本 1.8 中被废弃） | window, img |
| resize([[data],fn]) | 窗口或框架被调整尺寸 | window, iframe, frame |
| scroll([[data],fn]) | 滚动文档的可视部分时 | window和所有可滚动的元素 |
文档加载事件
| 事件 | 描述 | 支持元素或对象 |
|---|---|---|
| ready(fn) | 当DOM准备就绪时，指定一个函数来执行。 | window |
| unload( fn ) | 用户退出页面 （在版本 1.8 中被废弃） | window |
| load( fn ) | 某个页面或图像被完成加载 （在版本 1.8 中被废弃） | window, img |
.ready()方法通常和<body onload="">属性是不兼容的。如果load必须使用，要么不使用.ready()，要么使用jQuery的.load()方法向 window 或一些指定的元素（例如，图片）绑定load事件。
表单事件
| 事件 | 描述 | 支持元素或对象 |
|---|---|---|
| blur( ) | 元素失去焦点（注：此事件不支持冒泡） | a, input, textarea, button, select, label, map, area |
| change( ) | 用户改变域的内容 | input, textarea, select |
| focus( ) | 元素获得焦点 | a, input, textarea, button, select, label, map, area |
| select( ) | 文本被选定 | document, input, textarea |
| submit( ) | 提交按钮被点击 | form |
键盘事件
| 事件 | 描述 | 支持元素或对象 |
|---|---|---|
| keydown( ) | 某个键盘的键被按下 | 几乎所有元素 |
| keypress( ) | 某个键盘的键被按下或按住 | 几乎所有元素 |
| keyup( ) | 某个键盘的键被松开 | 几乎所有元素 |
鼠标事件
| 事件 | 描述 | 支持元素或对象 |
|---|---|---|
| click( ) | 鼠标点击某个对象 | 几乎所有元素 |
| dblclick( ) | 鼠标双击某个对象 | 几乎所有元素 |
| hover(over,out) | over (Function) : 鼠标移到元素上要触发的第一个函数 out (Function) : 鼠标移出元素要触发的第二个函数 | 几乎所有元素 |
| mousedown( fn ) | 某个鼠标按键被按下 | 几乎所有元素 |
| mousemove( fn ) | 鼠标被移动 | 几乎所有元素 |
| mouseout( fn ) | 鼠标从某元素移开 | 几乎所有元素 |
| mouseover( fn ) | 鼠标被移到某元素之上 | 几乎所有元素 |
| mouseup( fn ) | 某个鼠标按键被松开 | 几乎所有元素 |
事件对象
事件流
事件流指的是事件的发生顺序，包括三种：
-
事件的捕获阶段
事件的捕获是从上而下的，越高级的父级越早触发事件 -
处于的目标阶段
-
事件的冒泡阶段
让DOM树最底层的目标元素最先接收到事件，然后向上传递，是一个自下而上的过程
不支持冒泡的事件：
blur:元素失去焦点时触发，不支持冒泡。
focus: 元素获得焦点时触发，不支持冒泡。
mouseenter:鼠标移入元素触发，不支持冒泡。
mouseleave：鼠标移出元素时触发，不支持冒泡。
Event对象
Event对象用来描述JavaScript的事件，它主要作用于IE和NN4以后的各个浏览器版本中。Event对象代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。一旦事件发生，便会生成event对象，如单击一个按钮，浏览器的内存中就产生相应的event对象。
Event对象属性
说明：
event.target：这是注册事件时的对象，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。
在HTML文档中，我们为元素绑定点击事件(“click”)，由于DOM元素的事件冒泡机制，我们点击
元素内的一个元素就可以触发元素上绑定的click事件。target属性就用于返回最初触发事件的DOM元素，也就是本例中的元素。(currentTarget属性始终返回的都是该元素)
event.delegateTarget：该属性在.delegate()或者.on()委派事件非常有用，事件处理程序属于正在处理的元素的祖先元素，可以在委派时识别与删除事件处理程序。
对于非授权的事件处理程序，直接连接到一个元素，event.delegateTarget 总是等价于event.currentTarget.
event.delegateTarget属性的返回值是Element类型，返回”受委托”绑定当前事件处理函数的的DOM元素。
// 为id为element的元素中的所有span元素绑定click事件
$("#element").on( "click", "span", function(event){
// event.delegateTarget 就是id为element的DOM元素
// this 就是当前触发事件的span元素
alert( event.delegateTarget === this); // false
} );
// 为id为element的元素中的所有span元素绑定click事件
$("#element span").bind( "click", function(event){
// event.delegateTarget 就是当前触发事件的span元素
// this 就是当前触发事件的span元素
alert( event.delegateTarget === this ); // true
} );
event.relatedTarget：
relatedTarget属性的返回值是Element类型，返回当前事件涉及到的其他DOM元素(如果存在的话)。
对于 mouseout 事件，它指向被进入的元素；对于 mousein 事件，它指向被离开的元素。
如果当前事件没有涉及到其他元素，则返回null或undefined(视情况而定)。
event.type：
例如：如果触发的是单击事件，则返回”click”；如果是双击事件，则返回”dblclick”；如果是获取焦点事件，则返回”focus”。
该属性通常用于为多个事件类型绑定了同一个事件处理函数的jQuery代码中。
event.timeStamp：
这可以很方便的检测某个jQuery函数的性能。
请注意：在火狐浏览器中，由于浏览器自身的bug问题，该属性无法正确返回触发事件的时间值。
event.which：
event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。
适用的事件类型主要有键盘事件：keypress、keydown、keyup，以及鼠标事件：mouseup、mousedown。
在mousedown、mouseup事件中,鼠标按钮映射代码对应表(相当于event.button):
| event.which属性值 | 对应的鼠标按钮 |
|---|---|
| 1 | 鼠标左键 |
| 2 | 鼠标中键（滚轮键） |
| 3 | 鼠标右键 |
在keypress事件中，event.which属性返回的是输入的字符的Unicode值(相当于event.charCode)：
| event.which属性值 | 对应的输入字符 |
|---|---|
| 48-57 | 输入字符0-9 |
| 65-90 | 输入字符A-Z |
| 97-122 | 输入字符a-z |
在keydown、keyup事件中，event.which属性返回的是对应按键的映射代码值(相当于\event.keyCode)。以下是常用的键盘按键映射代码的对应表：
| event.which属性值 | 对应的输入字符 |
|---|---|
| 8 | Backspace键 |
| 9 | Tab键 |
| 13 | Enter键 |
| 16 | Shift键 |
| 17 | Ctrl键 |
| 20 | Alt键 |
| 20 | Caps Lock键(大小写锁定) |
| 27 | Esc键 |
| 33 - 36 | 对应按键 PageUp、PageDown、End、Home |
| 37 - 40 | 对应按键 左、上、右、下(方向键) |
| 45 - 46 | 对应按键 Insert、Delete |
| 48 - 57 | 对应按键 0 - 9(非小键盘) |
| 65 - 90 | 对应按键 A - Z |
| 91 | Windows键 |
| 96 - 105 | 对应按键 0 - 9(小键盘) |
| 106、107、109、110、111 | 对应按键*、+、-、.、/(小键盘) |
| 112 - 123 | 对应按键 F1 - F12 |
// 为当前文档绑定keydown和mousedown两种事件
// 检测鼠标按下了那些键
// 检测键盘按下了那些字母按键
$(document).bind("keydown mousedown", function(event){
var msg = '';
if( event.type == "mousedown" ){ // 鼠标按下事件
var map = {"1": "左", "2":"中", "3":"右"};
msg = '你按下了鼠标[' + map[event.which] + ']键';
}else{ // 键盘按下事件
if(event.which >= 65 && event.which <= 90){
msg = '你按下了键盘[' + String.fromCharCode(event.which) + ']键';
}
}
if(msg){
$("#msg").prepend( msg + '<br>');
}
});
event.namespace：
当需要为同一个元素、同一种事件类型绑定多个事件处理函数时，一般情况下，触发某个事件，就会触发执行与之对应的所有事件处理函数；解除某种类型的事件绑定，就会解除该事件类型绑定的所有事件处理函数。
jQuery中的事件函数可以在绑定事件处理函数时，为每个事件类型定义一个或多个命名空间。使用命名空间，我们就可以只触发执行指定命名空间下的事件处理函数，或者只移除指定命名空间下绑定的事件处理函数。
event.result:
如果为DOM元素的同一事件类型绑定了多个事件处理函数，你可以使用result属性获取上一个事件处理函数执行的返回值。
例如，你为DOM元素的”click”事件按照顺序绑定了A、B、C三个事件处理函数，你可以在事件处理函数B中获取A的返回值，在C中获取B的返回值。
$("#myForm").submit( function(event) {
// 验证文本框uid的输入是否有效
if( !$("#uid").val() ){
alert("uid不能为空!");
return false;
}
if( !$("#pwd").val() ){
alert("pwd不能为空!");
return false;
}
return true;
} );
$("#myForm").submit( function(event) {
// 如果前面的表单验证返回false，无法继续验证，直接返回false
if( event.result === false){
return false;
}
// 验证文本框mail的输入是否有效
if( !$("#mail").val() ){
alert("mail不能为空!");
return false;
}
return true;
} );
event.metaKey:
大多数键盘上并不存在Meta键，该键存在于MIT计算机、Mac计算机或Sun公司的一些计算机键盘上。
metaKey属性的返回值是Boolean类型，返回表示是否按下Meta键的布尔值。如果按下，则返回true，否则返回false。
Event对象方法
| 方法 | 概述 |
|---|---|
| event.preventDefault() | 阻止默认事件行为的触发。 |
| event.isDefaultPrevented() | 根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。 |
| event.stopPropagation() | 防止事件冒泡到DOM树上，也就是不触发任何前辈元素上的事件处理函数。 |
| event.isPropagationStopped() | 根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。 |
| event.stopImmediatePropagation() | 阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。 |
| event.isImmediatePropagationStopped() | 根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。 |
绑定事件处理器
1.简单事件绑定
语法：
element.事件(function(){})
$("div").click(function(){事件处理程序})
**缺点：**一次只能绑定一个事件
2.on()方法
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：
element.on(events [selector] [data],fn )
//events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
//selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
//data:当一个事件被触发时要传递event.data给事件处理函数。
//fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
on()方法优势：
（1）可以绑定多个事件，多个处理事件的处理程序
$("div").on({
mouseover:function(){}，
mouseout:function(){}，
click:function(){}
});
如果处理事件的程序相同
$("div").on("mouseout mouseover",function(){
$(this).toggleClass("current");
});
(2)可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件郷定在父元素身上，就是把事件委派给父元素。
$("ul").on('click','li',function(){
alert("hello word!")
});
在此之前有bind(),live0 delegate0等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们.
(3)动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件
$("div").on("click","p",function(){
alert("俺可以给动态生成的元素绑定事件")
});
$("div").append($("<p>我是动态创建的p</p>"))
案例：发布微博案例
①点击发布按钮，动态创建一个小i,放入文本框的内容和删除按钮，并且添加到u山中
②点击的删除按钮，可以删除当前的微博留言。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
<script src="../JS/Jquery3.6.js"></script>
<script>
$(function() {
// 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
$(".btn").on("click", function() {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
// 2.点击的删除按钮，可以删除当前的微博留言li
// $("ul a").click(function() { // 此时的click不能给动态创建的a添加事件
// alert(11);
// })
// on可以给动态创建的元素绑定事件
$("ul").on("click", "a", function() {
$(this).parent().slideUp(function() {
$(this).remove();
});
})
})
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
</body>
</html>
3.off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。
语法：
element.off(events,[selector],[fn])
//events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin".
//selector:一个最初传递到.on()事件处理程序附加的选择器。
//fn:事件处理程序函数以前附加事件上，或特殊值false.
$("p").off()//解绑p元素所有事件处理程序
$("p").off("click")//解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click","1i");//解绑事件委托
(4)如果有的事件只想触发一次,可以使用 one()来绑定事件.
语法：
element.one(type,[data],fn)
//type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
//data:将要传递给事件处理函数的数据映射
//fn:每当事件触发时执行的函数。
$("#foo").one("click", function() {
alert("This will be displayed only once.");
});
$("body").one("click", "#foo", function() {
alert("This displays if #foo is the first thing clicked in the body.");
});
(5)自动触发事件 trigger()
有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
语法：
(1) element.事件()
$("div").click(); //简写模式
(2) element.trigger("事件")
$("div").trigger("click");
(3) element.triggerHandler("事件")
$("div").triggerHandler("click");
//triggerHandler模式不会触发元素的默认行为（比如：表单获取焦点就有光标），这是和前面两种的区别。
jQuery里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css("color","red")
$(this). siblings. css("color", "")
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../JS/Jquery3.6.js"></script>
</head>
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "");
});
})
</script>
</body>
</html>
jquery设置CSS样式
css(name|pro|[,val|fn])
概述
访问匹配元素的样式属性。
参数
name：要访问的属性名称 或者一个或多个CSS属性组成的一个数组
properties：要设置为样式属性的名/值对
name,value：要设置为样式属性的名/值对
name,function(index, value)：1:属性名。2:此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。
示例
参数name 描述:
取得第一个段落的color样式属性的值。
$("p").css("color");
参数properties 描述:
将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "color": "#ff0011", "background": "blue" });
参数name,value 描述:
将所有段落字体设为红色
$("p").css("color","red");
参数name,回调函数 描述:
逐渐增加div的大小
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
jQuery 效果- 隐藏和显示
jQuery hide() 和 show()
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width: 300px;
height: 220px;
margin: 200px auto;
}
.div1 button{
margin-left: 50px;
}
.div2{
text-align: center;
font-size: 24px;
width: 300px;
height: 200px;
background: linear-gradient(to bottom, #ddd6f3, #faaca8);
}
</style>
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".hideBtn").click(function(){
$(".div2").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
$(".SHOW").dblclick(function(){
$(".div2").show(1000,"linear",function(){
alert("SHOW() 方法已完成!");
});
});
});
</script>
<body>
<div class="div1">
<div class="div2">隐藏显示及设置回调函数</div>
<button class="hideBtn">单击隐藏</button>
<button class="SHOW">双击显示</button>
</div>
</body>
</html>
jQuery 效果 - 淡入淡出
语法：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
| 方法 | 描述 |
|---|---|
| fadeIn() | 用于显示所有匹配的元素，并带有淡入的过渡动画效果。 |
| fadeOut() | 用于隐藏所有匹配的元素，并带有淡出的过渡动画效果。 |
| fadeToggle() | 用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果。 |
| fadeTo() | 用渐进方式把所有匹配元素的不透明度调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。 |
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.默认值为400。该参数也可以为字符串”fast”(=200)或”slow”(=600)。
可选的 callback 参数是完成后所执行的函数名称。
fadeIn()演示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<style>
#div1,#div2,#div3{
width: 80px;
height: 80px;
display:none;
}
#div1{
background: linear-gradient(to bottom, #CC95C0, #DBD4B4, #7AA1D2);
}
#div2{
background: linear-gradient(to bottom, #DD5E89, #F7BB97);
}
#div3{
background: linear-gradient(to bottom, #50C9C3, #96DEDA);
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button>点击淡入 div 元素。</button>
<br><br>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9YVlRq9-1620351430234)(e11f0d64efb4f2f667034c574e5afaa7.gif)]](https://img-blog.csdnimg.cn/20210704210701591.gif)
fadeOut()演示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<style>
#div1,#div2,#div3{
width: 80px;
height: 80px;
}
#div1{
background: linear-gradient(to bottom, #CC95C0, #DBD4B4, #7AA1D2);
}
#div2{
background: linear-gradient(to bottom, #DD5E89, #F7BB97);
}
#div3{
background: linear-gradient(to bottom, #50C9C3, #96DEDA);
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出div 元素。</button>
<br><br>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传![(img-cMBxQbNQ-1620351430235)(7498494f4908b31aee92c8d9b613bdb0.gif)]](https://img-blog.csdnimg.cn/20210704210721192.gif)
fadeToggle()演示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<style>
#div1,#div2,#div3{
width: 80px;
height: 80px;
display: none;
}
#div1{
background: linear-gradient(to bottom, #CC95C0, #DBD4B4, #7AA1D2);
}
#div2{
background: linear-gradient(to bottom, #DD5E89, #F7BB97);
}
#div3{
background: linear-gradient(to bottom, #50C9C3, #96DEDA); }
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出元素。</button>
<br><br>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div>
</body>
</html>
fadeTo()演示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<style>
#div1,#div2,#div3{
width: 80px;
height: 80px;
}
#div1{
background: linear-gradient(to bottom, #CC95C0, #DBD4B4, #7AA1D2);
}
#div2{
background: linear-gradient(to bottom, #DD5E89, #F7BB97);
}
#div3{
background: linear-gradient(to bottom, #50C9C3, #96DEDA); }
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
});
</script>
<p>演示 fadeTo() 使用不同参数</p>
<button>点我让颜色变淡</button>
<br><br>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div>
</body>
</html>
jQuery 效果 - 滑动
语法：
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
| 方法 | 描述 |
|---|---|
| slideDown() | 如果一个元素的display属性值为"none"，用于向下滑动元素。 |
| slideUp() | 用于向上滑动元素。 |
| slideToggle() | 方法可以在 slideDown() 与 slideUp() 方法之间进行切换 |
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.默认值为400。该参数也可以为字符串”fast”(=200)或”slow”(=600)。可选的 callback 参数是完成后所执行的函数名称。
slideDown()演示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background:#e6fffd;
border:solid 1px #c3c3c3;
cursor: pointer;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
slideUp()演示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background:#e6fffd;
border:solid 1px #c3c3c3;
cursor: pointer;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
slideToggle()演示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background:#e6fffd;
border:solid 1px #c3c3c3;
cursor: pointer;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fME2jRg4-1620351430241)(3aeca9ec39ee77dd617ec7e19389c41e.gif)]](https://img-blog.csdnimg.cn/202107042109258.gif)
jQuery 效果- 动画
jQuery 动画 - animate() 方法
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
1.自定义简单动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
background:#98bf21;
height:100px;
width:100px;
position:absolute;
}
</style>
</head>
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div></div>
</body>
</html>
2.累加、累减动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
background:#98bf21;
height:100px;
width:100px;
position:absolute;
}
</style>
</head>
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'+=250px'});
});
});
</script>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div></div>
</body>
</html>
jQuery常用的DOM操作
attr(name|properties|key,value|fn)
概述
设置或返回被选元素的属性值。
参数
name ：属性名称
properties ：作为属性的“名/值对”对象
key,value ：属性名称，属性值
key,function(index, attr) ：key属性名称 ,function返回属性值的函数.index当前元素的索引值，attr为原先的属性值。
示例
参数name 描述:
（1）返回文档中所有图像的src属性值。
$("img").attr("src");
参数properties 描述:
（2）为所有图像设置src和alt属性
$("img").attr({ src: "test.jpg", alt: "Test Image" });
参数key,value 描述:
（3）为所有图像设置src属性。
$("img").attr("src","test.jpg");
参数key,回调函数 描述:
(4)把src属性的值设置为title属性的值。
$("img").attr("title", function() { return this.src });
removeAttr(name)
概述
从每一个匹配的元素中删除一个属性
参数
name：要删除的属性名
示例
参数name 描述:
将文档中图像的src属性删除
<img src="test.jpg"/>
$("img").removeAttr("src");
prop(name|properties|key,value|fn)
概述
获取在匹配的元素集中的第一个元素的属性值。
参数
name：属性名称
properties ：作为属性的“名/值对”对象
key,value ：属性名称，属性值
key,function(index, attr) ：key属性名称 ,function返回属性值的函数.index当前元素的索引值，attr为原先的属性值。
示例
参数name 描述:
选中复选框为true，没选中为false
$("input[type='checkbox']").prop("checked");
参数properties 描述:
禁用页面上的所有复选框
$("input[type='checkbox']").prop({ disabled: true});
参数key,value 描述:
禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);
参数key,回调函数 描述:
通过函数来设置所有页面上的复选框被选中。
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
removeProp(name)
概述
用来删除由.prop()方法设置的属性集
参数
propertyName：要删除的属性名
示例
propertyName描述
设置一个段落数字属性，然后将其删除。
<p> </p>
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
//结果：The secret luggage code is: 1234. Now the secret luggage code is: undefined.
addClass(class|fn)
概述
为每个匹配的元素添加指定的类名。
参数
class：一个或多个要添加到元素中的CSS类名，请用空格分开
function(index, class) ：此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
示例
参数class 描述:
为匹配的元素加上 ‘selected’ 类
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
回调函数 描述:
给li加上不同的class
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
removeClass([class|fn])
概述
从所有匹配的元素中删除全部或者指定的类。
参数
class：一个或多个要删除的CSS类名，请用空格分开
function(index, class) ：此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
示例
参数class 描述:
从匹配的元素中删除 ‘selected’ 类
$("p").removeClass("selected");
删除匹配元素的所有类
$("p").removeClass();
回调函数描述:
删除最后一个元素上与前面重复的class
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
toggleClass(class|fn[,sw])
概述
如果存在（不存在）就删除（添加）一个类。
参数
class：CSS类名
switch：用于决定元素是否包含class的布尔值。
function(index, class,switch) ：1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。2: 一个用来判断样式类添加还是移除的 boolean 值。
示例
参数class 描述:
为匹配的元素切换 ‘selected’ 类
$("p").toggleClass("selected");
参数class,switch 描述:
每点击三下加上一次 ‘highlight’ 类
<strong>jQuery 代码:</strong>
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
回调函数 描述:
根据父元素来设置class属性
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
html([val|fn])
概述
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
参数
val：用于设定HTML内容的值
function(index, html)：此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。
示例
无参数 描述:
返回p元素的内容。
$('p').html();
参数val 描述:
设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");
回调函数描述:
使用函数来设置所有匹配元素的内容
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
text([val|fn])
概述
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
参数
val：用于设置元素内容的文本
function(index, text)：此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。
示例
无参数 描述:
返回p元素的文本内容。
$('p').text();
参数val 描述:
设置所有 p 元素的文本内容
$("p").text("Hello world!");
回调函数 描述:
使用函数来设置所有匹配元素的文本内容。
$("p").text(function(n){
return "这个 p 元素的 index 是：" + n;
});
val([val|fn|arr])
概述
获得匹配元素的当前值。
参数
val：要设置的值。
function(index, value)：此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。
array：用于 check/select 的值
示例
无参数 描述:
获取文本框中的值
$("input").val();
参数val 描述:
设定文本框的值
$("input").val("hello world!");
回调函数 描述:
设定文本框的值
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
参数array 描述:
设定一个select和一个多选的select的值~~~
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);