Prototype以及jQuery和CDN -内容分发网络在使用JavaScript实战运用

简介: Prototype以及jQuery和CDN -内容分发网络在使用JavaScript实战运用

@[toc]

使用Prototype

在这里插入图片描述

引用 Prototype

要测试JavaScript库,需要在web页面中引用它。
要引用库,请使用<script>标记,并将SRC属性设置为库的URL:

Prototype提供了使HTML DOM编程更容易的函数。
与jQuery类似,prototype也有自己的$()函数。
$()函数接受HTML DOM元素的ID值(或DOM元素),并向DOM对象添加新函数。
与jQuery不同,prototype不会替换onload()的ready()方法。

相反,prototype为浏览器和HTML DOM添加了扩展。
在JavaScript中,可以指定一个函数来处理窗口加载事件:

function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello Prototype";
}
onload=myFunction;

Prototype 方式:

function myFunction()
{
    $("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);

引用jQuery

要测试JavaScript库,需要在web页面中引用它。
要引用库,请使用<script>标记,并将SRC属性设置为库的URL:

主要的jQuery函数是$()函数(jQuery函数)。如果将DOM对象传递给此函数,它将返回一个添加了jQuery函数的jQuery对象。
JQuery允许通过CSS选择器选择元素。
在JavaScript中,可以指定一个函数来处理窗口加载事件:

function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
}
onload=myFunction;
function myFunction()
{
    $("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

其他框架

YUI-雅虎用户界面框架涵盖了大量函数库,从简单的JavaScript函数到完整的Internet小部件。
ExtJS-用于构建富互联网应用程序的可定制小部件。
Dojo-用于DOM操作、事件、小部件等的工具包。
script.aculo。美国-用于视觉效果和界面行为的开源JavaScript框架。
Uize-小部件、AJAX、DOM、模板等。

CDN -内容分发网络

如果许多不同的网站使用相同的JavaScript框架,那么将框架清单放在每个页面共享的公共位置是有意义的。
CDN(内容交付网络)解决了这个问题。CDN是包含可共享代码库的服务器网络。
国内免费CDN资源包括:

<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js">
</script>

使用框架

在决定为web页面使用JavaScript框架之前,最好先测试框架。
JavaScript框架易于测试。不需要在计算机上安装它们,也没有安装程序。
通常,只需要从网页中引用库文件。

JavaScript 创建Cookie

JavaScript可以使用文档Cookie属性来创建、读取和删除Cookie。
在JavaScript中,按如下方式创建cookie:

document.cookie="username=John Doe";

还可以在cookie中添加过期时间(UTC或GMT)。默认情况下,浏览器关闭时会删除Cookie:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

使用路径参数告诉浏览器cookie的路径。默认情况下,Cookie属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

Cookie 字符串

文件cookie属性看起来像普通的文本字符串,但实际上不是。
即使在文档中,完整的cookie字符串也会写入cookie中。重新读取cookie信息时,cookie信息以名称/值对的形式显示。
如果设置了新的cookie,则不会覆盖旧cookie。新的cookie将添加到文档cookie中,因此如果重新阅读文档。cookie,将获得以下数据:

cookie1=value; cookie2=value;

获取 cookie 值的函数

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

cookie名称的参数是CNAME。
创建文本变量以检索指定的Cookie:CNAME+“=”。
使用分号拆分文档Cookie字符串,并将拆分字符串数组分配给Ca(Ca=document.Cookie.split(“;”)。
循环CA数组(I=0;I<CA.length;I++),然后读取数组中的每个值,并删除前后的空格(C=CA[I].Trim())。
如果找到cookie(c.indexof(name)==0),则返回cookie的值(c.substring(name.Length,c.Length)。
如果未找到cookie,请返回“”。

相关文章
|
1月前
|
JSON JavaScript 前端开发
基于 JavaScript 的网络请求工具库 axios 的使用介绍
基于 JavaScript 的网络请求工具库 axios 的使用介绍
53 3
|
2月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
19 0
|
3月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
36 0
|
3月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
3天前
|
边缘计算 缓存 网络协议
内容分发网络CDN
阿里云内容分发网络CDN(Content Delivery Network)是建立并覆盖在承载网之上,由遍布全球的边缘节点服务器群组成的分布式网络
15 2
|
26天前
|
JavaScript 前端开发 网络协议
轻松搭建远程Node.js服务端,让你的应用在公共网络中畅行无阻!
Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation(原为 Node.js Foundation,已与 JS Foundation 合并)持有和维护,亦为 Linux 基金会的项目。Node.js 采用 Google 开发的 V8 运行代码,使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能,可优化应用程序的传输量和规模。这些技术通常用于资料密集的即时应用程序。
|
28天前
|
边缘计算 网络协议 网络安全
【网络安全 | 信息收集】CDN的判断与绕过、nslookup基本使用
【网络安全 | 信息收集】CDN的判断与绕过、nslookup基本使用
35 0
|
2月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
16 0
|
2月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
17 0
|
2月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
14 0

相关产品

  • 云迁移中心