欢迎光临
我们一直在努力

CSS3实现多行文本溢出显示省略号(…)

阅读(1864)

大家应该都知道用 text-overflow:ellipsis 属性,来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

实现方法:

{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

效果如图(或点击这里查看demo):

单行文本的溢出显示省略号

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

CSS3实现多行文本溢出显示省略号

接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

效果如图(或点击这里查看demo):
多行文本的溢出显示省略号

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。

为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis; 可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本

CSS3 新版弹性盒子模型(Flex Box)

阅读(2609)

传统布局方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

Flex 布局是什么?】

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器内包含了一个或多个弹性子元素。
(更多…)

CSS3 Transform 转换(制作旋转、位移、缩放等效果详解)

阅读(22670)

CSS3 transform 是什么?

transform 字面上是:变换;改变,使…变形;转换的意思。

在CSS3中 transform 的属性包括:旋转 rotate()、位移 translate()、缩放 scale()和扭曲(倾斜) skew()以及矩阵变形 matrix()。下面我们一起来看看CSS3中具体如何实现的吧。

语法:

   transform : none | <transform-function> [ <transform-function> ]* 
   也就是:
   transform: rotate | scale | skew | translate |matrix;

none:表示不进么变换;<transform-function>表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行transform的多种属性操作,例如 rotate、scale、translate 三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但 transform 中使用多个属性时却需要有空格隔开。

下面我们分别来介绍这几个属性值参数的具体使用方法:

rotate()  旋转函数 取值度数
    deg  度数
    transform-origin 旋转的基点
translate() 位移函数
    translateX()
    translateY()
skew() 倾斜函数 取值度数 
    skewX()
    skewY()
scale() 缩放函数 取值 正数、负数和小数
    scaleX()
    scaleY()

一、旋转 rotate

语法:

    transform: rotate(<angle>) ;

通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。
transform-origin 定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
如:transform:rotate(30deg)

旋转 rotate

二、位移 translate

translate我们分为三种情况:

translate(x,y) 水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动),如:transform:translate(100px,20px)

translateX(x) 仅水平方向移动(X轴移动),如:transform:translateX(100px)

translateY(y) 仅垂直方向移动(Y轴移动),如:transform:translateY(20px)

具体效果如下(或点击这里查看demo):

位移 translate

当参数值x,y为负数时,反方向移动物体,它们基点默认为元素中心点,也可以根据transform-origin进行改变基点。

三、缩放 scale

缩放scale和位移translate是极其相似,它也有三种情况:

scale(x,y)使元素水平方向和垂直方向同时缩放(X轴和Y轴),如:transform:scale(2,1.5)

scaleX(x)元素仅水平方向缩放(X轴缩放),如:transform:scaleX(2)

scaleY(y)元素仅垂直方向缩放(Y轴缩放),如:transform:scaleY(2)

具体效果如下(或点击这里查看demo):

缩放 scale

它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。

如果scale(x,y)没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的,并以X为准。

四、扭曲(倾斜) skew

扭曲skewtranslate、scale一样同样具有三种情况:

skew(x,y) 使元素在水平和垂直方向同时扭曲(X轴和Y轴),如:transform:skew(30deg,10deg)

skewX(x) 仅使元素在水平方向扭曲变形(X轴),如:transform:skewX(30deg)

skewY(y) 仅使元素在垂直方向扭曲变形(Y轴),如:transform:skewY(10deg)

具体效果如下(或点击这里查看demo):

扭曲(倾斜) skew

同样它们是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。

五、矩阵 matrix

matrix() 方法是一种简写形式,有六个参数,包含旋转,缩放,移动(平移)和倾斜的功能。

语法:

    matrix(<number>, <number>, <number>, <number>, <number>, <number>) 

它以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。也就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,这里就不多说了。

六、改变元素基点 transform-origin

前面我们多次提到transform-origin这个东东,它的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置,因为元素默认基点就是其中心位置。下面我们主要来看看其使用规则:
语法

    transform-origin: x-axis y-axis;
描述
x-axis

定义视图被置于 X 轴的何处。可能的值:

  • left

  • center

  • right

  • length

  • %

y-axis

定义视图被置于 Y 轴的何处。可能的值:

  • top

  • center

  • bottom

  • length

  • %

其中 left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%;而top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;如果只取一个值,表示垂直方向值不变,我们分别来看看以下几个实例(或点击这里查看demo):

改变元素基点 transform-origin

浏览器支持

同样的transform在IE9下版本是无法兼容的,下面表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

transform 转换应用实例

1、css3 同时实现旋转和缩放(放大或缩小)

.demo1-1:hover{ transform: rotate(360deg) scale(1.5);}
.demo1-2:hover{ transform: rotate(360deg) scale(.5);}

2、CSS3 实现位移并且带有放大或缩小的效果

.demo2-1:hover{ transform: scale(1.2) translateX(100px); }
.demo2-2:hover{ transform: scale(.8) translateX(100px); }

3、css3 旋转后发生位移

.demo3{ animation: demo3 3s linear 0s infinite; }
@keyframes demo3{
	0%{}
	30%{ transform: rotate(360deg); }
	60%{ transform: translateX(100px); }
	100%{ transform: translateX(100px); }
}

jQuery图片延迟加载(懒加载)插件 – jquery.lazyload.js

阅读(2716)

jquery.lazyload图片延迟加载

LazyLoad是一个用JavaScript编写的jQuery插件,它可以延迟加载长页面中的图片,从而提高网页下载速度和减轻服务器负载。

如何使用

LazyLoad依赖于jQuery,请将以下代码加入HTML的结尾,也就是前:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

你必须改变图片的标签,图像的地址必须放在data-original属性上。并给懒加载图像一个特定的class(例如:lazy),这样你可以很容易地进行图像插件捆绑。代码如下:

<img class="lazy" alt="" width="400" height="300" data-original="img/example.jpg" />

将使所有class为lazy的图片延迟加载。

$(function() {
    $("img.lazy").lazyload();
});

Demo:基本选项

Tips:这里必须设置图片的widthheight,否则插件可能无法正常工作。

设置临界点

默认情况下只有图片出现在屏幕时才加载,如果你想提前加载图片, 可以设置threshold选项, 设置 threshold : 200 令图片在距离屏幕200像素时提前加载。

$("img.lazy").lazyload({
    threshold : 200
});

设置事件来触发加载

你可以使用jQuery事件,例如clickmouseover。也可以使用自定义事件,如sportyfoobar默认情况下是要等到用户向下滚动并且图像出现在视口中时。只有当用户点击它们才加载图片:

$("img.lazy").lazyload({
    effect : "fadeIn"
});

使用特效

默认情况下,插件等待图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn(淡入效果)。
Demo:淡入效果

$("img.lazy").lazyload({
    effect : "fadeIn"
});

加载隐藏的图片

可能在你的页面上埋藏可很多隐藏的图片,比如插件用在对列表的筛选, 你可以不断地修改列表中各条目的显示状态。为了提升性能, Lazy Load 默认忽略了隐藏图片。 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false

$("img.lazy").lazyload({ 
    skip_invisible : false
});

当图像不连续时

滚动页面的时候, LazyLoad 会在循环中检测图片是否在可视区域内。默认情况下在找到第一张不在可见区域的图片时停止循环,图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同。但是在一些布局中, 这样的假设是不成立的。不过你可以通过 failurelimit 选项来控制加载行为.

$("img.lazy").lazyload({
    failure_limit : 10
});

将 failurelimit 设为 10 ,令插件找到 10 个不在可见区域的图片时才停止搜索。

针对不启用JavaScript的情况

几乎所有浏览器的 JavaScript 都是激活的,然而可能你仍希望能在不支持 JavaScript 的客户端展示真实图片。当浏览器不支持 JavaScript 时优雅降级, 你可以将真实的图片片段在写 <noscript> 标签内。

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

可以通过 CSS 隐藏占位符

.lazy {
    display: none;
}

在支持 JavaScript 的浏览器中, 你必须在 DOM ready 时将占位符显示出来, 这可以在插件初始化的同时完成。

$("img.lazy").show().lazyload();

图片在容器里面

你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.
Demo:容器内水平滚动, 容器内垂直滚动

更多lazyload参数

placeholder : "img/grey.gif",     //用图片提前占位
effect : "fadeIn",    //载入使用何种效果,effect(特效),show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold : 200,    //提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
event : "click",      //事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标划过或点击图片才开始加载,后两个值未测试…
failurelimit : 10,     //图片排序混乱时 ,
    // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
data_attribute : 'original'  //真实图片地址的 data 属性后缀

下载插件

最新版本 源代码压缩代码. 插件已经在 OSX 的 Safari 5.1, Safari 6, Chrome 20, Firefox 12 浏览器上, Windows 的 Chrome 20, IE 8 and IE 9 浏览器上, 以及 iOS5 (iPhone 和 iPad) 的 Safari 5.1 浏览器上测试过.另外,lazyload需要jquery1.3.0版以上,或者 zepto1.0.0以上。

CSS3边框 —— 用border-radius 属性制作圆角矩形

阅读(2898)

在CSS2中添加圆角矩形,我们必须在每个圆角使用不同的图片作为背景。而CSS3中border-radius的出现,让我们创建圆角变的非常容易。其优点:一、减少网站维护的工作量(图片制作,代码替换等);二、提高网站的性能,少了图片的http请求;三、增加视觉美观性。

既然border-radius有这么多好处,我们就从它的语法、属性和属性值等方面来看其如何应用,又是如何制作圆角,还有就是除了制作圆角他还能制作什么?

一、语法:

border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
或
border-radius: none | <percentage>{1,4} [/ <percentage>{1,4} ]?

二、取值:

<length>:用长度值设置对象的圆角半径长度。不可为负值
<percentage>:用百分比设置对象的圆角半径长度。不可为负值

三、说明:

border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。
如果没有“/”,则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:

1、border-radius: [ <length> ]; //这里只有一个值,那么top-left、top-right、bottom-right、bottom-left四个值相等。

2、border-radius:[ <length> ] [ <length> ] ; //这里设置两个值,那么top-left等于bottom-right,并且取第一个值;top-right等于bottom-left,并且取第二个值。

3、border-radius:[ <length> ] [ <length>> ] [ <length> ]; //如果有三个值,其中第一个值是设置top-left,而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right。

4、border-radius:[ <length> ] [ <length> ] [ <length>> ] [ <length> ]; //如果有四个值,那么依次对应top-left、top-right、bottom-right、bottom-left。

上面,我们看了border-radius的缩写格式,其实border-radius和border属性一样,还可以把各个角单独拆分出来,也就是以下四种写法:

border-top-left-radius: <length> <length> //左上角
border-top-right-radius: <length> <length> //右上角
border-bottom-right-radius:<length> <length> //右下角
border-bottom-left-radius:<length> <length> //左下角

各角拆分出来取值方式:<length> <length>中第一个值是圆角水平半径,第二个值是垂直半径。如果第二个值省略,那么其等于第一个值,这时这个角就是一个四分之一的圆角,如果任意一个值为0,那么这个角就不是圆角。

四、浏览器支持

只有在:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 才支持border-radius标准语法格式,对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等。为了能兼容各大内核的老版浏览器,我们看看border-radius在不同内核浏览器下的书写格式:

1、Mozilla (Firefox, Flock等浏览器)

-moz-border-radius-topleft: //左上角
-moz-border-radius-topright: //右上角
-moz-border-radius-bottomright: //右下角
-moz-border-radius-bottomleft: //左下角
等价于:
-moz-border-radius: //简写

2、WebKit (Safari, Chrome等浏览器)

-webkit-border-top-left-radius:  //左上角
-webkit-border-top-right-radius:  //右上角
-webkit-border-bottom-right-radius:  //右下角
-webkit-border-bottom-left-radius:  // 左下角
等价于:
-webkit-border-radius:  //简写

3、Opera浏览器:

border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角
等价于:
border-radius: //简写

4、Trident (IE)
IE9以下版本不支持border-radius,也没有私有格式,都是用border-radius,其写法和Opera是一样。

为了不管是新版还是老版的各种内核浏览器都能支持border-radius属性,那么我们在具体应用中时需要把我们的border-radius格式改成:

-moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
-webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]?
border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

五、border-radius圆角实例

注意:本文中的实例只写了标准语法格式,如果你的版本不是上面所提到的几个版本,如要正常显示效果,请更新浏览器版本,或在border-radius前面加上相应的内核前缀。

我们初步来看一个实例:

<div class="demo"></div>

为了更好的看出效果,我们给这个demo添加一点样式:

.demo {
  width: 150px;
  height: 80px;
  border: 2px solid #f36;
  background: #ccc;
}

注:如无特殊说明,本文实例所有基本代码格式如下,只在该元素上添加border-radius属性设置。

.demo {
  border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}

这种写法我们前面有提到过,“/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,他们两都遵循TRBL的顺序原则。为了能让大家更清楚理解,我们把上面代码换成如下:

.demo {
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 15px 30px;
  border-bottom-right-radius: 20px 10px;
  border-bottom-left-radius: 30px 15px;
}

不仿看看他们的效果:
border-radius制作圆角

上面我们介绍了border-radius的基本用法,以及在各大浏览器下的格式等,下面我们通过实例来介绍其具体的用法:

1:border-radius只有一个取值时,四个角具有相同的圆角设置,其效果是一致的:

.demo1 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 10px; /*4个角的值相等*/
}

效果:
border-radius制作圆角1

2:border-radius设置两个值,此时元素左上角和右下角相同,右上角和左下角相同

.demo2 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 5px 10px;
}

效果:
border-radius制作圆角2

3:border-radius设置三个值,此时左上取第一个值,右上等于左下并且他们取第二个值,右下取第三个值:

.demo3 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 5px 10px 15px;
}

效果:
border-radius制作圆角3

4:border-radius设置四个值,此时top-left取第一个值,top-right取第二个值,bottom-right取第三个值.bottom-left取第四个值

.demo4 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 5px 10px 15px 20px;
}

效果:
border-radius制作圆角4

5:接下来看看细分了水平半径和垂直半径的情况:

.demo5 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 20px / 40px;  /*水平半径/垂直半径*/
}

效果:
border-radius制作圆角5

可以看到,水平和垂直半径的值分开设置了,不再一样,还是可以1,2,3,4对号入座,只是水平和垂直半径分开了而已。
20px / 40px 斜杠‘/’前面的是水平半径的值,后面是垂直半径的值。同样,每个角的水平和垂直半径也可以分别设置成不一样的,如下:

.demo6 {
  width: 80px;
  height: 80px;
  background: #3ad7d7;
  border: 2px solid #ff0000;
  border-radius: 10px 20px 15px 30px / 40px 5px 30px 10px;  /*水平半径/垂直半径*/
}

效果:
border-radius制作圆角6

每个角都设置了不同的水平和垂直半径,各有风骚了。不管怎么设置值,都可以从左上角开始一一对号入座,没有取到值的,就取对角的值。

6:用border-radius画圆

.demo7 {
    width: 80px;
    height: 80px;
    background: #3ad7d7;
    /*border: 2px solid #ff0000;*/
    border-radius: 40px;
}

效果:
用border-radius画圆

不带边框的圆,只需宽和高相等,border-radius为宽高的一半就可以了。如果是有边框的圆形,还要加上边框的一半,这里就不举例了。

那么到此,我们用border-radius制作圆角的一些用法就介绍完了。

CSS3选择器

阅读(2171)

CSS 元素选择符

属性 版本 简介
* CSS2 CSS2 通配选择符(*),所有元素对象。
E CSS1 CSS1 类型选择符(E),以文档语言对象类型作为选择符。
E#myid) CSS1 CSS1 ID选择符(E#id),以唯一标识符id属性等于myid的E对象作为选择符。
E.myclass CSS2 CSS1 类选择符(E.class),以class属性包含myclass的E对象作为选择符。

CSS 关系选择符

属性 版本 简介
E F CSS1 CSS1 包含选择符(E F),选择所有被E元素包含的F元素。
E>F CSS2 CSS2 子选择符(E>F),选择所有作为E元素的子元素F。
相邻选择符(E+F) CSS2 CSS2  相邻选择符(E+F),选择紧贴在E元素之后F元素。
兄弟选择符(E~F) CSS3 CSS3 兄弟选择符(E~F),选择E元素所有兄弟元素F。

CSS 属性选择符

属性 版本 简介
E[att] CSS2 CSS2 属性选择符 E[att],选择具有att属性的E元素。
E[att="val"] CSS2 CSS2 属性选择符 E[att="val"],选择具有att属性且属性值等于val的E元素。
E[att~="val"] CSS2 CSS2 属性选择符 E[att~="val"],选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。
E[att^="val"] CSS3 CSS3 属性选择符 E[att^="val"],选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"] CSS3 CSS3 属性选择符 E[att$="val"],选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] CSS3 CSS3 属性选择符 E[att*="val"],选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"] CSS2 CSS2 属性选择符 E[att|="val"],选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

CSS 伪类选择符

属性 版本 简介
E:link CSS1 CSS1 伪类选择符 E:link ,设置超链接a在未被访问前的样式。
E:visited CSS1 CSS1 伪类选择符 E:visited,设置超链接a在其链接地址已被访问过时的样式。
E:hover CSS2 CSS2/CSS1 伪类选择符 E:hover,设置元素在其鼠标悬停时的样式。
E:active CSS2/CSS1 CSS2/CSS1 伪类选择符 E:active,设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
E:focus CSS2/CSS1 CSS2/CSS1 伪类选择符 E:focus,设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。
E:lang() CSS2 CSS2 伪类选择符 E:lang() 匹配使用特殊语言的E元素。
E:not() CSS3 CSS3 伪类选择符 E:not() 匹配不含有s选择符的元素E。
E:root CSS3 CSS3 伪类选择符 E:root,匹配E元素在文档的根元素。
E:first-child CSS2 CSS2 伪类选择符 E:first-child 匹配父元素的第一个子元素E。
E:last-child CSS3 CSS3 伪类选择符 E:last-child 匹配父元素的最后一个子元素E。
E:only-child CSS3 CSS3 为例选择符 E:only-child 匹配父元素仅有的一个子元素E。
E:nth-child(n) CSS3 CSS3 伪类选择符 E:nth-child(n) 匹配父元素的第n个子元素E。
E:nth-last-child(n) CSS3 CSS3 伪类选择符 E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
E:first-of-type CSS2 CSS3 伪类选择符 E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type CSS3 CSS3 伪类选择符 E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type CSS3 CSS3 伪类选择符 E:only-of-type,匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) CSS3 CSS3 伪类选择符 E:nth-of-type(n),匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) CSS3 CSS3 伪类选择符 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty CSS3 CSS3 伪类选择符 E:empty 匹配没有任何子元素(包括text节点)的元素E。
E:checked CSS3 CSS3 伪类选择符 E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox 的form元素)
E:enabled CSS3 CSS3 伪类选择符 E:enabled 匹配用户界面上处于可用状态的元素E。
E:disabled CSS3 CSS3 伪类选择符 E:disabled 匹配用户界面上处于禁用状态的元素E。
E:target CSS3 CSS3 伪类选择符 E:target 匹配相关URL指向的E元素。
@page:first CSS2 CSS2 伪类选择符 @page:first 设置页面容器第一页使用的样式。仅用于@page规则
@page:left CSS2 CSS2 伪类选择符 @page:left 置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则
@page:right CSS2 CSS2 为对象选择符 @page:right 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

CSS 伪对象选择符

属性 版本 简介
E:first-letter/E::first-letter CSS3/CSS1 CSS2/CSS1 E:first-letter/E::first-letter 伪对象选择符,设置对象内的第一个字符的样式。
E:first-line/E::first-line CSS3/CSS1 CS3/CSS1 伪对象选择符 E:first-line/E::first-line,设置对象内的第一行的样式。
E:before/E::before CSS3/CSS2 CSS3/CSS3 伪对象选择符 E:before/E::before,设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
E:after/E::after CSS3/CSS2 CSS3/CSS2 伪对象选择符 E:after/E::after,设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
E::selection CSS3 CSS3 伪对象选择符 E::selection,设置对象被选择时的颜色。

这种颜色的表示是CSS3属性或原属性被CSS3修改并增加了新的属性值

HTML中换行造成空格间距的问题详解

阅读(2063)

我们在根据UI提供的原稿做网站的时候,在UI要求还原度很高的情况下,可能经常会遇到,在两个input标签,或者input与span标签之间,会产生多余3个象素空格的问题。如下图:
空格测试
代码如下:

<style>
*{ margin:0; padding:0;}
input{width: 120px; height: 30px;}
</style>
<input type="text" value="空格">
<input type="text" value="测试">

我们明明没有设置边距,可是中间为什么会有差不多3个象素的距离呢?
原因则是在ff,chrome当中(在IE上会屏蔽掉)会将代码中的换行或空格解析为“空文本节点”,所以也就出现了我们所不期望需要的空格。

那有没有什么方法可以解决呢?

一、简单粗爆不换行
写代码的时候不要换行,input等在一行输写,那么将解决该问题。但是代码就变得不再那么容易好看。

二、设置父级块的字体大小为0
这样也能解决问题,代码也好看,但是当你设置了父级的字体大小为0时,你里面又要其它字体要显示,可能就得加span等标签去包裹它,并且重新设置字体大小。

三:设置margin-left为-3象素
使得该元素基于原来的位置向左偏移三个象素,也就看不出有空隙了。

一道常被人轻视的前端JS面试题

阅读(1532)

前言

分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多难只是因为大多面试者过于轻视他。

题目如下:

function Foo() {
  getName = function () { alert (1); };
  return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//请写出以下输出结果:
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

答案是:

//答案:
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3

此题是我综合之前的开发经验以及遇到的JS各种坑汇集而成。此题涉及的知识点众多,包括变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级等等。

此题包含7小问,分别说下。

第一问

先看此题的上半部分做了什么,首先定义了一个叫Foo的函数,之后为Foo创建了一个叫getName的静态属性存储了一个匿名函数,之后为Foo的原型对象新创建了一个叫getName的匿名函数。之后又通过函数变量表达式创建了一个getName的函数,最后再声明一个叫getName函数。

第一问的 Foo.getName 自然是访问Foo函数上存储的静态属性,自然是2,没什么可说的。

第二问

第二问,直接调用getName函数。既然是直接调用那么就是访问当前上文作用域内的叫getName的函数,所以跟1 2 3都没什么关系。此题有无数面试者回答为5。此处有两个坑,一是变量声明提升,二是函数表达式。

变量声明提升

即所有声明变量或声明函数都会被提升到当前函数的顶部。

例如下代码:

console.log('x' in window); //true
var x;
x = 0;

代码执行时js引擎会将声明语句提升至代码最上方,变为:

var x;
console.log('x' in window); //true
x = 0;

函数表达式

var getName 与 function getName 都是声明语句,区别在于 var getName 是函数表达式,而 function getName 是函数声明。关于JS中的各种函数创建方式可以看 大部分人都会做错的经典JS闭包面试题 这篇文章有详细说明。

函数表达式最大的问题,在于js会将此代码拆分为两行代码分别执行。
例如下代码:

console.log(x); //输出:function x(){}
var x=1;
function x(){}

实际执行的代码为,先将 var x=1 拆分为 var x; 和 x=1; 两行,再将 var x; 和 function x(){} 两行提升至最上方变成:

var x;
function x(){}
console.log(x);
x=1;

所以最终函数声明的x覆盖了变量声明的x,log输出为x函数。

同理,原题中代码最终执行时的是:

function Foo() {
  getName = function () { alert (1); };
  return this;
}
var getName; //只提升变量声明
function getName() { alert (5);} //提升函数声明,覆盖var的声明

Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
getName = function () { alert (4);}; //最终的赋值再次覆盖function getName声明

getName(); //最终输出4

第三问

Foo().getName(); 先执行了Foo函数,然后调用Foo函数的返回值对象的getName属性函数。

Foo函数的第一句  getName = function () { alert (1); };  是一句函数赋值语句,注意它没有var声明,所以先向当前Foo函数作用域内寻找getName变量,没有。再向当前函数作用域上层,即外层作用域内寻找是否含有getName变量,找到了,也就是第二问中的alert(4)函数,将此变量的值赋值为 function(){alert(1)}。

此处实际上是将外层作用域内的getName函数修改了。

注意:此处若依然没有找到会一直向上查找到window对象,若window对象中也没有getName属性,就在window对象中创建一个getName变量。

之后Foo函数的返回值是this,而JS的this问题博客园中已经有非常多的文章介绍,这里不再多说。

简单的讲,this的指向是由所在函数的调用方式决定的。而此处的直接调用方式,this指向window对象。

遂Foo函数返回的是window对象,相当于执行 window.getName() ,而window中的getName已经被修改为alert(1),所以最终会输出1。

此处考察了两个知识点,一个是变量作用域问题,一个是this指向问题。

第四问

直接调用getName函数,相当于 window.getName() ,因为这个变量已经被Foo函数执行时修改了,遂结果与第三问相同,为1。

第五问

new Foo.getName(); ,此处考察的是js的运算符优先级问题。

js运算符优先级(从高到低):

优先级 运算类型 关联性 运算符
19 圆括号 n/a ( … )
18 成员访问 从左到右 … . …
需计算的成员访问 从左到右 … [ … ]
new (带参数列表) n/a new … ( … )
17 函数调用 从左到右 … ( … )
new (无参数列表) 从右到左 new …
16 后置递增(运算符在后) n/a … ++
后置递减(运算符在后) n/a … —
15 逻辑非 从右到左 ! …
按位非 从右到左 ~ …
一元加法 从右到左 + …
一元减法 从右到左 – …
前置递增 从右到左 ++ …
前置递减 从右到左 — …
typeof 从右到左 typeof …
void 从右到左 void …
delete 从右到左 delete …
14 乘法 从左到右 … * …
除法 从左到右 … / …
取模 从左到右 … % …
13 加法 从左到右 … + …
减法 从左到右 … – …
12 按位左移 从左到右 … << …
按位右移 从左到右 … >> …
无符号右移 从左到右 … >>> …
11 小于 从左到右 … < …
小于等于 从左到右 … <= …
大于 从左到右 … > …
大于等于 从左到右 … >= …
in 从左到右 … in …
instanceof 从左到右 … instanceof …
10 等号 从左到右 … == …
非等号 从左到右 … != …
全等号 从左到右 … === …
非全等号 从左到右 … !== …
9 按位与 从左到右 … & …
8 按位异或 从左到右 … ^ …
7 按位或 从左到右 … | …
6 逻辑与 从左到右 … && …
5 逻辑或 从左到右 … || …
4 条件运算符 从右到左 … ? … : …
3 赋值 从右到左 … = …
… += …
… -= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
2 yield 从右到左 yield …
yield* 从右到左 yield* …
1 展开运算符 n/a … … …
0 逗号 从左到右 … , …

通过查上表可以得知点”.”的优先级高于new操作,相当于是:
new (Foo.getName)();
所以实际上将getName函数作为了构造函数来执行,遂弹出2。

第六问

new Foo().getName() ,首先看运算符优先级括号高于new,实际执行为

(new Foo()).getName()

遂先执行Foo函数,而Foo此时作为构造函数却有返回值,所以这里需要说明下js中的构造函数返回值问题。

题中,返回的是this,而this在构造函数中本来就代表当前实例化对象,遂最终Foo函数返回实例化对象。

之后调用实例化对象的getName函数,因为在Foo构造函数中没有为实例化对象添加任何属性,遂到当前对象的原型对象(prototype)中寻找getName,找到了。最终输出3。

第七问

new new Foo().getName(); 同样是运算符优先级问题,实际执行为:

new ((new Foo()).getName)();

先初始化Foo的实例化对象,然后将其原型上的getName函数作为构造函数再次new。最终结果为3

===2016年03月23日更新===

这里引用 @于明昊 ,更详细的解释了第7问:

这里确实是(new Foo()).getName(),但是跟括号优先级高于成员访问没关系,实际上这里成员访问的优先级是最高的,因此先执行了 .getName,但是在进行左侧取值的时候, new Foo() 可以理解为两种运算:new 带参数(即 new Foo())和函数调用(即 先 Foo() 取值之后再 new),而 new 带参数的优先级是高于函数调用的,因此先执行了 new Foo(),或得 Foo 类的实例对象,再进行了成员访问 .getName。

jQuery设计思想之写法——方法函数化

阅读(1961)

原生

window.onload = function(){
  ...
};

JQ改为

$(function(){
  ...
});

原生

innerHTML = 123;

JQ改为

html(123);

原生点击事件

oDIV.onclick = function(){};

JQ改为

$('#div1').click(function(){})

小例子:

邦邦的小站_分享Web前端技术和PHP技术的学习心得!

原生

window.onload = function(){
	var oDiv = document.getElementById('div1');	
	oDiv.onclick = function(){
		alert( this.innerHTML );
	};	
};

JQ改为

$(function(){	
	$('#div1').click(function(){		
		alert( $(this).html() );		
	});	
});

jQuery选择器

阅读(1579)

jQuery选择器允许对HTML元素组或单个元素进行操作。
jQuery选择器基于元素的id、标签名、类、属性等”查找”(或选择)HTML元素。它基于已经存在的CSS选择器,除此之外,它还有一些独有选择器。
jQuery中所有选择器都以美元符号开头:$()

id选择器
jQuery #id选择器通过HTML元素的id属性选取指定的元素。
页面中元素的id应该是唯一的,所以您要在页面中选取唯一的元素需要通过#id选择器。
通过id选取元素语法如:$(“#div1”)

类选择器
jQuery类选择器可以通过指定的class查找元素。
语法如:$(“.box”)

标签选择器
jQuery标签选择器基于标签名选取元素。
选取所有<p>标签语法如: $(“p”)
实例:所有p标签的背景颜色更改为红色

$("p").css("background-color","red");

更多实例

选择器 实例 选取
* $(“*”) 所有元素
#id $(“#lastname”) id=”lastname” 的元素
.class $(“.intro”) 所有 class=”intro” 的元素
element $(“p”) 所有 <p> 元素
.class.class $(“.intro.demo”) 所有 class=”intro” 且 class=”demo” 的元素
:first $(“p:first”) 第一个 <p> 元素
:last $(“p:last”) 最后一个 <p> 元素
:even $(“tr:even”) 所有偶数 <tr> 元素
:odd $(“tr:odd”) 所有奇数 <tr> 元素
:eq(index) $(“ul li:eq(3)”) 列表中的第四个元素(index 从 0 开始)
:gt(no) $(“ul li:gt(3)”) 列出 index 大于 3 的元素
:lt(no) $(“ul li:lt(3)”) 列出 index 小于 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不为空的 input 元素
:header $(“:header”) 所有标题元素 <h1> – <h6>
:animated 所有动画元素
:contains(text) $(“:contains(‘W3School’)”) 包含指定字符串的所有元素
:empty $(“:empty”) 无子(元素)节点的所有元素
:hidden $(“p:hidden”) 所有隐藏的 <p> 元素
:visible $(“table:visible”) 所有可见的表格
s1,s2,s3 $(“th,td,.intro”) 所有带有匹配选择的元素
[attribute] $(“[href]”) 所有带有 href 属性的元素
[attribute=value] $(“[href=’#’]”) 所有 href 属性的值等于 “#” 的元素
[attribute!=value] $(“[href!=’#’]”) 所有 href 属性的值不等于 “#” 的元素
[attribute$=value] $(“[href$=’.jpg’]”) 所有 href 属性的值包含以 “.jpg” 结尾的元素
:input $(“:input”) 所有 <input> 元素
:text $(“:text”) 所有 type=”text” 的 <input> 元素
:password $(“:password”) 所有 type=”password” 的 <input> 元素
:radio $(“:radio”) 所有 type=”radio” 的 <input> 元素
:checkbox $(“:checkbox”) 所有 type=”checkbox” 的 <input> 元素
:submit $(“:submit”) 所有 type=”submit” 的 <input> 元素
:reset $(“:reset”) 所有 type=”reset” 的 <input> 元素
:button $(“:button”) 所有 type=”button” 的 <input> 元素
:image $(“:image”) 所有 type=”image” 的 <input> 元素
:file $(“:file”) 所有 type=”file” 的 <input> 元素
:enabled $(“:enabled”) 所有激活的 input 元素
:disabled $(“:disabled”) 所有禁用的 input 元素
:selected $(“:selected”) 所有被选取的 input 元素
:checked $(“:checked”) 所有被选中的 input 元素