【免费】第34章项目1-博客前端：封装库--连缀1资源-CSDN文库

需积分: 0 112 浏览量 2022-08-03 18:35:50 上传评论收藏 154KB PDF 举报

资源详情

资源评论

资源推荐

第 34

34

34

34 章项目 1-

1-

1-

1- 博客前端：封装库 --

--

--

-- 连缀

学习要点：

1. 连缀介绍

2. 改写库对象

主讲教师：李炎恢

官方博客： http://blog.yc60.com

http://blog.yc60.com

http://blog.yc60.com

http://blog.yc60.com

合作网站： http://

http://

http://

http:// www.ibeifeng.com

www.ibeifeng.com

www.ibeifeng.com

www.ibeifeng.com

本章我们重点来介绍，在调用库的时候，我们需要能够在前台调用的时候可以同时设置

多个操作，比如设置 CSS ，设置 innerHTML ，设置 click 事件等等。那么本节课来讨论这个

问题。

一．连缀介绍

所谓连缀，最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作

。

比如：

$ () .getId('box').css('color', 'red').html(' 标题 ') .click(function () {alert( ' a ' )});

连缀的好处，就是快速方便的设置节点的操作。

二．改写库对象

如果是实现操作连缀，那么我们就需要改写上一节课的对象写法： var Base = {} ，这种

写法无法在它的原型中添加方法，所以需要使用函数式对象写法：

function Base() {

// 把返回的节点对象保存到一个 Base 对象的属性数组里

this.elements = [];

// 获取 id 节点

this.getId = function (id) {

this.elements.push(document.getElementById(id));

return this;

};

// 获取 name 节点数组

this.getName = function (name) {

var names = document.getElementsByName(name);

for (var i = 0; i < names.length; i ++) {

this.elements.push(targs[i]);

}

return this;

}

// 获取元素节点数组

this.getTagName = function (tag) {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

内容反馈

俞林鑫

粉丝: 14
资源: 288

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip