JS高级-- JavaScript 库
-
jquery
-
lodash
-
javascript 库，就是指别人已经封装好了一系列的函数，我们直接调用就可以。
jquery 是 2006 年推出的一个 javascript 库。它在原生的 js 的基础上做了一层封装。
document.getElementById('test'); // 原生 js
$('#test'); // jquery
发送ajax
// 原生 js
let xhr = null;
// 处理代码的兼容性问题
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// jquery
$.ajax({
url : 'xxxxx',
type : 'GET',
success : function(data){
// 做数据拿回来之后的处理
}
})
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>芒果</li>
</ul>
<script>
// 原生 js
let lis = document.getElementsByTagName('li');
for(let i=0;i<lis.length;i++){
lis[i].style.color = 'red';
}
</script>
<script>
// jquery
$('li').css('color','red');
</script>
-
轻量
-
强大的选择器
-
DOM 操作的封装
-
完善的 ajax
-
解决了大部分的兼容性问题
-
链式操作
目前最新的版本是 3.x。如果要考虑 IE8 及其以下版本的浏览器的兼容性，只能用 1.x 的版本。也就是说，2.x 和3.x没有考虑兼容性的问题。一般每个版本的jquery有比如 jquery-1.1.2 和 jquery-1.1.2.min.js，有min的代表的是压缩版。
jquery 核心方法
jquery() // 该方法有一个别名 $()
该方法可以将一个对象转换为 jquery 对象，注意jquery对象的方法和DOM对象的方法是不能够混用的。如果是jquery对象，就只能调用jquery的方法，如果是DOM对象，就只能调用DOM对象的方法。
// 我们通过这个方法，可以获取DOM节点
$('#test')
$(document.body)
$([1,2,3])
$('<p></p>')
jquery对象如何转成DOM对象。
通过get方法，可以将一个jquery对象转换为DOM对象
$('#root').get(0).innerHTML = 'xxxx';
$('#root')[0].innerHTML = 'xxx';
each 方法: 循环 jquery 对象的方法
$('p').each((item)=>{
// 做具体的操作
})
document.ready 方法
这个方法就类似于原生 js 中的 window.onload 事件。
$(document).ready(function(){});
// 或者
$(function(){})
虽然这个方法类似于 window.onload 事件，但是两者还是有区别的。window.onload 是在DOM文档树加载完所有文件（包括图片加载）后才会执行。document.ready 方法是在 DOM 文档树加载后就马上执行。
jquery 选择器
jquery 中的选择器，绝大部分和 css 是相同的，但是也有一些 jquery 特有的选择方式：
-
:first
-
:last
-
:even
-
:odd
-
:eq
-
:gt
-
:lt
-
:header
-
:animated
-
:contains(text)
-
:has(selector)
-
:parent
-
:hidden
-
:visible
-
:input
-
:text
-
:password
-
:radio
-
:checkbox
-
:submit
-
:image
-
:reset
-
:button
-
:file
-
:hidden
-
:selected
<body>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('p:first').click(function(){
console.log('OK')
})
</script>
</body>
在 jquery 中，除了选择器以外，还提供了一组筛选器。我现在已经有一组 jquery 对象:
$('p')
// 上面的代码，我们已经获取到了一组 jquery 对象，接下来我们就可以从这一组 jquery 对象中筛选我们要的某一个 jquery 对象
$('p').eq(0)
-
-
first() -
last() -
hasClass() -
filter() -
is() -
map() -
has() -
not() -
slice() -
children() -
find() -
next() -
nextAll() -
nextUntil() -
parent() -
parents() -
parentsUntil() -
prev() -
prevAll() -
prevUntil() -
siblings() -
contents() -
end()
下面是 end 方法的一个示例：
<body>
<ul class="first">
<li class="foo">item1</li>
<li>item2</li>
<li class="bar">item3</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('ul').find('.foo').css('background-color','red').end().find('.bar').css('background-color','blue')
</script>
</body>
使用筛选器的时候，还需要注意 get 和 eq 方法的区别：
$('p').get(0); // 将 jquery 对象转为 DOM 对象
$('p').eq(0); // 选择第一个 jquery 对象
jquery 操作属性的方法
在 jquery 中，方法有一个特点，获取和设置方法同名。
-
attr
<body>
<p id="op" class="test">this is a test</p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// 获取元素属性
console.log($('#op').attr('class'));
// 设置元素属性
// $('#op').attr('class','test2');
$('#op').attr({
'class' : 'test3',
'id' : 'opp'
});
</script>
</body>
- removeAttr：删除某个属性
<body>
<p id="op" class="test">this is a test</p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// 获取元素属性
$('#op').removeAttr('id'); // 删除一个
$('#op').removeAttr('id class'); // 删除多个
</script>
</body>
-
prop
-
removeProp
这一组方法也是做属性操作，和 attr 那一组方法的区别。
prop 和 removeProp 和 attr 那一组的区别在于他们是操作特殊属性。
<input type="checkbox" checked> <option selected>
类似的属性还有：
-
disabled
-
autofoucus
-
readonly
-
mutiple
-
checked
-
selected
$('#test').prop('checked'); // 获取这个复选框的选中状态
$('#test').prop('checked', false);
-
-
removeClass：删除一个类
-
toggleClass：如果有这个类，就删除，否则就添加
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 150px;
height: 150px;
border: 1px solid;
}
.bgc{
background-color: red;
}
</style>
</head>
<body>
<button id="btn">切换样式</button>
<div></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#btn').click(function(){
$('div').toggleClass('bgc');
});
</script>
</body>
-
html
-
text
-
val
这一组方法对应的是原生 js 的 innerHTML，innerText，value
// 取赋值同体
<body>
<button id="btn">切换样式</button>
<div></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
console.log($('#btn').html())
$('#btn').html('这是一个按钮');
</script>
</body>
jquery 操作 css 的方法
最最核心的就是 css 方法。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 150px;
height: 150px;
border: 1px solid;
}
</style>
</head>
<body>
<div style="background-color: blue;"></div>
<button id="btn">设置背景色</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
console.log($('div').css('background-color'))
$('#btn').click(function(){
// $('div').css('background-color','red');
$('div').css({
'background-color' : 'red',
'width' : '60px',
'height' : '60px'
})
})
</script>
</body>
-
-
width
-
innerHeight
-
innerWidth
-
outerHeight
-
outerWidth
-
scrollTop
-
scrollLeft
-
offset：节点相对于视口的位置
-
postion：相对于父元素的偏移位置
jquery 文档处理方法
这里就是涉及到节点的操作。所谓节点的操作，就是指创建节点、修改节点、删除节点。
下面是使用原生js操作节点的代码片段：
let root = document.getElementById("root");
// 添加标题元素
let h1 = document.createElement("h1");
let titleText = document.createTextNode("标题");
h1.appendChild(titleText);
root.appendChild(h1);
// 添加p元素
let p = document.createElement("p");
let pText = document.createTextNode("文本段落");
p.appendChild(pText);
root.appendChild(p);
在 jquery 中，就提供了大量的方法来简化这些操作。
-
append
-
appendTo
这两个方法本质是一样的，主要就是顺序的区别。示例如下：
<body>
<button id="btn">添加节点</button>
<div></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#btn').click(function(){
// $('div').append('<p>this is a test</p>');
$('<p>test!!!</p>').appendTo('div');
})
</script>
</body>
-
append
-
appendTo
-
prepend
-
prependTo
-
after
-
before
-
insertAfter
-
insertBefore
-
wrap
-
unwrap
-
wrapAll
-
warpInner
-
replaceWith
-
replaceAll
-
empty
-
remove 绑定事件也被删除
-
detach 保留
remove 和 detach 的区别如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<button id="btn">删除节点</button>
<button id="btn2">恢复节点</button>
<div>
<p>这是段落一</p>
<p>这是段落二</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
let i = null;
$('div>p:first').click(function(){
console.log('我是一个段落');
})
$('#btn').click(function(){
i = $('div>p:first').detach();
console.log(i);
})
$('#btn2').click(function(){
$('div').append(i);
})
</script>
</body>
-
clone
jquery 事件处理
<body>
<p>this is a test</p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('p').click(function(e){
console.log(e); // 事件对象也能够正常获取
});
</script>
</body>
事件对象：所谓事件对象，首先它是自动生成，当你触发事件的时候，就会生成这么一个对象。通过这个对象，我们可以拿到用户触发事件时的一些具体信息。
key 事件，我们往往需要知道用户究竟按的是哪一个键，那么这个重要信息就在事件对象里面。
-
ready
-
on
-
off
-
one
-
delegate
-
hover
-
blur
-
change
-
click
-
dblclick
-
error
-
focus
-
focusin
-
focusout
-
keydown
-
keyup
-
mousedown
-
mouseenter
-
mouseleave
-
mousemove
-
mouseout
-
mouseover
-
mouseup
-
resize
-
scroll
-
select
-
submit
-
unload
在上面诸多的事件方法中，需要掌握的就是 on 和 off 方法。
-
on：绑定事件
-
off：删除事件
<body>
<p>this is a test</p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// $('p').click(function(e){
// console.log(e);
// });
$('p').on('click' ,function(){
console.log('aaaa')
});
</script>
</body>
-
on
-
bind
-
live
-
delegate
下面绑定事件的方式，目前 jquery 已经废弃掉了，现在官方推荐就使用 on 来绑定事件。
-
one：一次性事件
- hover: 等价于移入移出两个事件的集合
<body> <p>this is a test</p> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $('p').hover(function(){ console.log('移入了'); },function(){ console.log('移出了'); }); </script> </body>
jquery 中的 ajax 方法
在 jquery 中，也是给我们提供了一组 ajax 的方法。
-
ajax
-
load
-
get
-
post
-
serialize
-
serializeArray
ajax ： 这是 jquery 中提供的 ajax 相关的最核心的方法：
// 当我们引入了 jquery 之后，就有一个最核心的方法，叫做 jquery()
// jquery() 方法有一个简写 $()
// 但是其实引入 jquery 之后，还会有一个 jquery 全局对象，简写就是一个 $
$.ajax({
url : '请求地址',
type : '请求类型',
async : 布尔值,（true 异步，false 同步）
data : 'name="xiejie"&age=18',
success : function(){}
})
下面是一个使用 jquery 的 ajax 方法来发送请求的示例：
<body>
<button id="btn">从服务器获取数据</button>
<table id="tab"></table>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
Mock.mock('/getStu',function(){
return Mock.mock({
'list|5' : [{
'id|+1' : 1,
'name' : '@cname()',
'age|18-30' : 1
}]
})
})
const render = function(arr){
let tHead = `<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>`;
let tBody = arr.map(item=>{
return `<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.age}</td>
</tr>`
}).join('');
$('#tab').html(tHead+tBody)
}
$('#btn').on('click',function(){
$.ajax({
url : '/getStu',
type : 'GET',
success : function(data){
render(JSON.parse(data).list);
}
})
})
</script>
</body>
-
-
serializeArray：返回的是数组
<body>
<button id="btn">是否能够提交</button>
<form action="#" id="myForm">
<div>
<label for="stuName">name</label>
<input type="text" name="stuName" id="stuName">
</div>
<div>
<label for="stuAge">age</label>
<input type="text" name="stuAge" id="stuAge">
</div>
<div>
<label for="stuScore">stuScore</label>
<input type="text" name="stuScore" id="stuScore">
</div>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#btn').on('click',function(){
if($('#myForm').serializeArray().every(item=>{
return item.value != ''
})){
alert('OK')
} else {
alert('No');
}
})
</script>
</body>
目前，jquery 的优势已经越来越小了，连最引以为傲的 ajax 功能，都已经有了 fetch 来进行替代。
下面是一个基于 fetch 的请求案例：
<body>
<button id="btn">打印韩梅梅的班主任</button>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#btn').on('click',function(){
// fetch 就是基于 promise 的 API
// 目前各大浏览器基本支持
fetch('./stu.json')
.then((data)=>data.json())
.then(data=>{
console.log(data);
})
})
</script>
</body>
Lodash （https://www.lodashjs.com/）
在BOOTCDN上引用Lodash库
Lodash 也是前端非常常用的一个工具库，里面封装了很多方法：
-
数组
-
字符串
-
函数
-
对象
整个 Lodash 分为好几个模块。这意味着我们在引包的时候，可以模块化引入。
-
Array - 和数组操作有关的方法。
-
Collection - 和数组、集合有关的方法，也有部分和字符串有关。
-
Function - 和函数有关的方法。
-
Date - 和日期有关的方法。
-
Lang - 类型判断和转换有关的方法。
-
Math - 数学有关的方法。
-
Number - 比较数值、生成随机数有关方法。
-
Object - 对对象进行操作的方法。
-
Seq - 用于链式操作，提高性能。
-
String - 和字符串有关的方法。
-
Util - 其他的一些辅助方法，比如生成唯一值等等。
要使用 Lodash，需要安装，最简便的方式就是通过 cdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Array 相关方法
-
compact ： 过滤数组中的假值元素
- difference：返回一个新的数组，包括第一个数组和其他数组不同的元素
- differenceBy
- differenceWith
- intersection : 返回一个数组的交集。
-
intersectionBy
-
intersectionWith
-
uniq：给数组去重
浙公网安备 33010602011771号