js | 易学教程

关于js事件冒泡和时间捕获

阅读更多关于关于js事件冒泡和时间捕获

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window （2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。 DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行

JS-特效～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

阅读更多关于 JS-特效～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

楼层跳跃　　 100%子盒子会继承父盒子的宽高。父盒子继承body宽高。Body继承html的宽高。盒子属性：auto:适应盒子自身的宽度或者高度。（对自己负责）盒子属性：100%:适应盒子父盒子的宽度或者高度。（对爸爸负责） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } body,html { height: 100%; } ul { list-style: none; height: 100%; } ul li { height: 100%; } ol { list-style: none; position: fixed; top: 80px; left: 50px; } ol li { width: 50px; height: 50px; border: 1px solid #000; text-align: center; line-height: 50px; margin-top: -1px; cursor: pointer; } </style> </head> <body> <ul> <li>鞋子区域</li> <li>袜子区域</li> <li>裤子区域</li> <li

利用JS实现前端路由

阅读更多关于利用JS实现前端路由

在以前的web程序中，路由字眼只出现在后台中。但是随着SPA单页面程序的发展，便出现了前端路由一说。单页面顾名思义就是一个网站只有一个html页面，但是点击不同的导航显示不同的内容，对应的url也会发生变化，这就是前端路由做的事。也就是通过JS实时检测url的变化，从而改变显示的内容。目前很多前端框架都有接口去实现路由，比如vuejs的vue-route等。我们可以利用原生的hashchange事件来模拟一个简单的路由。实例的html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .content{ position:absolute; left: 0px; top:0px; display: none; } .content:nth-child(1){ display: block; } </style> <script src="js/jquery-2.2.1.min.js"><

JS实现textarea对象Maxlength属性

阅读更多关于 JS实现textarea对象Maxlength属性

转自[ http://www.itercn.com/wp/archives/155.html ] <form id=”8848so” name=”8848so” action=”http://www.8848so.com” method=”post”> <textarea id=”content”></textarea> <span id=”tip”></span> </form> <!– = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * = = * * 作者：我本有心 –> <script language=“javascript“ type=“text/javascript“> fixedLength(“content“,“tip“,5); //调用说明：textarea对象ID,span或div对象ID(用于显示提示信息),最大允许字符数 function fixedLength(textareaID,tipsID,wordLength) { var textarea = document.getElementById(textareaID); var span = document.getElementById(tipsID); textarea.onkeyup = function()

JS缓冲运动案例

阅读更多关于 JS缓冲运动案例

点击“向右”按钮，红色的#red区块开始向右缓冲运动，抵达到黑色竖线位置自动停止，再次点击“向右”#red区块也不会再运动。点击“向左”按钮，红色的#red区块开始向左缓冲运动，抵达到蓝色竖线位置自动停止，再次点击“向左”#red区块也不会再运动。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JS小案例：缓冲运动</title> <style> #red { width: 200px; height: 200px; background: red; position: absolute; top: 50px; left: 200px; } .black { position: absolute; width: 1px; height: 200px; left: 900px; background: black; top: 50px; } .blue { position: absolute; width: 1px; height: 200px; left: 200px; background: blue; top: 50px; } </style> <script> //补充代码 </script> </head> <body> <input type='button' value

js预解析

阅读更多关于 js预解析

js预解析 1. 定义预解析：在当前作用域下,js运行之前，会把带有var和function关键字的事先声明，并在内存中安排好。然后再从上到下执行js语句。预解析只会发生在通过var定义的变量和function上。 2. var 通过var关键字定义的变量进行预解析的时候:都是声明declare，不管它有没有赋值，都会赋值undefined。 alert(a); //undefined var a = 1; alert(b); //undefined var b = function(){ } alert(c); //undefined var c; 只要是通过var定义的，不管是变量，还是函数，都是先赋值undefined，如果是变量，也不管变量有没有赋值，在预解析阶段，都是会被赋值为undefined。 3. function function进行预解析的时候，不仅是声明而且还定义（define）了，但是它存储的数据的那个空间里面存储的是代码是字符串，没有任何意义。 alert(a); //弹出的是下面的function function a(){ 　　alert("预解析function") } 注意这种情况定义一个函数想要立即执行，写成如下形式是不可行的，在预解释的时候，它把它分解成两部分来对待，第一部分是fn函数，而第二部分是(),一个匿名函数，执行时会报错

js 遍历数组取出字符串用逗号拼接

阅读更多关于 js 遍历数组取出字符串用逗号拼接

1 var arr = [{"name":"hhh"},{"name":"dddd"}] 2 3 //用js 4 function getTextByJs() { 5 var str = ""; 6 for (var i = 0; i < arr.length; i++) { 7 str += arr[i].name+ ","; 8 } 9 //去掉最后一个逗号(如果不需要去掉，就不用写) 10 if (str.length > 0) { 11 str = str.substr(0, str.length - 1); 12 } 13 return str; 14 } 15 //输出结果: hhh,dddd 16 17 18 //用jquery 19 function getTextByJquery() { 20 var str = ""; 21 arr.each(function () { 22 str += $(this).name.val() + ","; 23 }); 24 //去掉最后一个逗号(如果不需要去掉，就不用写) 25 if (str.length > 0) { 26 str = str.substr(0,str.length - 1); 27 } 28 return str; 29 } 30 //输出结果: hhh,dddd 31 　　 32 33 来源：

js基础笔记 javascript数据类型

阅读更多关于 js基础笔记 javascript数据类型

在javascript中有5中基本数据类型分别是：Undefined、Null、Boolean、Number、String。和一个复杂数据类型：Object。一、Undefined 1. Undefined类型只有一个值undefined。当用var声明一个值并未对其进行初始化的时候，这个变量的值就是undefined。 var boss; alert(typeof boss); 2. 包含undefined值得变量与尚未定义的变量是不一样的。 var boss; alert(boss); // undefined alert(message); // 报错 Uncaught ReferenceError: message is not defined 3.对为声明的变量执行typeof 也会返回undefined // var message; alert(typeof message); // undefined 4. 我们要尽可能的在声明变量的时候对其赋予初始值，如果每一个变量都被赋予了初始值，那么当typeof 某个变量返回undefined时我们就知道被检测的变量是没有被声明而不是没有没初始化了。二、Null 1. Null 类型只有一个值null。从逻辑角度来看空值是标识一个空对象指针，而这也是使用typeof 检测null 返回对象的原因 var a =

JS 常用正则表达式备忘录

阅读更多关于 JS 常用正则表达式备忘录

3 月，跳不动了？>>> 匹配正则使用 .test() 方法 let testString = "My test string" ; let testRegex = /string/ ; testRegex.test(testString); 匹配多个模式使用操作符号 | const regex = /yes|no|maybe/ ; 忽略大小写使用 i 标志表示忽略大小写 const caseInsensitiveRegex = /ignore case/i ; const testString = 'We use the i flag to iGnOrE CasE' ; caseInsensitiveRegex.test(testString); // true 提取变量的第一个匹配项使用 .match() 方法 const match = "Hello World!" .match( /hello/i ); // "Hello" 提取数组中的所有匹配项使用 g 标志 const testString = "Repeat repeat rePeAT" ; const regexWithAllMatches = /Repeat/gi ; testString.match(regexWithAllMatches); // [ "Repeat" , "repeat" ,

js keyup、keypress和keydown事件详解

阅读更多关于 js keyup、keypress和keydown事件详解

js keyup、keypress和keydown事件详解 js keyup、keypress和keydown事件都是有关于键盘的事件当一个按键被pressed 或released在每一个现代浏览器中，都可能有三种客户端事件。 keydown event keypress event keyup event keydown事件发生在键盘的键被按下的时候，接下来触发 keypress事件。 keyup 事件在按键被释放的时候触发。这三个事件在页面中的使用方法如下例： <input id="testkeyevent" name="testkeyevent" onKeyUp ="keyup()" /> <input id="testkeyevent" name="testkeyevent" onkeypress ="keypress()" /> <input id="testkeyevent" name="testkeyevent" onkeydown ="keydown()" /> 对应的js函数： function keyup(){ ...} function keypress(){ ...} function keydown(){ ...} 注意: KeyDown触发后，不一定触发KeyUp，当KeyDown 按下后，拖动鼠标，那么将不会触发KeyUp事件。

订阅 js