笔记

js 编码

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

encodeURIComponent(a&b); /*a%26b*/

shift:从集合中把第一个元素删除，并返回这个元素的值。

unshift: 在集合开头添加一个或更多元素，并返回新的长度

push:在集合中添加元素，并返回新的长度

pop:从集合中把最后一个元素删除，并返回这个元素的值。

异步执行外部脚本 async
<script type="text/javascript" src="xxx.js" async="async"></script>

垂直居中
display: table-cell;
vertical-align: middle;

display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-box-orient: vertical;
text-align: center;

文字边框
color: fff;
-webkit-text-stroke: 1px red;

可以做返回顶部
scrollTop=document.body.scrollTop||document.documentElement.scrollTop;

如何判断一个对象是否是数组
Object.prototype.toString.call([]);
"[object Array]". //这是数组

Object.prototype.toString.call({});
"[object Object]"。 //这是字符串

什么是CSRF,怎么造成的。有什么防御手段？
CSRF是跨站请求伪造

在html中关闭和开启dns预读取
<meta http-equiv="x-dns-prefetch-control" content="off"> content="on"

文本框的
<input type="text" maxlength="20" value="你好" onfocus="if(this.value=='你好'){this.value='';}this.style.color='#333';" onblur="if(this.value=='') {this.value='你好';this.style.color='#cccccc';}"/>

强制不换行
white-space:nowrap;

密码框的
<p class="tel clear" style="position:relative;zoom:1;">
<input type="password" name="loginpassword" id="toploginpassword" class="pwd" tabindex="2" onblur="if(this.value=='') $('.toplogin-passinfo').show();return true;" onclick="$('.toplogin-passinfo').hide();return true;" onfocus="$('.toplogin-passinfo').hide();return true;" style="color: rgb(153, 153, 153);">
<span class="toplogin-passinfo" onclick="$(this).hide();$('#toploginpassword').focus();" style="color: rgb(175, 175, 175); position: absolute;top: 2px; display: block;">请输入密码</span>
</p>

css显示隐藏
visibility:visible/hidden;

边框
rowspan=""合并行 colspan=""合并列

把tab整成一个整体
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;

可以禁用a链接 但是键盘可以敲击成功
pointer-events: none;
<a href="http://www.baidu.com" >ddd</a>

分享按钮：http://www.bshare.cn/

ie 坐标定位
_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) - 500 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight) - 500);

百度贴吧里的

ie 坐标定位
_position: absolute;
_top: expression(documentElement.scrollTop+200);

input 单选、复选与文字对齐

vertical-align:text-top; margin-top:0;

input 复选

.radio{vertical-align:middle; margin-top:0;}

select 下拉
multiple这个属性直接写在select里面 可以展现下拉的全部内容

清除浮动
.cl:after{display:block;clear:both;content:"";visibility:hidden;height:0}.cl{zoom:1}

去除苹果手机内边框

-webkit-appearance: none;

手机浏览器弹窗禁止滑动
$('.pop-wrap').bind("touchmove",function(e){
e.preventDefault();
return false;
});

js随机
var suiji = parseInt(Math.random()*len);

让英文字符折行的代码：
word-break:break-all; word-wrap:break-word;

可以代替textarea的标签：
<ul contenteditable="true">
<li>悼念遇难香港同胞 </li>
<li>深圳特区30周年</li>
<li>伊春空难</li>
</ul>

文字太长，用点点代替
span{
line-height: 30px;
text-align: center;
text-overflow:ellipsis;/*//让超出的用...实现*/
white-space:nowrap;/*//禁止换行*/
overflow:hidden;/*//超出的隐藏*/
display: block;
50px;
}

font-weight:400;

font-size:17px;

auto;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-wrap:normal;
word-wrap:break-word;
word-break:break-all;

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

-webkit-line-clamp:1;

打开新的页面
<a target="_blank" href="http://www.baidu.com"></a>

阻止js冒泡事件
event.stopPropagation();
return false

手机端去掉点击a链接那个框
a{-webkit-tap-highlight-color:rgba(0,0,0,0); }

transform中 写上

forwards

这个东西，可以连着写来个动作

去除 textarea的右下角那个可拉伸的那个东西
resize:none

让文字俩边对齐
text-align:justify

去除select的那个小三角
-webkit-appearance: none;

解决jq框架和别的框架的冲突
$(function() {
window.__Object_toJSONString = Object.prototype.toJSONString;
delete Object.prototype.toJSONString;
});
</script>

空格

&emsp （空格比较大）

&nbsp （空格比较小）

可以使图片变灰
filter: grayscale(100%);

可以使图片出现模糊效果
filter: blur(1px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

vh 和 vw

1vh 等于1/100的视口高度。栗子：浏览器高度为900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度为750， 1vw = 750px/100 = 7.5 px。

word-spacing这个是数字、单词、汉字之间的间距；letter-spacing是字母之间的间距

title左边的图标显示
<link href="ico.ico" rel="shortcut icon">