照彦のblog

前端Copy师


  • 首页

  • 关于

  • 整理

  • 标签

  • 归档

  • 404页面

javascript创建对象、原型链

发表于 2017-01-15 | 分类于 javascript

创建对象-字面量

1
2
3
4
5
6
7
8
9
10
var obj1 = {a:1,y:2}
var obj2 = {
a:1,
b:2,
c:{
d:3,
e:4
}
}

创建对象-new-原型链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function() lijingxin(){}
lijingxin.prototype.a = 2
var li = new lijingxin()
// new 构造的对象 原型指向构造器的prototype上,即lijingxin.prototype
li.b = 3
li.c = 4
li.b // 3
li.c // 4
li.a // 2
// 判断是否有该属性
'a' in li //true 表示li有 a属性 但是不一定是本身有 可能是原型链上的属性
li.hasOwnProperty('a') // flase
hasOwnProperty()能判断一个对象是否包含自定义属性而不是原型链上的属性
赋值
li.a = 5 不会向上查找a属性,直接在li对象上查找有无a属性,无则创建a属性并赋值5
li.hasOwnProperty('a') // true
li.a //5
1
2
3
4
对象创建Object.create
var obj = Object.create({x:1}) //创建obj对象并继承{x:1}对象的属性
obj.hasOwnproperty('x') // false

2017年的一些待完成计划

发表于 2017-01-01 | 分类于 生活情感

学习:

大概几个计划,具体的待定,刷FCC,刷高程,ES6,然后学sass/less,gulp,还有vue的文档以及vue的一些项目,类似vue实现的cnode,然后了解一些web的知识,了解一门后台语言,待选。(比较喜欢python)

生活:

老妈前几天跟我说了一件事,说要我带几瓶黄道益活络油回去,说奶奶爷爷还有她自己有时候身体会有一些不舒服的地方。

jquery trigger()事件报错.

发表于 2016-12-15 | 分类于 jquery

Uncaught RangeError: Maximum call stack size exceeded。
起初,用trigger()是想隐藏input file,然后点击div的时候等于点击input file,便遇到了这个问题,这个问题的代码如下,请自行引入jQuery。

1
2
3
4
5
6
7
8
9
<div class="demo">
aaaaaaaaaaaaaaaaaa
<input class="demoInput" type="file" name="">
</div>
<script type="text/javascript">
$('.demo').click(function(){
$('.demoInput').trigger('click');
})
</script>

问题原因我想了下,应该是因为调用这个点击事件的div包含了要真正调用的input,所以好像会无限循环,导致报错Uncaught RangeError: Maximum call stack size exceeded。
解决办法就是不要把input放在要调用点击事件的div或者标签里即可。

解决子元素滚动影响父元素的

发表于 2016-11-18 | 分类于 javascript

因为我司一个聊天窗口里面聊天内容滚动起来到顶部的时候再滚就会触发窗口滚动条的滚动,搜了一下,找到张鑫旭大大的文章,感谢。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$.fn.scrollUnique = function() {
return $(this).each(function() {
var eventType = 'mousewheel';
// 火狐是DOMMouseScroll事件
if (document.mozHidden !== undefined) {
eventType = 'DOMMouseScroll';
}
$(this).on(eventType, function(event) {
// 一些数据
var scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = this.clientHeight;
var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);
if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
// IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位
this.scrollTop = delta > 0? 0: scrollHeight;
// 向上滚 || 向下滚
event.preventDefault();
}
});
});
};

没错,依赖jQuery的一个扩展方法,上面代码只要拷贝到你页面的JS中,然后,你希望哪个元素滚动到底,父级不滚动,直接:

$().scrollUnique();
原文地址是http://www.zhangxinxu.com/wordpress/?p=5092

textarea中屏蔽回车默认换行

发表于 2016-11-17 | 分类于 javascript

我司网页版聊天里,用到多行文本框textarea,但是并没有清除默认回车事件,然后找了下解决方案,核心代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<textarea id= "test"></textarea>
<script type="text/javascript">
var test= document.getElementById("test");
test.onkeydown = function(e){
send(e);
}
function send(e){
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
if(code==13 && window.event){
e.returnValue = false;
}else if(code==13){
e.preventDefault();
}
}
</script>

js点击删除最后一个元素节点

发表于 2016-11-16 | 分类于 javascript

聊天框里需要显示未读信息,当点击的时候清楚气泡,也就是删除子元素。当然还需要一个判断,防止多次点击一个人的时候报错,JS本身不太熟练,学习ing…
结构代码大概如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="box" onclick="remo(this)">
<div>这里是昵称</div>
<span class="test">这里是未读信息条数</span>
</div>
<script type="text/javascript">
function remo(obj){
var test = obj.getElementsByClassName('test')[0];
var lastChild = obj.lastElementChild ? obj.lastElementChild : obj.lastChild;
if(test == lastChild){
obj.removeChild(test);
}
}
</script>

访问localhost显示You don't have permission to access / on this serv

发表于 2016-11-15 | 分类于 环境

解决

在安装wampserver 2.2 时安装好后启动服务器,访问localhost显示You don’t have permission to access / on this server.
造成这个问题的原因是Apache 的http.conf内的默认配置是

  • onlineoffline tag -

    don’t remove Order Deny,
    Allow Deny from all
    Allow from 127.0.0.1 只允许127.0.0.1访问,点击wampserver图标让后点击Putonline,http.conf内的以上默认配置自动修改为 # onlineoffline tag - don’t remove Order Allow,Deny Allow from all 现在localhost可以访问了。
    同样phpMyadmin在localhost下不能正常访问,
    解决方法:
    点击根目录下的alias目录,打开phpmyadmin.conf配置文件,
    和上面修改http.conf一样把 Deny from all Allow from 127.0.0.1 修改为 Allow from all

写一些百分比宽度时候,不让padding和border影响宽度

发表于 2016-11-14 | 分类于 CSS

几条CSS

只需要给这几条CSS,顺便做了兼容。固定了盒子的尺寸,无论怎么调整边距都不会改变盒子的大小

1
2
3
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

CSS文字控制在二行 超出部分不显示

发表于 2016-11-13 | 分类于 CSS

解决办法。

首先三条属性。

1
2
3
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

这三条属性,只能显示一行,不能用在这里,那么如果显示多行呢?

CSS3解决了这个问题,解决方法如下:

1
2
3
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp:2; //

这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。

最后的css样式如下:

1
2
3
4
5
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

以上对火狐不支持~暂时没想到好的解决办法~

12
照彦

照彦

这里是懒人的小屋

19 日志
10 分类
10 标签
GitHub 知乎
粤ICP备16123805号-2
© 2016 - 2019 照彦
由 Hexo 强力驱动
主题 - NexT.Pisces