专栏首页web前端JavaScript基础学习--零碎

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript之DOM的理解学习归纳

    DOM是一个针对HTML和XML文档的一个API,主要描绘了一个层次化的节点树 1、Node类型。JavaScript中所有的节点类型都继承自Node类型,因此...

    用户1148399
  • JavaScript基础学习--01热身

    一、js大致思路: 1、完成静态HTML+CSS 2、过一遍整体的大致js思路 3、按照从上到下的,从有至无的顺序完成js编写(包括先写大致轮廓,再细化细节部分...

    用户1148399
  • JavaScript基础学习--08 JS作用域

    Demos:   https://github.com/jiangheyan/JavaScriptBase 一、浏览器      1、“JS解析器”(至少分为两...

    用户1148399
  • DOM操作笔记

    DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。

    bamboo
  • javaScript的常见document对象

    对象属性 document.title //设置文档标题等价于HTML的title标签 document.bgColor //设置页面背景色 docume...

    botkenni
  • 博客园美化博客随笔目录

    小小咸鱼YwY
  • 20140920遇到的问题--JAVA----JS------Tomcat7.0+Onselect灵敏度+fakepath等若干问题

    相信大家在配置tomcat的时候,运行之后有时候出现一个  8005的问题,这个解决很简单:

    wust小吴
  • 前端基础-节点操作

    document.createElement() 用来生成网页元素节点,参数为元素的标签名;

    cwl_java
  • js 获取浏览器高度和宽度值(多浏览器)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BOD...

    似水的流年
  • 自适应页面高度

          困扰了我很久的问题:我很想让一个框架左侧的菜单(控件或者是折叠的LI或者别的),能够自动适应浏览器的变化。因为即使是同一分辨率,页面中的实际高度也不...

    用户1075292

扫码关注云+社区

领取腾讯云代金券