js连缀1

最新推荐文章于 2018-07-28 12:38:55 发布

wangsufu77

最新推荐文章于 2018-07-28 12:38:55 发布

阅读量238

点赞数

本文详细阐述了如何通过扩展基础库对象的方法来实现DOM元素的基本操作，包括样式设置、HTML内容修改、事件绑定等，并展示了使用自定义方法进行DOM元素操作的示例。

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

/*
//alert(Base.getId('box'));
Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {
  alert('a');
}).addClass('a');

Base是一个基础库的核心对象
Base.getId('box')返回的是一个divElement，这个对象是没有css方法的
将Base.getId('box')返回改成Base即可，返回Base对象
Base.getId('box').css('color','red')返回的也是Base对象
Base.getId('box').css('color','red').css('backgroundColor', 'black')还是返回的Base对象
Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox')也是返回的Base对象
Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {
  alert('a');
}); click方法执行完毕之后，还是返回的Base对象

在Base对象中，添加css方法,html方法,click方法

var base = new Base();
base.getId('box').style.color = 'red';
base.getId('box').style.backgroundColor = 'black';
base.getId('box').innerHTML = 'pox';
base.getId('box').onclick = function () {
  alert(this.innerHTML);
};
*/

window.onload = function () {
//alert(base.getId('box').elements.length);
$().getId('box').css('color', 'red').css('backgroundColor', 'black');
//alert(base.getTagName('p').elements.length);
$().getTagName('p').css('color', 'green').html('标题').click(function () {
alert('a');
}).css('backgroundColor', 'pink');
};

==============================================================================================

/*
var Base = {
getId : function (id) {
  return document.getElementById(id)
},
getName : function (name) {
  return document.getElementsByName(name)
},
getTagName : function (tag) {
  return document.getElementsByTagName(tag);
}
};
*/

var $ = function () {
return new Base();
}

function Base() {

//创建一个数组，来保存获取的节点和节点数组
this.elements = [];

//获取ID节点
this.getId = function (id) {
  this.elements.push(document.getElementById(id));
  return this;
};

//获取元素节点
this.getTagName = function (tag) {
  var tags = document.getElementsByTagName(tag);
  for (var i = 0; i < tags.length; i ++) {
   this.elements.push(tags[i]);
  }
  return this;
};

}

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