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属性

时间: 2024-10-06 04:59:49

JavaScript基础学习--零碎的相关文章

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q

javascript基础学习(八)

javascript之日期对象 学习要点: 日期对象 将日期对象转换为字符串 将日期对象中的日期和时间转换为字符串 日期对象中的日期 日期对象中的时间 设置日期对象中的日期 设置日期对象中的时间 与毫秒相关的方法 一.日期对象 在javascript中并没有日期型的数据类型,但是提供了一个日期对象可以操作日期和时间. 日期对象的创建: new Date(); 二.将日期对象转换为字符串 将日期对象转换为字符串可以使用以下4种方法: date.toString();//将日期对象转换为字符串时,采

javascript基础学习(二)

javascript的数据类型 学习要点: typeof操作符 五种简单数据类型:Undefined.String.Number.Null.Boolean 引用数据类型:数组和对象 一.typeof操作符 typeof操作符用来检测变量的数据类型,操作符可以操作变量也可以操作字面量. 对变量或值运用typeof操作符得到如下值: undefined----如果变量是Undefined类型: boolean-------如果变量是Boolean类型: number-------如果变量是Numbe

[转载] 几张非常有意义的JavaScript基础学习思维图

原文:http://www.w3cfuns.com/forum.php?mod=viewthread&tid=5598364&extra=page%3D1%26filter%3Ddigest%26digest%3D1%26digest%3D1 1.JavaScript 数组 2.JavaScript 函数基础 3.Javascript 运算符 4.JavaScript 流程控制 5.JavaScript 正则表达式 6.JavaScript 字符串函数 7.JavaScript 数据类型

javascript基础学习(十二)

javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显示器的信息. 目前显示器分辨率为800X600或1024X768两种. screen.height:屏幕的高度 screen.width:屏幕的宽度 screen.availHeigh:屏幕的有效高度 screen.availWidth:屏幕的有效宽度 二.History对象 History对象可以

javascript基础学习(五)

javascript之函数 学习要点: 函数的介绍 函数的参数 函数的属性和方法 系统函数 一.函数的介绍 1.函数就是一段javascript代码.可以分为用户自定义函数和系统函数.   如果一个函数是javascript内置的函数,就称为系统函数.如果函数是自己编写的函数,就是自定义函数. 2.在javascript用function来定义一个函数.function 函数名(参数1,参数2,...){<语句块>  return 返回值} (PS:return语句可以省略) 3.函数的嵌套定

javascript基础学习(三)

javascript之运算符 学习要点: 表达式 运算符:一元运算符,算术运算符,关系运算符,逻辑运算符,*位运算符,赋值运算符 一.表达式 表达式有常量表达式,变量表达式,复合表达式. 二.算术运算符 一元:+(正号).-(负号).++.—— 二元:*./.%.+.- 三.关系运算符 ==.=== ps:等同运算符比相等运算符要求更为严格,等同运算符只有在两个操作数类型相同,并且值也相同的情况下才会返回true. <.<=.>.>= instanceof运算符.       in

javascript基础学习(一)

javascript输出: javascript通过不同的方式来显示数据: (1)windows.alert()弹出警告框: (2)document.write()将方法写入HTML文档中: (3)innerHTML写入到HTML元素: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>显示方式</title> </head> <

javascript 基础学习整理

1. javascript是动态语言,脚本语言,弱类型语言. 2. javascript代码在html文件中的位置安排,放在<body></body>内部与外部的区别.如何引用外部的javascript文件. 3. javascript单行注释与多行注释. 4. javascript如何申明变量. 5. javascript分支语句的使用. 6. javascript如何弹出警告框.确认框. 7. javascript函数的编写:带参数.带返回值. 8. javascript函数循