目录
效果：淡入淡出和效果突出-fadeIn，fadeOut，fadeTo
概述
jQuery是一个快速、简洁的 JS库，设置宗旨是”writer Less,Do More”，也就是写着更少的代码，做跟多的事情。使用jQuery可以大大简化我们的开发代码，提高效率。
jQuery：j为JavaScript，Query为查询，既：”查询JS”，把JS中的DOM操作做了封装。
jQuery封装了JS常用的功能代码。
jQuery安装和引用
点击下载地址：官方网站
在这下载压缩版，因为容量比较小。
两者区别在于：未压缩版里面的js代码未被压缩，可以看到原生代码。
点击后，复制其中的所有代码，放到js文件中封装起来即可。
使用：将封装好的js文件引用到html文件中即可：
jQuery-加载函数
说明
1.加载函数，也就是等到DOM元素加载完成后，在执行函数内代码。
2.相当于原生js中的DOMContentLoaded。
3.为了页面的渲染的流畅，我们可以将代码的DOM操作，放到加载函数中。
书写格式
<script>
//原生JS的加载函数
window.addEventListener("DOMContentLoaded",function(){
//DOM资源加载完成后执行体
});
//jQuery加载函数声明方式一：
$(function(){
//DOM资源加载完成后执行体
});
//jQuery加载函数声明方式二：
$(document).ready(function(){
//DOM资源加载完成后执行体
});
</script>jQuery顶级对象：$
1.我们在使用jQuery中的方法时，一般使用 $ 符号进行调用。
2. $ 是jQuery的设置好的别名，在代码中我们也可以不使用别名，直接使用jQuery来调用也可以，但是一般都用$符号，比较简洁。别名也可以设置，篇末进行说明。
3. $ 是jQuery的顶级对象，相当于原生JS中的window。
jQuery对象和DOM对象
1.使用原生JS获取的对象就是DOM对象。
2.jQuery方法获取的元素就是jQuery对象。
jQuery对象只能用jQuery方法，DOM对象只能用原生js属性和方法。不能混用方法，但是可以进行对象的转换。
jQuery对象和DOM对象的转换
正如上面所说，因为jQuery对象和DOM对象两者之间不能引用彼此的方法。所以当我们有需求:使用一方对象调用另一方对象的方法时，就需要进行对象的转换。例如：jQuery对象无法使用原生JS的.play()方法。
DOM对象转换为jQuery对象
方式：${DOM对象}
<body>
<div id="obj"></div>
<script>
//将DOM对象转为jQuery对象
//获取DOM对象
var obj_dom = document.querySelector("#obj");
//转化：DOM对象无hide()方法，此方法由jQuery封装
obj_dom.hide(); //报错：obj_dom.hide is not a function
$(obj_dom).hide(); //通过
</script>jQuery对象转为DOM对象
方式一：$(‘div’)[index] —index:索引
方式二：$(‘div’).get(index)
<body>
<div id="object"></div>
</script>
//将jQuery对象转为DOM对象
//获取jQuery对象
$("#object").hide();
//转换方式一：
// $('#object')[0].hide() //报错：TypeError: $(...)[0].hide is not a function
//转换方式二：
$('#object').get(0).hide() //报错:TypeError: $(...).get(...).hide is not a function
</script>
</body>jQuery选择器和筛选器
格式：$(“选择器”) ，通过选择器，我们可以获取到元素对象。
jQuery基础选择器
jQuery层级选择器
jQuery筛选器
使用演示
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
//筛选器-获取第一个li
console.log($("li:first"));
//获取最后一个li
console.log($("li:last"));
//获取指定位置的li(获取第二个li)
console.log($("li.eq(2)"));
</script>jQuery筛选的方法
常用：children() & find()
<div class="parent">
<div>
<span>1</span>
</div>
<span>2</span>
</div>
<script>
//方法：.children() -子代选择
console.log($(".parent").children("span")); //输出<span>2</span>
//方法：.find() -后代选择
console.log($(".parent").find("span")); //输出<span>1</span>和<span>2</span>
</script>jQuery特性-隐式迭代
jQuery存在隐式迭代。可以看到下面案例：
我们通过$(“div”)的形式获取元素，<div>不只有一个，所以我们获取到的应该是一个多个元素，也就是伪数组，现在，我们想要给每一个div都设置背景颜色，如果不使用jQuery那么我们就要遍历，但是使用jQuery的话，内部存在隐式迭代，就不需要遍历了。实例：
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
<script>
//给获取到的4个div元素都加上背景颜色。
$("div").css("background","red");
常用API-显示show() 和 隐藏hide()
jQuery给我们封装了显示和隐藏的方法。在原生的JS中，如果我们想要显示或隐藏某元素，我们需要:.style.dispaly = block/none ，比较繁琐，如果使用jQuery，那么我们就只需要调用.show() 或 .hide() 方法即可实现显示或隐藏了。
方法使用：
案例：点击按钮，实现隐藏和现实
—
核心代码
<button class="btn_hide">点击隐藏</button>
<button class="btn_show">点击显示</button>
<div>盒子</div>
<script>
//给按钮添加点击事件-点击隐藏
$(".btn_hide").on("click",function(){
$("div").hide()
})
//给按钮添加点击事件-点击显示
$(".btn_show").on("click",function(){
$("div").show()
})案例：jQuery中的排他思想实现
需求：现有多个盒子，当点击其中的某个盒子时，被点击的盒子变色，其他盒子颜色保持不变。使用jQuery来实现。
核心代码：
<body>
<ul>
<li>点击</li>
<li>点击</li>
<li>点击</li>
<li>点击</li>
<li>点击</li>
</ul>
<script>
$("li").click(function(){
//siblings()：获取全部兄弟节点-不包括自身节点
$(this).siblings().css("background","");
$(this).css("background","skyblue");
})
</script>jQuery-获取元素索引
使用jQuery获取元素时可以获取元素索引，例如：获取<ul>中的<li>，<li>有许多，我们不需要声明index属性就能获取每个<li>的所有索引值，就是说jQuery在元素内部给我们封装了index属性。
使用：
<ul>
<li>Li-1</li>
<li>Li-2</li>
<li>Li-3</li>
<li>Li-4</li>
<li>Li-5</li>
</ul>
<script>
//获取第一个元素索引
console.log($("li:first").index()); //输出为0
//获取第二个元素索引
console.log($("li").eq(1).index()); //输出为1
//获取最后一个元素索引
console.log($("li:last").index()); //输出为4
</script>jQuery样式操作
jQuery可以使用.css()来对元素的样式进行操作。
格式一：$(“this”).css(“属性名”); 此方式可以获取该属性名对应的属性值。
格式二：$(“this”).css(“属性名”,”属性值”)；此方式可以给属性名设置上属性值。
格式三：$(“this”).css(“属性名1″:”属性值2″,”属性名1”:”属性值2″….)；此方式可以给多个属性名附上属性值。
特殊情况：如果属性名为复合格式，需要使用驼峰命名法。例如：属性名为:my_filed,那么我们想要给此属性赋值，我们应该这样写:$(“this”).css(“myFiled”,”ok”) 。因为下划线_在编译器通过不了。
给元素添加类
有些时候，我们想要给某元素添加的样式比较复杂(样式比较多)时，直接通过样式名，样式值的方式添加，这样代码看着会比较冗余，也毫无复用性可言，这时我们就可以将样式以类的方式声明在style{}中，在用到的时候，给元素加上类名就可以给元素附上样式了。
添加类：$(“元素对象”).addClass(“类名”);
移除类：$(“元素对象”).removeClass(“类名”)
切换类：$(“元素对象”).toggleClass(“类名”)
jQuery动画效果
jQuery常用的动画效果
1.显示和隐藏
显示：show()、隐藏：hide()、两者切换：toggle()
2.滑动
向下：slideDown()、向上：slideUp()、两者切换：slideToggle()
3.淡入淡出
淡入：fadeIn()、淡出：fadeOut()、两者切换：fadeToggle()、设置透明度：fade()
4.自定义动画
animate()
效果：显示和隐藏-show() & hide()
说明：显示和隐藏的介绍和使用在上面已经写过。
效果：滑动-slideUp() & slideDown()
此效果为上下滑动动画。
方法存在可选参数：slideUp([speed],[easing],[fn]) —slide方法通用
speed：滑动速度，可选值:slow,normal和fast,分别对应慢，正常和快，或使用毫秒数填参。
easing：指定切换的效果，默认是：swing，待选参数：linear。
fn：回调函数，在动画执行完毕后执行此函数。
案例：鼠标经过滑下鼠标离开收起
说明：使用鼠标经过和鼠标离开事件，触碰元素后滑块滑下，离开元素后滑块收起。
核心代码（三种方式-对比看）：
***下方有HTML代码结构***
//方式一：传统方式
console.log($(".ful>li").children("ul"));
$(".ful>li").mousemove(function(){
$(this).children(1).slideDown(1000,fast)
})
$(".ful>li").mouseout(function(){
$(this).children("ul").slideUp()
})
// 方式二：hover(触碰函数,离开函数)参数有两个
$(".ful>li").hover(function(){
$(this).children("ul").slideDown()
},function(){
$(this).children("ul").slideUp()
})
// 方式三：hover(触碰离开函数)参数只有一个
//此方式存在缺陷：可以不断触发事件，导致出现动画叠加
$(".ful>li").hover(function(){
$(this).children("ul").slideToggle();
})
//方式三的优化，加上停止动画
$(".ful>li").hover(function(){
$(this).children("ul").stop().slideToggle();
})HTML代码
<ul class="ful">
<li>
<a href="#" >微博</a>
<ul class="zul">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="zul">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="zul">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="zul">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>动画排队问题-stop()解决
说明：在上方案例中可以知道，当我们添加滑动效果：slideToggle()时，如果不加stop()停止动画排队的话，只要触发一次事件，那么就会触发一次动画，如果上一个动画没有结束的话，就会导致动画排队的问题，所以，我要想要解决这样的问题，就需要加一个stop()。
stop()解决方案：当触发事件时，检查事件触发后触发的动画是否存在”播放”的情况，如果存在，那么就把上一个动画停止掉，执行新动画。
需要注意的是：stop()需要写到动画或效果的前面才有效。
例如： $(this).children(“ul”).stop().slideToggle();
效果：淡入淡出和效果突出-fadeIn，fadeOut，fadeTo
淡入淡出效果说白了就是，元素逐渐消失和元素逐渐显现的过程。
方法存在可选参数：fadeIn([speed],[easing],[fn]) —fade方法通用
speed：滑动速度，可选值:slow,normal和fast,分别对应慢，正常和快，或使用毫秒数填参。
easing：指定切换的效果，默认是：swing，待选参数：linear。
fn：回调函数，在动画执行完毕后执行此函数。
值得注意的是fadeTo，可以设置元素透明度。
透明度设置：fadeTO
方法：fadeTo([speed],opacity,[easing],[fn]) —[ ]为可选
opacity参数：透明度，取值范围0~1之间。
其中opacity和speed必填
案例：淡入淡出和修改透明度
需求：完成按钮功能
核心代码：
<body>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出</button>
<button>修改透明度</button><br>
<div></div>
<script>
//淡入淡出分开写
$("button").eq(0).click(function(){
$("div").fadeIn();
})
$("button").eq(1).click(function(){
$("div").fadeOut();
})
//淡入淡出合并着写
$("button").eq(2).click(function(){
$("div").fadeToggle(1000);
})
//透明度转变
$("button").eq(3).click(function(){
$("div").fadeTo(1000,.5);//转变为50%透明度
})
</script>jQuery自定义动画-animate
语法：animate(params,[speed],easing,[fn])
params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名法。
speed：滑动速度，可选值:slow,normal和fast,分别对应慢，正常和快，或使用毫秒数填参。
easing：指定切换的效果，默认是：swing，待选参数：linear。
fn：回调函数，在动画执行完毕后执行此函数。
使用说明：
需求：点击盒子，一秒内让此盒子移动到距离左边200px的位置，并且透明度变为原来的40%。注意：想要盒子移动，盒子样式需要添加定位。
执行前
执行后
核心代码：
<button>点击执行动画</button>
<div></div>
<script>
$("button").click(function(){
$("div").animate({//以对象的形式传参
left:200,
opacity:.4
},1000)
})
</script>案例：王者荣耀手风琴效果
效果：鼠标触碰，被触碰的图片展出。 其他图片恢复。使用了自定义动画实现。
核心原理：触碰时,大图淡入fideIn,小图淡出fideOut,并且宽度随之变化。
核心JS代码：
//手风琴效果
//加载函数
$(function(){
$(".ul>li").mouseenter(function(){
$(this).stop().animate({
width : 224
//find:后代选择器
}).find(".small").stop().fadeOut().siblings().stop().fadeIn()
})
$(".ul>li").mouseenter(function(){
$(this).siblings("li").stop().animate({
width : 69
}).find(".small").stop().fadeIn().siblings().stop().fadeOut()
})
})HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/demo.css">
<script src="../js/jQuery.min.js"></script>
<script src="../js/demo.js"></script>
</head>
<body>
<div class="box">
<ul class="ul">
<li class="current">
<a href="#">
<img src="../img/113.jpg" alt="" class="small">
<img src="../img/113-freehover.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/126.jpg" alt="" class="small">
<img src="../img/126-freehover.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/129.jpg" alt="" class="small">
<img src="../img/129-freehover.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/152.jpg" alt="" class="small">
<img src="../img/152-freehover.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/196.jpg" alt="" class="small">
<img src="../img/196-freehover.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/502.jpg" alt="" class="small">
<img src="../img/502-freehover.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/531.jpg" alt="" class="small">
<img src="../img/531-freehover.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html>CSS样式
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
width: max-content;
height: max-content;
border: solid blue;
margin-top: 100px;
border: 0;
}
.box .ul{
position: relative;
/* border: solid red; */
width: 750px;
margin-left: 15px;
padding: 0;
overflow: hidden;
/* background-color: rgb(58, 60, 111); */
background-image: linear-gradient(rgb(58, 64, 138),rgb(103, 35, 205));
border-radius: 5px;
}
.box .ul li{
position: relative;
list-style: none;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.big{
display: none;
}
.small{
z-index: 5;
width: 69px;
height: 69px;
position: absolute;
display: inline-block;
left: 0;
top: 0;
border-radius: 5px;
}
.ul li.current{
display: inline;
width: 224px;
}
.ul li.current .big{
display: inline-block;
}
.ul li.current .small{
display: none;
}
jQuery-元素属性
对元素的固有属性和元素的自定义属性的操作。
获取/修改元素固有属性
固有属性：元素自带的属性，例如：<a href = “#”> href就是<a>的固有属性。
获取：prop(“属性”)
修改：prop(“属性名”,”属性值”)
使用演示
<a href="#"></a>
<script>
//获取a标签href值
console.log($("a").prop("href")); // 输出：#
//修改href值
$("a").prop("href","javascript:;")
console.log($("a").prop("href")); // 输出：javascript:;
</script>获取/设置元素自定义属性
元素自定义属性：用户自己添加的属性
获取：attr(“属性”)
设置：attr(“属性”,”属性值”)
用法和prop()相似
使用演示
<a href="#"></a>
<script>
//添加自定义属性:a_name
$("a").attr("a_name","Tom")
console.log($("a").attr("a_name")); // 输出：Tom
</script>数据缓存-data()
这个东西类似于我们的属性和属性值，为什么这样说呢？因为data()可以在指定元素存取数据，有点像我们给元素添加属性并且附上值，优点不同的是，他不会改变元素DOM结构，也就是说，他是存在于内存的。一旦刷新页面，存放的数据都会消失掉。
关data()值得注意的是：我们在H5定义属性时有一个规范：自定义的属性名需要使用”data-“开头，例如，我想要定义uname属性，我需要定义成规范形式：”data-uname” ,这样的定义使得我们读取属性时，每次都要写data-，比较啰嗦。
有了date()后，data()其实还有一个功能，就是可以读取我们声明为 “data-属性名” 格式的属性时，就不需要写 “data-” 了。
语法：data(“key”,”value”) ，使用方式如下：
<div data-age="18"></div>
<script>
//给<div>存储值
$("div").data("uname","maniubi");
//读取存储的值
console.log($("div").data("uname")); // 输出：maniubi
//data功能：可以读取data-开头的属性，并且不用写data-
console.log($("div").data("age")); // 输出：18
</script>jQuery内容文本操作
学过原生的JS我们知道，原生JS操作文本内容的方法有两种，innerHTML和innerText，在jQuery中，它封装了两个方法，对原生JS的两个方法进行替换，分别为：html()和text(）。
1.对于元素内容html()—相当于原生的innerHTML
语法：获取内容：.html()
设置内容：.html(“内容”)
2.对于元素文本内容text()—相当于原生的innerText
语法：获取内容：.text()
设置内容：.text(“内容”)
两者区别：
html()：获取元素和内容（输出保留原始结构）
text()：只获取内容
两者使用演示：
<div>Hello,jQuery
<span>
<a href=""></a>
</span>
</div>
<script>
console.log($("div").html()); // Hello,jQuery
console.log($("div").text());
</script>输出
对表单元素的操作-val()
对于表单元素的操作，与普通的元素不同，使用html()或text()无法获取元素内容，需要使用val()。
类似于原生JS中的value
点击按钮，获取表单的值。
使用说明：
<input type="text"><button>点击</button>
<script>
$("button").click(()=>{
console.log($("input").val()); // hello
})
</script>jQuery元素节点操作
对于节点的操作，有了原生JS的基础我们知道，页面中的每一个元素都是节点，元素的节点操作就是对元素节点的遍历，增删改。
遍历元素each()
说到遍历，就是取到容器中的每一个元素，jQuery自身存在一个内置遍历，就是隐式迭代，但是这个隐式迭代跟我们现在要说的遍历有些区别，隐私迭代是每个元素都做同样的事情，但是each()遍历，可以让每个元素做不同的事情。
each()语法1:
$(“div”).each(function(index,ele));
参数：index:处理元素的索引号
ele:每一个处理的元素
each()语法2:
$(“div”).each(object,function(index,ele));
参数：object:需要遍历的对象（伪数组）
index:处理元素的索引号
ele:每一个处理的对象
两者的选择：
语法一：一般用于遍历元素，比如一组div标签等。
语法二：一般用于遍历数据：比如数组，对象等
使用说明1（遍历标签元素）：
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<script>
$("div").each(function(i,obj){
console.log(i);
console.log(obj);
})
</script>输出：
使用说明2（遍历数组或对象）：
const arr = ["a","b","c"];
$.each(arr,function(i,obj){
console.log(i); // 0 1 2
console.log(obj); //a b c
})创建和添加元素节点
我们使用jQuery可以快速便捷的动态创建和添加一个元素节点。
举例：创建<li>：$(“<li></li>”)
添加节点
内部添加 （父子关系）
在元素内后面添加：ele.append(“内容”)
在元素内前面添加：ele.prepend(“内容”)
外部添加（兄弟关系）
在元素前面添加：ele.before(“内容”)
在元素后面添加：ele.after(“内容”)
使用演示
<ul></ul>
<script>
$("ul").append($("<li>123</li>"))
</script>
删除元素节点
删除匹配的元素：ele.remove()
删除匹配元素的所有子节点：ele.empty()
清空匹配元素的元素节点内容：ele.html(“”)
使用演示：
<ul></ul>
<script>
$("ul").append($("<li>123</li>"))
$("li").remove()
</script>删除前
删除后
jQuery关于元素的大小尺寸
获取元素尺寸的常用方法
值得说明的是：对于上面的方法参数，如果参数为空代表获取元素尺寸，如果参数不为空则代表设置元素尺寸。
使用举例：
<style>
div{
border: 5px solid ;
}
</style>
<body>
<div style="width: 20px;
height: 20px;
padding: 5px;
margin: 5px">
</div>
<script>
//使用width()，只获取原始宽度
console.log($("div").width()); // 输出:20
//使用innerWidth() ，获取的宽度包括padding
console.log($("div").innerWidth()); // 输出:30
//使用outerWidth(),获取的宽度包括padding,和border
console.log($("div").outerWidth()); // 输出:40
//使用outerWidth(true),获取的宽度包括padding,border和margin
console.log($("div").outerWidth(true)); // 输出:50
</script>
</body>jQuery关于元素的位置
关于jQuery的位置，主要有三块东西：
offset()、position()和scrollTop/scrollLeft()
元素偏移oofset()—文档相关
通过oofset()可以设置和获取元素位置的偏移
1.oofset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
2.oofset()方法有两个属性，left和top,分别用来获取距离左侧和顶部的距离。
3.可以设置元素的偏移：oofset({left:value,top:value})。
使用oofset()，记住它获取和设置的偏移量是相对于文档的，跟父类没有关系。
例如：
<div id = “parent”>
<div id = “son”></div>
</div>
获取id=son的相对位置，获取的是son与body的相对位置，而不是son和parent的相对位置。
但是有时候我们也有获取与父类的相对位置的需求，这时可以使用position()
元素偏移position()—父类相关
position()：获取与父类的相对偏移量 ，值得注意的是：position()只有读权限。
<div id="parent">
<div id="son"></div>
</div>
<script>
console.log($("#son").offset()); //{top: 20, left: 28}
console.log($("#son").position()); //{top: 0, left: 8}
</script>元素滚动scrollTop/scrollLeft()
使用scrollTop/scrollLeft(),可以获取页面被卷去的顶部和左侧距离。
使用：打印 $(document).scrollTop()，可以获取当前页面头部被卷去多少。
值得注意的是：此方法有可读写权限
jQuery缓动画返回顶部
关于返回顶部，如果使用定位，看着会比较生硬，jQuery的话可以使用animate()配合我们的scrollTop()来实现。
原理：因为scrollTop()可读写，所以我们可以通过修改scrollTop()的值为0实现功能。
实现：
<span>返回顶部</span>
<script>
$("span").click(()=>{
$("html").stop().animate({scrollTop:0})
})
</script>jQuery事件
jQuery的事件绑定方式有两种，一种是直接写对应的事件进行绑定，一种是使用on()进行绑定。
jQuery绑定事件方式一：
$(“div”).事件类型(function(){
//事件体
})
例如：给div绑定一个点击事件。
$(“div”).click(function(){
//事件体
})
jQuery绑定事件方式二：
$(“div”).on(“事件类型”,function(){
//事件体
})
例如：给div绑定一个点击事件。
$(“div”).on(“click”,function(){
//事件体
})
两者之中，比较推荐使用on()的方式，因为on()的适用性更强。怎么说？如下介绍。
on()-事件绑定
语法：ele.on(events,[selector],fn)
参数：
1.events:使用on()，可以一次绑定多个事件。
2.selector:元素的子元素选择器。（可以处理动态创建的节点）
3.fn:回调函数。
一次绑定多个事件演示：
//一次绑定多个事件（以对象的形式书写）
$("div").on({
click : function(){
$(this).css("background" , "red");
},
mouseenter : function(){
$(this).css("background","purple");
}
})
//当事件的函数体相同时，可以这样写
$("div").on("click, mouseenter",function(){
//两个事件都会触发此函数体
})on()绑定事件优势：事件委派
事件委派：把原来加给子元素身上的事件绑定在父元素身上，把事件委托给父元素。
一个父类有许多子类，要想给所有子类添加事件，需要迭代给所有子类都绑定一次事件，但是有了事件委派，可以给一个父类添加事件，而执行的时候是所有子类执行。
说白了，打个比方有黑心老板拖欠工钱，许多工友都要告黑老板，但是工友们的法律知识毕竟有限 ，所以一起顾了个律师，让律师帮忙起诉。在这之中呢，律师可以看作父元素，工友们可以看作子元素，而”起诉”则可以看作一个事件，实际上是工友们想要告，但是在法院看来是某律师起的诉讼。工友们将起诉事件委托给了律师而已。
上方也就是个大白话，在程序中实际用途呢，我们再了解一个东西，那就是，on()可以处理动态创建的元素这个特性。配合了解会更好。
on()优势：可以处理动态创建的元素
演示说明：
创建空<ul>,给<ul>中的li预先绑定事件，在将li添加到ul中，看事件是否添加成功。
<ul></ul>
<script>
//预先给ul中的li绑定事件
$("ul li").click(function(){
console.log("<li>被点击了");
})
//后者在创建<li>，并添加进ul
var li = $("<li>在ul后创建</li>")
$("ul").append(li)
</script> 
可以看到，<li>添加成功，但是事件没有绑定上，因为使用代码中的方式绑定事件，不可以处理动态动态创建的元素节点。要想处理动态的元素节点，需要使用on()的方式绑定事件。
使用on()的方式处理
相同的思路，使用on()的方式，事件可以被触发，这就是用到了事件委派。
//使用on()预先给ul中的li绑定事件
$("ul").on("click","li",function(){//事件委托
console.log("<li>被点击了");
})
//后者在创建<li>，并添加进ul
var li = $("<li>在ul后创建</li>")
$("ul").append(li)
案例：简单微博留言功能（事件委托）
需求：在文本框输入文本，点击提交，生成一条带删除功能留言。
添加功能
删除功能
核心代码：
<div class="box">
<p>微博留言</p>
<input type="text" rows = "5" placeholder="请输入内容" ><button>提交</button>
<ul></ul>
</div>
<script>
$("button").on("click",function(){
var text = $("input").val();
var li = $("<li></li>");
if(text == null || text.length == 0){
alert("请输入内容！");
}else{
li.html(text + "<a href = 'javascript:;'>删除</a>")
$("ul").prepend(li)
$("input").val("")
}
})
//删除模块
$("ul").on("click","a",function(){
$(this).parents("li").remove();
})
</script>jQuery解绑事件
语法：$(“div”).off();
此方式解除该元素的所有的事件
$(“div”).off(“click”);
此方式解除该元素的指定的事件
接触事件委派的书写格式
语法：$(“ul”).off(“click”,”li”);
自动触发事件
使用自动触发事件，事件就不需要人为触发，事件会自己触发。
语法1：ele.click() —第一种形式
ele.trigger(“type”) — 第二种形式
ele.triggerHandler(“type”) — 第三种形式
三种自动触发事件区别：第三种不会触发元素的默认行为，
默认行为：像input-text标签，获取焦点时会默认显示光标就是默认行为。
jQuery事件对象
事件对象的产生：当事件被触发时，就会产生事件对象。
获取事件对象：
ele.on(events,[selector],fun(eventObj){
//事件体
})
使用事件对象可以处理的问题：
1.阻止默认行为：eventObject.preventDefault()
2.阻止冒泡：eventObject.stopPropagation()
演示：阻止事件冒泡
演示思路：给document对象绑定一个点击事件，再给div绑定一个点击事件，当我们点击div时，div和document的点击事件都会被触发，这是事件冒泡不必多说，我们再使用：阻止冒泡eventObject.stopPropagation()，在测试，结果为document的点击事件不会触发。就是阻止了事件的冒泡。
核心代码:
<div></div>
<script>
$(document).click(function(){
alert("document点击事件触发")
})
$("div").click(function(){
alert("div点击事件触发")
})
</script>正如预料，出现了事件冒泡。
使用事件对象，阻止事件冒泡
核心代码：
<div></div>
<script>
$(document).click(function(){
alert("document点击事件触发")
})
$("div").click(function(e){
alert("div点击事件触发")
e.stopPropagation();
})
</script>jQuery多库共存
说明：我们知道JS有许多的库，jQuery就是JS其中的一个库，在JS中，多库共存是没有问题的，但是可能会出现一个问题，那就是出现冲突，例如jQuery使用的符号$，代表jQuery顶级对象。
但是如果某库也使用$符号作为特殊操作，那么就会出现冲突。
在上方我们说过，$符号就等同于jQuery，其实$符号就是内置封装的一个函数，函数内封装了原生JS的元素查询方式和一些功能。
一个简单的封装过程演示：
//立即执行函数
$(function(){
function $(ele){
return document.querySelector(ele)
}
})值得注意的是：我们这样封装了以后，会和内置封装的起冲突。
关键字冲突问题的解决-noConflict()
在jQuery中，我们是可以自定义jQuery的符号的。默认是”$”,但是我们也可以叛逆一些，把他改了，但是不建议，不要背道而驰。如果出现了多库共存的关键字冲突再改较合适。
更改方式演示：
<div>aa</div>
//更改jQuery变量
var ali = $.noConflict();
//使用新变量调用方法
console.log(ali("div").html()); // aa
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/154553.html
