$() 方法
- 在 jQuery 中，只有一个全局变量
$, 这是 jQuery的一大特点，避免了全局变量的污染。
- 也可以使用jQuery()方法，和
$方法一样。
jQuery 对象
- $() 方法获取到的内容叫做 jQuery 对象。
- 内部封装了大量的属性和方法，比如
.css() 和 .html() 和 .animate() 等方法都是 jQuery 对象的方法。
- 通过
$()方法获取的元素是一组元素，进行操作时是批量操作。
- 代码示例：
// 批量获取 p 标签，并将背景颜色修改为 pink
$("p").css("background-color", "pink")
// 批量获取 p 标签，并将内容修改成 hello
$("p").html("hello")
// 批量获取 p 标签，并添加动画效果
$("p").animate({"width": 300}, 1000)
jQuery对象和原生 js 对象的区别
- jQuery 对象得到后，只能使用 jQuery 对象的方法，不能使用原生 js 元素对象的方法。
- 原生 JS 对象也不能使用 jQuery 的方法。
- jQuery 对象实际是一个类数组对象，内部包含所有的获取的原生 js 对象，以及大量的 jQuery的方法和属性。
jQuery 对象中原生 js 对象的个数
- 通过 JQ 对象打点调用 length 属性，获取jQuery 对象中原生 js 对象的个数。
- 通过JQ对象，打点调用size()方法，获取 JQ 对象中原生js对象的个数。
JQ 对象和原生对象的转换
- jQuery 转原生：直接利用数组下标方式，得到 jQuery 封装的原生对象。因为通过
$()方法获取到的数据是一个类数组，数组中存储的是 js 原生对象，所以通过下标获取到的对象，可以使用 js 原生对象的方法。
- 原生转 jQuery对象：将原生对象用
$()方法包裹即可。
// 原生对象转 jQuery 对象
let oPs = document.getElementsByTagName("p")[0];
$(oPs).css("background-color", "pink")
筛选选择器
- 筛选选择器也叫过滤选择器，jQuery中新增的自己的选择器。
- 用法：在基础选择器后面添加一些筛选的单词，筛选出前面选择器的选中内容中一部分，或者可以作为高级选择器的一部分。
- 常用选择器：
| 选择器 |
说明 |
| $(":first") |
第一个 |
| $(":last") |
最后一个 |
| $(":eq(index)") |
下标为 index 的项 |
| $(":gt(index)") |
大于下标为 index 的项 |
| $(":lt(index)") |
小于下标为 index 的项 |
| $(":odd") |
下标为奇数的项 |
| $(":even") |
下标为偶数的项 |
| $(":not(selector)") |
去除所有与给定选择器匹配的元素 |
筛选方法
- 筛选方法也叫过滤方法，jQuery中除了用选择器选贼元素，还封装了一些对应的筛选方法。
- 常用方法：
- $("p").first()
- $("p").last()
- $("p").eq(3)
html() 方法
-
html()方法相当于原生js中的 innerHTML 属性，用来获取或者设置标签内部内容。
- 方法可以传递一个参数，自定义的字符串内容。如果不传递参数，表示获取标签内部的内容。获取的时候，只能获取第一个元素内部的文案。
- 获取文本和内部标签：
- 设置标签，标签会被渲染，如果内部的字符串包含了标签语法的字符串，会按照
html 语法进行加载。
text() 方法
-
text() 方法相当于原生 js 中的 innerText 属性，用来获取或设置标签内部文字。
- 获取：仅获取文本内容，所有的文字内容都会获取。
- 设置：若设置标签时，标签会被当做普通文本
- 语法：
jQuery对象.text("文本内容");
val() 方法
- val() 方法相当于原生 js 中的 value属性，用来获取或设置表单元素内容。
- 获取：表单元素的value
- 设置：表单元素的 value，设置的时候，是批量进行修改。针对不同的表单元素，设置的效果不同。
attr() 方法
-
attr()方法，全称是attribute，属性的意思，用来获取或者设置标签的属性值。可以设置和获取本身具有的属性值，也可以设置和获取自定义添加的属性。
- 设置标签的属性：
- 语法：
jQuery对象.attr(name, value);
- 获取标签属性值
removeAttr() 方法
- 移除标签的属性
- 语法：
jQuery对象.removeAttr(name);
prop() 方法
- 针对
selected、checked、disabled等表单元素的属性。此类属性的属性值与属性名相同。
- 获取：返回的结果是 true或者false。
- 语法：
$("input").prop("属性名");
- 设置：传递的属性值是 true或者false。
- 语法：
$("input").prop("属性名", 属性值)
css() 方法
-
css()方法，用于调用css属性值或者更改css属性值。
- 语法：
jQuery对象.css(name, value);
- 参数1：字符串格式的css样式属性名。
- 参数2：设置或更改的属性值。
- 注意：
- 传递一个参数，表示调用css属性的值，得到的是某个元素的计算后样式，值为字符串格式。
- 当传递两个参数的时候，表示设置 css 样式属性，第二个参数可以是字符串格式的属性值，如果是带单位的数字的属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。
- css() 方法的第一个参数，复合属性的单一属性写法，可以是驼峰命名法，也可以是横线写法。
- 可以给同一个对象同时设置多条 css 属性，将多条属性的属性和属性值写成对象格式，传给 css() 的参数。
addClass() 添加类名
- 语法：
jQuery对象.addClass("类名");
- 参数：字符串格式的类名。
- 只会操作指定的类名，不会影响其他类名。
removeClass() 移除类名
- 删除指定的类名，如果不传递参数，表示删除所有的类名。
- 语法：
jQuery对象.removeClass("类名");
- 参数：字符串格式的类名。
- 只会操作指定的类名，不会影响其他类名。
taggleClass() 类名切换
- 若这个类名存在，则会移除该类名。否则添加该类名。
- 语法：
jQuery对象.toggleClass("类名");
- 参数：字符串格式的类名。
- 优点：三个方法只操作参数部分的类名，不影响原有的其他类名。
hasClass 检测类名是否存在
- 检测类名是否存在
- 语法：
jQuery对象.hasClass("类名");
- 返回值：true或false
jQuery 常用事件方法
- jQuery 对象封装了一系列的事件方法，事件方法与原生 js 事件方法名称类似，但是在方法名称之前不需要写 on。事件方法需要 jQuery 对象打点调用，小括号内的参数是视见函数。
- 例如点击事件：click() 方法。
代码示例：
const $btn1 = $("#btn1");
$btn1.click(function() {
console.log("点击事件")
})
mouseenter 鼠标移入事件
- 鼠标移入元素，触发事件
- 语法：
jQuery对象.mouseenter(function() {})
- 区别：和mouseover之间的区别是没有事件冒泡。
mouseleave 鼠标离开事件
- 鼠标离开元素，触发事件
- 语法：
jQuery对象.mouseleave(function() {})
- 区别：和mouseout之间的区别是没有事件冒泡。
hover() 方法
- hover 事件相当于将 mouseoenter和 mouseleave 事件进行了合写。
- 语法：
jQuery对象.hover(参数1，参数2)
- 参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行的事件函数。
- 示例代码：
const $btn1 = $("#btn1");
$btn1.hover(function() {
console.log("鼠标移入")
}, function() {
console.log("鼠标移出")
})
jQuery 节点关系查找
jQuery 中的this
- 在原生的 DOM 操作中，事件函数内部有一个 this 关键字指向的就是触发事件的事件源，在 jQuery中，
this的指向也是触发事件的事件源的原生js对象，将this关键字传递给$()方法，得到的就是指向自己的 jQuery 对象，就可以使用 jQuery 的方法。
parent() 父级方法
- jQuery对象都有一个parent()方法，得到的就是自己的父级。
- 父级得到的也是一个 jQuery 对象，直接继续打点调用 jQ方法和属性。
- 语法：
jQuery对象.parent();
children() 子级
- jQuery对象内部有一个
children()方法，可以得到自己的所有子级元素组成的jQuery对象。得到的子级组成的jQuery对象可以继续调用JQ方法和属性。获得子级时，不限制标签类型。
- children()可以传递参数，参数是字符串格式的选择器，在选中所有子级的情况下，保留满足选择器的部分，进行了二次选择。
siblings() 兄弟
- jQuery对象通过调用
siblings()方法可以得到除了自己以外的所有同级元素(兄弟元素)组成jQuery对象，找到的只能是亲兄弟。得到jQuery对象可以继续使用JQ的方法和属性。
- siblings()可以传递参数，参数是字符串格式的选择器，在选中所有兄弟节点的情况下，保留满足选择器的部分，进行了二次选择。
链式调用
- jQuery对象调用任何方法(除了节点关系方法)执行完后，方法都会有一个返回值，返回值就是jQuery对象自己，这个现象给我们提供了便利，可以对执行结果继续打点调用JQ的方法和属性。
- 可以使用 jQuery 对象进行连续打点调用。
find() 后代元素
- jQuery对象可以利用
find()方法，传递一个参数，参数部分规定的选择器，查找范围是jQuery对象的所有后代。
- 参数是字符串格式的选择器。
- 语法：
jQuery对象.find("查找元素")
next() 下一个兄弟元素
- 紧邻的兄弟元素查找，查找下一个兄弟元素。
- 语法：
jQuery对象.next()
prev() 前一个兄弟元素
- 查找前一个兄弟元素
- 语法：
jQuery对象.prev()
nextAll() 后面所有兄弟元素
- 查找后面所有的兄弟元素
- 语法：
jQuery对象.nextAll()
- 参数：可以传递参数进行二次选择，参数是字符串格式的选择器。
prevAll() 前面所有兄弟元素
- 查找前面所有的兄弟元素
- 语法：
jQuery对象.prevAll()
- 参数：可以传递参数进行二次选择，参数是字符串格式的选择器。
parents() 祖先级
-
parents()得到的是指定对象的包含 body 在内的所有祖先级元素组成的 jQuery 对象。
- 语法：
jQuery对象.parents()
- 参数：通过传递参数进行二次选择，参数位置是字符串格式的选择器。
jQuery 排序
eq() 大排序
- jQuery中获得的对象，内部包含选择的一组原生js对象，在jQuery对象中会进行一个大的排序，对通过
$()方法获取到的元素进行排序，这个排序与原来的HTML结构没有关系。
-
eq()方法在jQuery对象中通过下标获取某个对象，表示jQuery对象中的大的排序的下标。
- 语法：
jQuery对象.eq(index)
- 参数表示要获取的jQuery对象中的下标。
index() 方法
- jQuery对象调用
index()方法时，得到的是它自己在HTML结构中的兄弟中的下标位置。与jQuery大排序没有关系。
-
index()方法获取下标时，排序跟新生成的 jQuery 对象没有关系，它依赖于自身元素在父级中同级元素之间的位置。
- 语法：
jQuery对象.index()
- 返回值：返回在父级中同级元素之间的下标位置。
each() 遍历
- 参数是一个函数
- 作用：就是对jQuery对象中的元素，每一个都执行函数内部的操作。
- each方法的基本原理就是for循环，从对象的下标为0的项一直遍历到最后一项，然后对每一项进行操作。
- 语法：
jQuery对象.each(function() {});
- each的函数内部，也有一个this，指向的是进来遍历的每一次的元素。
- each的函数可以传递一个参数i，i记录的是这一次遍历时当前元素在 jQuery 对象中大排序的位置。
- 应用场景：对某一个元素的子级或者后代进行操作的时候，可以使用each遍历。对每一个jQuery对象进行操作的时候，可以使用each方法。
- 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 60px;
margin: 10px auto;
border: 1px solid #cccccc;
}
.box p {
width: 50px;
height: 50px;
float: left;
margin: 5px 10px;
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// const $boxs = $(".box");
// $boxs.each(function() {
// $(this).children().eq(1).css("background-color", "red");
// })
const $pArr = $("p");
$pArr.each(function(i) {
$(this).click(function() {
console.log(i)
console.log($(this).index())
})
})
</script>
</body>
</html>
jQuery入口函数
- 语法1：
- $(document).ready(function() {...});
- 语法2：
- 原理：
- window.onload 事件在加载时，指的是页面中多有用的资源（DOM树，音频，视频，图片等）加载完毕后，才能触发。
- jQuery中的入口函数，仅仅需要等待页面中的 DOM 树加载完毕后就可以执行了。在一个页面中，可以书写多个 jQuery 入喉函数，执行顺序按照前后加载顺序执行。
jQuery 切换效果方法
hide()和show()方法
-
hide()：元素隐藏，隐藏的前提必须是元素display:block;在使用这个方法的时候，给display设置成了none；
-
show()：元素显示，显示的前提条件必须是元素display:none;
-
toggle()：在元素隐藏和显示之间进行切换。
- 这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。
- 参数：
- 如果不传递参数，直接显示和隐藏，没有过渡动画。
- 如果传递参数：
- 单词格式："slow(慢速)", "normal(正常)", "fast(快速)"
- 数字格式的时间，单位是毫秒，在规定的时间之内会出现显示或隐藏的动画。
- 过渡时间内，伴随着宽度和高度以及透明度的变化。
- 语法：
jQuery对象.hide()/jQuery对象.show()/jQuery对象.toggle()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#pic {
display: block;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="隐藏">
<input type="button" id="btn2" value="显示">
<input type="button" id="btn3" value="切换">
<img src="images/m1.jpg" id="pic">
<script src="js/jquery-1.12.4.min.js"></script>
<script>
const $pic = $("#pic");
const $btn1 = $("#btn1");
const $btn2 = $("#btn2");
const $btn3 = $("#btn3");
$btn1.click(function() {
// $pic.hide();
$pic.hide("slow");
});
$btn2.click(function() {
$pic.show();
});
$btn3.click(function() {
$pic.toggle();
});
</script>
</body>
</html>
slideDown()和slideUp()方法
- slideDown()：滑动显示（方向不一定）
- slideUp()：滑动隐藏
- slideToggle()：滑动切换
- 让元素在display属性的block和none之间进行切换。
- 参数：
- 如果不传递参数，默认的过渡时间为400毫秒。
- 如果传递参数：
- 单词格式："slow(慢速)", "normal(正常)", "fast(快速)"
- 数字格式的时间，单位是毫秒，在规定的时间之内会出现显示或隐藏的动画。
- 注意：
- 如果滑动的元素没有设置宽高，则没有滑动的效果。
- 如果元素设置了高度和宽度，会进行上下垂直方向的滑动。
- 动画的效果：高度属性在0到设置值之间的变化，没有透明度变化。
- 如果元素设置了定位，偏移量方向如果是bottom参与了，滑动方向会发生变化。
fadeIn()和fadeOut() 淡入淡出方法
- fadeIn()：淡入，透明度逐渐增大最终显示
- fadeOut()：淡出，透明度逐渐降低最终隐藏。
- fadeToggle()：切换效果。
- fadeTo()：淡入或淡出到某个指定的透明度。
- 动画效果，执行的是透明度动画。也是在display属性的block和node之间切换。
- 参数：
- 如果不传递参数，默认的过渡时间为400毫秒。
- 如果传递参数：
- 单词格式："slow(慢速)", "normal(正常)", "fast(快速)"
- 数字格式的时间，单位是毫秒，在规定的时间之内会出现显示或隐藏的动画。
- 注意：
- 在使用fadeTo()方法的时候第一个参数是传递的时间，第二个参数才是传递的透明度。
jQuery对象.fadeTo(500, 0.5)
animate() 动画方法
- 作用：执行css属性集的自定义动画。
- 语法：$(selector).animate(styles, speed, easing,callback)
- 参数1：css的属性名和运动结束位置的属性值的集合，是一个对象格式。
- 参数2：可选，规定动画的速度，默认是"normal"。可以是"slow"、"mormal"、"fase"，如果是数字格式的话，单位是毫秒。
- 参数3：可选，规定在不同的动画中，设置动画速度的easing函数，值包含swing和linear。
- 参数4：可选，animate函数执行完之后，要执行的函数。
- 注意：其他的运动方法，比如slideUp()等，也有参数3和参数4。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
position: absolute;
left: 0;
width: 50px;
height: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<p></p>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
const $p = $("p");
$p.click(function() {
$(this).animate({
left: 500
}, "slow", "swing", function() {
$(this).css("background-color", "pink")
});
})
</script>
</body>
</html>
动画排队
- 同一个元素对象身上，如果定义了多个动画，动画就会排队等待执行。
- 如果是不同的元素对象都有动画，不会出现排队机制。
- 如果是其他非运动的代码，关于同一个元素对象的，也不会排队。
- 其他的运动方法，如果设置给同一个元素，也会发生排队。
- 对同一个元素的动画效果，可以使用链式调用，动画也会发生排队效果。
动画排队问题
- 如果将开启运动的程序放在一个事件函数中，事件多次被触发，会执行多次函数，就会在一个元素身上添加了对个动画，会进行动画排队。当事件结束后，动画可能还没有结束，还在进行动画排队。
- 需要清除排队的动画，进行防骚扰操作。
- 方法一：
- 利用stop()方法
- 在每一个运动函数之前都增加一个stop(true),表示在运动执行之前，会将前面排队的动画清空，然后停止在当前的位置。
<div class="box"><span></span></div>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
const $box = $(".box");
$box.mouseenter(function() {
$(this).children().stop(true, false).slideUp(1000)
});
$box.mouseleave(function() {
$(this).children().stop(true, false).slideDown(1000)
})
</script>
- 方法二：
- 利用函数节流方法，如果元素在运动，直接return，不要执行后面的运动代码。
- 每个jQuery对象，都能调用一个
is()方法，作用是显示元素对象的某中状态。
- 如果参数位置是
is(":animated")，返回值是布尔值，true表示正在运动，false表示没有运动。
// 方法2
const $box = $(".box");
$box.mouseenter(function() {
if ($(this).children().is(":animated")) {
return;
};
$(this).children().slideUp(1000)
});
$box.mouseleave(function() {
if ($(this).children().is(":animated")) {
return;
};
$(this).children().slideDown(1000)
})
delay() 动画延迟
- delay():将delay()设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延迟运动的效果。
- 参数：时间的数值，表示延迟的时间。
- 除了animate方法之外，其他的运动方法也有延迟效果。
- 语法：
jQuery对象.delay(1000).animate()
stop() 停止动画
- stop()作用：设置元素对象身上的排队的动画以什么方式进行停止。
- 有两个参数，都是布尔值。
- 参数1：设置是否清空后面的动画排队，如果是true，表示清空，如果是false，表示不清空，只停止当前的一个动画。
- 参数2：设置当前动画是否立即完成，如果是true，表示立即完成，对象会立刻走到结束位置，如果是false，表示不完成当前动画，立即停止在当前位置。
- 语法：
jQuery对象.stop(参数1，参数2)
- 在实际工作中，一般会清空后面的动画，并且动画要停止在当前的位置。默认情况下，两个参数默认值都是false。
jQuery 节点操作
创建元素
- 直接将标签传递到
$()方法中。
- 语法：
const $li = $("<li></li>");
追加元素一
- 向父元素最后追加
- 语法：
父元素jQuery对象.append(新创建的jQuery对象)
- 语法：
新创建的jQuery对象.appendTo("父元素选择器" 或 "父元素jQuery对象")
- 向父元素最前面追加
- 语法：
父元素jQuery对象.prepend(新创建的jQuery对象);
- 语法：
新创建的jQuery对象.prependTo("父元素选择器" 或 "父元素jQuery对象")
追加元素二
- 向元素后面追加新的兄弟
- 语法：
jQuery对象.after(新创建的jQuery对象)
- 语法：
新创建jQuery对象.insertAfter("选择器"或 jQuery对象)
- 向元素前面追加新的兄弟
- 语法：
jQuery对象.before("新创建的jQuery对象")
- 语法：
新创建jQuery对象.insertBefore("选择器"或 jQuery对象)
删除元素
- 语法：
jQuery对象.remove();
- 想要删除哪个元素就调用这个
remove()这个方法。
清空方法
- 清空方式1：
jQuery对象.empty();推荐使用，清空内部的所有元素及元素相关的事件
- 清空方式2：
jQuery对象.html(""); 仅清空内部的元素，不清理内存中的元素的事件。
克隆元素
- 语法：
jQuery对象.clone(布尔值); 返回克隆好的元素
- 参数：默认是false，表示仅仅克隆内容。true表示克隆内容和事件。
jQuery 操作元素的尺寸
width() 和 height() 方法
- 操作的大小仅仅是内容部分
- 设置：
- 获取：
- 语法：
jQuery对象.width()
- 返回：数字类型的数据。
innerWidth() 和 innerHeight() 方法
- 操作的大小是内容部分 + padding
- 设置：
- 语法：
jQuery对象.innerWidth(数字);
- 设置：将增加或者减少的值设置给了width属性。
- 获取：
outerWidth() 和 outerHeight() 方法
- 操作的大小是内容部分 + padding + border
- 设置：
- 语法：
jQuery对象.outerWidth(数字);
- 设置：将增加或者减少的值设置给了width属性。
- 获取：
- 语法：
jQuery对象.outerWidth();
jQuery 操作元素的位置
offset() 获取元素距离文档的位置
- 语法：
jQuery对象.offset();
- 返回一个
对象，对象中包含了元素的位置（left、top）。
- 注意：offset() 方法获取的元素的位置，
永远参照文档，和定位没有关系。
position() 距离上级定位参考元素的位置
- 语法：
jQuery对象.position();
- 返回一个
对象，对象中包含了元素的位置。
- 注意：position() 方法获取的元素的位置，参照最近的定位元素（和定位有关系）
scrollTop() 操作卷去的页面间距
- 获取
- 语法：
jQuery对象.scrollTop();
- 返回：返回数字。
- 设置：
- 语法：
jQuery对象.scrollTop(数字);
- 注意：
- 当设置html文档以运动的方式返回顶部的时候，document文档有一个scrollTop属性，可以将这个属性设置为0，但是需要注意的是，设置的文档应该是"html"或者"body"元素，而不应该直接设置document文档。
$("html,body").animate({"scrollTop": 0}, 500)
注册事件
on 方法注册事件
- 注册简单时间语法：
jQuery对象.on("事件名", "事件处理程序");
- 事件委托的实现：
jQuery对象.on("事件名", "选择器", 事件处理程序)
- 选择器：子孙元素
- 注意：
- 在事件处理程序中，this代表的是子孙元素（）
- on() 方法的封装底层实际是addEventlistener() 可以给同一个元素同一个事件绑定多次。
off() 事件移除
- 解绑简单的事件：
jQuery对象.off("事件名称", 事件处理程序名称)
- 解绑事件委托注册的事件：
jQuery对象.off("事件名称", "选择器", 事件处理程序名称)
触发事件
- 自动触发事件
- 语法：
jQuery对象.trigger("事件名")
事件对象
鼠标事件对象相关属性
- 事件对象.clientX/Y 参照浏览器
- 事件对象.pageX/Y 参照文档
- 事件对象.offsetX/Y 参照元素
键盘事件对象相关属性
- 事件对象.keyCode 返回键盘数字
- 事件对象.altKey/shiftKey/ctrlKey 返回是布尔值，检测是否按下（true）。
公共的属性或方法
- 属性
- 事件对象.target 最初触发事件的DOM元素
- 事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素
- 方法
- 事件对象.preventDefault(); 阻止默认行为
- 事件对象.stopPropagaton(); 阻止事件冒泡
多库共存的情况
- 在代码中引入多个js文件的时候，后引入的文件可能会覆盖掉之前引入的js中的方法。造成多库共存的问题。
- 解决方法1：
- 在使用
$()方法的时候，可以使用jQuery()标识符进行调用
- 解决方法2：
- 使用
jQuery.noConflict() 方法，释放jQuery中的$方法，把
方法的函数，可以用其他的变量接收，然后调用。
const $1 = jQuery.noConflict();
const value = $1("div");
jQuery 插件
