javascript
文章平均质量分 90
liangklfang
https://github.com/liangklfangl
展开
-
那些变态的javascript输出
。仔细复习以下内容 首先:指定argument为this的(arguments[0]和obj.func是一样的道理,所以this是arguments);然后:this.foo的问题,因为直接调用main,从而this是window;isInt/isFloat等方法。if,for,while都会变量提升 console.log("a",a);//undefined co...原创 2019-07-10 20:03:22 · 781 阅读 · 0 评论 -
深入理解margin重叠以及负margin对元素大小的影响
CSS代码: body { background-color:yellow; } .par { margin-top:10px; background-color:red; width:100px; height:100px; }HTML部分: javascript部分:window.onload=functio原创 2015-11-21 09:57:42 · 6211 阅读 · 0 评论 -
获取元素相对于文档的偏移量以及元素相对于父元素的偏移量
问题1:如果获取元素距离文档顶部的距离? var rect=$('#elem')[0].getBoundingClientRect(); //获取元素距离文档顶部的距离 var top=rect.top+(window.pageYOffset||document.documentElement.scrollTop)-(document.documentElement.client原创 2015-12-22 09:30:53 · 13680 阅读 · 0 评论 -
javascript中那些计算元素位置的方法和jQuery位置计算方法比较
问题1:offsetTop,offsetLeft,offsetWidth,offsetHeight等方法的用法?对于offsetWidth/offsetHeight/offsetLeft/offsetTop的计算都是以border为界限的,也就说从子元素border开始计算,到父元素border为止!对于offsetTop/offsetLeft都是要牵涉到offsetParent的,该元素是非原创 2016-01-02 09:05:36 · 3518 阅读 · 0 评论 -
无定位父元素时offsetParent为body,但是offsetTop/offsetLeft计算距离从html开始
问题1:什么是offsetParent?解答:返回的是被定位的祖先元素,如果没有被定位的元素是body元素!问题2:发生margin重叠以后,我们怎么计算到offsetParent的距离?注意:下面的例子都是在标准模式下测试的结果 上面这种情况肯定会发生margin重叠 //offsetParent如果没有被定位的元素的情况下,如果和body发生了margin原创 2016-01-08 10:21:25 · 4891 阅读 · 1 评论 -
seajs配置问题详解以及seajs一些插件的使用
base配置: seajs.config({ base:"http://localhost:8080/sealJs/"}note: 这里是设置基础的文件夹,所有路径都是相对于他来说的alias配置:(alias就是当模块标识很长的时候用的方式)alias: { 'jquery1': 'moduler1/fakeJquery',/*相对地址,相对于base来说的,表示htt原创 2015-12-06 12:07:31 · 5517 阅读 · 0 评论 -
javascript高级程序设计中很多值得仔细推敲的地方
用法1:正则表达式实现格式化输出 var f = '9999999'.replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,'); console.log(f);后面的?=表示只有相等的情况下才会保存前面的部分!如果是match,我们看看他打印什么 console.log('9999999'.match((/\d{1,3}(?=(\d{3})+$)/g)));因原创 2015-12-20 12:23:29 · 881 阅读 · 0 评论 -
前端路上的各种问题-javascript—7
1.抽象出prototype的好处:(1)每个类中可以抽象出来一些共有的属性和方法定义在prototype对象中,当使用构造函数创建多个类的实例时,多个实例使用同一个prototype对象,大大减少了内存占用(2)新创建的对象的属性是在创建对象时候用prototype对象带来的,这样可以实现属性和方法的继承2.eval如果不再window中执行,都是局部变量,IE除外。window.eval都原创 2015-09-05 09:53:11 · 1118 阅读 · 1 评论 -
瀑布流特效,回到顶部特效,放大镜特效,选项卡原理分析
特效1:放大镜特效 其中demo是相对布局 /*这是大盒子,用于存放所有元素,同时是相对定位*/ #demo { display: block; width: 400px; height:原创 2016-01-04 14:23:18 · 1602 阅读 · 0 评论 -
使用接口解决JS文件冲突
//采用封装函数的方法,进而解决可能造成的冲突。接口技术就是对函数进行封装,然后定义一个对外的接口,其它文件只能通过接口来访问被封装的函数(function(){ average_floor={average:average};//接口对象 function average(a,b){return Math.floor((a+b)/2)}//被封装的函数 })原创 2015-09-18 15:09:27 · 997 阅读 · 0 评论 -
body元素和html元素之间的一些表现
问题1:布局方面的表现有什么不同?解答:body只是占用文档内容的区域,如果内容较少那么可能占据不了整个浏览器的可视区域,但是html元素至少也会占用浏览器的可视区域!该图是当body内容较少的情况下,html元素和body元素在浏览器中的表现。问题2:html,body元素之间是否会发生margin重叠现象? 我们给html元素也设定了一个margin-top值验证b原创 2016-01-07 10:31:36 · 2088 阅读 · 0 评论 -
DataTransfer对象的一些总结
11Hello /* document.getElementById("droptarget").ondragover=function(event){ event.preventDefault();}; document.getElementById("srcE").ondragstart=function(event){ event.dataTrans原创 2015-09-21 16:23:37 · 20730 阅读 · 0 评论 -
JS异步处理方案总结
代码最新内容请在github阅读,也欢迎您star和issue1.Generator与其他异步处理方案以前,异步编程的方法,大概有下面四种。1.1 回调函数JavaScript 语言对异步编程的实现,就是回调函数。所谓回调函数,就是把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数。它的英语名字 callback,直译过来就是”重新调用”。 读取文件进行处理,是这样原创 2017-07-03 19:55:24 · 2840 阅读 · 0 评论 -
每天记录一点新遇到的浏览器方法和属性
问题1:document的elementFromPoint方法这个方法可以根据坐标的点来获取元素,不过是获取最上层的元素,而且浏览器兼容也是需要考虑的,因为不同的浏览器传入的参数有可能是clientx,也有可能是pagex。下面的代码就可以实现这个功能。function init() { document.onclick = getElement; writeroot = docu原创 2016-06-25 17:09:01 · 868 阅读 · 0 评论 -
JS中各种构造模式对比
JS中各种构造模式对比原创 2015-09-05 14:11:14 · 778 阅读 · 0 评论 -
JS中子类中如何调用父类的同名方法(继承时候,父类的同名方法被覆盖了)
继承时候,同名方法发生覆盖了,通过在临时私有变量先保存超类的同名方法,然后在子类同名方法中调用即可!function A(){ //通过call传递进来的this就是var b=new B()创建的b对象,所以this.sex打印了female this.m=function(){alert("A"+this.sex)}}function B(){//用原创 2015-09-05 18:28:52 · 11383 阅读 · 0 评论 -
JS中各种继承方式对比
JS中各种继承方式对比原创 2015-09-05 15:29:50 · 739 阅读 · 1 评论 -
JS中的克隆与数据属性和访问器属性
一、数据属性和访问器属性:(1)在ECMAScript5中用Object.keys可以获取到对象的所有的可枚举属性的字符串数组,如果用于原型,那么就获取原型上面的所有的属性,如果用于实例,那么就返回实例属性。如果你想得到所有的实例属性,不管他是否可以枚举就可以用Object.getOwnPropertyNames方法,这个方法连constructor也会迭代出来!(2)Object.key原创 2015-10-21 12:15:09 · 1579 阅读 · 0 评论 -
[高级程序设计]从高级程序设计中搬来的一些值得注意的地方
1、默认情况下只有表单字段可以获得焦点,但是如果对于其它的元素首先把tabindex设置为-1,然后调用focus方法也能获取焦点,只有opera不支持这个技术 var elem=document.getElementById("elem"); elem.tabIndex=-1; elem.focus();2、HTML5的autofocus属性window原创 2015-12-29 18:51:30 · 943 阅读 · 0 评论 -
JSON.stringify几种可能的用法总结
$(document).ready(function(){//如果JS对象含有toJSON方法,那么stringify返回该方法的返回值 //var obj={name:"xxx",sex:'female',toJSON:function(){return "xxx";}}; // alert(JSON.stringify(obj));//如果stringify提供了第原创 2015-09-10 12:24:06 · 12815 阅读 · 1 评论 -
前端路上的各种问题-javascript—6
1.function语句,new Function()或者函数直接量的比较: 1)作用域方面,new Function具有全局作用域 2)解析效率方面,new Function每次都需要重新编译对象,而function语句会提前编译,不会重复编译。这是new Fucntion具有全局作用域根本原因 3)Function构造函数和函数直接量定义的函数不需要额外的变量原创 2015-09-04 09:09:48 · 602 阅读 · 0 评论 -
jQuery源码分析之$.get/$.post/serialize/serializeArray方法详解
get/post源码如下:jQuery.each( [ "get", "post" ], function( i, method ) { //如果第二个参数就是函数,那么表示没有传入数据! jQuery[ method ] = function( url, data, callback, type ) { // shift arguments if data argument was原创 2015-11-05 12:12:20 · 4503 阅读 · 3 评论 -
jQuery源码分析之tearDown和setup
问题1:如果我绑定focusin,那么底层是如何处理的?在jQuery.event.add方法中 special = jQuery.event.special[ type ] || {};//获取初始事件的对象 // If selector defined, determine special event api type, otherwise given type type = (原创 2015-12-14 20:03:09 · 1443 阅读 · 0 评论 -
jQuery源码分析之jQuery.event.trigger及jQuery.Event十问
首先我们给出一个例子:HTML部分: JS部分:$("#n1").on("click",function(){alert("n1 ")});$("#n2").on("click",function(){alert("n2 ")});$("#n3")[0].onclick=function(){ alert("click1 invoked!"); retur原创 2015-10-15 15:59:29 · 3421 阅读 · 1 评论 -
jQuery源码分析之jQuery.event.special八问
参见博客:点击打开链接jQuery.event.special源码如下:special: { load: { // Prevent triggered image.load events from bubbling to window.load //防止img元素的load事件冒泡到window的onload事件上面 noBubble: true }, foc原创 2015-10-17 16:45:28 · 2657 阅读 · 0 评论 -
jQuery源码分析之jQuery.event.fix方法五问
源码如下: var rformElems = /^(?:input|select|textarea)$/i, rkeyEvent = /^key/, rmouseEvent = /^(?:mouse|pointer|contextmenu)|click/, rfocusMorph = /^(?:focusinfocus|focusoutblur)$/, rtypenam原创 2015-10-17 16:28:46 · 1309 阅读 · 1 评论 -
jQuery源码分析之jQuery.event.add和jQuery.event.dispatch十一问
dispatch方法源码:var rnotwhite = (/\S+/g);var rtypenamespace = /^([^.]*)(?:\.(.+)|)$/;var strundefined=undefined;var slice=[].slice;//当点击对象时候就会调用下面的eventHandle对象,传入的参数是Event对象!jQuery.event.dispatc原创 2015-10-14 17:00:54 · 3322 阅读 · 0 评论 -
jQuery源码分析之jQuery.even.handlers八问
首先给出测试用例:HTML部分: 给出JS部分代码:var handlers1=function( event, handlers ) { var sel, handleObj, matches, i, handlerQueue = [], //获取这个数组的delegateCount表示delegate了几个对象 delegateC原创 2015-10-14 15:20:43 · 932 阅读 · 0 评论 -
细数jQuery源码中那些解决内存泄漏问题
问题1:解决IE6-8中移除自定义事件导致的内存泄漏问题jQuery.removeEvent = document.removeEventListener ? function( elem, type, handle ) { if ( elem.removeEventListener ) { elem.removeEventListener( type, handle, false原创 2015-12-11 09:13:46 · 2052 阅读 · 0 评论 -
前端路上的各种问题-javascript—8
1.清除特定节点下面的空格的child function clean(e){ var e||document; var f=e.firstChild; while(f!=null) {if(f.nodeType==3&& /\s/.test(f.nodeValue))//类型检测同时加上正则表达式检测 {e.removeC原创 2015-09-06 09:14:01 · 1160 阅读 · 1 评论 -
javascript文件加载过程中产生的依赖问题
一,加载JS文件产生的问题 /*依次等待下载并执行,前面的js阻塞后面的js下载执行*/note:这种加载js文件可能产生的问题:(1)当js引擎遇到标签的时候,页面必须停下来等待下载和执行代码(注意:是等待下载和执行),然后才能处理页面剩余部分。因为大多数浏览器使用单进程处理UI更新和javascript运行等多个任务,并且同一个时间只能处理一个任务。当jav原创 2015-12-05 13:51:07 · 4027 阅读 · 0 评论 -
JS中exec,match,replace,test方法对比
正则表达式中各种方法的比较: 方法名称RegExp的exec方法String对象的match方法RegExp对象的test方法String的replace方法RegExp的exec方法(1)第0个元素是与表达式匹配的文本(2)第1个元素是与子表达式匹配的文本(3)很显然返回值是数组(4)返回数组有length,inde原创 2015-10-19 09:33:38 · 5537 阅读 · 1 评论 -
图片懒加载的jQuery插件lazyLoad源码分析十八问
问题1:如何为每一个调用对象DOM元素添加自定义事件?this.each(function() { var self = this; var $self = $(self); self.loaded = false; /* If no src attribute given use data:u原创 2016-01-02 09:04:37 · 2343 阅读 · 0 评论 -
刷新页面更换CSS样式表-对网上document.write方式的修正
无意中看到了这样一篇博客刷新页面更换CSS样式表,所以想动手试试能不能满足结果,结果可想而知var cssname=Math.floor(Math.random()*2+1);document.write("");……该博客的问题在于运用了document.write,而该方法会重写整个页面,而不仅仅是head中的css,所以原来页面中的内容全部消失了,所以这种方法显然是不对的。而原创 2016-01-19 10:36:53 · 3664 阅读 · 0 评论 -
jQuery源码分析之jQuery中常用正则表达式分析
jQuery源码中正则表达式分析原创 2015-10-11 15:50:13 · 2320 阅读 · 0 评论 -
jQuery源码分析之实例find和filter方法的区别七问
首先我们要介绍一个winnow函数,它用于filter函数 function winnow( elements, qualifier, not ) {//如果qualifier是函数,那么给每一个对象调用if ( jQuery.isFunction( qualifier ) ) {return jQuery.grep( elements, functi原创 2015-10-07 09:52:11 · 1779 阅读 · 0 评论 -
jQuery源码分析之$.ajax方法
请阅读我其它的关于inspectPrefiltersOrTransport以及ajaxTransport等相关博文,请了解readyState状态码针对获取到location.href的兼容代码: try { ajaxLocation = location.href; } catch( e ) { // Use the href attribute of an A element原创 2015-11-04 15:05:53 · 7669 阅读 · 0 评论 -
jQuery源码分析之$.grep()函数四问
/*grep函数,第三个参数表示是否根据fn的结果取反!*/grep: function( elems, callback, invert ) {var callbackInverse,matches = [],i = 0,//保存数组个数length = elems.length,//对传入的第二个参数取反,true变成false,false变成true//如果i原创 2015-10-06 17:20:33 · 1165 阅读 · 0 评论 -
[高级程序设计]从高级程序设计中搬来的一些值得注意的地方(续)
1、prototype属性一些注意事项 实例对象和prototype没有prototype属性,这一点一定要注意,prototype属性是构造函数才有的属性;实例对象和prototype对象都只有一个_prototype_属性function A(){}var a=new A();console.log(a.hasOwnProperty('prototype'));//原创 2016-01-12 13:57:51 · 1231 阅读 · 0 评论 -
jQuery源码分析之从on方法看bind,delegate,live,one方法一问
请提前阅读on方法源码分析:点击打开链接bind方法源码: bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }delegate方法:delegate: function( selector, types, data, fn ) { return this.on( type原创 2015-10-17 12:31:35 · 1350 阅读 · 0 评论