简单封装几个JQ的功能
前言
jq(jquery)是一个便捷的,简化js代码的,有着丰富选择器的js
框架。在vue和react框架前之前,jq几乎是web开发的必备框架。当然随着数据双向绑定的出现,更加简化了数据和DOM节点的操作,vue
和react
取代了jq的地位。
虽然说jq已不再是主流,但是在一些比赛,一些项目中依然有出现。比如h5交互融媒体比赛
,比赛只允许使用原生js,可以简单封装几个,简化一下代码
封装几个jq的功能
$()
函数、dom.css
方法、dom.html()
方法、dom.on()
方法。方法中的function()
切勿写成箭头函数,否则会修改this
指向
1.$()函数
这个函数是jq的核心,它可以根据传入的字符,实例化对应的dom元素,生成一个加工后的dom
对象。这里实现一下他的几个常用的选择器。
$('#box')
、获取id
为box
的元素,$('.list')
获取类名为list
的所有元素、$('h2')
获取所有h2
标签
//$ 工厂
function $(a){
var char = a.substr(0,1);
var b = a.substr(1);
switch (char){
case '#':
return document.getElementById(b);
break;
case '.':
return document.getElementsByClassName(b);
break;
default:
return document.getElementsByTagName(a);
break;
}
}
写个demo试一下效果:
<html>
<head>
<script src="./common.js"></script>
</head>
<body>
<div id="box">一个div盒子</div>
<p>离离原上草</p>
<p>一岁一枯荣</p>
<div >
<span class="list">1</span>
<span class="list">2</span>
<span class="list">3</span>
<span class="list">44</span>
<span class="list">5</span>
</div>
<script> console.dir("获取id为box的")
console.dir($("#box"))
console.dir("获取所有p标签")
console.dir($("span"))
console.dir("获取所有class为list的dom")
console.dir($(".list")) </script>
</body>
</html>
js原型
js中所有数据都是一个对象。js原型类似是js对象的父类。例如每个dom
节点都会继承自一个HTMLElement
的父类,为父类添加属性或方法,子类也可以继承到。
数组原型:
Array.prototype
字符串原型:
String.prototype
dom原型:
HTMLElement.prototype
2. dom.css()方法
dom.css(key,value) return HTMLElement
jq中通过$工厂实例化后的dom对象会拥有css()
方法,可以为dom节点添加行内样式。
可以是一对css键值也可以是一组css键值。
代码实现如下:
// css
HTMLElement.prototype.css = function(k,v){
k == 'cssText' ? this.style[k]+=v : this.style[k]= v ;
// 返回原型是为了可以实现链式操做
return this
}
3. dom.html()方法
dom.html(html) return string|HTMLElement
html()
方法可以获取和设置dom包含的hmtl内容。
判断是否有参数,有则设置没有则为获取。
HTMLElement.prototype.html = function(a){
return (a == undefined) ? this.innerHTML : this.innerHTML = a ;
}
4. dom.on()方法
dom.on('事件类型',处理函数,是否在捕获或冒泡阶段执行[默认false])
HTMLElement.prototype.on = function(a,fun,b=false){
return this.addEventListener(a,fun,b);
}
5. dom.data() 方法
同样。只有一个参数时获取,两个参数为设置,设置后允许链式操作
HTMLElement.prototype.data = function(k,v){
if(v == undefined){
return this.dataset[k]
}
this.dataset[k]=v
return this
}
测试封装的方法
- 将前两个p标签的内容赋值到第三个p标签中
- 使用事件监听,实现一个开关功能
<html>
<head>
<script src="./common.js"></script>
</head>
<body>
<div id="box">一个div盒子</div>
<p>离离原上草</p>
<p>一岁一枯荣</p>
<p></p>
<div class="light"data-state="1" ></div>
<button id="sw" >开关</button>
<script> $('.light')[0].css('cssText',"height:40px;width:40px;")
let sw = $("#sw")
sw.on('click',function(e){
if ($('.light')[0].data("state") == "1"){
$('.light')[0].css("backgroundColor","red").data('state',"0")
}else{
$('.light')[0].css("backgroundColor","green").data('state',"1")
}
})
$("p")[2].css("fontSize","12px").html($("p")[0].html() +","+ $("p")[1].html()) </script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F6G4O0Z2-1653975868139)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67306a30f60041fb839b211906702540~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]
总结
照葫芦画瓢,写了个简陋的jq。这些功能的实现主要依赖于js原型
的继承能力了,继承使得函数可以作用到每个节点上