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,请返回“”。

相关文章
|
缓存 应用服务中间件 nginx
Web服务器的缓存机制与内容分发网络(CDN)
【8月更文第28天】随着互联网应用的发展,用户对网站响应速度的要求越来越高。为了提升用户体验,Web服务器通常会采用多种技术手段来优化页面加载速度,其中最重要的两种技术就是缓存机制和内容分发网络(CDN)。本文将深入探讨这两种技术的工作原理及其实现方法,并通过具体的代码示例加以说明。
1287 1
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
234 1
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
缓存 边缘计算 网络协议
深入解析CDN技术:加速互联网内容分发的幕后英雄
内容分发网络(CDN)是现代互联网架构的重要组成部分,通过全球分布的服务器节点,加速网站、应用和多媒体内容的传递。它不仅提升了访问速度和用户体验,还减轻了源站服务器的负担。CDN的核心技术包括缓存机制、动态加速、流媒体加速和安全防护,广泛应用于静态资源、动态内容、视频直播及大文件下载等场景,具有低延迟、高带宽、稳定性强等优势,有效降低成本并保障安全。
2804 4
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
756 14
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
429 3
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
195 1
|
存储 缓存 负载均衡
什么是CDN(内容分发网络)?
什么是CDN(内容分发网络)?
10852 7
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
311 2
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
394 0