像jQuery那样,采用链式方法,封装一个方法:CSS()
主要思路就是:返回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()的更多相关文章
- JQuery事件的链式写法
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery 筛选器 链式编程操作
$('#i1').next() 下一个标签$('#i1').nextAll() 兄弟标签中,所有下一个标签$('#i1').nextUntil('#ii1') 兄弟标签中,从下一个标签到id为ii1的 ...
- 从零开始学 Web 之 jQuery(三)元素操作,链式编程,动画方法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- php类自动装载、链式操作、魔术方法
1.自动装载实例 目录下有3个文件:index.php load.php tests文件夹 tests文件夹里有 test1.php <?php namespace Tests; class T ...
- jquery初级接触-----链式操作
设置一个初级菜单,点击显示本级菜单下的项目,被点击的同级其它菜单收起 html 代码: <!DOCTYPE html> <html lang="en"> & ...
- jQuery对象的链式操作用法分析
可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...
- Tarjan模版(链式向前星表示方法)
这道模版用到了链式向前星表示法: struct node { int v,next; }edge[]; void add(int x,int y) { edge[++cnt].next=heads[x ...
- egg项目eslint不识别链式操作符的解决方法
项目用到链式?.结果eslint一直提示 const permissionHandleArr = positionPermissionHandle.map(item => item.permis ...
- java开发中的链式思维 —— 设计一个链式过滤器
概述 最近在弄阿里云的sls日志服务,该服务提供了一个搜索接口,可根据各种运算.逻辑等表达式搜出想要的内容.具体语法可见https://help.aliyun.com/document_detail/ ...
随机推荐
- iOS的 context 和Android 中的 canvas
ios 想要绘图,要用到CGContextRef类.最基本的用法是在- (void)drawRect:(CGRect)rect 函数中绘制. Android 中要用到Canvas类.最基本的用法是在 ...
- 利用 Avisynth 2.5.8 的 ColorKeyMask 功能实现视频抠像
下载安装Avisynth 2.5.8 + 下载安装 FFMpeg 编写 Avisynth 脚本 mating.avs ----------------------------------------- ...
- ECSHOP修改后台地址
为了保证ECSHOP商城安全,需要修改许多默认的程序路径,今天讲下后台路径修改. ECSHOP修改后台路径根据版本不同,修改的地方也不一样.我现在用的是2.7.3,上网查了资料,很少,所以自己先写下来 ...
- codeforces 478B Random Teams 解题报告
题目链接:http://codeforces.com/problemset/problem/478/B 题目意思:有 n 个人,需要将这班人分成 m 个 组,每个组至少含有一个人,同一个组里的人两两可 ...
- [MAC] mac系统如何显示和隐藏文件
转载地址: http://www.cnblogs.com/lm3515/archive/2010/12/08/1900271.html 显示Mac隐藏文件的命令:defaults write com. ...
- easyfinding(codevs 3280)
3280 easyfinding 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description 给一个M 行N 列 ...
- Android之解析GML并显示
本例主要实现在APP中解析GML数据并显示 GML,地理标记语言(外语全称:Geography MarkupLanguage.外语缩写:GML),它由开放式地理信息系统协会(外语缩写:OGC)于199 ...
- 关于struts 2中的日期问题
struts 2中引入了大量的jquery的内容 其中日期问题总结一下: 步骤: 1.当然不用说,先建一个web项目 2.导入struts2所需要的jar包,以及此插件的包(当然你也可以用:strut ...
- struts2的s:iterator 标签 详解
s:iterator 标签有3个属性:value:被迭代的集合id :指定集合里面的元素的idstatus 迭代元素的索引1:jsp页面定义元素写法 数组或list <s:iterator ...
- 理解C#中的闭包
闭包的概念 内层的函数可以引用包含在它外层的函数的变量,即使外层函数的执行已经终止.但该变量提供的值并非变量创建时的值,而是在父函数范围内的最终值. 闭包的优点 使用闭包,我们可以轻松的访问外层函数定 ...