JS_08_库_JQuery_Prototype



JavaScript 


JavaScript 库 - jQuery、PrototypeMooTools


JavaScript 框架(库)

JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。

为了应对这些调整,许多的 JavaScript (helper) 库应运而生。

这些 JavaScript 库常被称为 JavaScript 框架

在本教程中,我们将了解到一些广受欢迎的 JavaScript 框架:

  • jQuery  (v3.3.1)
  • Prototype (v1.7.3)
  • MooTools (v1.6)

所有这些框架都提供针对常见 JavaScript 任务的函数,包括 动画、DOM 操作以及 Ajax 处理


jQuery

jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器 来 访问 和 操作 网页上的 HTML 元素(DOM 对象)。


jQuery 同时提供 companion UI(用户界面)和插件。

许多大公司在网站上使用 jQuery:

  • Google
  • Microsoft
  • IBM
  • Netflix (在线影视租赁)


Prototype

Prototype 也是一种库,它提供用于执行 常见 web 任务的简单 API。

所谓的API 是应用程序编程接口(Application Programming Interface)的缩写。

它是包含 属性和方法 的库,用于操作 HTML DOM。

Prototype 通过提供 类和继承,实现了对 JavaScript 的增强。

提示:Prototype 框架最大的部分就是 对DOM的扩展

通过Prototype框架里的$()函数能够返回一个网页DOM元素,框架给这个元素 添加了很多方便的方法。


MooTools

MooTools 它也是一个框架,提供了可使常见的 JavaScript 编程更为简单的 API。

MooTools 也含有一些轻量级的 效果和动画 函数。

提示:虽然Mootools跟Prototype几乎拥有一样的语法,

但是MooTools它提供了比Prototype多的功能,而且更加强大,拥有非常实用且清晰的 文档和示例 帮助你轻松入门。


其他框架

下面是其他一些在上面未涉及的框架:

YUI (v3.18.1)- Yahoo! User Interface Framework,涵盖大量函数的大型库,从简单的 JavaScript 功能到完整的 internet widget。

Ext JS (v6.5)- 可定制的 widget,用于构建 因特网应用程序(rich Internet applications)。

Dojo (v1.13)- 用于 DOM 操作、事件、widget 等的工具包。

script.aculo.us - 开源的 JavaScript 框架,针对 可视效果和界面行为。没听说过~

UIZE - Widget、AJAX、DOM、模板等等。没听说过~


CDN -内容分发网络

您总是希望网页可以尽可能地快。您希望页面的容量尽可能地小,同时您希望浏览器尽可能多地进行缓存。

如果许多不同的网站使用相同的 JavaScript 框架,那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。

CDN (Content Delivery Network) 解决了这个问题。

CDN 是包含可分享代码库的服务器网络。

Google 为一系列 JavaScript 库提供了免费的 CDN,包括:

  • jQuery
  • Prototype
  • MooTools
  • Dojo
  • Yahoo! YUI

但是由于 Google 由于某些原因,经常访问不稳定,

所以建议使用百度静态资源公共库:http://cdn.code.baidu.com/

如需在您的网页中使用 JavaScript 框架库,只需在 <script> 标签中引用该库即可:


引用 jQuery

<script src="http://apps.bdimg.com/libs/jquery/ 2.1.4 /jquery.min.js"> 
</script>


使用框架

在您决定为网页使用 JavaScript 框架之前,首先对框架进行测试是明智的。

JavaScript 框架很容易进行测试。您无需在计算机上安装它们,同时也没有安装程序。

通常您只需从网页中引用一个库文件。

在本教程的下一章,我们会为您完整地讲解 jQuery 的测试过程。




JavaScript - 测试 jQuery v2.1.4


测试 JavaScript 框架库 - jQuery v2.1.4


引用 jQuery

如需测试 JavaScript 库,您需要在网页中引用它。

为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:

引用 jQuery

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/ 2.1.4 /jquery.min.js" >
</script>
</head>
<body>
</body>
</html>


jQuery 描述

主要的 jQuery 函数是 $() 函数(jQuery 函数)。

如果您向该函数传递 DOM 对象,它会返回 jQuery 对象,带有向其添加的 jQuery 功能。

jQuery 允许您通过 CSS 选择器来选取元素。

在 JavaScript 中,您可以分配一个函数以处理窗口加载事件:

JavaScript 方式:

function myFunction()
{
var obj=document.getElementById("id_p_result");
obj.innerHTML="Hello Beyond";
}
window.οnlοad=myFunction;

等价的 jQuery 是不同的:  执行时机也是不同的

jQuery 方式:

function myFunction()
{
$("#id_p_result").html("Hello Beyond~");
}
$(document).ready(myFunction);

上面代码的最后一行,HTML DOM 文档对象被传递到 jQuery :$(document)

当您向 jQuery的参数 传递一个 DOM 对象时,jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象

jQuery 函数会返回新的 jQuery 对象,其中的 ready() 是一个jQuery对象的方法。

由于在 JavaScript 中函数就是变量,因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

lampjQuery 返回 jQuery 对象,与已传递的 DOM 对象不同。
jQuery 对象拥有自己的属性和方法,与 DOM 对象拥有的是不同的。
您不能在 jQuery 对象 上使用 HTML DOM 的属性和方法。


测试 jQuery

请试一下下面这个例子:

核心代码:

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>


    <!-- 引入jQuery 2.1.4 -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p class="sgcenter" id="id_p_result">anohana</p>
        <script type="text/javascript">
            $(document).ready(onDocumentReady);
            // 定义函数
            function onDocumentReady() {
                // 根据一个id返回一个jQuery对象,并调用jQuery对象的html方法
                $("#id_p_result").html("Hello Beyond~");
            }
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>使用jQuery2.1.4
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>  

效果如下:



请再试一下这个例子:

核心代码:

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>


    <!-- 引入jQuery 2.1.4 -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p class="sgcenter" id="id_p_result">anohana</p>
        <script type="text/javascript">
            $(document).ready(onDocumentReady);
            // 定义函数
            function onDocumentReady() {
                // 根据一个id返回一个jQuery对象,并调用jQuery对象的attr方法
                // 参数1是dom对象的 属性名;参数2是类似css中的属性值
                $("#id_p_result").attr("style","color:teal;font-style:italic;").html("hello beyond~");
            }
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>使用jQuery2.1.4
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>  

效果如下:


正如您在上面的例子中看到的,jQuery 允许链接(链式语法)。

链接(Chaining)是一种在同一对象上执行多个任务的便捷方法。

需要学习更多内容吗?敬请期待beyond接下来为您提供了非常棒的 jQuery 教程

 $(document).ready()和window.onload在表面上看都是页面加载时我们就去执行一个函数或动作,

但是在具体的细节上$(document) ready()和window onload还是有区别的。

最基本的区别
1.执行时间
   window.onload 必须等到页面内包括图片的 所有元素加载完毕后才能执行。 
   $(document).ready()DOM结构绘制完毕后就执行,不必等到加载完毕。

2.编写个数不同
  window.onload 不能同时编写多个,如果有多个window.onload方法, 只会执行一个 
  $(document).ready()可以同时编写多个,并且都可以得到执行

3.简化写法
  window.onload 没有简化写法 
  $(document).ready(function(){})可以简写成$(function(){});

  $(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别的。

window.onload方法是在网页中所有的元素(包括元素的关联文件)完全加载到浏览器后才执行,即JavaScript此时才可以访问网页中的任何元素。

而通过jQuery中的$(document).ready()方法注册的事件处理程序,可以在DOM完全就绪时就可以被调用。此时,网页的所有元素对jQuery而言都是可以访问的,但是,这并不意味着这些元素关联的文件都已经下载完毕。



  举一个例子,有一个大型的图库网站,为网页中所有图片添加某些行为,例如单击图片后让它隐藏或显示。如果使用window.onload方法来处理,那么用户必须等到每一幅图片都加载完毕后,才可以进行操作。

如果使用jQuery中的$(document).ready()方法来进行设置,只要DOM就绪时就可以操作了,不需要等待所有图片下载完毕。很显然,把网页解析为DOM树的速度比把网页中的所有关联文件加载完毕的速度快很多。



  另外需要注意一点,由于在$(document).ready()方法内注册的事件,只要DOM就绪就会立马执行,因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕,并且已经解析为DOM树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。


要解决这个问题,可以使用JQuery中另一个关于页面加载的方法——load()方法

load()方法会在元素的onload事件中绑定一个处理函数。

如果处理函数绑定给window对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,

如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

         $(window).load(function(){  } )  等价于js中的   window.οnlοad=funciton(){  }

JavaScript - 测试 Prototype


测试 JavaScript 框架库 - Prototype


引用 Prototype v1.7.3

如需测试 JavaScript 库,您需要在网页中引用它。

为了引用某个库,请使用 <script> 标签,其 src 属性设置为库的 URL:

引用 Prototype

<!DOCTYPE html> 
<html> 
<head> 
<script 
src="http://apps.bdimg.com/libs/prototype/ 1.7.1.0 /prototype.js"> 
</script> 
</head> 
<body> 
</body> 
</html>


Prototype 描述

Prototype 提供的函数可使 HTML DOM 编程更容易。

与 jQuery 类似,Prototype 也有自己的 $() 函数

$() 函数接受 HTML DOM 元素的 id 值(或 DOM 元素),并会向 DOM 对象添加新的功能。

与 jQuery 不同,Prototype 没有用以取代 window.onload() 的 ready() 方法。

相反,Prototype 会向浏览器及 HTML DOM 添加扩展。


在 JavaScript 中,您可以分配一个函数以处理窗口加载事件:

JavaScript 方式:

function myFunction() 

var obj=document.getElementById("id_p_result"); 
obj.innerHTML="Hello Beyond"; 

window.οnlοad=myFunction;

等价的 Prototype 是不同的:

Prototype 方式:

function myFunction() 

$("id_p_result").insert("Hello Beyond!"); 

Event.observe(window,"load",myFunction);

Event.observe() 接受三个参数:

  • 您希望处理的 HTML DOM 或 BOM(浏览器对象模型)对象
  • 您希望处理的事件
  • 您希望调用的函数

测试 Prototype

请试一下下面这个例子:

核心代码:

<!DOCTYPE html> 
<html> 
<script 
src="http://apps.bdimg.com/libs/prototype/ 1.7.1.0 /prototype.js"> 
</script> 
<script> 
function myFunction() 

$("h01").insert("Hello Prototype!"); 

Event.observe(window,"load",myFunction); 
</script> 
</head> 
<body> 
<h1 id="h01"></h1> 
</body> 
</html>

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">
    <script type="text/javascript" src="nslog.js"></script>

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>


    <!-- 引入prototype 1.7.1.0 -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js">
    </script>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p class="sgcenter" id="id_p_result">anohana</p>
        <script type="text/javascript">
            // 注册事件,
            // 参数1,window对象;参数2:事件名;参数3:处理函数名
            Event.observe(window,"load",onWindowLoad);
            // 定义函数
            function onWindowLoad() {
                // 参数是id,返回一个prototype框架的对象
                // 调用prototype对象的insert方法追加
                $("id_p_result").writeAttribute("style","color:teal;font-style:italic;").insert(",hello beyond~");
            }
        </script>
        
        <p class="sgcenter">
            <b>注意:</b>使用prototype 1.7.1.0
        </p>
        
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>  

效果如下:


请再试一下这个例子:

Example

<!DOCTYPE html> 
<html> 
<script 
src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"> 
</script> 
<script> 
function myFunction() 

$("h01").writeAttribute("style","color:red").insert("Hello Prototype!"); 

Event.observe(window,"load",myFunction); 
</script> 
</head> 
<body> 
<h1 id="h01"></h1> 
</body> 
</html>

正如您在上面的例子中看到的,与 jQuery 相同,Prototype 允许链式语法

链接(Chaining)是一种在同一对象上执行多个任务的便捷方法。

现在您已经学习了 JavaScript, 接下来该学习什么呢?


JavaScript 总结

本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强。

你已经学习了如何创建对 事件的响应验证表单,以及如何根据不同的情况运行不同的脚本。

你也学到了如何创建和使用对象,以及如何使用 JavaScript 的内置对象。

提示:向网页中添加 JavaScript的三种方式为:

1)使用<script></script>标签内部样式;

2)使用外部js文件;

3)直接在HTML标签中的行内样式。


现在已经你已经学习了 JavaScript,接下来该学习什么呢?

下一步应该学习 HTML DOM , jQuery, Ajax。


HTML DOM

HTML DOM 定义了访问和操作 HTML 文档的标准方法。 

HTML DOM 独立于平台和语言,可被任何编程语言使用,比如 Java、JavaScript 和 VBscript。 


jQuery


AJAX

AJAX = 异步 JavaScript 和 XML。

AJAX 不是一种新的编程语言,而是一种使用现有标准的新方法。

通过与服务器进行数据交换,AJAX 可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

推荐做实JavaScript实例练习之后,继续学习HTML_DOM教程,JQuery,AJAX,Bootstrap教程,

ECMAScript6,框架Vue,Angular,React,Node,然后是PHP,MYSQL,Java,Perl教程

未完待续,下一章节,つづく



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值