JavaScript基础学习--零碎

1、如果WINDOW对象是常规HTML页面，TOP就是SELF 

     var top = document.getElementById('top');

     top.innerHTML     //undefined

 

2、ev.stopPropagation(); //阻止事件冒泡

li.onmouseout = function(ev) {
    ev.stopPropagation(); //组织事件冒泡
};
oStar.onmouseout = function() {
    for (var i = 0; i < aLi.length; i++) {
        var img = aLi[i].getElementsByTagName('img')[0];
        img.src = 'images/darkstar.png';
    }
};

 

3、var aLi_right = aUl[1].getElementsByTagName('li');     // aLi_right instanceof Array  //false

     --它是object，但是不是数组，所以不能用数组拼接方法concat

     --对象转化并拼接成数组的方式：for循环

var aUl = document.getElementsByTagName('ul');
var aLi_left = aUl[0].getElementsByTagName('li');
var aLi_right = aUl[1].getElementsByTagName('li');
var toConcatArray = function(left, right) {
    var arrLi = [];
    for (var i = 0; i < left.length; i++) {
        arrLi.push(left[i]);
    }
    for (var j = 0; j < right.length; j++) {
        arrLi.push(right[j]);
    }
    return arrLi;
};
var aLi = toConcatArray(aLi_left, aLi_right);


//但是，如果某块中不需要排除其他li，只有目标li，可以直接：
//var aLi = document.getElementsByTagName('li');

 

4、 获取视口大小和文档大小

/*视口的大小，部分移动设备浏览器对innerWidth的兼容性不好，需要
 *document.documentElement.clientWidth或者document.body.clientWidth
 *来兼容（混杂模式下对document.documentElement.clientWidth不支持）。
 *使用方法 ： getViewPort().width;
 */
function getViewPort() {
    if (document.compatMode == "BackCompat") { //浏览器嗅探，混杂模式
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}

//获得文档的大小（区别与视口）,与上面获取视口大小的方法如出一辙
function getDocumentPort() {
    if (document.compatMode == "BackCompat") {
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        };
    } else {
        return {
            width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
            height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
        }
    }
}

clientHeight：内容高度+padding高度  ，jQuery中的innerHeight()方法返回的就是这个高度。

 

offsetHeight：内容高度+padding高度+边框宽度  ，jQuery中的outerHeight()方法返回的就是这个高度

 

注意：用document.getElementById('bottom').style.[ height | width ]   dom.style.width这种方式只能取到行内属性， 而不是css属性

 

5、HTML title属性：定义关于元素的额外信息，这些信息会在鼠标悬浮时显示一段工具提示文本

<p title = "nihao">鼠标悬浮显示nihao</p>

 

6、各大浏览器对应内核

     Trident    IE系列

     Wenkit     Chrome、Safari

     Gecko     FF（firefox）

     Presto     Opera

 

补充2017-8-27:

 

7、获取UA（user agent）

   function whatBrowser() {  
        document.Browser.Name.value=navigator.appName;  
        document.Browser.Version.value=navigator.appVersion;  
        document.Browser.Code.value=navigator.appCodeName;  
        document.Browser.Agent.value=navigator.userAgent;  
    } 

 

8、点击某按钮btn，显示div，点击文档其他地方隐藏div     

     法一思路：

     1、对document做点击事件，隐藏div     2、对btn的点击事件绑定事件处理程序，阻止事件冒泡。（防止冒泡到document，而document中有隐藏div事件）

<script type="text/javascript">
function stopPropagation(e) {
    if (e.stopPropagation)
        e.stopPropagation();
    else
        e.cancelBubble = true;
}
 
$(document).bind('click', function() {
    $('#test').css('display', 'none');
});
 
$('#test').bind('click', function(e) {
    stopPropagation(e);
});
</script>

 

     法二思路：

     在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息，思路一中div的click事件处理程序传入的参数就是这个event对象。访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在。 

 

event对象包含了一个重要属性：target(W3C)/srcElement(IE)，这个属性标识了触发事件的原始元素，思路二就是要利用这个属性。可以直接对document的click事件绑定事件处理程序，在事件处理程序中判读事件源是否为id==test的div元素或其子元素，如果是则方法return不做操作，如果不是则隐藏该div。 

<script type="text/javascript">
document.onclick = function(ev) {
    var event = ev || window.event;   //浏览器兼容性
    var target = event.target || event.srcElement;
    while (target) {      //循环判断至跟节点，防止点击的是div子元素
        if (target.id && target.id.toLowerCase() == 'open') {
            return false;
        }
        // target = target.parentNode; //层层遍历上去，直到target = null; 结束while循环
        target = 0; //直接令target = 0; 结束循环
    }
    openUl.style.display = 'none';
};
</script>