这篇文章主要介绍了简单实现 JS 对 dom 操作封装,需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 简单实现对 dom 操作封装,下面就直接上代码:
- <!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>
- </head>
- <body>
- <div id="aa">
- 测试
- </div>
- </body>
- <script type="text/javascript">
- //duquery
- (function(w) { //定义立即执行函数,传入全局对象window
- function duquery(id) { //定义函数,实现去new的操作,
- function Duquery(id) { //定义类
- this.ele = document.getElementById(id); //id查找
- return this; //返回对象
- };
- Duquery.prototype.html = function(val) { //利用原型添加设置html的方法
- this.ele.innerHTML = val;
- return this; //返回对象,执行后可链式操作
- };
- Duquery.prototype.attr = function(key, val) { //添加设置属性的方法
- this.ele.setAttribute(key, val);
- return this;
- };
- Duquery.prototype.CSS = function(key, val) { //添加设置样式的方法
- this.ele.style[key] = val;
- return this;
- };
- Duquery.prototype.on = function(event, fun) {
- this.ele.addEventListener(event, fun, false);
- return this;
- };
- return new Duquery(id); //去new处理,返回实例对象
- };
- duquery.wait = function(time, fun) { //添加延时静态方法,可通过函数名直接使用
- setTimeout(fun, time);
- };
- duquery.each = function(arr, callback) { //添加遍历迭代静态方法
- for (var key in arr) {
- callback(key, arr[key]);
- };
- };
- w.$$ = w.duquery = duquery; //类追加到全局对象自定义属性上,可直接调用
- })(window);
- //code
- window.onload = function() {
- //类的使用和操作
- $$("aa").attr("bb", "456").css("height", "200px");
- $$.wait(5000,
- function() {
- $$("aa").html("好的")
- });
- $$("aa").on("click",
- function() {
- $$("aa").html("事件").css("color", "#ffa");
- });
- $$.each([1, 2, 3, 4, 5, 6],
- function(index, val) {
- if (val == 3) {
- alert(val);
- } else {};
- });
- };
- </script>
- </html>
再为大家分享一个 js 常用 DOM 操作,代码如下
来源: