JavaScipt Notes

众所周知的前端基础三大剑客 最蛋疼的一个 总算开始了


HTML DOM

Document Obejct Model

查找HTML 元素

ID

document.getElementById()

var x = document.getElementById("nice");

返回:

null

对象

标签

document.getElementsByTagName

类名

getElementsByClassName

改变HTML

改变输出流

document.write()

不能在文档加载完成之后使用 否则会覆盖该文档

改变HTML内容

document.getElementById(id).innerHTML="new things"

改变HTML属性

document.getElementById(id).attribute="new value"

<img id="images" src="" >
document.getElementById("images").src="imgs/nice.png";

改变CSS

document.getElementById(id).style.property="new style"

document.getElementById("p2").style.fontSize="large";

HTML DOM 事件

点击时执行 需要向HTML元素添加事件属性

onclick="Type JavasScript here"

onload onunload 事件

进入离开页面时会触发

可用于处理Cookies

onchange 事件

常用于结合对输入字段的验证使用

onmouseover onmouseout 事件

鼠标移入该元素或者移出该元素时触发的函数

onmousedown onmouseup onclick 事件

鼠标单击下后 触发onmousedown 释放鼠标后会触发 onmouseup事件 当完成点击后会触发onclick事件

HTML DOM EventListener

addEventListerner() 方法用于向指定元素添加事件句柄

element.addEventListener( event, function, useCapture);

参数 说明
event 事件的类型 不要使用on前缀 通常用 “” 包裹起来
function 事件触发后调用的函数
useCapture 布尔值, 用于描述事件是冒泡还是捕获 可选

向同一个元素添加多个事件 之前的事件不会被覆盖掉

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

也可以向同个元素添加不同类型的事件

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

向 Windows 对象添加事件句柄

window.addEventListerner("" , function);

传递参数

使用”匿名函数” 调用带参数的函数

element.addEventListener("click",function(){
   myFunction(p1,p2);
});

事件的冒泡或捕获

定义了 元素事件触发的顺序

eg. <p> 插入 <div> 中 如果点击<p>

冒泡 false

内部 > 外部

捕获 true

外部 > 内部

removeEventListener() 方法

移除添加 addEventListener() 方法添加的事件句柄

HTML DOM Event 参考手册

HTML DOM 元素 (节点)

添加

var para = document.createElement("p");
var node = document.createTextNode("New paragraph");
para.appendChild(node);
var div1 = document.getElementById("div1");
div1.appendChild(para);

TextNode : 文字节点

删除

parent.removeChild(child);

DOM需要清楚删除的元素 和它的父元素

另:

var child = document.getElementById("p1");
child.parentNode.removeChild(child)

对象

对象基本操作

访问对象的属性

objectName.propertyName

eg.

var message = "Hello World";
var x = message.length;
// x = 12

使用了String对象的length属性

访问对象的方法

objectName.methodName()

var message = "Hello World";
var x = message.toUpperCase();

使用了String对象的toUpperCase()方法

创建对象

var person = {
   firstName: "Dapao",
   lastName: "Lau",
   age: "19";
   eyecolor: "golden"
}
使用对象构造器
function person(firstName, lastName, age, eyeColor){
   this.firstName = firstName;
   this.lastName = lastName;
   this.age = age;
   this.eyeColor = eyeColor;
}
var girlFriend = new person("Alice", "Lau", "17", "blue");

属性添加

通过赋值可以将属性添加到对象中

person.firstName = "Niubi";

通过构造器 可以把函数添加到对象中

function person(kiss){
   this.kiss = kiss;
   function kiss(){
      this.kiss = true;
   }
}

对象与类

JavaScript 是基于原型( prototype ) 的语言,JavaScript 不使用类

JavaScript 中,不会创建类,也不会通过类来创建对象

遍历对象

for (variable in obejct){
   // codes
}

Number 对象

JavaScript 中只有一种数字类型

所有的数字都是浮点型

采用IEEE754标准定义的64位格式表示字符

指数 Sign
52 bits (0 - 51) 11 bits (50 - 62) 1 bit (63)
Max Min
±1.7976931348623157 x 10308 ±5 x 10-324

精度

整数

最多为15位

小数

最大位数 17

但浮点运算并不总是 100% 正确

var x = 0.2 + 0.1 // x is 0.30000000000000004

八进制

数字前加0

十六进制

数字前加0x

也可采用toString()方法输出特定进制的数字

var number =128;
number.toString(16);
number.toString(8);
number.toString(2);

无穷大 Infinity

包括负无穷

对任何数字进行运算仍然是其本身

NaN 非数字

isNaN() 判断是不是数字

数字 / 数字对象

var x = 123;
var y = new Number(123);

区别在于 typeof()的返回值 和 == ===的值

Number 属性 方法

属性

MAX_VALUE

MIN_VALUE

NEGATIVE_INFINITY

POSITIVE_INFINITY

NaN

prototype

constructor

方法

toExponetial()

toFixed()

toPrecision()

toString()

valueOf()

String 对象

TBD



Codes   Learning Web JavaScript
本文作者:Ge15emium
版权声明:本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!