JS_08_库_JQuery

JavaScript 库

JavaScript 库 - jQuery、Prototype、MooTools。

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 方法。

	jQuery 返回 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教程

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

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

OSI七层模型详解
本文转载于该博址：http://blog.csdn.net/yaopeng_2005/article/details/7064869OSI 七层模型通过七个层次化的结构模型使不同的系统不同的网络之间实现可靠的通讯，因此其最主要的功能就是帮助不同类型的主机实现数据传输。完成中继功能的节点通常称为中继系统。在OSI七层模型…...
2024/4/21 16:52:00
埋线双眼皮眼皮不平整
...
2024/4/21 16:51:59
埋线双眼皮炎冰敷
...
2024/4/21 16:51:58
angular中模板
<!DOCTYPE html><html lang"en" ng-app"myApp"><head> <meta charset"UTF-8"> <script src"js/angular.js"></script> <title>Title</title></hea…...
2024/5/6 5:43:36
埋线双眼皮需要抽脂么
...
2024/4/21 16:51:56
埋线双眼皮下眼圈很肿
...
2024/5/5 18:48:00
埋线双眼皮五天照片
...
2024/4/21 16:51:54
埋线埋线双眼皮术后淤青
...
2024/4/21 16:51:53
Angular Compiler was detected but it was an instance of the wrong class.
Angular编译出现错误：原因： 由于是安装了几个不同版本的ngtools/webpack包所以出现些错误。解决： 1、在文件夹中删除相应报错的包。 2、第一种不行用“cnpm ls ngtools/webpack”再安装一下。...
2024/4/21 16:51:52
埋线双眼皮术后冰敷
...
2024/4/21 16:51:52
埋线双眼皮时间久了会怎样
...
2024/4/21 16:51:50
解决ios键盘弹出input框失效问题
document.body.addEventListener(focusout, function () { window.scrollTo(0, 0); })...
2024/4/21 16:51:49
input 框换背景色
设计需求 input框要求是透明的颜色 input 输入框设置背景色直接使用background就可以，但是失去焦点的时候会变成黄色设计图方法一使用阴影仅对非透明的纯色背景有效，设置成自己想要的背景颜色即可 input:-webkit-autofill{-webkit-box-shadow…...
2024/4/28 2:28:20
埋线双眼皮十天拆线
...
2024/4/21 16:51:47
软件源代码静态分析工具(Klocwork Insight)
业界发明了程序静态分析（Program Static Analysis）技术，静态分析是指在不运行代码的方式下，通过词法分析、语法分析、控制流分析等技术对程序代码进行扫描，验证代码是否满足规范性、安全性、可靠性、可维护性等指标的一种代码分析技术。它可以帮助软件开发人员、质量保证人…...
2024/5/3 15:34:15
埋线双眼皮伤害大吗
...
2024/4/21 16:51:45
埋线双眼皮全切埋线双眼皮三次了
...
2024/5/5 9:40:21
埋线双眼皮前后注意
...
2024/5/5 9:56:44
AngularJS 数据绑定
1、数据->模板数据到表现的绑定，主要是使用模板标记直接完成的： <p>{{ w }} x{{ h }}</p> 使用 {{ }}这个标记，就可以直接引用，并绑定一个作用域内的变量。在实现上， ng 自动创建了一个 watcher。效果…...
2024/4/20 14:12:34
埋线双眼皮能做全切
...
2024/5/5 7:54:47

JS_08_库_JQuery_Prototype

JavaScript 库

JavaScript 框架（库）

jQuery

Prototype

MooTools

其他框架

CDN -内容分发网络

引用 jQuery

使用框架

JavaScript - 测试 jQuery v2.1.4

引用 jQuery

引用 jQuery

jQuery 描述

JavaScript 方式：

jQuery 方式：

测试 jQuery

核心代码:

核心代码:

JavaScript - 测试 Prototype

引用 Prototype v1.7.3

引用 Prototype

Prototype 描述

JavaScript 方式：

Prototype 方式：

测试 Prototype

核心代码:

Example

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

JavaScript 总结

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

相关文章

最新文章

JS_08_库_JQuery_Prototype

JavaScript 库

JavaScript 框架（库）

jQuery

Prototype

MooTools

其他框架

CDN -内容分发网络

引用 jQuery

使用框架

JavaScript - 测试 jQuery v2.1.4

引用 jQuery

引用 jQuery

jQuery 描述

JavaScript 方式：

jQuery 方式：

测试 jQuery

核心代码:

核心代码:

JavaScript - 测试 Prototype

引用 Prototype v1.7.3

引用 Prototype

Prototype 描述

JavaScript 方式：

Prototype 方式：

测试 Prototype

核心代码:

Example

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

JavaScript 总结

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

相关文章

最新文章

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