js | 易学教程

异步加载和js时间线

阅读更多关于异步加载和js时间线

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把 < script > 标签放在< body>结尾处，这样尽可能减少页面阻塞。异步在加载的过程中产生一个子进程去加载当前程序，自己去执行下一个程序特点：单线程的异步就是多线程，只不过用异步的方式表现出来了异步加载的三种方式第一种方式： < script defer = "defer" > < / script > 第二种方式：（只能加载src中的脚本，不能把代写在script标签中） < script async = "async" src = "js/logo.js" > < / scipt > 注意：不要在这里写代码第三种方式：除了以上两种方法，还有一种兼容自己封装的异步加载方式，即动态添加script标签也能实现异步加载。 < script > //异步的过程 var script = document . createElement ( "script" ) ; script . src = "js/logo.js" ; document . head . appendChild ( script ) ; < / script >

iOS:OC与JS交互

阅读更多关于 iOS:OC与JS交互

目的是为了在webView页面截取到js操作，然后跳出到本地进行处理第一种方法：使用原生的处理方式 1.下边是本地的 a.html 的源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <script> function test() { alert('clicked'); } function testParams(a, b){ alert(a+b); } </script> </head> <body> <button onclick="test()">点击我</button> <button onclick="testParams('hello', 123)">点击我(带参数)</button> </body> </html> 2.导入JavaScriptCore.framework，在需要调用的web页面加上头文件#import

js的继承,call()方法的运用(1)

阅读更多关于 js的继承,call()方法的运用(1)

在es6之前,是没有extends继承的,我们都是通过构造函数,原型对象来模拟,实现了继承. 为什么这么说呢? 这是因为我们是利用构造函数来继承属性,利用原型对象来继承方法的 .现在我们就可以通过call( ),apply( ),bind( )这三个方法也可以实现继承. call( ); 用法 fn . call ( thisArg , arg1 , arg2 , ... ) thisArg : 当前调用函数this的指向对象; arg : 传递的参数 call( )方法的作用可以调用函数 function fn ( ) { console . log ( "123" ) ; } fn . call ( ) ; //123 这里我利用call方法也可以正常的调用函数可以修改函数里面的this指向首先我先看一下函数fn里面的this指向的是window function fn ( ) { console . log ( "123" ) ; console . log ( this ) ; //window{....} } var obj = { name : '小明' } fn . call ( ) ; //123 fn . call ( obj ) //{name: "小明"} 这时 f n 这个函数里面的this就指向了obj这个对象 call(

js-手风琴式菜单

阅读更多关于 js-手风琴式菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <style> ul{ list-style-type: none; } .parentWarp{ width: 200px; text-align: center; } .menuGroup{ border:1px #999 solid; background-color: deepskyblue; } .grounpTitle{ display: block; height: 20px; line-height: 20px; font-size: 16px; border-bottom: 1px #ccc solid; cursor: pointer; } .parentWarp div{ height: 200px; background-color: cornflowerblue; display: none; } </style> <script> $(function () { //思路： //span注册click事件，点击span

js 添加事件 attachEvent 和 addEventListener 的用法

阅读更多关于 js 添加事件 attachEvent 和 addEventListener 的用法

一般我们在JS中添加事件,是这样子的 1 obj.onclick=method 这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢? 1 2 3 obj.onclick=method1; obj.onclick=method2; obj.onclick=method3; 如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法 1 2 3 4 //object.attachEvent(event,function); btn1Obj.attachEvent( "onclick" ,method1); btn1Obj.attachEvent( "onclick" ,method2); btn1Obj.attachEvent( "onclick" ,method3); 使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是 method3->method2->method1 可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法 1 2 3 4 //element.addEventListener(type,listener

Jquery 日期控件

阅读更多关于 Jquery 日期控件

JQuery是一款非常优秀的脚本框架，其丰富的控件使用起来也非常简单，配置非常灵活。下面做一个使用日期插件datapicker的例子。 1、下载jQuery核心文件就不用说了吧，datepicker是轻量级插件，只需jQuery的min版本就行了，然后到官网 http://jqueryui.com/download 下载jquery-ui压缩包（可以选择喜欢的theme），里面就包含对datepicker的支持，当然您也可以网站 http://marcgrabanski.com/pages/code/jquery-ui-datepicker 下载datepicker，包括ui.core.js和ui.datepicker.js。 2、在HTML中引用下载下来的js文件： // /jquery-1.5.1.min.js // js/jquery.ui.core.js // js/jquery.ui.datepicker.js 3.在HTML中引入默认样式表文件，这个文件在ui压缩包中。如果在官网下载，首页就有这个CSS文件下载，也可选择其他皮肤的CSS。 // jquery-ui-1.8.13.custom.css 4.在HTML中插入文本域，最好设置成只读，不接受用户的手动输入，防止格式混乱，以id标记好。 < input type= "text" id= "selectDate"

JQuery日期插件datepicker的使用

阅读更多关于 JQuery日期插件datepicker的使用

1. jQuery 是一款非常优秀的脚本框架，其丰富的控件使用起来也非常简单，配置非常灵活。下面做一个使用日期插件datapicker的例子。 1、下载jQuery核心文件就不用说了吧，datepicker是轻量级插件，只需jQuery的min版本就行了，然后到官网 http://jqueryui.com/download 下载jquery-ui压缩包（可以选择喜欢的theme），里面就包含对datepicker的支持，当然您也可以网站 http://marcgrabanski.com/pages/code/jquery-ui-datepicker 下载datepicker，包括ui.core.js和ui.datepicker.js。 2、在HTML中引用下载下来的js文件： [xhtml] view plain copy  < mce:script src= "js/jquery.1.4.2.js" mce_src= "js/jquery-1.5.1.min.js" type= "text/ JavaScript " > </ mce:script >  < mce:script src= "js/jquery.ui.core.js" mce_src= "js/jquery.ui.core.js"

JS 使用window.parent、window.top、window.self 判断iframe 嵌套

阅读更多关于 JS 使用window.parent、window.top、window.self 判断iframe 嵌套

首先介绍 window.self,window.top,window.parent,window.opener 四个的作用区别； window.self,window.top 是打开模式，而 windo.parent，window.opener 是父页面的打开模式。如果页面中有iframe或者framese时，parent是父窗口，top是最顶级父窗口（如果窗口中存在多层嵌套），self是当前窗口，opener是用open方法打开当前的窗口。 window.self 功能：是对当前窗口自身的引用。它和window属性是等价的。语法：window.self 注：window、self、window.self是等价的。 window.parent 功能：返回父窗口。语法：window.parent 注：如果窗口本身是顶层窗口，parent属性返回的是对自身的引用。 window.top 功能：返回顶层窗口，即浏览器窗口。语法：window.top 注：如果窗口本身就是顶层窗口，top属性返回的是对自身的引用；如果窗口仅在一层iframe中，top属性与parent属性等价。通过window.parent ,window.top,window.self可以分别获取当前窗口、父窗口、顶层窗口的对象引用

JS数组定义及详解

阅读更多关于 JS数组定义及详解

JS数组定义及详解 1、什么是数组数组就是一组数据的集合其表现形式就是内存中的一段连续的内存地址数组名称其实就是连续内存地址的首地址 2、关于js中的数组特点数组定义时无需指定数据类型数组定义时可以无需指定数组长度数组可以存储任何数据类型的数据（比如说一个元素保存整型，一个元素保存字符串型，这个在JS中是可以的）创建数组的语法： var arr=[值1,值2,值3]; //隐式创建 var arr=new Array(值1,值2,值3); //直接实例化 var array=new Array(size); //创建数组并指定长度 JS中符号含义： ()表示函数执行 []表示语法模拟，表示模拟Array类的实例（=new Array()） {}表示语法模拟，表示模拟Object类的实例（=new Object()） //表示语法模拟（正则对象），表示模拟RegExp类的实例（=new RegExp()） 1 //方法一 2 var arr1 = [1,3,5,7,9]; 3 document.write(arr1[2] + '<br>'); 4 5 //方法二 6 var arr2 = new Array(2,4,6,8,10); 7 document.write(arr2[3] + '<br>'); 8 9 //方法三 10 var arr3 = new Array

js函数(续)

阅读更多关于 js函数(续)

一、全局变量和局部变量全局变量：当前js页面中均可使用的变量【声明在函数外面的变量】,整个js页面中均可以使用。局部变量：声明在函数内部的变量,只能在函数内部使用。 eg: var a = 1; console.log(a); function test(){ console.log(a); //1 var b = 2 // c = 3; //c变量为全局变量，它的声明提前了【在页面的开始声明】 console.log(b); //2 } console.log(b); //错误提示：b is not defined 二、函数的使用函数作为函数的参数使用：(可以作为回调函数使用) eg: function test(fun){ var msg = '我是test()函数中的变量msg'; fun(msg); } //函数test的调用 test(function(param){ console.log(param); //输出：我是test()函数中的变量msg }); 函数作为返回结果来使用： eg: function test(){ return function(){ console.log('我是test()函数的返回函数中的输出语句'); }; } //函数test的调用 test(); //test();的返回值为：function(){console

订阅 js