luyaran的博客

在用户拖拽文件到浏览器的某个元素上时，js可以监听到与拖拽相关的事件，并对拖拽结果进行处理，本文讨论下和拖拽文件相关的一些问题，不过没有处理太多关于兼容性的问题。拖拽事件js能够监听到拖拽的事件有drag、dragend、dragenter、dragexit(没有浏览器实现)、dragleave、dragover、dragstart、drop，详细的内容可以看MDN。其中，与拖拽文件相关的事件有d...

今天，我们开始学习tracking.js,它是一个由Eduardo Lundgren开发的轻量级的javascript库，它可以让你做实时的人脸检测，色彩追踪和标记好友的脸。在这个教程中，我们将会看到，我们如何从静态图片中检测脸，眼睛和嘴巴。我一直对视频和图片中的人脸标记、检测和人脸识别技术很感兴趣。尽管我知道获取逻辑和算法去开发人脸识别软件或者插件已经超出了我的想象。当我知道Javascri

要添加到您的Web应用程序的实时协作？Mozilla的 togetherjs值得一看。当Tim Berners Lee发明了万维网超过20年前，他在那个物理学家能够合作很容易与另一个在互联网上的希望了。此后，网络已经演变成一种新的媒体处理一切从报纸到金融。然而，虽然我们可以惊叹的事情我们可以做大量时下网络上，最初的想法，把它所有的合作，仍然是一个梦想。当然，我们有点像 GitHub，这 G

什么是TogetherJS？我们来介绍一下TogetherJS，一个从Mozilla实验室出来的实时协作工具。TogetherJS是这样的一种服务，你能为一个已经存在的网站增加实时协作特性。使用这种工具，两个或者更多的网站或者web应用访问者能够看到别人鼠标位置，单击，追踪他人的浏览记录，一起编辑表单，观看视频，还能够通过声音以及WebRTC聊天。TogetherJS包括这样一些特性：

TogetherJs，togetherjs中文TogetherJs简介TogetherJs是Mozilla一个免费的开源的js框架，给网站提供交流功能。在你的网站加上TogetherJs，用户可以实时交流。官网链接：https://togetherjs.com/TogetherJs的sample app1.      Drawinghttps://togetherj

js代码[html] view plain copy >  html>      head>          meta charset="UTF-8"/>          title>xhr2title>      head>      body>          div  id="drop_area" style="border:3px dashed sil

本地上传，提前预览（图片，视频）1.html中div标签预览显示，button标签触发上传事件。[html] view plain copy div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">将图片拖拽到此div>  button onclick="xhr

一、什么是跨域请求域名http://www.baidu:8080/script/jquery.js，它由http://(协议)、www(子域名)、baidu(主域名)以及8080(端口号)组成，当另一个域名与其中任意一项对应不等的话，那么我们说两个域名就是跨域的。如http://www.baidu:8080的页面上我们要请求数据到http://www.sohu:8080上去，那么就说这种请

前端性能优化是个巨大的课题，如果要面面俱到的说的话，估计三天三夜说不完。所以我们就从实际的工程应用角度出发，聊我们最常遇见的前端优化问题。Yslow是雅虎开发的基于网页性能分析浏览器插件，可以检测出网页的具体性能值，并且有著名的Yslow 23条优化规则，这23条，就够我们玩的了。1. 减少HTTP请求次数尽量合并图片、CSS、JS。比如加载一个页面，如果有5个css文件的话，那么会发

1、禁用右键单击功能 123456$(document).ready(function() {       $(document).bind("contextmenu",function(e) {                      alert("sorry! No right-clicking!"); 

1.禁用网页上的右键菜单$(document).ready(function(){ $(document).bind("contextmenu",function(e{ return false; }));});2.新窗口打开页面$(document).ready(function(){ $('a[href^="https://www.goog

作为一名开发者，大家应该都知道在浏览器中存在一些内置的控件：Alert，Confirm等，但是这些控件通常根据浏览器产商的不同而形态各异，视觉效果往往达不到UI设计师的要求。更重要的是，这类内置控件的风格很难与形形色色的各种风格迥异的互联网产品的设计风格统一。因此，优秀的前端开发者们各自开发自己的个性化控件来替代浏览器内置的这些控件。当然，这类组件在网络上已经有不计其数相当优秀的，写这篇文章的目的

详解JavaScript异步编程技术基于浏览器的事件轮询机制（以及Node.js中的事件轮询机制），JavaScript常常会运行在异步环境中。由于JavaScript本身语言的特性（不需要程序员操控线程/进程），在js中解决异步化编程的方法就显得相当重要。可以说一个完整的项目中，js开发人员是不可能不面对异步操作的。本文将详细介绍几种经典JavaScript异步编程串行化方法，同时也将简单介

之前在表单中对ckeditor的赋值就直接是 $("#theadEditor").val(result); 而现在我想通过点击不同选项来使用Ajax在后台访问数据，对ckeditor赋值，但是页面根本没有变化，而后台的数据却有。那么现在肯定的就是ckeditor的问题了。 我觉得应该是ckeditor已经创建了，而通过一般的赋值应该不行。那么只有先通过销毁，再创建这样的方式

跨域请求的原理大家都知道，本人也就不赘述了，数据传输的格式大概有XML和json等几种格式，但是相对与XML的格式来讲，他更加适用于大型数据的传输，所以本人选择使用json，来作为数据传输的格式。废话不多说，直接贴代码。。。$url = "http://".$name."/data/text.php?callback=jQuery21405316117645496153_149498920

TIP最近在一个项目中需要实现一个移动端上传图片文件的需求，主要需求的是压缩并且按照比例自动裁切图片然后上传。一听是蛮简单的，因为是在移动端使用，所以完全可以使用 HTML5 的新特性以及一些 API。主要的思路是这样：监听一个 input (type='file') 的 change 事件，然后拿到文件的 file;把 file 转成 dataURL；然后用 canvas

1 乱用选择器坑人指数：200JQuery选择器调用代价很大，反复调用效率更低。应采用缓存对象的方法或采用链式调用的方式。//错误的写法$("#button").click(function(){ $('#list li').addClass('strong'); $('#list li').css('color', 'red');});//正确的写法$("#b

JavaScript 来了1995年，诞生了JavaScript语言，那一年，我刚刚从大学毕业。在今年RedMonk 推出的2017 年第一季度编程语言排行榜中，JavaScript 排第一，Java 第二，Python 反超 PHP 排第三，PHP 第四，C# 和 C++ 并列第五。RedMonk 排名的主要依旧是各种编程语言在 Stack Overflow 和

所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局，inline-block布局，弹性盒布局这几个名词。现在对布局也算有一点了解，做个总结巩固一下。如果你也看了很多资

简单的表单验证html结构html lang="en">head> meta charset="UTF-8"> title>Validatatitle>head>body> form id="form"> label for="username">账号：label>input id="username" type="text">br> label fo

在IE5-9中是没有实现js的 getElementsByClassName()方法,但是实现了getElementsByName()方法,但是需要注意的是这个方法在IE5-9中也返回id属性匹配的指定元素,为了兼容,应该小心谨慎使用,不要将同样的字符串同时用作了名字和ID。测试程序如下: div id="log"> div id="innerLog

在ECMAScript5（简称 ES5）中，有三种 for 循环，分别是：简单for循环for-inforEach在2015年6月份发布的ECMAScript6（简称 ES6）中，新增了一种循环，是：for-of下面我们就来看看这 4 种 for 循环。简单 for 循环下面先来看看大家最常见的一种写法：const arr = [1, 2,

前言JSONP注入是一个不太常见但影响非常广泛且极危险的漏洞，由于最近几年对JSON, web APIs以及跨域通信的需求增多，不得不引起我们的重视。什么是JSONP这里我们假设大家都了解JSON为何物，以此为基础我们来谈谈JSONP。JSONP全名为JSON with Padding，其存在的意义便有绕过诸如同源策略强制执行XMLHttpRequest(AJAX requests)。

HTML分类：1. 块级元素：div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul特点：总是在新行上开始，高度、行高以及上下边距都可控制，宽度默认是容器的100%，除非设定宽度。功能：主要是用来搭建网站架构、

作者：小不了链接：https://zhuanlan.zhihu.com/p/24362717来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。前言本文是我学习JavaScript过程中收集与整理的一些易错知识点，将分别从变量作用域，类型比较，this指向，函数参数，闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解，其中也涉及了一些E

今天在书上看到两个方法，一个升序方法一个降序方法，记录下来供以后参考！JavaScript提供了两个相关方法severse() 颠倒数组顺序； sort()升序排列数组项var arr = [1,5,2,10,15];console.log(arr.sort()); //[1, 10, 15, 2, 5]但是sort()方法会根据测试字符串的结果改变顺序，因为数值5

我们在线购票时（如电影票、车票等）可以自己选座。开发者会在页面上列出座次席位，用户可以一目了然的看到可以选择的座位及支付。本文以电影院购票为例，为您展示如何选座、处理选座数据等。在这里，我给大家介绍一款基于jQuery的在线选座插件：jQuery Seat Charts，它支持自定义座位类型和价格，支持自定义样式，支持设置不可选的座位，也支持键盘控制座位。HTML我们假设进入电影《

JQuery触发事件使代码分离在js中，如果我们要触发一个按钮的点击事件，直接使用元素的onclick事件，然后调用相关函数就可以了，这样的 写法则是让代码与html结合到一起了，在Jquery中就不用这样了，它有另外的几种写法，可以使代码与html分开：比如页面中有一个按钮：我们要触发它的点击事件可以有下面两种方式：一:jQuery(function($){$

通过jQuery $.each，你可以遍历对象、数组的属性值并进行处理。使用说明each函数根据参数的类型实现的效果不完全一致：1、遍历对象(有附加参数) 代码如下复制代码$.each(Object, function(p1, p2) {     this;       //这里的this指向每次遍历中Object的当前属性值     p1;

css虽然会在一开始我们就定义好了，但是有很多场景需要我们动态设置css，或者单独修改一个dom控件的style属性，今天分享一下我总结的jquery设置css及style样式的方法。一、CSS 1、css(name) 访问第一个匹配元素的样式属性。 返回值 String 参数 name (String) : 要访问的属性名称 示例： $("p").css("col

jquery中添加属性和删除属性：　　复制代码 代码如下:　　$("#2args").attr("disabled",'disabled');　　$("#2args").removeAttr("disabled");　　问题背景：　　选择“选项1”是，“两个参数”这个单选按钮有效。　　选择“选项2”时，让“两个参数”的这个单选按钮无效。　　代码：　　?

实例改变图像的 width 属性：$("button").click(function(){ $("img").attr("width","180");});定义和用法attr() 方法设置或返回被选元素的属性值。根据该方法不同的参数，其工作方式也有所差异。返回属性值返回被选元素的属性值。语法$(selector).attr(at

现在做的项目有这样一个需要：先看图吧^^ 要求：1、当点击导出Excel方式的时候，如果是“勾选导出”或“不分页导出”时，下面的文本框不能修改2、当点击“分页导出”时，第一个文本框中的值可以被修改，但第二个文本框中的值不可以手动修改，但会随着第一个文本框中输入的值不断变化 实现：这个页面我就不说怎么做的了，咱们看重点，如何来实现动态的增加属性值：   f

一 ：Q: What is the difference between .get(), [], and .eq()?A: eq返回原生jQuery对象，截取某些el元素生成Jquery新对象　get和[]返回的都是原生的Dom对象，原理一致　get和[]区别是get是通过jQuery对象的方法获取，[]是根据jQuery是一个数组对象获取 二: What is the dif

问题：jQuery的美元符号$有什么作用？回答：其实美元符号$只是”jQuery”的别名，它是jQuery的选择器，如下代码：$(document).ready(function(){});当然你也可以用jQuery来代替$，如下代码：jQuery(document).ready(function(){});jQuery中就是通过这个美元符号来实现各种灵活的DOM元素选

毫无疑问，jQuery给了JavaScript急需的提振，这是一门如此有用，但同时总是常常被低估的语言. 在 jQuery 粉墨登场之前，我们曾经会写出冗长的JavaScript代码，不仅仅为更大型的应用程序，有时即使是更小的应用程序也要如此. 那种代码常常是既难以阅读又难以维护的.在使用这个优秀的库之前写过原生的JavaScript，仅仅在用过它的一个月之后，我就能意识到jQuery的真

jQuery Validato表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。jq代码 代码如下复制代码/** * @author ming */$(document).ready(fu

.html()用为读取和修改元素的HTML标签.text()用来读取或修改元素的纯文本内容.val()用来读取或修改表单元素的value值。一、jquery中HTML 1. 无参html（）方法用来获取任意元素的HTML内容，如果你调用多个选定元素的.html()方法，那么其读取的只是第一个元素，换句话说：如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内

图片baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demoLightgallery.js - 是一个功能齐全的JavaScript图像灯箱插件。demoviewerjs - 是一个图像预览插件。democropperjs - 是一个图片编辑器插件。demophoto-editor - 是一个本地图片编辑器插件。demoblazy.js - 是一个懒惰加载插件。d

通过JavaScript可以通过名称属性将页面的变量逐个提交给php，但通过名称属性逐个搜索输入字段并将字段的值添加到对象中总是有点麻烦。特别是随着表单变得更复杂，这种方法也会明显变得缺乏扩展性。好在，jQuery为这种常用的操作提供了一种简化方式——.serialize()方法。这个方法作用于一个jQuery对象，将匹配的DOM元素转换成能够随Ajax请求传递的查询字符串。通过使用.serial