jQuery中的事件委托

事件委托

例如有一个文章列表:

<ul> class="arcList"
  <li><a href="#">#1</a></li>
  <li><a href="##">#2</a></li> 
  <li><a href="###">#3</a></li> 
  <li><a href="####">#4</a></li>
  <li><a href="#####">#5</a></li>

CSS3自定义checkbox,radio表单元素样式

表单样式

在写表单样式的时候是比较烦人的,因为各浏览器下的效果都不一样,所以在以前都会使用图片来进行解决,并且很多时候还需要JS的辅助。当然,那是为了兼容所有浏览器,但我们如果只需要兼容一些高级浏览器或者只需要考虑移动端的话,则不需要想这么多,因为CSS3是如此强大。

我想说什么呢?说不清楚只好先上demo了:

See the Pen tHyLK by blwoosky (@blwoosky) on CodePen

Sass嵌套问题

Sass嵌套所带来的问题

CSS是如何渲染的一篇中,我们晓得CSS是从右向左进行渲染的,那么我们在写SASS时就需要格外注意嵌套问题了。因为嵌套越多,最终生成的CSS选择器就会越来越长。

例如:

ul{
	li{
		a{
			i{
				
			}
		}
	}
}

那么,使用SASS编译后会得出:…

CSS是如何渲染的

近似翻译

这篇文章大部分内容并非我的原创,参考文章有:

从右向左渲染

我一直以为浏览器是将CSS选择器进行从左往右进行渲染的,直到现在才知道事实并非如此,比如:

ul>li 

给手机网页添加按下(:active)状态

:active状态

当我们给元素添加:active伪类时,电脑中当鼠标按下该元素的时会触发这个状态,但是在手机上却不会,比如下面这个例子:

activeMotion

电脑上,您可以直接点击二维码打开Demo,手机则扫描二维码进行访问:

active1

上面的例子在电脑上有active状态是肯定的,但是手机访问却没有这个状态,并且还有一层半透明的层覆盖在上面,这种用户体验实在是太差了。

手机添加:active状态

首先,需要把链接在移动端上默认的一层半透明的层删掉,这个给所有的a标签添加一个:

-webkit-tap-highlight-color: rgba(0,0,0,0);
直接购买「JavaScript高级程序设计」

JavaScript高级程序设计

[美] 尼古拉斯·泽卡斯 著

一本包含了所有JavaScript知识的厚书。

直接购买「ES6标准入门」

ES6标准入门

阮一峰 著

前端越来越规范,JavaScript越来越规范了~

直接购买「CSS禅意花园」

CSS禅意花园

[美] Dave Shea / Molly E. Holzschlag 著

没错,就是这本「禅」书让我入的前端坑!

直接购买「CSS世界」

CSS世界

张鑫旭 著

不管你是新手还是资深开发,这本书里都会有你不知道的东西。