- A+
所属分类：Web前端
自定义一个类似jquer库==> Hq库的具体步骤：
// 1.通过$_$('div')方法就可以直接返回一个由Hq构造函数实例化出来的一个对象
// 2.在通过Hq构造函数，获取你以选择器为参数的所有节点
// 3.Hq在调用原型上addEles方法将所有的节点，赋值给对应的this的每一项（实例化对象）
// 4.进而这个对象又可以使用Hq原型对象prototype上所有的方法
// 5.所以接下来，我们只需要封装各种方法即可，（设置形参）
// 6.为了可以进行链式调用，只需在每个方法后面在返回该实例化对象 (return this)--紧接着调用其它方法
// 7.链式调用 --- 关键就是在于JQ源码中所有的方法最后都会返回 return this
第一步：
// 自定义Hq 就是相当于一个构造函数
function Hq(ele) {
if (typeof ele == 'string') {
// querySelectorAll 可以获取节点
let eles = document.querySelectorAll(ele)
// for (var i = 0; i < eles.length; i++) { //可以将这一部分单独抽出来封装成一个方法addEles
// this[i] = eles[i]
// }
// this.length = eles.length
// 将节点传给addElEs（）方法
this.addEles(eles)
}
}
第二步：在其prototype原型上添加方法 -- 将节点对象每个内容（节点名字）赋值给构造函数中的this
// ================ prototype原型上添加方法===============
Hq.prototype.addEles = function (ele) {
// 将节点对象每个内容（节点名字）赋值给构造函数中的this
for (var i = 0; i < ele.length; i++) {
this[i] = ele[i]
}
this.length = ele.length
}
第三步：在根据其用法，逆向添加其它的方法：例如css样式的方法
// ===============================添加css样式方法============================
{
Hq.prototype.Style = function (parm, parn) {
if (parm == 'yanse') {
for (let i = 0; i < this.length; i++) {
this[i].style.color = parn
}
} else if (parm == 'beijing' || parm == 'background-color') {
for (let i = 0; i < this.length; i++) {
this[i].style.background = parn
}
} else if (parm == 'biankuang') {
for (let i = 0; i < this.length; i++) {
this[i].style.border = parn
}
}
return this
}
}
第四步：添加常见事件方法
// ===============================常用事件方法添加==========================
// 添加鼠标点击方法
{
Hq.prototype.Dj = function (cb) { //cb就是形参用来接收要执行的function函数
// addEventListener给节点添加事件
for (let i = 0; i < this.length; i++) {
this[i].addEventListener('click', cb); //这里绑定的是一个事件侦听（'事件类型' ,function(){} -- 要执行的函数）
}
return this
}
// 添加鼠标移动方法
Hq.prototype.mouOver = function (cb) {
for (let i = 0; i < this.length; i++) {
this[i].addEventListener('mouseover', cb);
}
return this
}
}
第五步：添加常用的特效方法
// ==========================常用的特效方法=================================
{
Hq.prototype.yinCang = function () {
for (let index = 0; index < this.length; index++) {
this[index].style.display = 'none'
}
}
Hq.prototype.xianShi = function () {
for (let index = 0; index < this.length; index++) {
this[index].style.display = 'block'
}
}
}
第六步：最后定义一个函数$() -- 实例化出jquery对象
function $_$(argument) {
// 构造函数实例化
return new Hq(argument)
}
///////////////////==================以上就是自定义Hq库中的一些功能===================///////////////////////
接下来我们在html网页文件实际使用Hq库：
<!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>源码解析</title>
<script src="./script/Yunlong.js"></script>
</head>
<body>
<div>
<ul>
<li><img src="./img/img/1.jpg" alt="jQuery源码学习" alt=""></li>
<li><img src="./img/img/1.jpg" alt="jQuery源码学习" alt=""></li>
<li><img src="./img/img/1.jpg" alt="jQuery源码学习" alt=""></li>
<li><img src="./img/img/1.jpg" alt="jQuery源码学习" alt=""></li>
</ul>
<button>dianji</button>
<p>45454545</p>
</div>
<script>
// console.log(new Hq('img')); //自已手动的实例化对象
// console.log($_$('img')); //同过调用$_$方法实例化对象
// $_$('img').Myclick(function () {
// console.log('这是云龙，自定义的点击方法');
// })
$_$('li').Style('yanse', 'red').Style('beijing', "#3f3").Style('biankuang', "2px solid #f33")
// $_$('button').Dj(function () {
// console.log('点击事件');
// })
// $('button').click(function () {
// $('p').toggle()
// })
</script>
</body>
</html>
