jQuery01
DOM非常重要, 但是 工作中很少书写 原生的DOM代码
因为: 原生的方法名太长 过于放在
例如:
- querySelectorAll
- getElementsByClassName
- previousElementSibling
- …
简化:
const qa = document.querySelector.bind(document)
前辈
利用函数的封装技巧 和 函数重载技巧, 把原生DOM进行了封装, 让使用时非常简单!
封装思想-选学
<!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>
</head>
<body>
<div class="box">Hello jQuery1</div>
<div class="box">Hello jQuery2</div>
<div class="box">Hello jQuery3</div>
<script>
// 技巧1: 封装 - 用{}封装代码复用
// 技巧2: 函数重载 - 参数数量/类型不同, 完成不同的逻辑
// 实现封装:
function MyQuery(s) {
// els: 选择器方式, 查询到的所有元素
this.els = document.querySelectorAll(s)
}
MyQuery.prototype.css = function () {
// css(属性名): 可以读取查询到的元素中, 第一个元素的指定样式的值
if (arguments.length == 1) {
const name = arguments[0]
return this.els[0].style[name]
}
// 如果是两个参数: 则为选择器选到的每个元素都进行样式的修改
if (arguments.length == 2) {
// 数组解构
const [name, value] = arguments
// 遍历每个元素, 修改其style样式
this.els.forEach(el => {
el.style[name] = value
})
}
}
// 制作 $ 函数, 来简化new操作
// 一个映射操作, $(s) 相当于 new MyQuery(s)
// 此处的 $ 随便写, 可以写 x y z 之类, 只不过习惯上是$
function $(s) {
return new MyQuery(s)
}
// 最终效果: 修改 id='box' 元素的颜色
// 2个参数: 可以设置颜色
$('.box').css('color', 'red')
// 1个参数可以读取颜色
console.log($('.box').css('color'))
</script>
</body>
</html>
插件
有网络
的同学: 插件栏搜索即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cf3cAGAl-1642605755652)(jQuery01.assets/image-20220110140654761.png)]
没网的
同学: 解压缩 FTP提供的 vendor.zip
, 用vscode打开此目录, 然后再vscode中, 右键
点击donjayamanne.jquerysnippets-0.0.1.vsix
安装即可
jQuery
官网: https://jquery.com/
jQuery的理念:
write less, do more
- 写的少,做的多
脚本下载地址: https://jquery.com/download/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mqbNu16G-1642605755654)(jQuery01.assets/image-20220110141316360.png)]
脚本分两类:
- 产品版: 经过代码压缩, 去掉了
注释
和空行
, 达到减小体积的效果 - 开发版: 有注释和空行, 方便程序员阅读
-1642605755654)]
脚本分两类:
- 产品版: 经过代码压缩, 去掉了
注释
和空行
, 达到减小体积的效果 - 开发版: 有注释和空行, 方便程序员阅读