Javacript 基础

Javascript 组成

Ecmascript –> 解释器 这里基本没有兼容性问题
DOM –> document 有一些可以解决的兼容性问题
BOM -> window 用的比较少
处理浏览器窗口与框架

 

 

 

 

 

 

 

Javascript变量类型

Javascript 的变量相当于一个杯子，它的类型由杯子里装的内容决定，如装酒是酒杯装水是水杯
Typeof 运算符
number ->不区分整数 小数等
string Boolean
object     对象是复合类型
function
undefined -> 1.真的没有定义2 虽然定义了，但是没有给值
四种基本类型 number string Boolean undefined

一个变量应该只存放一种类型的数据

Document.getElementsByName() 仅支持Input标签中的name属性

Var time = SetInterval("alert()",1000) 定时

ClearInterval(time) 清除定时

setTimeout("alert('a')",1000);

数据类型转换

显示类型转换
parseInt() //从字符串中提取前面的数字
//NaN Not A Number 一个标记，不是数字 NaN 标记不能进行比较，它和自己本身都不相等，用 isNaN()函数来检测

parseFloat() //提取一个小数

隐式类型转换
var a=12;var b='12'
alert(a==b)    //true 先把ab转换成相同的类型，然后比较,类似的!=
alert(a===b)    //不转换，直接比较 类似的!==
alert(a - / * b)     //输出0 私下转换了
alert(a+b)     //输出1212 私下转换了 加号用途： 1、字符串连接 2、数字相加 其他符号只有数字运算用途

变量作用域

局部变量：定义在函数中，仅在本函数中可以使用
全局变量：函数外部，尽量少用
闭包：父函数的局部变量子函数可以使用
function father()
    var a = 1;
    function son() {
     alert(a);
    }
    son();
}
father();

命名

匈牙利命名法：类型前缀+首字母大写 如：var fNum1 = 0.3; var iNum2 = 2; var sStr1 = '2313'; var oBtn = documnent.get…

 

 

 

 

 

 

运算

三目运算： 条件？语句1 : 语句2
真：true 、 非0的数、 非空字符串、非空对象
假：false 、数字0 、 空字符串、null（空对象）、undefined

HTML元素的常用属性

CurrentStyle 获取css修饰后最终的样式, style属性仅能获得行内式。但是currentstyle仅能在ie下来用,非ie下通过getComputedStyle(元素,false);
修改时都可用style属性
兼容解决方案
function getStyle(obj,attr) {
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false).width;
}

className
规定元素的 class 属性。注意：该属性名不是 "class"，因为 "class" 是 JavaScript 中的保留字

offsetHeight, offsetWidth (包括了width+padding+border)
返回元素的高度和宽度，以像素为单位。这是非标准的但却得到很好支持的属性。类型：int。状态：只读。

offsetLeft
返回当前元素的左边界到它的包含元素（指的是position不为static的元素）的左边界的偏移量，以像素为单位。类型：int。状态：只读。

offsetTop
返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。类型：int。状态：只读。

innerHTML
规定了元素所包含的字符串，不包括元素自身的开始标记和结束标记

 

Json

Var obj = {a:1 , b:'abc', c:[1,2,3,4]}; alert(obj.b); 等同于 obj['b']
var obj = [{a:5,b:'abc'}, {a:2,b:5}];     alert(obj[1].a); //数组json
json for in
    var obj = {a:12, b:'abc', c:23};
    var key;
    for(key in obj) {
        alert(obj[key]);
    }

函数

可变参arguments[] 传入函数的参数数组
利用可变参数，通过判断参数个数，模拟函数重载。

Function css (obj,attr,value) // 这里写参数也不影响调用，即调用的时候可以css(o1,'width')写两个参数 {
if(arguments.length == 1) do….
else if(arguments2.length ==2) do …

}

数组

两种定义方式：
1. var arr = [1,2,3,4];
2 var arr = new Array(1,2,3,4)

数组的length可以修改，该短了截去，改长了增加的元素都是undefined
快速清空数组 arr.length=0;

数组的方法
1. arr.push() //数组尾部添加一个元素
2. arr.pop() //数组尾部删除一个元素 类似一个栈
3. arr.shift() //数组头部删除一个元素
4. arr.unshift() //数组头部添加一个元素

5. 排序arrayObject.sort (function f(num1,num2) {return num1-num2;}) 要添加以个比较函数，类似于c的qsort

6. 数组连接 var arr = arr1.concat(arr2); //arr1 arr2 本身不变 arrayObject.concat(arrayX,arrayX,......,arrayX)

7. 字符串转属组 var str = "1-2-3-4-5" var arr = string.split('-') ; // 返回的是一个字符串数组

8 arr.splice(删除元素起始位置，删除元素结束位置，要替换的元素，要替换的第二个元素，……)
arrayObject.splice(index,howmany,element1,.....,elementX)

DOM

  1. 创建元素 document.createElement('元素名称')
  1. 末尾增加元素 obj.appendChild(newObj); 可向节点的子节点列表的末尾添加新的子节点
  2. 子节点之前插入节点 target.insertBefore(newChild,existingChild) //The insertBefore() method inserts a new child node before an existing child node.
  3. 删除子节点 target.removeChild(existingChild); existingChild 必须是target的子节点！常常借助parentNode属性
  4. 文档碎片(容器) document.createDocumentFragment () 理论上
  5. childNodes和nodeType
    childNodes有兼容系问题，在火狐下包括文本节点，而ie下不包括 。
    nodeType值： 1->Element 3 –>Text
    if(nodeType == 1) do… else {do …}
  6. children 兼容版的childNodes 代替childNodes 各种浏览器完美支持children属性
  7. parentNode 当前节点的父节点
  8. offsetParent 返回当前元素用来定位的父节点，即祖先元素中position不是static的
  9. firstChild(IE) firstElementChild(firefox) 火狐中firstChid可能返回文字 firstElementChild返回元素，兼容方案如下：

    类似的 :
    lastChild lastElementChild(仅火狐支持)
    perviousSibing(IE) perviousElementSibing(firefox)
    nextSibing(IE) nextElementSibing(firefox)

 

BOM

  1. window.open('http://baidu.com','_self'); //返回新打开的窗口
  2. window.close() //关闭窗口,firefox不能关闭非脚本创建的窗口
  3. userAgent 浏览器信息属性
  4. window.location 加载网页地址，可以做跳转
  5. window.conform() 确认取消对话框
  6. window.alert();
  7. window.prompt(); 提示用户输入信息

  8. 注：window可以省略

String 类的方法

  1. str.charAt(position);
  2. str.charCodeAt(position); 字符->编码 （javascript 统一使用utf-8编码）
  3. String.fromCharCode(num) 编码->字符
  4. str. indexOf(searchvalue,fromindex)     //返回字符或者字符串第一次出现的位置 注意：区分大小写
  5. str.lastIndexOf(searchvalue,fromindex) //字符串最后出现的位置
  6. str.search( reg) 正则
  7. stringObject.replace(regexp,replacement) 正则
  8. str.localeCompare(target) //按照当地习惯进行字符串比较，如中国按照拼音先后来比
  9. stringObject.slice(start,end); slice(start) 负数会变成截取倒数第几个，这是和substring的区别
  10. slice substring substr
  11. stringObject.split(separator,howmany); 返回一个数组，第二个参数是数组长度，可选

 

事件对象（event）

  1. <document>
    <!DOCTYPE>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <head>
    <body>
    </body>
    </html>
    </document>

  2. 兼容方案1:
    document.onclick = function(ev) {
        if(ev) alert(ev.clientX+','+ev.clientY);
        else alert(event.clientX+','+event.clientY);
    }

    兼容方案2：
    document.onclick = function(ev){
        var oEvent = ev||event;
        alert(oEvent.clientX+','+oEvent.clientY);

    }


  3. event.cancelBubble = true; 阻止事件冒泡 ，即组织其父级事件发生，以免影响程序
    下拉菜单中使用

  4. document.onmousemove = function(ev) {

        var oEvent = event||ev;

        

    }

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop //可视区到到页面顶部的距离, 滚动条相对于其顶部的偏移。

    clientX clientY //到可视区的距离事件（event）所特有的属性
    top // 到页面顶部的距离


 

用clientX时，配套加上scrollTop

 

  1. oEvent.keyCode 键盘输入的字符asc码

 

posted @ 2013-01-17 16:01  msober  阅读(374)  评论(0)  编辑  收藏  举报