脚本 | 易学教程

AJAX跨域总结

阅读更多关于 AJAX跨域总结

蚂蚁金服的实习即将结束，将知识总结一下。我们这个项目前端使用antD，antD是采用React封装的一套组件库，目前开源 http://ant.design/ ，所有组件都是拿来即用，大大缩短了开发周期，强烈推荐。React是单页面应用，通过ajax与后台通信，而antD调试部署在8000端口，后台又是运行在另一个端口，前后台通信跨域。AJAX跨域一般有两种解决方法：CORS（跨域资源共享）和JSONP。先来看看JSONP，本质原理利用script标签src属性可以跨域的特性，我们自己也可以去实现JSONP，动态添加删除script标签： function loadJs() { var script = document.createElement("script"); script.src = "http://xxxxxx/get/req"; document.body.appendChild(script); script.onload = function() { callback(); document.body.removeChild(script); } } 在AJAX中使用JSOP: $.ajax({ url: 'http://xxxxxx/get/req', cache: false, type: 'post', jsonp:'callback',

简单的PHP上传图片实例

阅读更多关于简单的PHP上传图片实例

分享一个简单的PHP上传图片实例，本实例主要介绍了上传图片的一些限制判断和上传图片的方法。首先我们在form表单加上上传附件#file,上传按钮#imgbut，记得给form 表单加上multipart/form-data，否则上传不了图片。 1 <form enctype="multipart/form-data" action="upload.php?action=img" method="post" name="imge"> 2 <input value="导入文件" type="file" name="img" id="file" /> 3 <input type="submit" id="imgbut" class="btn" value="上传图片" /> 4 </form> 上传之前各种限制判断： 1 if ($_FILES["img"]["error"] > 0) { 2 switch ($_FILES["img"]["error"]) { 3 case 1 : 4 echo "<script type='text/javascript'>alert('上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值<br>');history.back();</script>"; 5 break; 6 case 2 : 7 echo "

jQuery与mootools共存冲突解决

阅读更多关于 jQuery与mootools共存冲突解决

jQuery与mootools共存冲突解决方式一： <html> <head> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); // Use jQuery via jQuery(...) jQuery(document).ready(function(){ jQuery("div").hide(); }); // Use Prototype with $(...), etc. $('someid').style.display = 'none'; </script> </head> <body></body> </html> --------------------------------------------------------------------------------------------------- 方式二： <html> <head> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict(); // Use jQuery via $j(...)

某东搜索框终结版！！！

阅读更多关于某东搜索框终结版！！！

以上是某东搜索框为力求同步写了以下代码。文字消失和怎样获取焦点失去焦点事件方法就不在一一赘述！以下用到表单事件： Form 事件由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：属性值描述 onblur script 元素失去焦点时运行的脚本。 onchange script 在元素值被改变时运行的脚本。 oncontextmenu script 当上下文菜单被触发时运行的脚本。 onfocus script 当元素获得焦点时运行的脚本。 onformchange script 在表单改变时运行的脚本。 onforminput script 当表单获得用户输入时运行的脚本。 oninput script 当元素获得用户输入时运行的脚本。 oninvalid script 当元素无效时运行的脚本。 onreset script 当表单中的重置按钮被点击时触发。HTML5 中不支持。 onselect script 在元素中文本被选中后触发。 onsubmit script 在提交表单时触发。下面是代码环节 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0;

页面性能优化办法有哪些？

阅读更多关于页面性能优化办法有哪些？

引子互联网有一项著名的8秒原则。用户在访问Web网页时，如果时间超过8秒就会感到不耐烦，如果加载需要太长时间，他们就会放弃访问。大部分用户希望网页能在2秒之内就完成加载。事实上，加载时间每多1秒，你就会流失7%的用户。8秒并不是准确的8秒钟，只是向网站开发者表明了加载时间的重要性。那我们如何优化页面性能，提高页面加载速度呢？这是本文主要要探讨的问题，然而性能优化是个综合性问题，没有标准答案，想要面面俱到罗列出来，并非易事。本文只关注一些核心要点，以下是我总结性能优化常见的办法：一、资源压缩与合并主要包括这些方面： html压缩、css 压缩、js的压缩和混乱和文件合并。资源压缩可以从文件中去掉多余的字符，比如回车、空格。你在编辑器中写代码的时候，会使用缩进和注释，这些方法无疑会让你的代码简洁而且易读，但它们也会在文档中添加多余的字节。 1.html压缩 html代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。如何进行html压缩：使用在线网站进行压缩(开发过程中一般不用) nodejs 提供了html-minifier工具后端模板引擎渲染压缩 2.css代码压缩： css代码压缩简单来说就是无效代码删除和css语义合并如何进行css压缩：使用在线网站进行压缩

javascript性能优化

阅读更多关于 javascript性能优化

本文主要是在我读《高性能Javascript》之后，想要记录下一些有用的优化方案，并且就我本身的一些经验，来大家一起分享下， Javascript的加载与执行大家都知道，浏览器在解析DOM树的时候，当解析到script标签的时候，会阻塞其他的所有任务，直到该js文件下载、解析执行完成后，才会继续往下执行。因此，这个时候浏览器就会被阻塞在这里，如果将script标签放在head里的话，那么在该js文件加载执行前，用户只能看到空白的页面，这样的用户体验肯定是特别烂。对此，常用的方法有以下：将所有的script标签都放到body最底部，这样可以保证js文件是最后加载并执行的，可以先将页面展现给用户。但是，你首先得清楚，页面的首屏渲染是否依赖于你的部分js文件，如果是的话，则需要将这一部分js文件放到head上。使用defer,比如下面这种写法。使用defer这种写法时，虽然浏览器解析到该标签的时候，也会下载对应的js文件，不过它并不会马上执行，而是会等到DOM解析完后（DomContentLoader之前)才会执行这些js文件。因此，就不会阻塞到浏览器。 <script src="test.js" type="text/javascript" defer></script> 动态加载js文件,通过这种方式，可以在页面加载完成后，再去加载所需要的代码

H5复制粘贴双端适配的解决方案（终极版）

阅读更多关于 H5复制粘贴双端适配的解决方案（终极版）

前言最终适配所有机型的方案基于clipboardjs 官网 https://clipboardjs.com/ 这个库由几个不同的CDN提供商托管。选择你最喜欢的：）建议使用 v1.7.1 版本 <script src="http://testgumballs.leiting.com/test/copy/js/clipboard.js"></script> 以下版本为 v2.0.4 jsDelivr <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> cdnjs <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> RawGit <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script> unpkg <script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>

Agile国人出品HTML5+CSS3+JS移动应用开发框架

阅读更多关于 Agile国人出品HTML5+CSS3+JS移动应用开发框架

Agile 是一个基于HTML5+CSS3+JS的移动应用开发框架，在体验上尽量接近Native Like，并且同时支持单页模式和多页模式。 Agile 让HTML5在移动应用开发中充分发挥优势。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。简单、可扩展 Agile 支持Zepto和jQuery双引擎及相应的扩展；同时Agile均支持单页模式和多页模式的移动应用，可以与ExMobi、PhoneGap等流行的跨平台开发框架一起使用。一个框架、多种设备你的移动应用能在 Agile 的帮助下通过同一份代码快速、有效适配手机、平板等设备，这一切都是 CSS 媒体查询（Media Query）的功劳。组件齐全 Agile 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、JavaScript 插件方面的所有详细文档。入门 Agile框架本身是基于标准HTML5开发的，但是由于移动应用中需要使用大量的本地能力而HTML5无法胜任，所以通常需要依赖一个容器运行，并能调用容器里的本地能力。 ExMobi是由烽火星空推出的移动应用平台，除了封装了丰富的原生组件和本地能力，对HTML5也有很好的支持，所以在ExMobi中使用 Agile可以获得更好的体验。除此之外，Agile也可以运行于其他的容器比如PhoneGap等。

移动端的复制按钮，

阅读更多关于移动端的复制按钮，

今天公司让做一个可以在移动端复制某区域的文字，是点击一个按钮达到复制效果，本人比较菜，搞了一下午，由于原生的JS是有提供一个函数来实现这个功能(window.clipboardData)，但是很遗憾，这个函数仅仅支持IE和FF浏览器，所以基本用处不大，今天我就掉进这个坑里，爬了好长时间。无意间看到clipboard.js这个库，有cdn，我比较懒，就直接复制github上的地址 CDN Providers Zeno Rocha edited this page on 21 Jun · 9 revisions Pages 5 Home CDN Providers Guides Known Issues Known Limitations Clone this wiki locally ``` https://github.com/zenorocha/clipboard.js.wiki.git Clone in Desktop This library is hosted by few different CDN providers. Go ahead and choose your favorite :) jsDelivr **<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"><

<script>属性async和defer的区别

阅读更多关于属性async和defer的区别

async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。 defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7 及更早版本对嵌入脚本也支持这个属性。延迟脚本defer HTML 4.01 为<script>标签定义了 defer 属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer 属性，相当于告诉浏览器立即下载，但延迟执行。 <!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/javascript" defer="defer" src="example2.js"></script> </head> <body>  </body> </html> 　　在这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html

订阅脚本