javaScript库
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。
一：Lodash
文档：https://www.lodashjs.com/
1.概念：
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
2.作用：
- 遍历 array、object 和 string
- 对值进行操作和检测
- 创建符合功能的函数
3.常用方法
| 方法0 | 描述 |
|---|---|
| _.times() | 可以指定循环次数 |
| _.map() | 深层查找属性值，Lodash中的_.map方法和JavaScript中原生的数组方法非常的像，但它还是有非常有用的升级。 你可以通过一个字符串而不是回调函数来浏览深度嵌套的对象属性 |
| _.cloneDeep() | 深度克隆JavaScript对象是困难的，并且也没有什么简单的解决方案。你可以使用原生的解决方案:JSON.parse(JSON.stringify(objectToClone)) 进行深度克隆。但是，这种方案仅在对象内部没有方法的时候才可行。 |
| _.random() | 在指定范围内获取一个随机值，Lodash中的 _.random 方法要比上面的原生方法更强大与灵活。你可以只传入一个参数作为最大值， 你也可以指定返回的结果为浮点数_.random(15,20,true) |
| _.sampleSize() | 从列表中随机的选择列表项，你也可以指定随机返回元素的个数_.sampleSize(smartTeam,n)，n为需要返回的元素个数 |
| _.includes() | 判断对象中是否含有某元素，_.includes()第一个参数是需要查询的对象，第二个参数是需要查询的元素，第三个参数是开始查询的下标 |
| _.forEach() | 遍历循环，不仅是数组，对象也可以，数组的key是元素的下标，当传入的是对象的时候，key是属性，value是值 |
| _.isEmpty() | 检验值是否为空 |
| _.filter() | 返回真值的所有元素的数组。 |
| _.uniq() | 创建一个去重后的array数组副本 |
| _.size(collection) | 返回集合的长度 |
二：JQuery
官网：https://jquery.com/
其他版本：https://releases.jquery.com/
1.版本介绍
1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本
2.概念
- jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情
- j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
- jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
- 学习jQuery本质： 就是学习调用这些函数（方法）。
- jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。
3.jquery优点
- 轻量级。核心文件才几十kb，不会影响页面加载速度。
- 跨浏览器兼容，基本兼容了现在主流的浏览器。
- 链式编程、隐式迭代。
- 对事件、样式、动画支持，大大简化了DOM操作。
- 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
- 免费、开源。
4.jquery的使用方法和转换
jquery()$
//原生获取p
let p1 = document.getElementById("cs");
console.log(p1.innerHTML);
//jquery获取
console.log($("#cs").html());
//原生转jquery`$()`
$(p1).html("修改段落1");
//jquery转原生
//1.jquery对象[索引值]
console.log($("#cs")[0].innerHTML);
//2.jquery对象.get(索引值)
console.log($("#cs").get(0))
//jquery实现单数背景颜色(odd:奇数，even:偶数)
$("p:odd").css({backgroundColor:"green"});
$("p:even").css({backgroundColor:"pink"});
5.jquery事件
-
全局加载事件
//第一种 $(function(){ ... // 此处是页面 DOM 加载完成的入口 }) //第二种 $(document).ready(function(){ ... // 此处是页面 DOM 加载完成的入口 }) -
总结
- 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
- 相当于原生 js 中的 DOMContentLoaded。
- 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
- 更推荐使用第一种方式。
6.jQuery选择器
-
基础选择器
$("选择器") //里面选择器直接写CSS选择器名称 用法 描述 ID选择器 $(“#id”) 获取指定ID元素 全选选择器 $(“*”) 匹配所有元素 类选择器 $(“.class”) 获取同一类class的元素 标签选择器 $(“div”) 获取同一类标签的所有元素 并集选择器 $(“div,p,li”) 选取多个元素 交集选择器 $(“li.current”) 交集元素 -
层级选择器
层级选择器被分成后代选择器和自带选择器
名称 用法 描述 自带选择器 $(“ul>li”); 使用>号，获取亲儿子层级元素；注意，并不会获取孙子层级的元素 后代选择器 $(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 案例
<body> <div>我是div</div> <div class="nav">我是nav div</div> <p>我是p</p> <ul> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> </ul> <script> $(function() { console.log($(".nav")); //获取类选择器 console.log($("ul li")); //用后代选择器选择ul下面的li }) </script> </body> -
筛选选择器
筛选选择器，就是在所有选项中免租条件的进行筛选个选择
语法 用法 描述 :first $(‘li:first’) 获取第一个li元素 :last $(“li:last”) 获取最后一个li元素 :eq(index) $(“li:eq(2)”) 获取到的li元素中，选择索引号为2的元素，索引号从0开始 :odd $(“li:odd”) 获取到的li元素，选择索引号为奇数的元素 :even $(“li:even”) 获取到的li元素中，选择索引号为偶数的元素 案例
<body> <ul> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> </ul> <ol> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> <li>多个里面筛选几个</li> </ol> <script> $(function() { $("ul li:first").css("color", "red"); $("ul li:eq(2)").css("color", "blue"); $("ol li:odd").css("color", "skyblue"); $("ol li:even").css("color", "pink"); }) </script> </body>通过一个节点找另一个节点
语法 用法 说明 parent() $(“li”).parent(); 查找父级 children(selector) $(“ul”).children(“li”); 相当于$(“ul>li”),最近一级（亲儿子） find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器 siblings(selector) $(“.first”).siblings(“li”); 查找兄弟节点，不包括自己本身 nextAll([expr]) $(“.first”).nextAll(); 查找当前元素之后所有的同辈元素 prevtAll([expr]) $(“.last”).preAll(); 查找当前元素之前所有的同辈元素 hasClass(class) $(“div”).hasClass(“protected”); 检查当前的元素是否含有某个特定的类。如果有，则返回true eq() $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始
7.css操作
css获取的是最终样式，设置的是内嵌样式
-
jQuery设置样式
//当设置一个属性的时候 $('div').css('属性','值') //当需要设置多个属性的时候 $('div').css({ 属性名：'属性值', }) -
jQuery排他思想
//实现多选一的效果，排他思想：当前元素设置样式，其余兄弟元素清除样式 $(this).css("color","red"); $(this).siblings().css("color",""); -
隐式迭代
//遍历内部DOM元素（为数组形式存储）的过程就叫做隐士迭代 //简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用 $('div').hide(); //页面中所有的div全部隐藏，不用循环操作 -
链式编程
//为了节省代码量 $(this).css('color','red').sibling().css('color','');
常用的三种设置类样式方法
作用等同于以前的calssList，可以操作类样式，注意操作类里面的参数不要加点。
//1.添加类
$("div").addClass("current");
//2.删除类
$('div').removeClass("current");
//3.切换类
$('div').toggleClass("current");
注意：
- 设置类样式方法适合样式多使操作，可以弥补css()不足。
- 原生JS中className会覆盖元素原先里面的类名，jQuery里面类操作只是对指定类进行操作，不影响原先的类名。
8.jQuery动画效果
- 显示隐藏：
show(),hide(),toggle() - 划入画出：
slideDown(),slideUp(),slideToggle() - 淡入淡出：
fadeln(),fadeOut(),fadeToggle(),fadeTo() - 自定义动画：
animate()
注意
动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
jQuery为我们提供了另一个方法，可以停止动画排队：stop();
8.1:显示隐藏
显示隐藏动画，常见的三个方法：show(),hide(),toggle()
-
显示语法规范
show(speed,easing,fn()) -
显示参数
(1)参数都可以省略，无动画直接显示
(2)speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒数值如：(1000)
(3)easing:(Optional)用来切换效果，默认"swing",可用参数"linear".
(4)fn:回调函数，在动画完成执行的函数，每个元素执行一次
-
隐藏语法规范
hide(speed,easing,fn()) -
隐藏参数
(1)和显示参数的效果一样
-
切换语法规范
toggle(speed,easing,fn()) -
切换参数
(1)和显示参数的效果一样
代码实例
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").show(1000, function() {
alert(1);
});
})
$("button").eq(1).click(function() {
$("div").hide(1000, function() {
alert(1);
});
})
$("button").eq(2).click(function() {
$("div").toggle(1000);
})
// 一般情况下，我们都不加参数直接显示隐藏就可以了
});
</script>
</body>
8.2:划入划出
常见的三种方法:slideDown(),slideUp(),slideToggle();
1.上滑
slideUp(speed,easing,fn())
参数：参数可以省略
2.下滑
slideDown(speed,easing,fn())
参数：参数可以省略
3.滑动
slideToggle(speed,easing,fn())
参数：参数可以省略
4.实例
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 下滑动 slideDown()
$("div").slideDown();
})
$("button").eq(1).click(function() {
// 上滑动 slideUp()
$("div").slideUp(500);
})
$("button").eq(2).click(function() {
// 滑动切换 slideToggle()
$("div").slideToggle(500);
});
});
</script>
</body>
8.3：淡入淡出
常见四个方法：fadeln(),fadeout(),fadeToggle(),fadeTo()
1.淡入
fadeIn(speed,easing,fn())
参数：参数都可以省略
2.淡出
fadeOut(speed,easing,fn())
参数：参数都可以省略
3.淡入淡出切换效果
fadeToggle(speed,easing,fn())
参数：参数都可以省略
4.渐进不透明度
fadeTo(speed,opacity,easing,fn())
参数：
(1)opacity:透明度必须写，取值在0-1之间
(2)speed：三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒数值如：(1000)，必须写
(3)easing:(Optional)用来切换效果，默认"swing",可用参数"linear".
(4)fn:回调函数，在动画完成执行的函数，每个元素执行一次
代码
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
// 淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
// 修改透明度 fadeTo() 这个速度和透明度要必须写
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
8.4：自定义动画
动画是异步方法，同一个元素的动画有队列，不同的元素就没队列。
1.语法
animate(params,speed,easing,fn())
参数：
(1)params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是符合属性则需要采取驼峰命名法。其余参数都可以省略
代码
<body>
<button>动起来</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
2.停止动画排队
动画或者效果一旦出发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止动画的方法为：stop(stopAll,goToEnd);
stop()方法用于停止动画或效果
stop()写到动画或者效果的前面,相当于停止结束上一次的动画
**总结:**每次使用动画之前,先调用stop(),在调用动画
参数： (会有四种效果)
(1) stopAll :是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
(2): goToEnd ：规定是否立即完成当前动画。默认是 false。
finish完成到所有动画的最终状态
3.事件切换
事件切换hover(),功能类似css中的伪类:hover.
hover(over(),out()) //over和out为两个函数
over:鼠标移到元素上要触发的函数(相当于mouseenter)
out():鼠标移除元素要触发的函数(相当于mouseleave)
如果只写一个函数,则鼠标经过和离开都会触发他
hover事件和停止动画排列案例
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
</li>
<li>
<a href="#">微博</a>
<ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
</li>
</ul>
<script>
$(function() {
// 鼠标经过
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 当前元素 this不要加引号
// // show() 显示元素 hide() 隐藏元素
// $(this).children("ul").slideDown(200);
// });
// // 鼠标离开
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});
})
</script>
</body>
9.jQuery属性操作
常见的三种属性操作:prop(),attr(),data()
9.1prop()
prop("属性名","属性值")
prop()除了普通属性操作，更适合操作表单属性:disabled,checked,selected等
9.2attr()
attr("属性") //类似原生getAttribute
attr("属性","属性值") //类似原生setAttribute
attr()除了普通属性操作，更适合操作自定义属性，还可以获取H5自定义属性
9.3data
data()方法可以在指定的元素上存取数据，并不会修改DOM元素解构。一旦刷新页面，之前存放的数据都将被移除（获取自定义标签就是不用写-这个标签，但是这个属性没啥用）
缺点：在自定义属性为数字时，他会自定义把数字转换成number类型
data("name","value") //向被选中元素附加属性
data("name") //向被选元素获取数据
还可以同时i读取HTML5自定义属性data-index,得到的是数字型
9.4实例
<body>
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
//1. element.prop("属性名") 获取元素固有的属性值
console.log($("a").prop("href"));
$("a").prop("title", "我们都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// console.log($("div").prop("index"));
// 2. 元素的自定义属性 我们通过 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));
})
</script>
</body>
10.文本属性值
常见的三种操作：html(),text(),val()，相当于js中的innerHTML,innerText,value属性
10.1html()
html() //获取元素的内容
html("内容") //设置元素的内容
10.2text()
text() //获取元素的文本内容
text("文本内容") //设置元素的文本内容
10.3val()
val() //获取表单的值
val("内容") //设置表单的值
html()可以识别标签，text()不识别标签
10.4实例
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// 1. 获取设置元素内容 html()
console.log($("div").html());
// $("div").html("123");
// 2. 获取设置元素文本内容 text()
console.log($("div").text());
$("div").text("123");
// 3. 获取设置表单值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>
11.jQuery元素操作
jQuery元素操作主要用的是jQuery方法，操作标签的遍历，创建，添加，删除等操作
11.1遍历元素
$(div).each((index,ele)=>{}) //索引和元素
(1).each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个
(2).里面的回调函数有两个参数，index是每个元素的索引号，ele是每个DOM元素对象，不是jquery对象
(3).要使用jquery方法，需要给dom元素转换成jquery对象$()
$.each(object,function(index,ele){})
(1).$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
(2)index为每个元素的索引号，ele为遍历的内容
11.1.1实例
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var sum = 0;
var arr = ["red", "green", "blue"];
// 1. each() 方法遍历元素
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(i);
// 回调函数第二个参数一定是 dom 元素对象，也是自己命名
// console.log(domEle); // 使用jQuery方法需要转换 $(domEle)
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
</script>
</body>
11.2创建，添加和修改
-
创建
$("<li></li>") //动态创建了<li> -
内部添加
ele.append("内容") //把内容放入匹配元素内部最后面，类似原生appendChild ele.prepend("内容") //把内容放入匹配元素内部的最前面(1).内部添加元素，生成之后，他们是父子关系
-
外部添加
ele.after("内容") //把内容放入目标元素后面 ele.before("内容") //把内容放入目标元素前面(1).外部添加元素，生成之后，他们是兄弟关系
-
删除元素
ele.remove() //是你出匹配的元素（本身） ele.empty() //删除匹配的元素集合中的所有子节点 ele.html("") //清空匹配的元素内容(1).remove()删除元素本身
(2).empty()和html()作用一样，都可以删除元素里面的内容，不过html还能设置内容
11.2.1实例
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素
// 2.1 内部添加
// $("ul").append(li); 内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
// 2.2 外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 删除元素
// $("ul").remove(); 可以删除匹配的元素 自杀
// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
})
</script>
</body>
11.3jQuery尺寸
尺寸包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型
| 语法 | 语法 |
|---|---|
| width(),height() | 取得匹配元素宽度和高度值，只算width,height |
| innerWidth(),innerHeight() | 取得匹配元素宽度和高度值，包括padding |
| outerWidth(),outterHeight() | 取得匹配元素宽度和高度，包含padding，border |
| outerWidth(true),outerHeight(true) | 取得包含元素的宽度和高度，包含padding，border，margin |
- 以上参数为空，则是获取相应值，返回的是数字型
- 如果参数是数字，则是修改相应值
- 参数可以不必写单位
11.3.1实例
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
注意：有了这套API我们将可以快速获取元素的宽高，至于其他属性想要获取和设置，要使用css()等方法配合
11.4jQuery位置操作
主要有三个：offset(),position(),scrollTop(),scrollLeft()
offter():设置或获取元素的偏移- offter()方法设置或返回被选中元素相对于文档的偏移坐标，跟父级没有关系
- 该方法有两个属性left，top。offter().top用于获取文档顶部的距离；offter().left用于获取距离文档左侧的距离
- 可以设置元素的偏移：offter({top:100,left:100})
position():获取元素偏移- position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
- 两个属性:left,top;position().top用于获取距离定位父级顶部的距离，positions().left用于获取距离定位父级左侧的距离
- 该方法只能获取
scrollTop(),scrollLeft():设置或获取元素被卷去的头部和左侧- scrollTop()方法设置或返回被选中元素被卷去的头部
- 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部
11.4.1实例
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="back">返回顶部</div>
<div class="container"></div>
<script>
$(function() {
// 1. 获取设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
// 3. 被卷去的头部
$(document).scrollTop(100);
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
})
})
</script>
</body>
12.jQuery事件
12.1事件注册
element.事件(function(){})
//$("div").click(function(){事件处理程序})
优点：操作简单，且不用担心事件覆盖等问题
缺点：普通的事件注册不能做委托，且无法实现事件解绑，需要借助其他方法
<body>
<div></div>
<script>
$(function() {
// 1. 单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
</body>
12.2事件处理on()绑定事件
-
可以绑定多个事件，多个事件处理程序
$("div").on({ mouserover:function(){}, mouserout:function(){}, click:function(){} }) -
可以事件委派操作，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委托给父元素
$('ul').on('click','li',function(){ alert('hello'); }) -
可以使动态创建生成的元素绑定事件
//先动态创建一个元素 $("div").append($("<p>你好啊，我是动态创建的一个元素</p>")) //对动态元素执行绑定事件 $("div").on("click()","p",function(){ alert("你好呀"); })
实例
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以绑定1个或者多个事件处理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>
</body>
12.3事件处理off()解绑事件
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。off()方法可以移除通过on()方法添加的事件处理程序
$("p").off() //解绑所有p元素所有事件处理程序
$("p").off() //解绑p元素上面的点击事件 后面的foo使侦听函数名
$("ul").off("click","li"); //解绑事件委托
如果有的事件只想触发一次，可以使用one()来绑定事件委托
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是一个P标签</p>
<script>
$(function() {
// 事件绑定
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解绑 off
// $("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");
// 2. one() 但是它只能触发事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>
12.4事件处理trigger()自动触发事件
三种触发事件
//第一种
element.click();
//第二种
element.trigger("type");
//第三种:triggerHandler不会触发元素的默认行为
triggerHandler(type);
实例
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 绑定事件
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").on("focus", function() {
$(this).val("你好吗");
});
// 一个会获取焦点，一个不会
$("div").triggerHandler("click");
// $("input").triggerHandler("focus");
});
</script>
</body>
12.5事件对象
jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event){})
阻止默认行为：event.preventDefault()或者return false
阻止冒泡:event.stopPropagation()
实例
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation();
})
})
</script>
</body>
12.6jQuery拷贝对象
$.extend([deep],target,object1,[objectN]);
1,deep:如果设为true为深拷贝，默认为false浅拷贝
2.target：要拷贝的目标对象
3.object1：待拷贝到第一个对象的对象
4.objectN：待拷贝到第N个对象的对象
5.浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝的对象
6.深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝的对象
实例
<script>
$(function() {
// 1.合并数据
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
// 2. 会覆盖 targetObj 里面原来的数据
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
})
</script>
12.7jQuery多库共存
解决方法
把里面的$符号统一改为jQuery。
jQuery变量规定新的名称:$.noConflict()
实例
<script>
$(function() {
// 让jquery 释放对$ 控制权 让用自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})
</script>
三：LayUI
文档:https://layui.itze.cn/
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
