小知识

1.如何设置固定的背景图像：

.bgImage
  { 
  background-image: url(bgimage.gif); 
  background-attachment: fixed; //属性设置背景图像是否固定或者随着页面的其余部分滚动。
  }

具体示例：
链家首页banner
2.判断是电脑端打开还是手机端打开，显示不同的内容

<script type="text/javascript">
	        function browserJudge() {
	            var sUserAgent = navigator.userAgent.toLowerCase();
	            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
	            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
	            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
	            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
	            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
	            var bIsAndroid = sUserAgent.match(/android/i) == "android";
	            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
	            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
//	            document.writeln("您的浏览设备为：");
	            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
	                $(".excel-content").addClass("hide");
	                $(".phone-excel-cont").removeClass("hide");
	            } else {
	            	
	            	
	               $(".excel-content").removeClass("hide");
	                $(".phone-excel-cont").addClass("hide");
	            }
	        }
	
	        browserJudge();
		</script>

3.jquery复制链接（实现复制链接）

4.css文字选中时的背景色与字体颜色的修改

::selection {background:#00b38a;color:#fff;}
::-moz-selection {background:#00b38a;color:#fff;}
::-webkit-selection{background:#00b38a;color:#fff;}

5.:nth-child从1开始的，而:eq()是从0算起的！
6.要给页面设置背景色，谨防浏览器的护眼模式
7.鼠标悬浮切换，会忽闪

解决：右侧设置一个最小的高度与左侧齐高
错误：设置最大高度显示不全
8.input只读
readonly
9.表单输入的手机号中间几位用星号代替

var tel ='13583188754';
var reg = /^(\d{3})\d{4}(\d{4})$/;
tel = tel.replace(reg, "$1****$2");
$("#txtInviteMobile").val(tel);

10.移动端一屏页面
背景图允许变形的话

可以作为背景图
然后background-size:cover;

11文字上下垂直居中显示

<div class="jgdet-active-item ">
	<div class="item-left fl">
			<h3 class="item-l-title">立即领取大智免费试听名额</h3>
			<p class="item-l-subtitle">全部课程适用，先抢先得。</p>
		</div>
		<a href="javascript:;" class="item-right fr active-apply">立即领取</a>
	</div>
	<div class="jgdet-active-item ">
		<div class="item-left fl">
			<h3 class="item-l-title2">额外帮您省钱：平均45元，最高115元！</h3>
		</div>
		<a href="javascript:;" class="item-right fr active-apply">立即领取</a>
	</div>

.jgdet-active-item .item-left { height:80px;display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-flow: column; flex-flow: column; }

12.css3中的BFC,IFC,GFC和FFC
BFC(Block Formatting Contexts)直译为"块级格式化上下文"

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"
水平居中：通过text-align则可以使其水平居中。
垂直居中：设置vertical-align:middle

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"

FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"
13.closest()

$(e.target).closest(".zhu-city-choose").length == 0   //查找target元素是否有class=zhu-city-choose的父节点

 $(document).on("click", function (e) {
                if ($(e.target).closest(".zhu-city-choose").length == 0) {
                    $(".zhu-city-choose .zhu-choose-box").hide();
                }
            })

14.设置单行或多行省略就不要加padding了
15.标点不要出现在行首
去掉 word-break:break-all;
改成 word-break:normal;text-align: justify;
16.点击下载

<a href="文件地址"></a>
//有时候.jpg/.png点击会直接打开文件，而不是下载加上属性dowload
<a href="/user/test/xxxx.jpg" download="文件名.jpg">点击下载</a>

17.出来弹层后，页面不可滚动
给body加个样式

.scroll-no{height:100%;overflow:hidden;}

18.pc用iconfont ，移动端用svg
19.

20.input在苹果浏览器上字体偏上
高度固定，字体多大line-height就多大，然后在设置padding
21.在ie和火狐上表格边框不完整

这个会使边框加粗，暂时没有找到方法解决
.apply-table {
	border-spacing: 0;
	border-collapse: unset;
	border-top: #000 1px solid;
	border-right: #000 1px solid;
}

22.textarea禁止拖动

resize: none; //禁止拖拽
resize: vertical;//允许垂直方向的拖拽
resize: horizontal;//水平方向

23.监听元素里的超出滚动

$("#d1").scrollTop()

24.js前面的分号

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

这里分号的意义：
防止多文件集成成一个文件后，高压缩出现语法错误
脚本压缩，前端页面要减少脚本数量和脚本大小，所以要把一类的脚本压缩在一起，为了避免压缩时前一个脚本没有写最后一个分号而导致压缩后脚本不能使用，所以要在开始加一个分号
25.input回车直接搜索

$("#city-search").keydown(function (e) {
            if (e.keyCode == 13) {
                alert('ssss');
            }
 });

26.input输入框在ie浏览器下的清除按钮

/*ie-clear xx*/
input::-ms-clear{display: none;}

27.Safari中input的placeholder垂直问题

height：36px;
vertical-align:middle;

不要有上下的padding，line-height，应该还有其他方法，没试，这个是试了的
28.安卓浏览器打开页面无法滚动

用了iosselect，出现这个错误，我添加了全局样式touch-action: none;
导致页面在安卓上无法滚动