整理前端常见问题及解决方法

Posted 2020-07-11 蜗牛

1、

兼容ie8圆角的解决方法：
下载ie-css3.htc文件
在css中加入behavior:url(ie-css3.htc);z-index:3; position：relative 即可

2、

去掉文本框的右下角：resize:none;

3、

html5新属性：hidden 对于不支持html5的浏览器，加上*[hidden]{display:none;}

4、

div><p>这只铅笔5元</p></div>
outerHTML：
包含整个标签，不仅限于标签内部的内容，即<div><p><这只铅笔<span>5</span>元</p></div>
innerHtml:获取元素的html和文本<p><这只铅笔<span>5</span>元</p>
innerText：这只铅笔5元

5、

要在html页面浏览器标题中添加图标
在head中加入
<link rel=‘icon‘ href="images/33.ico" type=‘image/x-ico’ />

图片需要是.ico格式

6、

css3属性：
text-overflow:ellipsis; 一行中，将超出宽度的文本设置为省略号。例如sdasasadad...

（1）移动端用于显示两行文本后省略：

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

（2）js实现文字显示两行后超出部分省略 eg:

var oBox=$(".type2_child3").html();
var demoHtml = oBox.slice(0,34)+‘...‘;//加省略号
oBox=$(".type2_child3").html(demoHtml);
这几个属性一定要一起用：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

 

7、

jq
sibings()方法：$("p").siblings(".aa") 查找每个p元素的所有类名为.aa的元素

 

8、

var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
var checkValue=$("#select_id").val(); //获取Select选择的Value

 

9、

获取选中的radio的值

<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女

var sex= $(‘input:radio[name="sex"]:checked‘).val();

 

10、

在安卓手机上去掉文本框获取焦点时的高亮边框。
.search_text:focus,:hover,:active{outline:0px; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-modify:read-write-plaintext-only;}

 

11、

渐变：background:linear-gradient(起颜色，终颜色);

要让渐变布满body全屏，在html{height:100%;}

 

12、

无限循环旋转图片
<img src="aa.img"/ class="aa">
<style>
.aa{animation:aa 6s linear infinite;}
@keyframes aa{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}

 

 

13、

设置字与字之间横向字距：letter-spacing，纵向：line-height

 

14、

设置多行文本的placeholder样式

textarea::-webkit-input-placeholder{}

 

15、

移动端

禁止页面滑动

var jinzhi=0;
document.addEventListener("touchmove",function(e){
if(jinzhi==0){
e.preventDefault();
e.stopPropagation();
}
},false);

 

 

16、

==比较：先将比较的两者转换为同一类型然后进行比较

===比较：不进行类型的转换，如果类型不同则直接返回false

 

17、

验证电话号码正则：  var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;

只允许英文和中文：
onkeyup="value=value.replace(/[\d]/g,‘‘)"

18、

getElementsByTagName()查找标签名在ie 8及以下无效