javascript库概念与连缀
一、JavaScript 库
1.什么是javascript库：
javascript库，说白了，就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。
现如今有太多优秀的开源 JavaScript 库，比如：jQuery、Prototype、Dojo、Extjs 等等。这些 JavaScript 库已经把最常用的代码进行了有效的封装，以方便我们开发，从而提高效率。
2.创建基础库
base.js
/*函数式
function $(id) {
return document.getElementById(id);
}
*/ /*对象式*/
var Base = {
getId : function (id) {
return document.getElementById(id)
},
getName : function (name) {
return document.getElementsByName(name)
},
getTagName : function (tag) {
return document.getElementsByTagName(tag);
}
};
demo.js
/*
window.onload = function () {
alert(document.getElementById('box').innerHTML);
alert(document.getElementsByName('sex')[0].value);
alert(document.getElementsByTagName('p')[0].innerHTML);
};
window.onload = function () {
alert($('box').innerHTML);
}
*/
window.onload = function () {
alert(Base.getId('box').innerHTML);
alert(Base.getName('sex')[0].value);
alert(Base.getTagName('p')[0].innerHTML)
};
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>第34章 项目1-博客前端：理解JavaScript库</title>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/demo.js"></script>
</head>
<body>
<div id="box">id</div> <input type="radio" name="sex" value="男" checked="checked" /> <p>段落</p>
</body>
</html>
二、连缀
所谓连缀，最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作。比如：
$().getId('box').css('color', 'red').html('标题').click(function () {alert('a')});
连缀的好处，就是快速方便的设置节点的操作。
demo.js
/*
//alert(Base.getId('box'));
Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {
alert('a');
}).addClass('a'); Base是一个基础库的核心对象
Base.getId('box')返回的是一个divElement，这个对象是没有css方法的
将Base.getId('box')返回改成Base即可，返回Base对象
Base.getId('box').css('color','red')返回的也是Base对象
Base.getId('box').css('color','red').css('backgroundColor', 'black')还是返回的Base对象
Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox')也是返回的Base对象
Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {
alert('a');
}); click方法执行完毕之后，还是返回的Base对象 在Base对象中，添加css方法,html方法,click方法 var base = new Base();
base.getId('box').style.color = 'red';
base.getId('box').style.backgroundColor = 'black';
base.getId('box').innerHTML = 'pox';
base.getId('box').onclick = function () {
alert(this.innerHTML);
};
*/ window.onload = function () {
//alert(base.getId('box').elements.length);
$().getId('box').css('color', 'red').css('backgroundColor', 'black');
//alert(base.getTagName('p').elements.length);
$().getTagName('p').css('color', 'green').html('标题').click(function () {
alert('a');
}).css('backgroundColor', 'pink');
};
base.js
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;
};
}
//上面写法麻烦的地方是，需要在前台 new 出来，然后调用。但采用这种方式，
//我们可以在每个方法里在每个方法里都返回这个对象，并且还可以在对象的原型里添加
//方法，这些都是连缀操作最基本的要求。
//为了避免在前台 new 一个对象，我们可以在库里面直接 new。
var $ = function () {
return new Base();
}
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;
}
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>第34章 项目1-博客前端：理解JavaScript库</title>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/demo.js"></script>
</head>
<body>
<div id="box">box</div>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</body>
</html>
javascript库概念与连缀的更多相关文章
- 最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
- 流行的JavaScript库 ——jQuery
1.为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的 Web2.0 特性的富客 ...
- Libscore – 收集 JavaScript 库的使用数据
Libscore 扫描网络上成千上万的网站,收集统计 JavaScript 库的使用数据.在搜索框中,输入关键词,例如 jQuery, Modernizr, $.ui 或者 $.fn.fancybox ...
- 推荐15款制作 SVG 动画的 JavaScript 库
在当今时代,SVG是最流行的和正在被众多的设计人员和开发人员使用,创建支持视网膜和响应式的网页设计.绘制SVG不是一个艰巨的任务,因为大量的 JavaScript 库可与 SVG 图像搭配使用.这些J ...
- 推荐8个实现 SVG 动画的 JavaScript 库
SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何质量损失.除此之外,你可以让 SVG 灵活现一些动画效果.这篇文章就给大家推荐8个实现 SVG 动画的 JavaSc ...
- AntiModerate – 渐进式图片加载的 JavaScript 库
AntiModerate 是一个渐进式图片加载的 JavaScript 库.我们多数看到的图片显示模式,都是从上到下逐渐显示的,这是“标准式”图像:而有的图片是先出现一个很低分辨率的图像轮廓,类似加了 ...
- 创建你的第一个JavaScript库
是否曾对Mootools的魔力感到惊奇?是否有想知道Dojo如何做到那样的?是否对jQuery感到好奇?在这个教程中,我们将了解它们背后的东西并且动手创建一个超级简单的你最喜欢的库. 我们其乎每天都在 ...
- 加速编码的 JavaScript 库和工具
JavaScript库是 一个提前写好的JavaScript文件库,它可以很容易的开发基于JavaScript的应用,特别是AJAX和一些其它的以web为中心的技术.运用JavaScript最基本的方 ...
- 推荐几款制作网页滚动动画的 JavaScript 库
这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...
随机推荐
- iOS交互h5— JavaScriptCore ---UIWebview
JavaScriptCore这个框架,从而让web页面和本地原生应用交互起来非常方便,而且使用此框架可以做到Android那边和iOS相对统一, web前端 在三端交互中,web前端开发人员来定义,让 ...
- C# 实现寻峰算法的简单优化（包含边峰，最小峰值，峰距）
核心寻峰算法的原理参考Ronny,链接:投影曲线的波峰查找, C#翻译原理代码参考sowhat4999,链接:C#翻译Matlab中findpeaks方法 前人种树,后人乘凉.感谢原作者详细的解释 ...
- BAT技术需求，你能达到多少？
作为中国互联网界的传奇和标杆企业,BAT 三家公司的一举一动受互联网人的精密亲密关注.进入 BAT 成为大厂的一员成了许多互联网人职业生活生存追逐的方针之一. 本文的作者作为一个非科班毕业,出身于三流 ...
- IntelliJ IDEA 使用经验总结
一. 准备工作 1. 点击此下载 IntelliJ IDEA 开发工具 二. 注册 1. 修改 C:\Windows\System32\drivers\etc\hosts ,在末尾添加 0.0.0 ...
- Spring学习手札（二）面向切面编程AOP
AOP理解 Aspect Oriented Program面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术. 但是,这种说法有些片面,因为在软件工程中,AOP的价值体现的并 ...
- 分布式理论基础（一）一致性及解决一致性的两种方式：2PC和3PC （转载 不错）
分布式理论基础(一)一致性及解决一致性的两种方式:2PC和3PC 1 一致性 1.1 简述 一致性,是指对每个节点一个数据的更新,整个集群都知道更新,并且是一致的 假设一个具有N个节点的分布式系统,当 ...
- 【学习笔记】--- 老男孩学Python，day8 知识点补充 join，列表不能循环删除，深浅copy
1. 补充基础数据类型的相关知识点 1. str. join() 把列表变成字符串 2. 列表不能再循环的时候删除. 因为索引会跟着改变 3. 字典也不能直接循环删除. 把要删除的内容记录在列表中. ...
- ASP.NET MVC 简单分页代码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- Django基础十之Form和ModelForm组件
一 Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户 ...
- 用Struts2实现列表显示和分页功能
引用自http://www.2cto.com/kf/201309/243730.html BlogDAO.java文件 /** 根据条件(默认一张表所有数据)返回多条记录 */ public List ...