封装原生javascript连缀

最新推荐文章于 2024-09-05 15:08:57 发布

qq_19318067

最新推荐文章于 2024-09-05 15:08:57 发布

阅读量533

点赞数

CC 4.0 BY-SA版权

分类专栏：封装文章标签：封装连缀

本文链接：https://blog.youkuaiyun.com/qq_19318067/article/details/51719153

封装专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种基于JavaScript的库实现方式，通过封装常用DOM操作，如获取元素、设置样式、绑定点击事件等，实现了代码的连缀调用，提高了开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//连缀的封装
window.onload = function(){
$().getId('box').css('color','red').css('backgroundColor','black').click(function(){
alert('我是封装的click事件');
}) ; //实现连缀用id获取的

//alert(base.getTagName('p').elements.length);
$().getTagName('p').css('color','blue').html('修改文字').click(function(){
alert('我是封装的click事件');

}) //通过获取标签名有多个实现连缀

}

/*
连缀的封装
*/
var $ = function(){
return new Base(); //让这个$函数每次new 一个对象出来这样子就保证了不共用一个对象
}
function Base(){
//创建一个数组来保存获取的节点(id)和节点数组（name）
this.elements = [];
//获取id节点
this.getId = function(id){
this.elements.push(document.getElementById(id));
return this; //返回Base对象
}
//获取元素节点
this.getTagName = function(tag){
var targs = document.getElementsByTagName(tag);
for(var i=0;i<targs.length;i++){
this.elements.push(targs[i]);
}
return this; //返回Base对象
}
}
Base.prototype.css = function(attr,value){ //给函数体添加方法用原型
for(var i=0;i<this.elements.length;i++){
this.elements[i].style[attr] = value;
}
return this;
}
Base.prototype.html = function(str){ //给函数体添加方法用原型
for(var i=0;i<this.elements.length;i++){
this.elements[i].innerHTML = str;
}
return this;
}
Base.prototype.click = function(fn){ //给函数体添加方法用原型
for(var i=0;i<this.elements.length;i++){
this.elements[i].onclick = fn;
}
return this;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>理解js库</title>
<script src="demo.js"></script>
<script src="base.js"></script>
</head>

<body>


<div id="box">box</div>
<p >段落1</p>
<p >段落</p>
<p>段落</p>
</body>
</html>