随笔分类 - js
摘要：实例： aaaa 当设置font-size之后，原本垂直居中的三个inline-block的元素，会变的不再垂直居中。解决方案： 1、span{display: inline-block;height: 15px; line-height: 15px; float:left;} 2、.span1{width: 3px;background-color: #ccc; vertical-align: middle;} .span2{background-color: #ccc; font-size: 12px; vertical-align: middl...
阅读全文
摘要：在解决search-box的bug时，由于IE8-的数组处理与其它浏览器的不同，而导致报错。示例：arr=[1,3,3,];当数组的最后是一个逗号时: IE9+默认 arr=[1,3,3];也就是arr.length=3; IE8(-)默认 arr=[1,3,3,null];也就是arr.length=4;因此在处理数组逻辑时需要注意。特别是使用数组存储对象，并操作对象时，很容易报undefined错误。
阅读全文
摘要：1、编译 当创建一个正则表达式之后，浏览器会对其进行一些列的操作（检测语法、转换成一个本机代码例程（嘿嘿，不明白））。因此在重复多次使用同一个正则表达式时，最好将其赋值给一个变量，从而跳过浏览器的这一系列重复操作。2、设置起始位置 字符串的起始位置，或者由正则表达式的lastIndex属性指定的位置。3、匹配每个正则表达式的字元 扫描目标文本和正则表达式模板，当一个特定的字元匹配失败时，回到起始位置尝试其它可能的路径 4、匹配成功或者失败示例： /h(ello|appy) hippo/.test("hello there, happy hippo"); 此正则表达式匹配he
阅读全文
摘要：str += "a" + "b"在浏览器中的执行过程： 1、创建临时字符串， 2、将临时字符串设置为“ab”， 3、将临时字符串和str进行连接， 4、将结果赋值给str。str = str + "a" + "b"在浏览器中的执行过程： 1、将"a"连接到str的后面， 2、将"b"连接到str后面。 等同于： str += "a"; str += "b";第二种方法不仅减少了执行的过程，而且避免了临时字符串的产生。在性能上要比第一种提
阅读全文
摘要：我们都知道jQuery为ajax请求封装了success和error两个回调方法，其实jQuery也实现了为非ajax请求的普通方法也设计了绑定回调函数的方法。当一个方法需要等待另一个耗时很长的方法完成之后才能执行的时候，我们非常希望可以监听这个耗时的方法。示例：var wait = function(){ var deferred = $.Deferred(); //在函数内部，新建一个Deferred对象 var tasks = function(){ alert("执行完毕！"); deferred.resolve(); // 改变Deferred对象的执...
阅读全文
摘要：ajax操作的传统写法： $.ajax({ url: url, success: function(){ doWhenSuccess(); }, error: function(){ doWhenError(); } });ajax的链式写法： $.ajax(url) .done(function(){ doWhenSuccess(); }) .fail(function(){ doWhenError(); }); 该写法允许添加多个回调函数：$.ajax(url).done().fail()...
阅读全文
摘要：1、控制元素显示和隐藏的方法： 设置元素的 display； 元素不再占据文档位置； 设置元素的visibility； 元素占据文档位置； 设置元素的opacity； 元素占据文档位置；2、关于display的方法： 使用jquery的show、hide方法控制元素的显示； 为元素添加class，并设置其display； 想知道show、hide方法是怎么实现元素的显示和隐藏的。 两个方法哪个性能会更好一点？
阅读全文
摘要：fis2.0改变了加载策略之后，首屏采用css内联进html的方式，因此首屏的样式会在html加载完成之后，不需要等待css就可以完成渲染。这导致其它部分的内容显示上会很奇怪。项目中出现的问题是： 页面加载时，tab会只展示html中的内容，需要等到css获取到之后才能显示正常。解决的方案是： 先使用行内css，设置style=“visibility：disable”。 在css中通过!important设置visibility：visible，覆盖行内的css。
阅读全文
摘要：图片、文字混排： 不管图片和文字的前后位置，都要给 图片 设置 vertical-algin，而不是谁在前面给谁设置。 此方法兼容IE7+ 和其它主流浏览器。IE7-没有测。inline-block块元素、行内元素混排： 同图片和文字的混排，测试IE7+ 和其它主流浏览器。IE7-没有测。两个行内元素： 设置vertical-algin并不会使元素在父元素中居中。vertical-algin: w3c:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 但是...
阅读全文
摘要：在项目中，遇到的问题是： 四个tab发送四个不同的请求，当用户连续在不同的按钮之间来回切换时，会出现不清楚那条数据是需要展示的的问题，和当连续点击同一个按钮时，基本同时返回的数据会全都展示出来的问题。解决的方法： 需要展示哪条的问题： 记录最后一次用户点击的tab，对请求回来的数据进行判断，找出与用户最后一次点击的tab相同的那条数据展示出来。 这样做仍然存在的问题是，可能两条以上相同的请求发出，得到两条以上相同的数据，这样就会重复展示出来。 禁止发出两条相同的请求： 通过为tab请求设置不同的标记位的方法，当请求正在进行时，将标记位设置为正在请求。在用户再次点击此tab时，判断该...
阅读全文
摘要：1、经测试 IE+和其它主流浏览器均支持min-height属性，已经满足目前的需求。2、当height和min-height同时设置时，浏览器自动选择数值更大的一个（测试IE7+及其他主流浏览器）。
阅读全文
摘要：1、将设置float的元素的父元素也设置float。 缺点：很有可能不符合情况要求2、设置父元素的position为absolute，前提是父元素的父元素并没有设置position：relative。 缺点：很有可能不符合情况要求3、设置父元素的overflow为hidden。 尚不知晓，猜测是只能清除浮动带来的父元素塌陷，但无法闭合浮动（待验证）4、设置父元素的display为inline-block。 缺点：可能不符合情况要求。5、设置父元素的zoom为1。 缺点：zoom为IE私有属性6、浮动元素的下方加入额外的元素 缺点：增加额外的标签使HTML结构看起来不够简洁7、使用a...
阅读全文
摘要：兼容性：IE6、IE7不识别inline-block但可以触发块元素。其它主流浏览器均支持inline-block。解决IE6、IE7兼容性的方法：1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。2、直接设置display:inline，使用zoom:1触发layout。兼容所有浏览器的方法是：display:inline-block;*display:inline;*zoom:1;
阅读全文
摘要：outline 和 border的区别： outline不占据文档空间，border占据文档空间。 outline无法单独设置上下左右，只要设置outline，必须所有的边都设置；border可以设置任意一个方向时候有border。outline的兼容性问题： IE8一下不支持outline。由于outline不占据文档空间的特性，在很多情况下很好用。但它最大的限制就是无法单独设置某个方向的边。并且存在兼容性问题。
阅读全文
摘要：var ajaxTimeoutTest = $.ajax({ url:'',//请求的URL timeout : 1000, //超时时间设置，单位毫秒 type : 'get',//请求方式，get或post data :{},//请求所传参数，json格式 dataType:'json',//返回的数据格式 success:function(data){ //请求成功的回调函数 alert("成功"); }, complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
阅读全文
摘要：当字体大小被设置小于12px时，IE、firefox可以起作用。但chrome中仍然显示为12px大小。解决方法为：html, body {-webkit-text-size-adjust: none;}（并不好）加入该段css后，可以在chrome中设置小于12px的字体。但同时引入的问题是，在缩放页面时，不能自动缩放字体的大小。所以尽量不要吧这句css写到html和body上，而是写到需要将字体设置到12px一下的元素上。（以上方法在网上查到，但实际却并没有-webkit-text-size-adjust属性，当然也没有起作用）
阅读全文
摘要：非绝对定位情况下，一般使用margin:0 auto的方法来进行居中，但在绝对定位情况下，margin:0 auto会失效。这时，进行水平垂直居中可以如下：position:absolute;left:50%; //left设置为50%，这时是以元素的左侧进行的水平居中，所以需要设置margin-left为元素宽度的一半。top:50%;//垂直居中原理同水平居中margin-top:-100px;margin-left:-100px;width:200px;height:200px;z-index:1;
阅读全文
摘要：1、link属于html标签，而import属于css范畴。2、link可以定义其它属性，import只能引入css3、link引入的css会在页面加载时同时加载，import引入的css在页面完全加载之后才加载（？）4、link无兼容性问题，import在css2.1之后提出，低版本不支持5、使用js控制css加载时，只能用link，不能用import。
阅读全文
摘要：性能排序：1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）在编写css时，应该首先考虑使用性能好的选择器。大家一般会关心js的性能，很少去考虑css对性能的影响，为什么？因为css对性能的影响可以忽略吗？
阅读全文
摘要：如果是实现链接，a标签中必须有href属性，并且属性值是合法的url如果实现锚点，a标签中必须有name属性，当点击该标签时，会跳转到id同该标签的name值相同的元素处。
阅读全文