js代码 | 易学教程

requireJs和r.js压缩工具

阅读更多关于 requireJs和r.js压缩工具

上面release是执行命令 node r.js -o build.js 生成的，需要切换到目录require/tools下面，也就是有r.js和build.js的目录，才能执行命令代码目录如上： main.html代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello RequireJS</title> </head> <body> <h1>Hello RequireJS</h1> <script type="text/javascript" src="js/lib/require.js"></script>  <script type="text/javascript" src="js/config.js"></script>  <script type="text/javascript"> /*如果没有配置信息，加载one,two模块，要找到他们的存放路径*/ /* require(["./js/mod/one", "./js/mod/two"], function (one, two)

js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

阅读更多关于 js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

preventDefault： preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event对象的cancelable为false时，表示没有默认行为，这时即使有默认行为，调用 preventDefault也是不会起作用的。我们都知道，链接<a>的默认动作就是跳转到指定页面，下面就以它为例，阻止它的跳转： //假定有链接 <a href="http://www.cnf2e.com/" id="testA" >cnf2e</a> var a = document.getElementById("testA"); a.onclick =function(event){//阻止默认行为 event.preventDefault(); } stopPropagation： stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发

深入理解js构造函数

阅读更多关于深入理解js构造函数

JavaScript对象的创建方式在JavaScript中，创建对象的方式包括两种：对象字面量和使用new表达式。对象字面量是一种灵活方便的书写方式，例如： var o1 = { p:”I’m in Object literal”, alertP:function(){ alert(this.p); } } 这样，就用对象字面量创建了一个对象o1，它具有一个成员变量p以及一个成员方法alertP。这种写法不需要定义构造函数，因此不在本文的讨论范围之内。这种写法的缺点是，每创建一个新的对象都需要写出完整的定义语句，不便于创建大量相同类型的对象，不利于使用继承等高级特性。 new表达式是配合构造函数使用的，例如new String(“a string”)，调用内置的String函数构造了一个字符串对象。下面我们用构造函数的方式来重新创建一个实现同样功能的对象，首先是定义构造函数，然后是调用new表达式： function CO(){ this.p = “I’m in constructed object”; this.alertP = function(){ alert(this.p); } } var o2 = new CO(); 那么，在使用new操作符来调用一个构造函数的时候，发生了什么呢？其实很简单，就发生了四件事： var obj ={}; obj.__proto__ =

JS原型和原型链

阅读更多关于 JS原型和原型链

构造函数 function Foo(name, age){ this.name = name; this.age = age; this.class = 'class-1'; } var f =new Foo('zhangsan',20); 命名规则：大写字母开头；那么，在使用new操作符来调用一个构造函数的时候，发生了什么呢？其实很简单，就发生了四件事： var obj ={}; obj.__proto__ = Foo.prototype; Foo.call(obj); return obj; 第一行，创建一个空对象obj。第二行，将这个空对象的 proto 成员指向了构造函数对象的prototype成员对象，这是最关键的一步，将新生成的对象的 prop 属性赋值为构造函数的prototype属性，使得通过构造函数创建的所有对象可以共享相同的原型。第三行，将构造函数的作用域赋给新对象，因此Foo函数中的this指向新对象obj，然后再调用Foo函数。于是我们就给obj对象赋值了。第四行，返回新对象obj。构造函数 - 扩展 var a = {} 其实是 var a = new Object()的语法糖； var a = [] 其实是 var a = new Array() 的语法糖； function Foo(){...} 其实是 var Foo = new

JS弹幕代码分析

阅读更多关于 JS弹幕代码分析

现在许多直播软件和视频都有弹幕功能，让我们来看看并分析是怎么实现的。这边我主要分析下js的代码，想看源码的朋友送上链接， http://sandbox.xinfan.org/xdd... HTML代码如下（css代码就不展示了，想看的直接看源码吧）： <div id="main" class="container"> <p class="p0">啦啦啦啦啦啦啦</p> <p class="p1">啦啦啦啦啦啦啦</p> </div> <div class="footer"> <input id="ipt" class="ipt" type="text" placeholder="说点什么?"/> <button id="launch" class="launch" type="button" onclick="Leave()">发射</button> <button id="clear" class="clear" type="button">清屏</button> </div> </div> JS代码如下： var num = 2; //声明了num=2 var _p = document.getElementsByTagName("p"); //获取标签p. var main = document.getElementById("main"); //获取Id为mian的标签

实用的js代码

阅读更多关于实用的js代码

1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取、防止复制 3. onpaste="return false" 不准粘贴 4. oncopy="return false;" oncut="return false;" 防止复制 5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标 6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标 7. <input style="ime-mode:-Disabled"> 关闭输入法 8. 永远都会带着框架 <script language="javascript"></script> 9. 防止被人frame <SCRIPT LANGUAGE=javascript><

js跨域

阅读更多关于 js跨域

转自 https://www.cnblogs.com/yongshaoye/p/7423881.html 一、了解跨域？ 1 概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。定义：跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制。所谓同源是指，域名，协议，端口均相同。这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。浏览器执行 javascript 脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。对于端口和协议的不同，只能通过后台来解决。 2 例： http://www.123.com/index.html 调用 http://www.123.com/server. PHP （非跨域） http://www.123.com/index.html 调用 http://www.456.com/server. php （主域名不同:123/456，跨域） http://abc

JS键盘事件种类、兼容和优化

阅读更多关于 JS键盘事件种类、兼容和优化

一、浏览器的按键事件总结用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。在这3种事件类型中，keydown和keyup比较底层，而keypress比较高级。这里所谓的高级是指，当用户按下shift + 1时，keypress是对这个按键事件进行解析后返回一个可打印的“!”字符，而keydown和keyup只是记录了shift + 1这个事件。但是keypress只能针对一些可以打印出来的字符有效，而对于功能按键，如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭头方向等，就不会产生keypress事件，但是可以产生keydown和keyup事件。然而在FireFox中，功能按键是可以产生keypress事件的。传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl或Shift和一个按键一起按下，这通过事件的altKey、ctrlKey和shiftKey属性表示，这些属性在FireFox和IE中是通用的。二、兼容浏览器

JS自定义data-*属性与jquery的data()方法的使用

阅读更多关于 JS自定义data-*属性与jquery的data()方法的使用

3 月，跳不动了？>>> 人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是，你不知道将来会不会有其它脚本把你的自定义属性给重置掉，此外，你这样做也会导致html语法上不符合Html规范，以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性，你可以拿它做很多有用的事情。你可以去读一下HTML5的详细规范，但这个自定义data属性的用法非常的简单，就是你可以往HTML标签上添加任意以 "data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。下面的一个代码片段是一个有效的HTML5标记：复制代码代码如下: <div id="awesome" data-myid="3e4ae6c4e">Some awesome data</div> 可是，怎么来读取这些数据呢？你当然可以遍历页面元素来读取你想要的属性，但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj)，这个方法是在 jQuery1.4.3版本后出现的，它能返回相应的data属性。举个例子，你可以用下面的写法读取 data-myid属性值：复制代码代码如下: var myid= jQuery("#awesome").data(

js操作select option

阅读更多关于 js操作select option

1、获取选中select的value和text,html代码如下： <select id="mySelect"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option></select> 则可通过以下script代码s来获取选中的value和text $("#mySelect").val(); //获取选中记录的value值 $("#mySelect option:selected").text(); //获取选中记录的text值 2、运用new Option("文本","值")方法添加选项option var obj = document.getElementById("mySelect");obj.add(new Option("4","4")); 3、删除所有选项option var obj = document.getElementById("mySelect");obj.options.length = 0; 4、删除选中选项option var obj = document.getElementById("mySelect");var index = obj.selectedIndex;obj.options.remove(index);

订阅 js代码