一些小笔记

记录开发中遇到过的一些小问题---------------

1.监听任意元素内容变化;------------兼容性方面不太好（以后兼容性提升后， 不失为一个好的方法）

 $("#aa").bind("DOMNodeInserted",function(e){
        alert(111);

    })
    $('#aa').bind('contentchanged',function() {
        // do something after the div content has changed
        alert('woo');
        console.log("weewerwr");
    });
// 这样会调用上面的函数
$('#aat').trigger('contentchanged');

 2.video不能在ios播放

如果视频格式MP4是正确的，但是你的后台没有对ios的视频播放器做适配。如果想要在iOS上播放视频，那么必须在http协议中应用rang请求头。

视频文件总长度是123456789
range是播放器要求的区间也就是客户端发送请求的时候http会带有这个标记，

这个区间的值在http.headers.range中获取，一般是bytes=0-1这样的。

我们需要做的处理是返回文件的指定区间（如上面的例子，我们就应该返回0到1的字符），

并添加Content-Range:btyes 0-1、Accept-Ranges:bytes、'Content-Length: 123456789'，'Content-Type: video/mp4'到http.headers中

3.a的onclick与href

  我们知道链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接），

如果不想执行href 属性下的动作执行，onclick 需要要返回 false ，一般是这样写onclick="xxx();return false;".

如果不设置 href属性在IE6下面会不响应hover。双击后会选中标签的父容器而非这个一a标签（IE下都存在这一问题）。

4.Position:sticky---------效果很好（后续浏览器支持的普及，会有极大的作用）

 Position：sticky---------粘性定位    是relative与fixed的属性结合，

Css3属性，没有进入w3c标准，刚开始讨论，兼容性不好；Android全体阵亡，ios高版本支持

5.video 各浏览器支持的的编码格式

MP4视频有两种编码方式，Divx和H264，but，Chrome支持H264

只支持: .mp4后缀(.h264编码格式),和.webm后缀(专用web视频格式),以及.ogg后缀(音频文件)
注意: Html5 Video 可以添加多个source源来进行兼容适配,这样,当第一个源读取出问题时会自动读取下一个源.

比如可以同时在前面加上.webm和.mp4源,这样一个出错时会自动读取另一个可用源(因为不同浏览器,支持的格式是不一样的)

function getFormatExtension(){

if( video.canPlayType("video/webm") !=""){                             

     return ".webm";

}else if( video.canPlayType("video/mp4") !=""  ){                    

     return ".mp4";

    }

}

6.条件注释，设置只对IE产生作用的语句：

<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" /> 
< ![endif]-->

还可以区分各种不同的IE版本：

<!--[if IE 6]> - targets IE6 only --> 
<!--[if gt IE 6]> - targets IE7 and above --> 
<!--[if lt IE 6]> - targets IE5.5 and below --> 
<!--[if gte IE 6]> - targets IE6 and above --> 
<!--[if lte IE 6]> - targets IE6 and below -->

万恶的ie，期待可以不考虑ie兼容的时候

7.  currentColor        unicode-range

 当前元素的color值，设置元素其他颜色的时候会派上用场，合理使用会让代码变的更加简洁。

unicode-range的作用是可以让特定的字符或者字符片段使用特定的字体。

@font-face {

  font-family: BASE;

  src: local('PingFang SC'),

       local("Microsoft Yahei");

}

@font-face {

  font-family: quote;

  src: local('SimSun');    

  unicode-range: U+201c, U+201d;

}

.font {

    font-family: quote, BASE;

}

 

8.<script type="text/template">

这一段存放了一个模板。
在js里面，经常需要使用js往页面中插入html内容。比如这样：

var number = 123;$('#d').append('<div class="t">'+number+'</div>')

如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，

因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。
给<script>设置type="text/template"，标签里面的内容不会被执行，也不会显示在页面上，

但是可以在另一个script里面通过获取，然后再通过相关的模板工具进行处理，插入到页面中。

这样就把大段的HTML操作从js里面分离开了。

现在还有新的解决方案`<p>this is ${{aa}}a p</p>` ----------------------这个解决更好

9.两端对齐 text-align:justify

在其自然状态下，"text-align:justify"就不能工作，除非内容足够长并引起一个换行符。

否则，文本仍然左对齐。这是因为在排版中这是理想的行为——一个块中的最后一行文本总是左对齐。

也许这是一个CSS规范设计，即使我们只有一行文本，这一行还是像最后一行一样，让文本左对齐。

上图展示的是没有一个打破元素，因为没有足够元素来打破线（没有换行符），所有元素将左对齐利。

我们可以利用伪元素来产生一个换行符，由于其宽度为100%，打破元素前面的所有行内元素实现两端对齐。

10.Trsnsform 

可以使用变换的元素必须是块级元素或者原子内联级元素，单纯的内联元素是不能应用变换的。

另外，float或者absolute会将非display：none的元素转化为display:inline-block

11.Focus  ---------手机端兼容问题

在某些浏览器中（例如华为自带浏览器）中focus事件的函数不执行

解决:-----------------用click事件代替

12.轮播手动滑动与手机浏览器自带的滑动翻页冲突

moveUl.addEventListener('touchmove',function(event){event.preventDefault(); },false);
moveUl---------------轮播的组件框

阻止手机浏览器中滑动默认翻页的功能