如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在所有可用于创建web应用程序的语言中，JavaScript可能是最健壮的库和框架选择。事实上，有太多的东西，很难弄清楚该用哪一个，尤其是当你刚刚开始的时候。
JavaScript库和框架之间的关键区别在于，库由应用程序可以调用的函数组成，用于执行任务，而框架定义了开发人员如何设计应用程序。换句话说，框架调用应用程序代码，而不是反过来。当然，开发人员仍然需要库来使用JavaScript完成web上的基本任务。
JavaScript Libraries
1. D3.js
许多现代网站都是数据驱动的。例如，新闻站点必须不断刷新它们的内容，因此不可能每隔几秒钟重新配置设置以支持这些更改。数据驱动文档，或D3。库的独特之处在于它把数据放在首位。下面的截屏显示了在D3中可以找到的许多数据演示中的一些。
单击visual index中的一个条目，您将看到一个详细页面，在这个页面中您可以看到数据表示的完整视图(如下所示)，以及用于创建表示的底层代码和数据：
该站点提供了完整的示例，旨在帮助您理解库的功能。
这个库的主要优点是它对内容的处理非常灵活。但另一方面是D3.js并没有带来太多的活力。例如，如果您是在一个电子商务网站工作，而不仅仅是提供信息，那么这个库可能不是最好的选择。除了极端的灵活性，D3.js的 relatively streamlined presentation帮助提高了速度。如果单单从图表的功能来看，D3.js还是有点太庞大了。啊还不如去使用Chart.js短小精干的专门提供图表功能的库。
2. jQuery
大名鼎鼎的jQuery已经赢得了长期统治网页的地位。许多网站仍然使用jQuery进行基本的文档对象模型(DOM)操作，原因有三个：
jQuery非常容易学习。它提供的示例比大多数库都多，所以您很有可能会找到一个示例来演示如何完成特定的任务。
jQuery非常快。因为它专注于出色地执行特定的任务，所以jQuery使快速执行这些任务成为可能。
jQuery拥有庞大的安装基础。它还拥有大量的社区支持和项目贡献者。
我们可以预期这个库肯定会长期存在。额外的开发时间也意味着文档是非常完善的。如下所示，文档将主题分解为容易理解的部分，然后您可以根据需要深入研究其他细节：
当然，没有什么是完美的。例如，有时jQuery在多个浏览器上的工作方式并不完全相同。JQuery首先关注这些问题，您可以在站点上找到有关浏览器支持的信息。
最后，与其他库不同，jQuery并不是一个完整的解决方案。您需要另一个产品，如jQuery UI(参见下一个条目)来构建一个完整的应用程序。重要的是要认识到，在使用jQuery时，您的站点将更加模块化，并且依赖于更多的库(虽然这并不一定是坏事)。
3. jQuery UI
jQuery UI只是jQuery的众多插件之一，但它是您最常看到的，这也是我们在这里包含它的原因。在合并jQuery之后，使用jQuery UI向应用程序添加基本的图形元素。jQuery UI库提供了各种有趣的小部件，如手风琴、滑块、工具提示和数据表，这些小部件使您可以配置应用程序以提供有用的服务。
您可以深入到特定的小部件或其他控件来查看它们是如何工作的。页面通常包含顶部的控件，然后是使用说明和示例代码。与jQuery一样，您可以从一个简单的示例开始，但可以根据需要深入了解添加的内容。
这个库Library 与众不同有几个原因。最重要的是，JQuery UI几乎适用于任何浏览器，因此用户不太可能抱怨应用程序没有按预期工作。jQuery UI还提供了大量的附加组件。例如，虽然jQuery UI缺乏时间选择器，但您可以从trentrichardson.com/examples/timepicker等地方获得执行该任务的附加程序。
jQuery库组的一个问题是它们变得非常大。有时候，一个库的特性太丰富了。JQuery库的大小会使它们在较小的设备上加载速度变慢。可以使用替代的第三方库，如Granim.js和Multiple.js的出现提供了jQuery特性的子集，有时还提供了一组有重点的附加功能特性，加载时间大大加快。
4. Parsley
表单验证是一项重要的任务。因为现在的数据经常被机器分析，所以干净的数据比以往任何时候都更重要。事后清理数据是费时的，而且从没有像让用户首先提供正确的信息那样准确。
与任何其他JavaScript库相比，Parsley提供了更多的表单验证技术。你可以选择你需要的验证级别，但它们可能会变得非常复杂：
甚至如下所示的简单验证也包含许多不同的验证类型，以及执行任务所需的代码。完成最常见的验证是多么容易。(除非尝试验证复杂的数据，否则不需要进行繁重的编码。)
5. QUnit
许多库提供的测试功能有很多不足之处。即使您使用脚本，手动测试复杂的应用程序也会很麻烦，而且需要花费大量的时间——如果它能找到所有的错误的话。
QUnit是用于JavaScript的几个单元测试库之一。虽然有些人可能会认为它有点过时，但它是相对全面的，并且具有强大的社区支持和短的学习曲线。QUnit站点提供了丰富的入门信息，包括关于单元测试的完整教程。
6. React
通常被认为是一个库，而React有时被称为框架。在模型-视图-控制器(MVC)方法的上下文中，React提供了视图部分。它不假设您正在使用的基础技术堆栈来建模或控制数据。所有的React兴趣的就是在屏幕上显示数据。考虑到这一点，它不依赖于浏览器文档对象模型(DOM)，而是使用一个快速显示信息的轻虚拟DOM。React最棒的一点是它是声明性的，这意味着你要告诉框架你想做什么，而不是怎么做。
您为使用MVC的速度和能力付出的代价是增加了一定程度的复杂性。即使是一个小的组件也需要相当多的代码(如React网站上的例子所演示的)。当你和真正的大型项目一起工作时，你获得的是灵活性和速度。
JavaScript Frameworks（框架）
1. Angular
Angular framewor框架使作为MVC的控制器部分扩展HTML成为可能。控制器是DOM组件背后的行为。有了 Angular，就有可能以一种既自然又直接的方式创造新的行为。这些扩展最终看起来像是HTML的附加部分，而不是固定的东西。 Angular 网站明确了使用该产品的两个基本原因：“速度和性能”和“难以置信的工具”。
然而，编码可能会变得复杂，这个框架可能更适合大企业而不是小创业公司。即使是 Angular 站点上的简单示例也依赖于快速创建复杂性的多个文件。值得注意的是， Angular framewor的版本也依赖于TypeScript，而不是纯JavaScript，这增加了学习曲线，但提供了可扩展性。
幸运的是，该软件附带了大量教程，如本文所示，这将使有经验的开发人员更容易快速地开始工作。
2. Ember.js
一个自称为“有抱负的web开发人员的框架”的框架确实有些严肃。像微软、Netflix和LinkedIn这样的知名公司都在使用Ember.js。因为它使用模型-视图-视图-模型(MVVM)模式，并将最佳实践作为框架的一部分进行合并。最重要的是，它的伸缩性非常好。有趣的是,Ember.js不仅可用于web开发，您也可以使用它来构建移动应用程序和桌面应用程序——它被用于构建Apple Music。
与许多其他框架不同，您可以使用完整的基于ember的工具套件来创建高度兼容的开发环境。Ember CLI(命令行接口)提供了对大量工具的访问，您可以使用脚本自动化。例如，,Ember.js数据通过对象关系映射(ORM)提供面向web的数据访问。与此同时，Ember Inspector是Firefox和Chrome浏览器的一个插件，它可以使调试更加容易。
尽管有它这么给力，Ember.js的快速入门教程只需要5分钟就可以完成。当然，标准教程需要的时间要长得多，但是能产生更多受人尊敬的结果，如下所示：
这个框架的文档包含您需要的所有主题，包括对象模型、模板、组件、控制器和模型的讨论。还有一个博客和Ember.js社区可以提供额外的帮助。
3. Node.js
Node.js是一个异步的、事件驱动的JavaScript运行时，具有一些独特的特性。首先，如果它没有工作可做，它只是“去睡觉”。这听起来并不是什么大问题，但是如果你在公共云上托管你的网站，“让它休眠”可以帮你省下一大笔钱——可能是很多钱。此外,由于Node.js不需要锁来完成它的工作，它不像其他框架那样倾向于死锁。这个产品更像jQuery而不是jQueryUI，因为您不使用它来创建用户界面。相反，您可以创建响应事件的代码——客户端生成事件，服务器响应这些事件。用户界面是显示任何结果的独立元素。
因为Node.js是如此简单和快速，社区支持是首屈一指的，你可以在最不可能的地方找到它。有900万个实例运行在超过5万个包上。换句话说,Node.jsjs构成了您使用的许多包的基础。
Node.js,开发人员可以构建:
后端应用程序
博客
客户管理系统
实时服务，如聊天应用和游戏
REST api
社交网络应用程序
实用程序和工具
4. Vue.js
Vue是一个多功能的开源JavaScript框架，它是“渐进的”，这意味着与“单一框架”不同，Vue是从底层设计的，以渐进的方式采用。在库和全功能框架之间扩展，Vue使用“基于组件的开发模型”，可以将Vue组件混合和匹配到项目中。
关键的Vue特性包括组件、模板、转换和双向数据绑定，但是它最显著的特性可能是它的“反应性”系统。基本上，reactivity指的是在Vue中自动更新一个JavaScript对象，并且不引人注意地更新Vue模板。
Vue是为任何具有HTML、CSS和JavaScript工作知识的人而构建的。
其他的选择
别忘了还有更多的JavaScript库、社区、集合和框架，通常都有特定的焦点区域。
例如，CodePen是一个免费的在线社区，用于测试和展示HTML、CSS和JavaScript的混合。可以把它看作是前端设计师和开发人员的社会环境、在线开发社区和具有统一界面的编辑器。每个代码页条目都被称为钢笔，您可以将它们作为集合的一部分来查看。有些收藏品很奇特，如anime.js(动画) ，而其他的，比如有趣的js，会有一些你在其他地方看不到的有趣的小部件。它也直接与反应一起工作。
类似地，Jest是一个“零配置”的JavaScript测试解决方案，旨在使用React进行开箱即用的测试。
BIDEO.JS提供了一种显示全屏背景视频的方法，例如，如果您正在为旅行社构建一个站点，这将非常有用。
底线
现在应该很清楚了，问题不是找到一个JavaScript库或框架来帮助您做一些有趣的事情——而是找到一个库来帮助您完成您需要完成的任务。
此外，您还需要确保您所依赖的库将在明天仍然存在。没有人想要重新工作他们的应用程序，因为它使用的JavaScript库不再可用。尽管现在大多数现代JavaScript库和框架都非常可靠，但您仍然需要确保它们与用户所依赖的所有设备和浏览器兼容。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
方式一
<!--1.1使用Vue.extend来创建全局的Vue组件--> var tem1 = Vue.extend({
template:'<h3>这是使用 Vue.extend 创建的组件</h3>' //指定组件要展示的HTML结构
}); <!--1.2使用Vue.component('组件名称',创建出来的组件模板对象)--> Vue.component('myTem1',tem1);
/* <!--注意--> 使用 Vue.component() 定义全局组件的时候，
组件名称使用 驼峰命名，则在引用组件的时候，需要把大写改为小写，并且用 '-'将单词连接
组件名称不适用驼峰命名，则直接拿名称来使用即可
*/ <!--组合方式--> Vue.component('myTem1',Vue.extend({
template : '<h3>这是使用 Vue.extend 创建的组件</h3>'
})) <div id="app"> <!-- 如果要使用组件，直接把组件的名称以 HTML 标签的形式，引入到页面中--> <my-tem1> </my-tem1> </div>
方式二
直接使用Vue.component()
Vue.component('mycom2',{
template : '<h3>这是使用 Vue.component 创建的组件</h3>' })
但是这样写会有一个问题：
<!--在h3标签后紧接一个span标签的话就会出问题了--> <h3>这是使用 Vue.component 创建的组件</h3> <span>123</span>
这个问题是在 组件template属性指向的模板内容，必须有且只能有唯一的一个根元素
所以修改代码如下：
Vue.component('mycom2',{
template :
'<div> <h3>这是使用 Vue.component 创建的组件</h3> <span>123</span> </div>'
})
运行结果如下：
不过这种方式也有一个瑕疵，就是template 属性的值是HTML标签，而在软件中，并没有智能提示，容易出错，若使用这种方式，需要仔细，避免出错
方式三
<!--1.定义组件：--> Vue.component('mycom3',{
template : '#tem1'
}); <!--2.在被控制的 #app 外面使用 template 元素，定义组建的HTML模板结构--> <div id="app"> <!--3. 引用组件 --> <mycom3></mycom3> </div> <template id="tem1"> <div> <h1>这是 template 元素</h1> <span>这种方式好用</span> </div> </template>
运行结果如下：
这是Vue创建组件(全局)的3种方式，其实相差不多，希望对大家有所帮助
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
9.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。
20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
案例代码：
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
});
22.顺便说一下$.each()函数:
$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Web项目前后端分离开发时，经常会遇到跨域请求和跨域携带Cookie的相关问题：
服务端可以根据实际需求修改下面设置，以Java代码为做示例：
//允许跨域的域名，*号为允许所有,存在被 DDoS攻击的可能。
getResponse().setHeader("Access-Control-Allow-Origin","*");
//表明服务器支持的所有头信息字段
getResponse().setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma,Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");
/** 目前测试来看为了兼容所有请求方式，上面2个必须设 **/
//如果需要把Cookie发到服务端，需要指定Access-Control-Allow-Credentials字段为true;
getResponse().setHeader("Access-Control-Allow-Credentials", "true");
// 首部字段 Access-Control-Allow-Methods 表明服务器允许客户端使用 POST, GET 和 OPTIONS 方法发起请求。
//该字段与 HTTP/1.1 Allow: response header 类似，但仅限于在需要访问控制的场景中使用。
getResponse().setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
//表明该响应的有效时间为 86400 秒，也就是 24 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。
//请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。
getResponse().setHeader("Access-Control-Max-Age", "86400");
// IE8 引入XDomainRequest跨站数据获取功能,也就是说为了兼容IE
getResponse().setHeader("XDomainRequestAllowed","1");
服务端可以根据实际需求修改下面设置，以Java代码为做示例：
//如果需要把Cookie发到服务端，需要指定Access-Control-Allow-Credentials字段为true;
response.setHeader("Access-Control-Allow-Credentials", "true");
//允许跨域的域名，*号为允许所有,存在被 DDoS攻击的可能。
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
//表明服务器支持的头信息字段
response.setHeader("Access-Control-Allow-Headers","content-type");
前端根据实际情况修改发起请求的ajax，示例：
$.ajax({
type: "POST",
url: "实际的请求地址",
data: {参数：参数值},
dataType: "json",
crossDomain:true, //设置跨域为true xhrFields: {
withCredentials: true //默认情况下，标准的跨域请求是不会发送cookie的 },
success: function(data){ alert("请求成功");
}
});
另外还有代理、jsonp等方式不做介绍了
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1.说下需求：点击标题 跳转 预览的pdf 页，下载功能 可选【最好有】。
2.实现结果 ：
3.代码实现：
依赖pdf.js 【需要下载完整 控件】
下载官网：http://mozilla.github.io/pdf.js/
点击 ‘Download ’ 到下载页
git 克隆 或者下载。
下载后文件长这样：
【重点在后面 项目如何部署组装】
1.新建一个空项目 把文件放到项目根目录下：
红色圈里 是官网下载的 就改个文件名字，然后拖进项目里，完全不用动里面任何文件记住，有需要另说。
绿色是我写的【dowwn.html 是测试文件;static 放pdf 文件】 下面贴代码：
list.html
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
-
<meta name="apple-mobile-web-app-capable" content="yes">
-
<meta name="apple-touch-fullscreen" content="yes">
-
<meta name="full-screen" content="yes">
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
<meta name="format-detection" content="telephone=no">
-
<meta name="format-detection" content="address=no">
-
<title>list</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.title{
-
background: #e50041;
-
color: #ffffff;
-
font-size: 16px;
-
}
-
.title{
-
padding:10px 10px ;
-
}
-
ul{
-
padding:0px 10px 10px 10px ;
-
}
-
li{
-
list-style: none;
-
border-bottom: 1px solid #eeeeee;
-
height: 50px;
-
line-height:50px;
-
}
-
a{
-
text-decoration: none;
-
color: #000;
-
}
-
.leftImg{
-
width: 30px;
-
vertical-align: middle;
-
-
}
-
.next{
-
float: right;
-
/*vertical-align: middle;*/
-
margin-top: 4.5%;
-
-
}
-
</style>
-
</head>
-
<body>
-
<p class="title">产品说明书</p>
-
<ul>
-
<li dataSrc = 'KD-122LA火灾探测报警器说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-122LA火灾探测报警器说明书ccc</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-212LA可燃气体探测器说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-212LA 可燃气体探测器说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-216LA可燃气体探测器说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-216LA可燃气体探测器说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'Kd-122LA_KD-601系统遥控器使用说明.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">Kd-122LA KD-601系统遥控器使用说明</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-602LA_SOS一键救助使用说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-602LA SOS一键救助使用说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-701LA_溢水探测器使用说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-701LA 溢水探测器使用说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-702LA红外人体移动探测器说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-702LA红外人体移动探测器说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-703LA_门窗探测器使用说明书.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-703LA 门窗探测器使用说明书</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'KD-805A_WiFi系统主机使用说明书_V1.00.pdf' onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">KD-805A WiFi系统主机使用说明书_V1.00</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
<li dataSrc = 'WIFI智慧家庭安防系统操作说明书_v0.01.pdf'onclick="fun(this)">
-
<img class="leftImg" src="img/1.png" alt=""> <span href="">WIFI智慧家庭安防系统操作说明书_v0.01</span> <img class="next" src="img/next.png" alt="">
-
</li>
-
-
-
</ul>
-
<script src="js/jquery.min.js"></script>
-
<script>
-
function fun(e){
-
// console.log(e);
-
var dataSrc = $(e).attr('dataSrc');
-
// console.log(dataSrc);
-
// sessionStorage.setItem('dataSrc',dataSrc);
-
// window.location.href='index.html'
-
var urlSrc = 'http://testweixin.kingdun.net.cn/pdf/static/'+dataSrc;
-
$.ajax({
-
url: urlSrc,
-
type: "get",
-
success: function(xhr, data){
-
if (navigator.userAgent.indexOf('Android') > -1) {
-
//判断移动端是android 还是ios ，若是android 则要借助pdf插件
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
-
} else {
-
//ios直接打开pdf
-
//window.location.href = url;
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
-
}
-
},
-
error: function(){
-
//window.location.href = '${ctx}/core/user.androidPdf.do?mid='+mid+"&name="+storagename+"&realname="+realname;
-
window.location.href = "http://testweixin.kingdun.net.cn/pdf/js/web/viewer.html?file="+urlSrc;
-
}
-
});
-
}
-
</script>
-
</body>
-
-
</html>
完毕！
注释：window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html? 直接跳转到 万能的pdf 组件里的html 页，该有的 国际化和下载打印功能 人家都写好了！
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
-
<meta name="apple-mobile-web-app-capable" content="yes">
-
<meta name="apple-touch-fullscreen" content="yes">
-
<meta name="full-screen" content="yes">
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
<meta name="format-detection" content="telephone=no">
-
<meta name="format-detection" content="address=no">
-
<title>list</title>
-
<style>
-
*{
-
margin: 0;
-
padding: 0;
-
}
-
.title{
-
background: #e50041;
-
color: #ffffff;
-
font-size: 16px;
-
}
-
.title{
-
padding:10px 10px ;
-
}
-
ul{
-
padding:0px 10px 10px 10px ;
-
}
-
li{
-
list-style: none;
-
border-bottom: 1px solid #eeeeee;
-
height: 50px;
-
line-height:50px;
-
}
-
a{
-
text-decoration: none;
-
color: #000;
-
}
-
.leftImg{
-
width: 30px;
-
vertical-align: middle;
-
-
}
-
.next{
-
float: right;
-
/*vertical-align: middle;*/
-
margin-top: 4.5%;
-
-
}
-
</style>
-
</head>
-
<body>
-
<p class="title">产品说明书</p>
-
-
<a href="static/1.pdf">00001</a>
-
-
-
</body>
-
-
</html>
-
哈哈，直接a 标签 href 跳转 pdf文件；也是ok的哦！【苹果手机：直接预览；；；安卓:下载 链接 】
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题，如下
Css代码
查找一些教材中（w3schools等），只说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”，但对于样式文件中的多个相同样式的优先级怎样排列，没有详细说明。经过测试和继续搜索，得知优先级如下排列：
1. 样式表的元素选择器选择越，则其中的样式优先级越高：
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
所以上例中，#navigator的样式优先级大于.current_block的优先级，及时.current_block是添加的，也不起作用。
2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高
注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后：
Css代码
而某个元素指定class时采用 class="class2 class1"这种方式指定，此时虽然class1在元素中指定时排在class2的后面，但因为在样式表文件中class1处于class2前面，此时仍然是class2的优先级更高，color的属性为red，而非black。
3. 如果要让某个样式的优先级变高，可以使用!important来指定：
Css代码
此时class将使用black，而非red。
对于一开始遇到的问题，有两种解决方案：
1. 将border从#navigator中拿出来，放到一个class .block中，而.block放到.current_block之前：
Css代码
需要莫仁为#navigator元素指定class="block"
2. 使用!important:
Css代码
此时无需作任何其他改动即可生效。可见第二种方案更简单一些。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
获取窗口属性
为了解决兼容性的问题，我们来封装一个函数：
<script type="text/javascript">
function getScrollOffset() {
if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset }
else{
return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop,
}
}
}
</script>
为了解决兼容性的问题，我们来封装一个函数:
<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return {
w : window.innerWidth,
h : window.innerHeight
}
}else{ if(document.compatMode ==="BackCompat") { return {
w : document.body.clienWidth,
h : document.body.clientHeight
}
}else{ return {
w : document.documentElement.clientWidth,
h : document.documrntElement.clientHeight
}
}
}
</script>
查看元素的几何尺寸
让滚动条滚动
练习：
做一个小阅读器，会自动翻页。
<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> 文本内容 <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</div> <div style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</div> </body> <script type="text/javascript"> var start = document.getElement.getElementsByTagName('div')[0]; var stop = document.getElement.getElementsByTagName('div')[1]; var timer = 0; var key = true; //加锁，防止连续点start产生累加加速 start.onclick = function() { if(key) {
timer = setInterval(function() { window.scollBy(0,10);
},100);
key = false;
}
}
stop.onclick = function() { clearInterval(timer);
key = true;
} </script>
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
变量包括：全局变量，局部变量
在JAvaScript中，函数中定义的变量是局部变量
分为：局部作用域和全局作用域
js中没有块级作用域---一对括号中定义的变量,这个变量可以在大括号外面使用
-
var num=10; //作用域链 级别:0
-
var num2=20;
-
var str = "abc"
-
function f1() {
-
var num2=20;
-
function f2() {
-
var num3=30;
-
console.log(num);
-
}
-
f2();
-
}
-
f1();
层层搜索,搜索到0级作用域的时候,如果还是没有找到这个变量,结果就是报错
（1）变量的提升
下面这种情况，变量的声明被提前了，但是num的值并没有提前，结果为undefined
-
//变量的提升
-
console.log(num);
-
var num=100;
-
-
-
//提升之后为：
-
var num;//变量的声明提前
-
console.log(num);
-
var num=100;
（2）
函数声明被提前，代码仍然可以执行
-
//函数的声明被提前了
-
f1();
-
function f1() {
-
console.log("这个函数,执行了");
-
}
但是对于下面这种情况，代码报错
-
f2();
-
var f2=function () {
-
console.log("小杨好帅哦");
-
}
-
-
//声明提前后：
-
var f2;//为一个变量，undefind
-
f2();//undefind加括号是不被认可的，所以报错
-
var f2=function () {
-
console.log("小杨好帅哦");
-
}
要想不报错，代码可以改为：
-
var f2;
-
f2=function () {
-
console.log("小杨好帅哦");
-
};
-
f2();
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
form表单提交，之前有个下载的项目接口，需要上url上边传超级多东西，但是 url是限制长度的 每个浏览器限制的url长度还不一样，所以就想到用form表单的action提交表单。
form标签 定义和用法 详细了解请点击
标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。（我们要用到的）
在这里我就写个用js调用事件提交表单。表单不在页面上显示的例子。
下面这段代码 form标签的属性 method 就是请求方法 跟 jquery的ajax一样这里我使用post请求、 form标签的属性 enctype 规定发送表单数据之前如何对其进行编码、form标签的属性 target=”_blank” 就相当于在新页面打开 我这里做的是下载 所以要在新页面打开。
<form method="post" enctype="application/x-www-form-urlencoded" id="form-submit" target="_blank">
<input type="hidden" name="account" value="多毛大叔爱萝莉"/>
<input type="hidden" name="password" value="7758521"/>
</form>
<button type="button" id="go">go</button> //这里的name就是相当于post属性的参数 value就是你传的值 type是hidden 是因为我不想再页面上看到他所以让他隐藏了
接下来我们用js调用事件 动态给 form 添加 action 属性让form知道我们要让他请求拿个位置。
// js 获取form表单 var form_submit = document.getElementById('form-submit'); // js获取按钮 var go = document.getElementById('go'); // 当点击go时执行事件 go.addEventListener（'click',function(){ // 动态给form表单设置请求位置 form_submit.active = "http://www.daxuehua.cn"; // 让form表单提交 form_submit.submit()
}）如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
四种touch事件
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
注意：
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
2.禁止滚动
preventDefault是阻止默认行为，在touchMove事件中使用可阻止默认行为滚动。
event.preventDefault();
3.解决穿透
在touchStart事件后添加touchMove事件的监听，在touchMove事件里添加touchEnd事件的监听，在touchEnd事件中移除touchMove和touchEnd的事件监听，即可解决穿透问题
4.removeEventListener
传入的处理事件函数一定是相同的函数，不能是匿名函数
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> <title>移动端触摸滑动</title> <meta name="author" content="rainna" /> <meta name="keywords" content="rainna's js lib" /> <meta name="description" content="移动端触摸滑动" /> <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no"> <style> *{margin:0;padding:0;} li{list-style:none;} .m-slider{width:600px;margin:50px 20px;overflow:hidden;} .m-slider .cnt{position:relative;left:0;width:3000px;} .m-slider .cnt li{float:left;width:600px;} .m-slider .cnt img{display:block;width:100%;height:450px;} .m-slider .cnt p{margin:20px 0;} .m-slider .icons{text-align:center;color:#000;} .m-slider .icons span{margin:0 5px;} .m-slider .icons .curr{color:red;} .f-anim{-webkit-transition:left .2s linear;} </style> </head> <body> <div class="m-slider"> <ul class="cnt" id="slider"> <li> <img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg"> <p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p> </li> <li> <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"> <p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p> </li> <li> <img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg"> <p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p> </li> <li> <img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg"> <p>海洋星球3重庆天气热得我想卧轨自杀</p> </li> <li> <img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"> <p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p> </li> </ul> <div class="icons" id="icons"> <span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <script> var slider = { //判断设备是否支持touch事件 touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider:document.getElementById('slider'), //事件 events:{
index:0, //显示元素的索引 slider:this.slider, //this为slider对象 icons:document.getElementById('icons'),
icon:this.icons.getElementsByTagName('span'),
handleEvent:function(event){ var self = this; //this指events对象 if(event.type == 'touchstart'){
self.start(event);
}else if(event.type == 'touchmove'){
self.move(event);
}else if(event.type == 'touchend'){
self.end(event);
}
}, //滑动开始 start:function(event){ var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值 isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动 this.slider.addEventListener('touchmove',this,false); this.slider.addEventListener('touchend',this,false);
}, //移动 move:function(event){ //当屏幕有多个touch或者页面被缩放过，就不执行move操作 if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return; var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时，表示纵向滑动，0为横向滑动 if(isScrolling === 0){
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏 this.slider.className = 'cnt'; this.slider.style.left = -this.index*600 + endPos.x + 'px';
}
}, //滑动释放 end:function(event){ var duration = +new Date - startPos.time; //滑动的持续时间 if(isScrolling === 0){ //当为水平滚动时 this.icon[this.index].className = ''; if(Number(duration) > 10){ //判断是左移还是右移，当偏移量大于10时执行 if(endPos.x > 10){ if(this.index !== 0) this.index -= 1;
}else if(endPos.x < -10){ if(this.index !== this.icon.length-1) this.index += 1;
}
} this.icon[this.index].className = 'curr'; this.slider.className = 'cnt f-anim'; this.slider.style.left = -this.index*600 + 'px';
} //解绑事件 this.slider.removeEventListener('touchmove',this,false); this.slider.removeEventListener('touchend',this,false);
}
}, //初始化 init:function(){ var self = this; //this指slider对象 if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false); //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性 }
};
slider.init(); </script> </body> </html>蓝蓝设计的小编 http://www.lanlanwork.com