主要思路就是：返回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. 【SpringMVC】SpringMVC系列10之视图与视图解析器

    10.视图与视图解析器 10.1.概述     请求处理方法执行完成后,最终返回一个 ModelAndView处理方法,Spring MVC 也会在内部将它们装配成一个ModelAndView 对象, ...

  2. Convert Sorted List to Balanced BST

    Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...

  3. mysql中int、bigint、smallint 和 tinyint的区别与长度的含义

    最近使用mysql数据库的时候遇到了多种数字的类型,主要有int,bigint,smallint和tinyint.其中比较迷惑的是int和smallint的差别.今天就在网上仔细找了找,找到如下内容, ...

  4. local variable 'xxx' referenced before assignment

    这个问题很囧,在外面定义了一个变量 xxx ,然后在python的一个函数或类里面引用这个变量,并改变它的值,结果报错local variable 'xxx' referenced before as ...

  5. Popular Cows(codevs 2186）

    题意: 有N(N<=10000)头牛,每头牛都想成为most poluler的牛,给出M(M<=50000)个关系,如(1,2)代表1欢迎2,关系可以传递,但是不可以相互,即1欢迎2不代表 ...

  6. linux tricks 之 bitmap分析.

    ------------------------------------------- 本文系作者原创, 欢迎大家转载! 转载请注明出处:netwalker.blog.chinaunix.net -- ...

  7. go编写简单的web服务器

    package main import ( "fmt" "log" "net/http" "strings" ) //h ...

  8. Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

    index.php代码   [html] view plaincopy <!DOCTYPE html PUBLIC ;}                .single_item{padding: ...

  9. HDU 4349 Xiao Ming's Hope lucas定理

    Xiao Ming's Hope Time Limit:1000MS     Memory Limit:32768KB  Description Xiao Ming likes counting nu ...

  10. HDU 4974 Dracula and Ethan 优先队列

    Dracula and Ethan Time Limit: 1 Sec  Memory Limit: 256 MB Description Dragon is watching competition ...