js:封装几个JQ的功能

jayLog

已于 2022-04-29 09:58:58 修改

阅读量481

点赞数

分类专栏： js 前端文章标签： javascript 前端

于 2022-04-29 09:58:42 首次发布

本文链接：https://blog.csdn.net/jayLog/article/details/124489405

版权

js 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

文章目录

简单封装几个JQ的功能
前言
封装几个jq的功能
1.$()函数
js原型
2. dom.css()方法
3. dom.html()方法
4. dom.on()方法
5. dom.data() 方法
测试封装的方法
总结

简单封装几个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;
	}
}

试一下效果

<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>

请添加图片描述

总结

照葫芦画瓢，写了个简陋的jq。这些功能的实现主要依赖于js原型的继承能力了，继承使得函数可以作用到每个节点上

jayLog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js:封装几个JQ的功能

jq(jquery)是一个便捷的，简化js代码的，有着丰富选择器的js框架。在vue和react框架前之前，jq几乎是web开发的必备框架。当然随着数据双向绑定的出现，更加简化了数据和DOM节点的操作，vue和react取代了jq的地位。
复制链接

扫一扫