关闭

【JavaScript 10—应用总结】:连缀

625人阅读 评论(13) 收藏 举报
分类:

一、总体概述

1.1,什么叫连缀

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

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;"></pre><pre name="code" class="javascript">$().getTagName("p").css("color","green").html("标题").click(function(){
		alert("a");
	}).css("backgroundColor","pink");</span></span>
说明:在这里,我们设置了节点的CSS属性,HTML标题,还有它的点击事件,这就是一个连缀的实例。

1.2,连缀的好处

快速方便的设置节点的操作。

1.3,个人理解

一说到连缀,作为我个人,我想到了以前用过的with...end with语句。比如说,我们在设置一个label标签的多个属性时,就可以使用这个语句,然后就不用每次声明属性设置的对象。在我理解,JS中所实现的连缀,与其有着异曲同工之妙。如果不实现连缀,作为上面代码中的效果,应该怎么实现呢?大概是这样的:

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">$().getTagName("p").css("color","green");
	$().getTagName("P").html("标题");
	$().getTagName("p").css("backgroundColor","pink"); 
	$().getTagName("p").click(function(){
		alert("a");
	})</span></span>

虽然,都能实现想要的效果,但并不方便。就好像是别人问我们一个问题:她是一个什么样的人,用连缀的效果回答就是:她是一个又聪明、又漂亮、又富有的姑娘。如果不使用连缀的效果就是:她是一个聪明的姑娘;她是一个漂亮的姑娘;她是一个富有的姑娘。所以,由此可见,使用连缀,可以让我们更为快速、更为丰富的描述一个对象。


二、实现连缀

2.1,逻辑分析

首先作为获取到的节点是没有CSS方法,也没有单击事件的。那么要实现这些,我们需要将返回来的节点(每次返回的东西)作为一个基础对象,然后,在基础对象上添加我们需要的方法。

2.2,处理流程

首先,为了输入的快捷和便利,首先将基础对象Base设置为$符:

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">var $=function(){
	return new Base();
};</span></span>
然后,获取元素的节点(需要操作的节点,如body、div等):

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">function Base(){
	//创建一个数组,来保存获取的节点和节点数组
	this.elements=[];
	//获取ID节点
	this.getId=function(id){
		this.elements.push(document.getElementById(id));
		return this;
	};
	//获取元素节点
	this.getTagName=function(tag){
		var tags=document.getElementsByTagName(tag);
		for(var i=0;i<tags.length;i++){
			this.elements.push(tags[i]);
		};
		return this;
	};
}
</span></span>

说明:1,如果我们不创建一个数组来保存获取到的元素节点,那么我们就不能返回Base则个基础对象,从而添加方法实现连缀。而获取到的返回值是一个div对象。

2,在获取元素节点时,使用了循环,而不是像获取ID节点一样的处理。我们都知道ID作为唯一标识符是唯一的,但是元素节点就有很多,比如:

 <p>段落</p>
<p>段落</p>
<p>段落</p>

作为p的元素节点就有三个,如果像ID节点一样的处理,那么我们将只能设置第一个p元素节点。

最后,添加基础对象方法,实现连缀:

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">Base.prototype.css=function(attr,value){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style[attr]=value;
	};
	return this;
}

Base.prototype.html=function(str){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].innerHTML=str;
	};
	return this;
};

Base.prototype.click=function(fn){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].onclick=fn;
	};
	return this;
};
</span></span>

注意:为了区分节点获取和实现连缀所添加的方法,将节点的获取和方法分开。这时需要在Base这个基础对象的原型上添加方法。


三、总结

实现连缀可以帮助我们节省很多的时间,刚开始的时候,觉得挺新的,偶然想到了with...end with语句,突然一下子就觉得亲切了很多很多。所以将知识联系起来,找到共鸣,就可以让自己轻松很多很多。


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

数据结构(6)--栈的应用之中缀表达式求值

参考书籍:数据结构(C语言版) 严蔚敏 吴伟民编著 清华大学出版社 1.简要说明 分析:设操作符栈op栈    操作数栈num栈 op栈里不可能出现')',只可能有'+'、'-'、'*'、'/'、&...
  • u010366748
  • u010366748
  • 2016-02-20 12:19
  • 5140

HTML、CSS、JavaScript学习总结

间接转载地址:http://blog.csdn.net/Yuyork/article/details/43446699 HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内...
  • stpeace
  • stpeace
  • 2016-02-28 11:18
  • 2450

史上最全的javascript知识点总结,浅显易懂。

一,认识javascript 1-1 为什么学习JavaScript 一)、你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript。 2. 目...
  • qiushi_1990
  • qiushi_1990
  • 2014-10-19 10:03
  • 2906

JavaScript知识总结—cookie及其应用

一、cookie基本介绍     cookie是document的对象。cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据。cookie还...
  • fareise
  • fareise
  • 2016-04-28 23:01
  • 7147

【JavaScript 11—应用总结】:下拉菜单

导读:在web页面的显示中,总是免不了下拉菜单的设置。怎样将菜单设置的更好玩一点呢?这次,就将实现一个下拉菜单的制作。当鼠标移入的时候,菜单显示,鼠标移走,菜单关闭。 一、实现分析 首先,制作一个...
  • u013034889
  • u013034889
  • 2015-07-16 20:22
  • 1214

【JavaScript 12—应用总结】:弹出登录框

导读:上篇博客中,做好了个人中心的下拉菜单,这次,将做每个网站都会有的一个登录功能,以此类推,可以做出别的想要的弹出框,如错误提示啦,或者注册。 一、实现分析 首先:和下拉菜单一样,需要通过CSS...
  • u013034889
  • u013034889
  • 2015-07-17 16:21
  • 1129

【Web前端】慕课网—JavaScript进阶篇10-1编程挑战

前言慕课网链接 任务大体上已经实现了,切换内容那部分还可以优化一下,本人对于节点方面还很模糊,由于困了……还有强迫症,目前先这样写着,实现效果的说。如果有对于这部分有好的建议或者意见,欢迎留言,谢谢大...
  • gyjyywc
  • gyjyywc
  • 2016-11-22 01:44
  • 632

构建iPhone企业级应用—基于HTML, CSS 和JavaScript

  • 2015-06-30 09:11
  • 15.20MB
  • 下载

LeetCode1—10 JavaScript解法

leetcode1——10 javascript 解法
  • sinat_34320325
  • sinat_34320325
  • 2017-08-03 15:05
  • 97

iOS开发UI高级—10使用picker View控件完成一个简单的选餐应用

iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 一、实现效果   说明:点击随机按钮,能够自动选取,下...
  • gaojq_ios
  • gaojq_ios
  • 2015-06-07 16:10
  • 428
    个人资料
    • 访问:290482次
    • 积分:15248
    • 等级:
    • 排名:第873名
    • 原创:285篇
    • 转载:1篇
    • 译文:25篇
    • 评论:4625条
    联系方式
    QQ:1028335395
    邮箱:hehongxia626@163.com
    最新评论