js | 易学教程

js,jQuery获取html5的data-*属性

阅读更多关于 js,jQuery获取html5的data-*属性

今天做项目的时候发现一个坑，关于jQuery获取data-*属性的方法data()，特写此篇来记录。 data-* 自定义数据属性 HTML5规定可以为元素添加非标准型的属性，只需添加前缀data-，这些属性可以随意添加，随意命名，目的是为元素提供与渲染无关的信息，或提供语义信息。 js获取 data-* 的方式通过dataset属性访问 //HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj"></div> //js代码 var div = document.getElementById("myDiv"); var appId = div.dataset.appid;//获取data-appid的值 var myName = div.dataset.myname;//获取data-myname的值 //设置值 div.dataset.appid = 456; div.dataset.myname = "newname"; //最终HTML结果 <div id="myDiv" data-appid="456" data-myname="newname"></div> dataset属性的值是DOMStringMap的一个实例，名值对的映射。每个data-name形式的属性都有一个对应的属性，只不过该属性名没有data

js异步执行原理

阅读更多关于 js异步执行原理

我们都知道js是一个单线程的语言，所以没办法同时执行俩个进程。所以我们就会用到异步。异步的形式有哪些那，es5的回调函数。es6的promis等异步的运行原理我们可以先看下面这段代码应该很多人都知道这个打印的值是10个10. 也有知道当我们执行的for循环的时候，他会把for循环执行完成以后再去执行 setTimeout ，在执行 setTimeout 的时候这是时候的i已经变成了10所以就打印10个10。但是这里面的执行过程是这样的。我们用一个图来做解释图画的有点丑啊，大致的执行流程就是这样。在js执行的时候，我们在主线程执行的好好的，然后遇到了一个回调函数，然后他会把这个回调函数异步处理，就是放到事假队列中。然后我们主线程接着去执行，当主线程执行完成以后，在去执行事件队列里的函数。然后进行返回。在事件队列里，不存在从上到下进行执行。他会看那一个先执行完成，就直接返回那一个。什么意思呢。我们看下面这个代码执行结果为1然后2 当js执行的时候。这俩个会放进事件队列。js是从上往下执行。所以他会先把1放入事件队列中，然后在放入2. 这就可以看出在事件队列中，谁先执行完成，就返会谁到主线程上。这也是异步的一个执行过程来源： https://www.cnblogs.com/chenyudi/p/12630702.html

js 实现对象的混合与克隆效果，带完整版解析代码

阅读更多关于 js 实现对象的混合与克隆效果，带完整版解析代码

前言：本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小弟感激不尽。本篇文章为您分析一下原生JS写对象混合与克隆对象混合页面中如下需求 var obj1 = { x: 1, y: "a" } var obj2 = { x: "b", o: 6 } 页面上有两个对象我们要把这两个对象混合成一个形成如下结构： // 将obj2混合到obj1中 obj = { x: "b", y: "a", o: 6 } 参考代码： // ES5之前的版本 function mixin(obj1, obj2){ // 第一步: 创建一个对象 var newObj = {}; // 第二步: 循环obj2中的对象 for(var prop in obj2){ // 第三步: 将obj2中的属性添加到新创建爱对象中 newObj[prop] = obj2[prop]; } // 第四步: 循环obj1中的对象 for(var prop in obj1){ // 第五步: 看看obj1中的属性在不在obj2中，如果不在就将他加入的新的对象中 if(!(prop in obj2)){ newObj[prop] = obj1[prop]; } } // 最后返回这个新的对象 return newObj; } // ES6版本 // function mixin

js-语言精粹-函数记忆

阅读更多关于 js-语言精粹-函数记忆

函数可以将先前操作的结果记录在某个对象里，从而避免无谓的重复运算。这种优化方式被称为记忆（memoization）。JavaScript的对象和数组要实现这种优化是非常方便的。比如说，我们想要一个递归函数来计算Fibonacci数列。一个Fib数字是之前两个Fib数字的和。最前面的两个数字是0和1。 var count=0; var fib=function(n){ count++; return n<2?n:fib(n-1)+fib(n-2); }; for(var i=0;i<=10;i++){ console.log(fib(i)) } //0 //1 //1 //2 //3 //5 //8 //13 //21 //34 //55 count //453 这样是可以工作的，但它做了很多无谓的工作，fib函数被调用了453次。如果我们让该函数具备记忆功能，就可以显著地减少运算量。我们在一个名为memo的数组里保存我们的存储结果，存储结果可以隐藏在闭包中。当函数被调用时，这个函数首先检查结果是否已经存在，如果已经存在，就立刻返回这个结果。 var count=0; var fibonacci=function(){ var memo=[0,1]; var fib=function(n){ count++; var result=memo[n]; if(typeof

js的窗口坐标及拖拽

阅读更多关于 js的窗口坐标及拖拽

一、事件对象的坐标属性 1、事件对象.offsetX 对象事件.offsetY 点击时，获取的是标签左上角的坐标 2、事件对象.clientX 事件对象.clientY 点击时，视窗左上角坐标 3、事件对象.pageX 事件对象.pageY 点击时，页面左上角坐标如果没有滚动，页面左上角和视窗的左上角重合，两个数值是不同的 var oDiv = document.querySelector('div'); oDiv.onclick = function(e){ //获取对象内容左上角坐标 var x= e.offsetX; var y = e.offsetY; console.log(x,y); //获取视窗创就坐标 var CX = e.clientX; var CY = e.clientY; console.log(CX,CY); 获取Html文档，左上角的坐标 var PX = e.pageX; var PX = e.pageY; console.log(PX,PY); console.log(e); } 例子：给一个宽高位100px的div做随着点击位置，中心点到达点击位置 var oDiv = document.querySelector('div') // var oDivHeight = oDiv.offsetHeight; var oDivWidth =

js 控制Span的内容

阅读更多关于 js 控制Span的内容

楼主 exceyond（南柯） 2004-03-24 18:05:43 在 Web 开发 / JavaScript 提问示例如下： <SCRIPT language=javascript> var pakstring="lalalala" document.all.pak.innerHTML=pakstring; </script> <hr>呼呼<hr>哗哗<hr>< span id=pak></ span > 显示出错是“document.all.pak 为空或不是对象” 请指正，记得以前这样写可以的；另外，刚装的ie6 问题点数：30、回复次数：5 Top 1 楼 kisslan（郁忧的曼陀萝）回复于 2004-03-24 18:28:26 得分 10 把 js 放在 span 后面,你放在前面,它还没解析到 span ,所以会报错 :) Top 2 楼 exceyond（南柯）回复于 2004-03-24 18:38:20 得分 0 我的本意是写一段html放在 js 里作为独立文件的，所以必然会出现 <script src=mycode. js ></script>在< span id=pak></ span >前面的情况，有办法实现吗？印象里html是很经的起摔打折磨的， js 大多数可以随便放的多谢，请再指点一二。 Top 3 楼 afoskoo（暂停打印）

用JS写的百叶窗3

阅读更多关于用JS写的百叶窗3

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0;padding:0;list-style:none;} body{background:url(img/bg.gif) repeat top left;} #box{width:600px;height:400px;margin:50px auto; border:20px solid #fff; overflow:hidden; position:relative;} #box ul li{ opacity:0; width:600px; height:400px; position:absolute; top:0; left:0;} #box ul li span{ width:150px; height:400px; float:left;} #box ul .active{ opacity:1;} #box ol{width:100%; height:34px; position:absolute; bottom:20px;} #box ol li{ float:left; width:42px; height:42px; background:rgba(255,255,255,0.4);

JS系列-事件循环机制event Loop

阅读更多关于 JS系列-事件循环机制event Loop

任务　　可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。运行机制如下: （1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。（4）主线程不断重复上面的第三步。只要主线程空了，就会去读取"任务队列" 任务队列: "任务队列"是一个事件的队列，IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件; 除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。 "回调函数

js语法笔记

阅读更多关于 js语法笔记

注：脑容量有限，本笔记主要记录本人认为较为有用的js方法 1、sessionStorage ：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。（如需长期保存可用 localStorage）　　语法： window . sessionStorage 　　保存数据： essionStorage . setItem ( "key" , "value" ); 　　读取数据： sessionStorage . getItem ( "key" ); 　　删除数据： sessionStorage . removeItem ( "key" ); 　　删除所有数据： sessionStorage . clear (); 2、 JSON . parse ( text [, reviver ])：将一个 JSON 字符串转换为对象，第二个参数为可选。 3、 JSON.stringify(value[, replacer[, space]])：将 JavaScript 值转换为 JSON 字符串，replacer用于转换结果的函数或数组，space用于文本添加缩进，空格或换行。来源： https://www.cnblogs.com/icemargin/p/12626285.html

js中(!+[]+[]).length

阅读更多关于 js中(!+[]+[]).length

我也不明白我怎么喜欢研究这些奇奇怪怪的内容😂 (!+[]+[]).length ==> 4 还是js的隐氏转换规则，详见上节； https://www.cnblogs.com/hq-HQ/p/12624944.html 补充：! 逻辑非，将操作数的布尔值求反，!! 类型转换，将对应的类型转换为Boolean型; 举个🌰： !null ==>true(等同于Boolean(null)==>false,加上非!，结果取反), !undefined ==>true, !1 ==>false, ![] ==>false !!null ==>false (等同于Boolean(null)==>false), !!unsefined ==> false, !!1==>true, !![]==>true 言归正传：一步一步来，先看!+[], !是个String类型，按照规则，[]也要转为String类型 "", 所以就是 !+"" , 即 ==> !"",(逻辑非来了)因为Boolean('')==>false,结果取反则为 true，接下来变成了 true+[] ,二者都转换为字符串类型拼接，结果还是true；最终变成 true.length 所以浏览器会输出 4 插一句：Boolean类型和数组类型相加，两者会转变为字符串类型拼接，当数组中有多项时，字符串会用逗号'，'隔开

订阅 js