1.position与滚动条的问题
一个div作为父元素,其子元素的position=absolute的时候,如果位置超过了div的范围就显示到外面去了,而如果position=relative时,范围超出时,div就会出现滚动条,子元素仍在div内部。
解决办法:overflow:auto;
2.图片上传显示为缩略图解决办法:
<img src="'+data[i].images[j]+'?imageView2/1/w/300/h/300" alt="加载中..." onerror="$(this).hide();"/>
3.设置图片宽度自适应,不用担心图片变形的问题
<div style="600px; position:relative; padding-bottom:600px; height:0;">
<img src="xxx.png" style="100%; height:100%; position:absolute;" />
</div>
4.点击空白区域收回弹框
//显示隐藏搜索框
$('.search-button').click(function(){
some code;
});
$("body").click(function (e) {
console.log($(e.target));
if ($(e.target).parent().attr("class")=='search-button'||$(e.target).attr("class")=='输入框类名'){}
else{
aother code;
}
});
5.设置input里面的placeholder的属性
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: rgb(255, 255, 255);
font: 18px/50px "Microsoft Yahei Regular";
text-indent: 10px;
}
input::-webkit-input-placeholder {
color: rgb(255, 255, 255);
font: 18px/50px "Microsoft Yahei Regular";
text-indent: 10px;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: rgb(255, 255, 255);
font: 18px/50px "Microsoft Yahei Regular";
text-indent: 10px;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: rgb(255, 255, 255);
font: 18px/50px "Microsoft Yahei Regular";
text-indent: 10px;
}
6.自定义鼠标指针样式
cursor: url("/public/img/fangda.png"), auto;
url是自定义图片,后面的参数可以是auto,default,pointer等,表示在未找到自定义图片样式时指针的显示样式。
7.引用框架,设置框架的高度减去固定高度后全屏填满
body:<iframe width="100%" height="100%" src="index.html" style="margin-top: 60px;" id="mapFrame"/>
CSS:设置html,body{height:100%;}
JQ:$("#mapFrame").height(document.body.clientHeight-60);
8.手机屏幕固定填充背景图片,不叠加
body{
background: url('/img/beijing.jpg');
background-size: cover;
background-attachment: fixed;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/beijing.jpg',sizingMethod='scale');(IE浏览器)
}
9.jq中append()、prepend()、after()、before()的区别详解
1、append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标签之前添加东西)
2、prepend() - 在被选元素的开头插入内容(内容的开始,比如说有个a标签,则是在<a>这个标签之后添加东西)
3、after() - 在被选元素之后插入内容(元素的结尾,比如说有个a标签,则是在</a>这个标签之后添加东西)
4、before() - 在被选元素之前插入内容(内容的开始,比如说有个a标签,则是在<a>这个标签之前添加东西)