主要思路就是:返回this对象,将所获取的操作元素放入一个数组中。在原型中添加拓展方法

<html>
<head>
<title></title> </head>
<body>
<div id="one">aa</div>
</body>
<script type="text/javascript">
//封装类似于JQuery的连缀 /*
思路:一个操作后再返回本来的对象this,将获取的元素放入一个数组内部。通过原型添加方法;
为了能在原型对象中添加方法;这个应该用函数来建立原型对象
function Base(){
this.getId=function(id){
return this;
}
使用的时候,需要new一个实例对象
var newBase=Base();
}
*/
function Base(){
this.element=[];
//获取ID
this.getId=function(id){
//将所获取的元素放入数组里面,返回当前对象
this.element.push(document.getElementById(id))
// return this.element.length
return this
}
//获取className,遍历push
this.getClass=function(name){
var names=document.getElementsByName(name);
for( var i=0;i<names.length;i++){
this.element.push(names[i])
}
return this;
}
//获取tagName;遍历push
this.getTag=function(tags){
var tags=document.getElementsByTagName(tags);
for(var i=0;i<tags.length;i++){
this.element.push(tags[i])
}
return this;
}
}
//通过原型添加方法:
Base.prototype.css=function(attr,value){
//遍历选取当前元素
for(var i=0;i<this.element.length;i++){
this.element[i].style[attr]=value;
}
return this;
} var newBase= new Base();
// alert(newBase.getId("one"))
newBase.getId("one").css("background","red").css("color","blue").css("fontSize","60")
</script>
</html>

  

像jQuery那样,采用链式方法,封装一个方法:CSS()的更多相关文章

  1. JQuery事件的链式写法

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. jQuery 筛选器 链式编程操作

    $('#i1').next() 下一个标签$('#i1').nextAll() 兄弟标签中,所有下一个标签$('#i1').nextUntil('#ii1') 兄弟标签中,从下一个标签到id为ii1的 ...

  3. 从零开始学 Web 之 jQuery(三)元素操作,链式编程,动画方法

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. php类自动装载、链式操作、魔术方法

    1.自动装载实例 目录下有3个文件:index.php load.php tests文件夹 tests文件夹里有 test1.php <?php namespace Tests; class T ...

  5. jquery初级接触-----链式操作

    设置一个初级菜单,点击显示本级菜单下的项目,被点击的同级其它菜单收起 html 代码: <!DOCTYPE html> <html lang="en"> & ...

  6. jQuery对象的链式操作用法分析

    可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...

  7. Tarjan模版(链式向前星表示方法)

    这道模版用到了链式向前星表示法: struct node { int v,next; }edge[]; void add(int x,int y) { edge[++cnt].next=heads[x ...

  8. egg项目eslint不识别链式操作符的解决方法

    项目用到链式?.结果eslint一直提示 const permissionHandleArr = positionPermissionHandle.map(item => item.permis ...

  9. java开发中的链式思维 —— 设计一个链式过滤器

    概述 最近在弄阿里云的sls日志服务,该服务提供了一个搜索接口,可根据各种运算.逻辑等表达式搜出想要的内容.具体语法可见https://help.aliyun.com/document_detail/ ...

随机推荐

  1. 【Web】关于URL中文乱码问题

    关于URL编码                                        一.问题的由来 URL就是网址,只要上网,就一定会用到.                          ...

  2. Tor

    参考: http://www.douban.com/group/topic/67555786/ http://blog.sina.com.cn/s/blog_72a7ac670101km46.html ...

  3. 设置windows网络连接别名和linux网络连接别名

    windows网络连接别名 C:\Windows\System32\drivers\etc目录下的hosts文件中添加 127.0.0.1 localhost 192.168.1.100 proxy. ...

  4. linux防止sshd被爆破(安装denyhosts)

    这是一篇收集在日志里的文档,当初查看服务器sshd日志发现很多不明IP尝试登陆,因此想用什么办法阻止这样的事情发生.网上找了下用denyhosts可以解决这样的问题,因而也就将其收集在日志里了.由于时 ...

  5. iOS 中contraints居中对齐的一点心得

    今天遇到一个布局问题,先看图 如何让第二个控件在第一个和第三个的竖直上的中间呢?contraint不能直接实现这样的效果.我们可以再添加一个控件,如图 这样之后,再把第二个控件和这个新添加的控件设置为 ...

  6. zpf 命名规则

    2014年8月19日 18:48:39 所有控制器都要继承main类,main类是一个入口类,他里边根据请求初始化了一些变量,也初始化了一些系统变量等等,这些变量和函数可以被控制器类直接使用 控制器类 ...

  7. php中常用魔术方法的举例

    魔术方法是php面向对象特有的功能,并且有时候能实现意想不到的效果,包括前面提到的构造函数.析构函数.还有__clone函数,另外再简单的介绍几个: 1.__toSring和__invoke clas ...

  8. Eclipse中android工程C++文件中出现的莫名其妙的错误

    大多数是std库相关的问题,例如 vector<int> v; v.push_back(23);//这句语法是没有错误的,但是每次执行Run As的时候就会报错 尝试1:在工程名右键-Cl ...

  9. Androidi性能优化之高效使用内存

    应用生存期的绝大多数时间都在用于处理内存中的数据 性能主要取决于以下三个因素: a:CPU如何操作特定的数据类型 b: 数据和指令需要占用多少存储空间 c: 数据在内存中的布局 访问内存: 因为访问内 ...

  10. image warping