主要思路就是：返回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. XPath学习:轴(3)——descendant

    XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointe ...

  2. Unique Paths | & ||

    Unique Paths I A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diag ...

  3. 【leetcode】Longest Consecutive Sequence

    Longest Consecutive Sequence Given an unsorted array of integers, find the length of the longest con ...

  4. discuz 帖子模块用到的表及自动发帖函数

    最近在做一个discuz的插件,由于需要程序自动生成并调用discuz已经存在插件的帖子.然而这就相当于自动发帖的功能了.网上找了一下,大部分都是通过curl模拟登陆,模拟发帖的,这显然不满足我的要求 ...

  5. 【USACO】numtri

    给一颗数字树,让找一条数字和最大的路径.一下子就想起刚学不久的回溯法了.照着写了个代码,调了调搞通了.在小数据的情况下是对的,但是在test 6 树有199层的时候溢出了. #include < ...

  6. MFC dfs遍历文件

    //如果涉及到大文件的遍历(大于4GB),可以将以下代码_finddata_t换成__finddata64_t,_findfirst换成_findfirst64,_findnext换成_findnex ...

  7. MFC基于Dialog的工程中使用OSG

    osg的例子有osgviewerMFC,是MDI类型的MFC工程,我一般用基于对话框的MFC较多. 注意观察MFC_OSG.h文件中的cOSG构造函数,参数是一个窗口句柄hWnd,这里的窗口可以不只局 ...

  8. git revert 用法

    git revert 撤销 某次操作,此次操作之前和之后的commit和history都会保留,并且把这次撤销作为一次最新的提交    * git revert HEAD                ...

  9. 转圈游戏(codevs 3285)

    题目描述 Description n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从0 到 n-1.最初,第 0 号小伙伴在第 0 号位置,第 1 号小伙伴在第 ...

  10. protostuff简单应用

    protobuf是谷歌推出的与语言无关.平台无关的通信协议,一个对象经过protobuf序列化后将变成二进制格式的数据,所以他可读性差,但换来的是占用空间小,速度快.居网友测试,它的序列化效率是xml ...