那些奇葩而又常见的前端问题（遇到就更新）

异步提交表单，总是走进error函数而不走success函数，后台已经保存数据。

ajax请求时datatype参数没指定。估计你服务器返回的是html格式的文本。看你这需求，建议指定为json。然后服务器改为返json格式数据。

dataType:"json"

IE select[multiple] 选中的选项

在select[multiple]（多选）的时候如果给option 设置hover 样式 那么在IE下选项在选中状态，鼠标经过的时候字体颜色会变成白色，做法是把hover 样式去掉，因为对它设置hover 也是不起作用的。

选中

然后hover（hover时候，字体变成白色了，所以看不见）

正则/转义问题

今天遇到一个 图片匹配问题，搞了半天才知道是/没有转义

cellImg_extension2=jpg|jpeg|tif|tiff|gif|bmp|png|xls|xlsx|doc|docx|txt|zip|rar|pdf|eps；

var pattern = eval('/^/.+/.+/.+/.+/.+/.+[.]('+ cellImg_extension2 +'){1}$/');//匹配文件路径

正确写法

var pattern = eval('/^[/].+[/].+[/].+[/].+[/].+[/].+[.]('+ cellImg_extension2 +'){1}$/');//匹配文件路径

脚本不断 全选与不全选有时候会失灵

问题写法

jQuery("input[type=checkbox][name=rowCheck]").attr("checked", false);

jQuery("input[type=checkbox][name=rowCheck]").attr("checked", true);

正确写法

jQuery("input[type=checkbox][name=rowCheck]").prop("checked", false);

jQuery("input[type=checkbox][name=rowCheck]").prop("checked", true);

ie tabe 中的文字不换行，导致页面被撑开

给table 添加以下样式即可

    table-layout: fixed;

ie 和 chrome 对没有设置背景色而返回的颜色不一样

alert($(this).css("background-color"))

ie 返回 transparent；  chrome /火狐 返回  rgba(0, 0, 0, 0)

ie  不支持 window.scrollY 获取值是undefined

换成

var scrolltop = (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

html()方法在解析   <Details of Request> 会把 Details 解析成 <Details></Details>元素

修改：

html(text.replace(/\<details/ig,"&lt;details"))

input放在a标签里面单击不能获取input的光标,双击才可以获得焦点（IE环境下）

解决方案：

• 不要给a标签添加href属性；

• 不要在外面套上a标签。

修改数组总是会影响到原来数组

返回数组的一个副本，这样改动就不会影响原数组，只是副本而已

var arry1 =[1,2,3,4,5,6]

var arry2 = arry2.slice();

这样对 arry2  操作 就不会影响 到 arry1 了

扩展 jQuery contains 选择器，对Contains查找的内容不区分大小写

jQuery.expr[':'].Contains = function (a, i, m) {
    return jQuery(a).text().toUpperCase()
        .indexOf(m[3].toUpperCase()) >= 0;
};

例子

<div>john</div>
<div>John</div>
<div>hey hey JOHN hey hey</div>

$('div:Contains("john")') //会选择到两个div

iframe高度自适应

给div加一个样式style="position:relative;"
再给iframe 加一个样式如下，只有把iframe定义成绝对定位后，才能自适应高度
style="position:absolute; height:100%;"

z-index有拼爹的性质

z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）
要注意这个特性，另外要提及的是，z-index只有设置了非static的position值才能生效

div.addEventListener绑定的方法会生成方法队列（每次执行就判定一次，导致最后执行多次）

用on+事件=function 的方式绑定即可

如

_canvas.onpointerdown = _canvasPointerdownEvent; 

来代替 

_canvas.addEventListener("pointerdown",{},_canvasPointerdownEvent);

消除 IE10 里面的那个叉号

input:-ms-clear{display:none;}

touchmove需要处理的东西多的话，FPS 就会下降影响程序顺滑度

$('div').on('touchmove', function(){
   setTimeout(function(){//加了定时会快一点
     //.….code
   },0);
});