- 博客(24)
- 收藏
- 关注
原创 CSS3选择器中容易误解的坑
CSS3新增了许多选择器如nth-child/last-child等,这让我们在写样式的时候可以更加灵活,而让我们广大前端程序员熟知的JQ的选择器也正是根据CSS选择器来做的。当然HML DOM也为我们拓展了querySelector与querySelectorAll来使用CSS选择器进行DOM操作,这实在比之前的getElementByXX方便了许多,然而或许之前的CSS选择器会让我们在使用CS
2016-11-23 17:15:28 974 1
原创 JS引擎之LHS RHS查询
在书写代码的时候我们无时无刻不在与作用域较劲,而引擎是如何在沿着作用域链把我们想要的东西查找出来的呢?这里就涉及到了L与R的区别。 通过字面意思就很容易理解L代表left R代表right,而LHS与RHS查询我们可以先简单的区分为:查询在 = 号左边的变量时,引擎使用LHS,查询在 = 右边的变量时,引擎使用RHS。LHS查询出来的是变量的地址,方便进行形如a = 2的赋值操作,因为引
2016-10-09 17:38:07 2932 1
原创 JS变量重复声明以及忽略var 声明的问题及其背后的原理
JS的容错率很高,一些其他语言常见的小错误JS都能大度得包容,比如给一个方法传入超出预计的参数、在声明变量之前使用该变量(变量的声明提升解决了这个问题)等等,这里我们就要解剖一下JS变量重复声明以及当我们忽略var使用 a=2来声明变量时a为全局变量的问题://第一段代码var a = 2;var a = 3;alert(a);//3//第二段代码a = 2;alert(a)
2016-10-09 14:35:12 9362 2
原创 好基友verticle-align与line-height的相关问题探究
相信混迹前端的各位大侠们都对verticle-align和line-height两个形影不离的好基友不陌生,他们解决了我们大部分的垂直居中问题,图片、文字等等牛的要上天的江湖侠士都拜倒在他们的基友剑法之下,不得不乖乖按规矩站好。无奈在下赵日天虽是对这两基友有一定自己的理解,但还是在今天在他们的剑法之下翻了船,欲知详情,且听日天一一分解。 人物介绍: 1.line-heig
2016-10-08 17:07:44 1003
原创 闭包的理解以及一些注意事项
最近一直处于笔试面试、笔试面试的状态,说起这段苦逼的日子还真是颠覆了自己以前对找工作的难易度的想象,不过也收获颇丰,感觉自己知识面还算可以,但是细节性的东西把握得真的是不好,好多东西在翻阅大神的博客或者资料的时候曾经看到过,也些许记得几个要点,想着自己去跑一下试试但放着放着就忘记了,所以面试的时候老是败在细节性的问题上。 言归正传,闭包算是在面试环节的宠儿,面试官总会喜欢“来,给我写个闭包
2016-09-21 16:37:51 1108
原创 关于height:100%无效的解决办法与细节
我们知道,对于块级元素浏览器总是默认使其宽度等于父容器宽度的100%不需要自己设定,但是对宽度的计算就并非这样了,当没有显式得定义容器的高度时,其高度由其包裹的内容决定,当显示得定义高度时,容器的高度就为设定的值,使用overflow可以对超出高度的内容进行处理。 有时我们不明确高度,需要使用height:100%来设定高度时,有时并不能达到预期的效果,主要原因就是当我们使用h
2016-09-08 11:25:03 12788
原创 onmousewheel鼠标滚轮事件绑定的兼容性问题
其实我对于各个浏览器的兼容性知道的是少之又少,所了解的也不过是event||window.event , e.target||e.srcElement,element,nextSibling||nextElementSibing等等之类的日常需要用到的一些属性的兼容性写法,关于这些,如果有朋友不知道,我改日抽空会把自己封装出的一些小方法贴出来,并讲解一下,如果是大神就一笑而过就好了。 进
2016-09-01 22:14:19 4943
原创 原生JS绑定事件的兼容性写法与绑定事件的几种方法
绑定事件算是DOM操作里面最基本的事情了,通常绑定事件的方式有以下一种: 1.形如内联样式的时间绑定: 2.使用addEventlisener(event,fn,useCapture) 也许大家经常使用这个方法,但没有发现这个方法其实有三个参数,最后一个参数
2016-08-18 14:18:16 5450
原创 关于JS事件冒泡与JS事件代理(事件委托)
事件作为DOM操作重要的一环,需要大家好好理解和运用,今天特意看了一下事件冒泡和事件代理的相关资料,感触颇深,也深感自己的无知不知道多浪费了多少内存,废话不多说进入正题:1.事件冒泡: 通俗易懂的来讲,就是当一个子元素的事件被触发的时候(如onclick事件),该事件会从事件源(被点击的子元素)开始逐级向上传播,触发父级元素的点击事件。下面见详细的代码:
2016-08-12 16:26:41 12149 2
原创 JS实现各种排序算法以及时间复杂度
最近在复习数据结构的同时也顺便看了一下一些基本的排序算法,当初刚踏入计算机专业大门的时候学得死去活来的东西现在看起来容易理解了许多,于是用JS将各个排序的算法写了一下: 1.冒泡排序 原理:对数组进行遍历,相邻元素根据大小进行交换,每次遍历将最小值推至最前方,然后对剩下的值再次进行比较 最坏时间复杂度:O(n^2) 有的人有可能会问,冒泡每次遍历所需要执行的次
2016-08-08 18:03:14 8568 2
原创 关于元素层叠顺序的探讨
在最近的开发过程中,由于是关于文件上传的功能,需要两个Input框堆叠在一起,并有一个是透明的,然而就是一个opacity属性让我发现了元素的层叠顺序的问题,于是就动手试了一下,发现平民加了主角光环(opacity)就可以起到逆袭的作用: 首先为三个最普通不过的position为static的div以下称为小红小蓝小绿: .box{
2016-07-28 18:16:44 937
原创 JS学习函数小TIP学习笔记
引言: 最近开始着手认真学习JS,大三下学期经历了一系列的面试,越来越意识到JS的重要和知识的匮乏,不甘于再偷懒用着第三方库,所以开始认真学习JS,下面会贴出一些很基础的小函数来体现JS的一些知识,写这个也是勉励自己能坚持下来,每天都学习一点点,在博客更新出来,也希望像我一样的小白看了有收获------20161年4月29日一、setTimeout是否会阻碍进程:
2016-04-29 17:29:18 606
原创 使用CSS border绘制箭头
在日常开发的过程中,一些小图标,例如小箭头,都是比较常用的,最近看到了一个用CSS绘制小箭头的方法,但是对其实现原理不是很清楚,于是就探究了一下: 先贴一下绘制箭头的代码:HTML: CSS: .arrow{ width: 0; height: 0;
2016-04-29 15:39:31 7840
原创 关于placeholder的小tip
H5给我们提供了许多方便的属性以及更加语义化的标签,但是浏览器的兼容性还是一大问题,首先想要使用placeholder属性浏览器需要支持H5,而对于支持H5的浏览器来说显示效果也是有一定区别,当我们仅仅想要改变Input框内文字的颜色,使其能与placeholder的灰色区别开来,比如红色(input{ color:red; })时,chorme和safari都完成了我们预期的目标,而
2016-03-26 20:19:05 529
原创 关于伪类伪元素以及:after与:before
在使用bootstrap并结合网页进行调试的时候,经常看见:before与:after这两个东西,而刚开始并没有在意,只是经常使用:hover :focus :visited :link :active这些比较常见的伪类,这些都顾名思义,表示了一个元素的某个状态,直到发现有些艺术的效果竟然是用:after :before来做出来的,随后才真正重视起来。 伪类主要有以下几种:
2016-03-12 13:58:51 1210
原创 关于iframe与父窗口元素选取的问题
在做项目的时候使用到了Iframe,可是在实现点击iframe内的元素动态改变父窗口导航栏相应条目高亮active的时候发现在iframe内Jq不能选取父容器的元素,仔细一想,确实是不应该选取到的,毕竟两者不是同一个网页,于是乎就寻找度娘了,在这里总结一下解决的方法: 关于Jq在iframe内选取父窗口的元素: 要点就在于在普通的Jq选择器内容后面添加
2016-03-12 10:18:54 2612
原创 jq延迟的使用
作为刚接触jq的小白的我来说,一说起延迟首先想到的就是delay(),从字面意思就一目了然,然而用起来缺发现并没有自己想象的那么简单。 delay()可以将队列中等待执行的下一个动画延迟指定的时间后才执行。它常用在队列中的两个jQuery效果函数之间,从而在上一个动画效果执行后延迟下一个动画效果的执行时间。我们可以发现delay()仅用于队列中动画的延迟执行,对于其他的
2016-03-08 20:23:10 2105
原创 关于设置浮动改变行内元素display属性的问题
我们都知道,行内元素不能设置height、width、padding/margin-top/bottom属性值,但是有一天在做一个响应鼠标的滚动导航条时发现,当我们给span、a这些行内元素设置float属性的时候,他们的高、宽都可以进行设置,经过查阅研究发现,当我们给行内元素设置position:absolute/fixed、float:left/right的时候,行内元素变成了块级元素,也就是
2016-02-28 15:15:46 3330 3
转载 css3 transition 动画基础
transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值。”一、transition语法:transition:[||||||||||||||]transition
2016-02-27 15:42:48 416
转载 CSS实现渐变
渐变可以创建类似于彩虹的效果,低版本的浏览器不的不使开发者用图片来实现,CSS3将会轻松实现网页渐变效果。要得线性渐变效果,我们这样去定义CSS3样式:background-image: -moz-linear-gradient(top, #8fa1ff,#3757fa); /* Firefox */background-image: -webkit-gradient(linear
2016-02-27 15:40:01 573
转载 左侧容器高度随着右侧容器的高度改变而改变
MJBlog(mj.588cy.com) * {margin:0;padding:0;font-size:12px;list-style:none;border:0;} body{font-family: Arial, Helvetica, sans-serif; background-color:#edf0eb;} a{ text-decoration:
2016-02-27 15:11:56 1629
原创 jq ajax 基本示例
例1:在编辑已有内容时通过ajax来对原有内容进行回显,input以及select$(".changeShip").click(function(){ $("#get-shipType option").removeAttr("selected"); 在每次点击时首先对option的属性进行消除,以免 出现多个selected var id = $(this).attr("
2016-02-27 15:02:27 443
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人