一、JavaScript 库

1.什么是javascript库：

javascript库，说白了，就是把各种常用的代码片段，组织起来放在一个 js 文件里，组成一个包，这个包就是 JavaScript 库。
现如今有太多优秀的开源 JavaScript 库，比如：jQuery、Prototype、Dojo、Extjs 等等。这些 JavaScript 库已经把最常用的代码进行了有效的封装，以方便我们开发，从而提高效率。

2.创建基础库

base.js

  1. /*函数式
  2. function $(id) {
  3.     return document.getElementById(id);
  4. }
  5. */
  6.  
  7. /*对象式*/
  8. var Base = {
  9.     getId : function (id) {
  10.         return document.getElementById(id)
  11.     },
  12.     getName : function (name) {
  13.         return document.getElementsByName(name)
  14.     },
  15.     getTagName : function (tag) {
  16.         return document.getElementsByTagName(tag);
  17.     }
  18. };

demo.js

  1. /*
  2. window.onload = function () {
  3.     alert(document.getElementById('box').innerHTML);
  4.     alert(document.getElementsByName('sex')[0].value);
  5.     alert(document.getElementsByTagName('p')[0].innerHTML);
  6. };
  7. window.onload = function () {
  8.     alert($('box').innerHTML);
  9. }
  10. */
  11. window.onload = function () {
  12.     alert(Base.getId('box').innerHTML);
  13.     alert(Base.getName('sex')[0].value);
  14.     alert(Base.getTagName('p')[0].innerHTML)
  15. };

demo.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>第34章 项目1-博客前端：理解JavaScript库</title>
  6. <script type="text/javascript" src="../js/base.js"></script>
  7. <script type="text/javascript" src="../js/demo.js"></script>
  8. </head>
  9. <body>
  10.     <div id="box">id</div>
  11.  
  12.     <input type="radio" name="sex" value="男" checked="checked" />
  13.  
  14.     <p>段落</p>
  15. </body>
  16. </html>

二、连缀

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

  1. $().getId('box').css('color', 'red').html('标题').click(function () {alert('a')});

连缀的好处，就是快速方便的设置节点的操作。

demo.js

  1. /*
  2.     //alert(Base.getId('box'));
  3.     Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {
  4.         alert('a');
  5.     }).addClass('a');
  6.  
  7.     Base是一个基础库的核心对象
  8.     Base.getId('box')返回的是一个divElement，这个对象是没有css方法的
  9.     将Base.getId('box')返回改成Base即可，返回Base对象
  10.     Base.getId('box').css('color','red')返回的也是Base对象
  11.     Base.getId('box').css('color','red').css('backgroundColor', 'black')还是返回的Base对象
  12.     Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox')也是返回的Base对象
  13.     Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {
  14.         alert('a');
  15.     }); click方法执行完毕之后，还是返回的Base对象
  16.  
  17.     在Base对象中，添加css方法,html方法,click方法
  18.  
  19.     var base = new Base();
  20.     base.getId('box').style.color = 'red';
  21.     base.getId('box').style.backgroundColor = 'black';
  22.     base.getId('box').innerHTML = 'pox';
  23.     base.getId('box').onclick = function () {
  24.         alert(this.innerHTML);
  25.     };
  26. */
  27.  
  28. window.onload = function () {
  29.     //alert(base.getId('box').elements.length);
  30.     $().getId('box').css('color', 'red').css('backgroundColor', 'black');
  31.     //alert(base.getTagName('p').elements.length);
  32.     $().getTagName('p').css('color', 'green').html('标题').click(function () {
  33.         alert('a');
  34.     }).css('backgroundColor', 'pink');
  35. };

base.js

  1. function Base() {
  2.  
  3.     //创建一个数组，来保存获取的节点和节点数组
  4.     this.elements = [];
  5.  
  6.     //获取ID节点
  7.     this.getId = function (id) {
  8.         this.elements.push(document.getElementById(id));
  9.         return this;
  10.     };
  11.  
  12.     //获取元素节点
  13.     this.getTagName = function (tag) {
  14.         var tags = document.getElementsByTagName(tag);
  15.         for (var i = 0; i < tags.length; i ++) {
  16.             this.elements.push(tags[i]);
  17.         }
  18.         return this;
  19.     };
  20.  
  21. }
  22. //上面写法麻烦的地方是，需要在前台 new 出来，然后调用。但采用这种方式，
  23. //我们可以在每个方法里在每个方法里都返回这个对象，并且还可以在对象的原型里添加
  24. //方法，这些都是连缀操作最基本的要求。
  25.  
  26. //为了避免在前台 new 一个对象，我们可以在库里面直接 new。
  27. var $ = function () {
  28.     return new Base();
  29. }
  30. Base.prototype.css = function (attr, value) {
  31.     for (var i = 0; i < this.elements.length; i ++) {
  32.         this.elements[i].style[attr] = value;
  33.     }
  34.     return this;
  35. }
  36.  
  37. Base.prototype.html = function (str) {
  38.     for (var i = 0; i < this.elements.length; i ++) {
  39.         this.elements[i].innerHTML = str;
  40.     }
  41.     return this;
  42. }
  43.  
  44. Base.prototype.click = function (fn) {
  45.     for (var i = 0; i < this.elements.length; i ++) {
  46.         this.elements[i].onclick = fn;
  47.     }
  48.     return this;
  49. }

demo.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>第34章 项目1-博客前端：理解JavaScript库</title>
  6. <script type="text/javascript" src="../js/base.js"></script>
  7. <script type="text/javascript" src="../js/demo.js"></script>
  8. </head>
  9. <body>
  10.     <div id="box">box</div>
  11.     <p>段落</p>
  12.     <p>段落</p>
  13.     <p>段落</p>
  14. </body>
  15. </html>

javascript库概念与连缀的更多相关文章

  1. 最新的jQuery插件和JavaScript库

    每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...

  2. 流行的JavaScript库 ——jQuery

    1.为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的 Web2.0 特性的富客 ...

  3. Libscore – 收集 JavaScript 库的使用数据

    Libscore 扫描网络上成千上万的网站,收集统计 JavaScript 库的使用数据.在搜索框中,输入关键词,例如 jQuery, Modernizr, $.ui 或者 $.fn.fancybox ...

  4. 推荐15款制作 SVG 动画的 JavaScript 库

    在当今时代,SVG是最流行的和正在被众多的设计人员和开发人员使用,创建支持视网膜和响应式的网页设计.绘制SVG不是一个艰巨的任务,因为大量的 JavaScript 库可与 SVG 图像搭配使用.这些J ...

  5. 推荐8个实现 SVG 动画的 JavaScript 库

    SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何质量损失.除此之外,你可以让 SVG 灵活现一些动画效果.这篇文章就给大家推荐8个实现 SVG 动画的 JavaSc ...

  6. AntiModerate – 渐进式图片加载的 JavaScript 库

    AntiModerate 是一个渐进式图片加载的 JavaScript 库.我们多数看到的图片显示模式,都是从上到下逐渐显示的,这是“标准式”图像:而有的图片是先出现一个很低分辨率的图像轮廓,类似加了 ...

  7. 创建你的第一个JavaScript库

    是否曾对Mootools的魔力感到惊奇?是否有想知道Dojo如何做到那样的?是否对jQuery感到好奇?在这个教程中,我们将了解它们背后的东西并且动手创建一个超级简单的你最喜欢的库. 我们其乎每天都在 ...

  8. 加速编码的 JavaScript 库和工具

    JavaScript库是 一个提前写好的JavaScript文件库,它可以很容易的开发基于JavaScript的应用,特别是AJAX和一些其它的以web为中心的技术.运用JavaScript最基本的方 ...

  9. 推荐几款制作网页滚动动画的 JavaScript 库

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

随机推荐

  1. [javaSE] 并发编程（线程间通信）

    新建一个资源类Resource 定义成员变量String name 定义成员变量int age 新建一个输入类Input,实现Runnable接口 定义一个构造方法Input(),传入参数:Resou ...

  2. 三：vim常用快捷键

    窗口移动操作: j或者Ctrl+e(就是Ctrl+e):向下细微滚动窗口. k或者Ctrl+y:向上细微滚动窗口. h:向左细微滚动窗口. l:向右细微滚动窗口. gg:跳转到页面的顶部. G(就是s ...

  3. 【原】Redis实现生成自增流水号

    场景: 公司内部有个业务场景是后台审核之后需要生成一个流水号,规则是: 201807280001,201807280002,201807280003,后面四位依次递增,前面年月日取当前时间并且转换成y ...

  4. 设计模式学习——抽象工厂模式（Abstract Factory Pattern）

    现有一批装备(产品),分为不同的部位(上装.下装)与不同的等级(lv1.lv2).又有不同lv的工厂,只生产对应lv的全套装备. 代码实现上...本次写得比较偷懒,函数实现都写在头文件了.... 有些 ...

  5. hallo world

  6. spring shiro 集成

    1.向spring项目中添加shiro相关的依赖 <dependency> <groupId>commons-logging</groupId> <artif ...

  7. apache ftp server的简单入门(java应用内嵌ftp server)

    Apache Ftp Server:(强调) Apache Ftp Server 是100%纯Java的FTP服务器软件,它采用MINA网络框架开发具有非常好的性能.Apache FtpServer ...

  8. 深入理解abstract class和interface

    摘自:http://www.ibm.com/developerworks/cn/java/l-javainterface-abstract/ (如有侵权,请留言,版主将立即删除) abstract c ...

  9. 使用ember-cli脚手架快速构建项目

    步骤: 安装Ember. 创建一个新应用程序. 定义路由. 编写一个UI组件. 构建您的应用程序以部署到生产环境. 安装Ember 您可以使用npm(Node.js包管理器,你需要安装node.js) ...

  10. LeetCode题解之Add two numbers

    1.题目描述 2.题目描述 题目思路可以参考合并单链表的思路,定义一个全局 进位标志,如果两个数值相加得到需要进位,则将进位标志置为1 . 3.代码 ListNode* addTwoNumbers(L ...