DOM的概念及子节点类型-1

昨天同事给了我一份JS题目练练,其实都是一些基础题,然而我都不会啊 大哭
有一道题印象比较深刻:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function A() {
var a;
}

function B(a) {
this.a = a;
}
function C(a) {
if (a) {
thia.a = a;
}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
console.log(new A());
console.log(new B());
console.log(new C(2));

看到这个 prototype 我直接就懵逼了
于是,得恶补下JS基础知识了
这个就算是我的一个笔记吧!笔记! 笔记! 笔记! 看不懂的勿喷 大哭
今天开始学习点DOM的东西,虽然之前看过,然而却不扎实,所以,你懂的

前面巴拉巴拉了一大堆,主题开始了!!!

文本多行省略

前几天在群里看到有人发了一个链接,是一份面试题,里面有一道题是这样的:如何用CSS控制文本单行溢出省略?并且大致说出多行省略的思路。
单行文本溢出省略嘛,对于大家应该都是很容易的,我就不多做解释了,相关的代码如下

1
<p>阿里影业副总裁徐远翔的一番言论将其推到了风口浪尖,遭到众多编剧炮轰的原因不仅仅在于他言辞之间所透露的傲慢态度和对编剧的不尊重,更在于他所提倡的“颠覆性”编剧方式很难让人苟同。</p>

1
p{width: 100px;height: 24px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

那么多行省略呢?

IE67中图片链接无效

今天在群里看到@鸦杀一个问题,IE678的部分点击失效bug 那么就是是在ie6、7,对于以下这样的结构,如果span触发了haslayout,那么图片区域将点击无效

1
2
3
4
5
6
7
<div class="m-demo"> 
<a href="#link">
<span>
<img src="http://7xon9l.com1.z0.glb.clouddn.com/1.jpg" />
</span>
</a>
</div>

1
2
3
.m-demo a,.m-demo a img{width:100px;height:60px;}
.m-demo a{display:block;}
.m-demo a span{zoom:1;}

解决方式是:给图片设置position:relative;z-index:-1;再给a设置cursor:pointer;

1
2
3
4
5
6
7
<div class="m-demo m-demo-fix">
<a href="#link">
<span>
<img src="http://img1.cache.netease.com/cnews/2009/11/9/20091109151554a1569.jpg" />
</span>
</a>
</div>

1
2
.m-demo-fix a{cursor:pointer;}
.m-demo-fix a img{position:relative;z-index:-1;}

gitHub上发emoji表情

今天在看教主大人的github的时候,碰到一些不解,所以就在下方评论了,教主在回复我的时候使用了emoji表情,我一开始还以为教主是插入了图片,后来谷歌了下(没想到谷歌失败了,翻墙突然坏掉了,难道是天气太冷 ),然后百度了下,找到了这篇博客 原来早在2014年的时候,就支持emoji表情了,然而我现在才知道,真是low~~

CSS3的开关按钮

这个开关按钮其实是前几天百无聊赖写的,其实就是用了CSS3的一点点属性而已,先上html代码

1
2
<input type="checkbox" name="sex" id="male" />
<label for="male"></label>

CSS代码