JavaScript基础-BOM&DOM

一,JavaScript

1,JS的页面引入:

<Script />

2,JS的基本语法:

A,变量声明

var num = 10;

B,封装代码块

与 java一样,使用{}

C,注释

单行注释"//"

多行注释 "/* */"

D,声明变量的区别

使用var是局部变量

不使用var是全局变量

3,JS中的原始数据类型

A, number(数字,浮点型,整型) 

B, string(js语言的突破,没有char类型.)

C, boolean

D, null

E, undefined

4,JS中的语句:

与Java中一样,for,while,if等

5,JS中的运算符

A,Boolean 运算符 ! && ||

js中自动类型转换.

转换规律 (重点)

string ==>  ""==>转换为false 其他都为true;

number ==>  除了NaN,+0和-0.其他都转换为true.

null ==>  false

undefined ==> false

NaN特性:

NaN参与的任何boolean运算返回值都是false. 除了!=

因为undefined是null衍生出的,所以 

alert(undefined == null); // true

B,比较运算符

alert(11>3); //true

当运算符两端 , 一端是数字,一端是其他类型时, 其他类型会自动向数字类型转换

alert("11">3);  // true

  alert(11>"3");  //true

  字符串在进行比较时 ,规律是: 比较首字符asc码. 如果一样,比较第2位...

  alert("11">"3");  // false

  alert("11">"1");  // true

  alert("abc">11);  //false

C,等性运算符

==  != ===

ECMA 

1,对象的创建

A,Function的创建

Var fun1 = function(){}

B,函数的返回

1,如果函数没有显示指定返回值 那么函数返回值为undefined

2,使用return 关键字,返回内容

2,对象的分类

A,本地对象

内建对象:不需要创建实例.直接使用 Global  Math

B,主机对象

BOM    DOM

3,String对象的方法

A, indexOf

B, lastIndexOf

C, charAt 

D, alert(str1.charAt(0))

E, charCodeAt 返回所在字符的asc码

alert(str1.charCodeAt(0));//97

F, subString 

G, slice 支持负数. 从右往左.

alert(str1.slice(0, -1));//a

H,与正则结合的方法

split

replace

match

Search

BOM

1,作用:

浏览器对象模型 ==> 控制浏览器的一些行为

2,创建对象

Window

3,页面导航的属性

A, self

B, parent

C, top

D, opener

E, frames

4,方法

A,弹出对话框

alert  confirm  prompt

B,页面定时器

setInterval  clearInterval  setTimeout  clearTimeout

C,窗口打开关闭

open  close

5,浏览器的历史记录:History

方法:

A, forward 前进

B, back 后退

C, go   前进/后退

6,浏览器地址栏:Location

href => 改变当前页面位置

reload => 刷新 

DOM

1,作用和原理

将页面中所有内容,都封装成了对象.

2,对象

A, Document 文档(重点)

B, Element  元素(重点)

C, Attribute 属性

D, Text 文本

E, Commons 注释

以上五类对象抽取了一个父类:

Node 

自身属性:

nodeType

nodeName

nodeValue

导航属性:

父找儿: firstChild lastChild childNodes

儿找父: parentNode (重要)

找兄弟: nextSibling priviousSibling

3,获得元素(Element)的方式

A,从对象(Document)中获得元素(Element)

1.getElementById

2.getElementsByTagName

3.getElementsByClassName

4.getElementsByName

B,从元素(Element)中获得元素(Element)

1.getElementsByTagName

2.getElementsByClassName

4,事件

A, onClick 单击

B, ondblclick    双击

C, onload 当加载完毕

D, onchange     当内容改变

E, onblur 当失去焦点

F, onfocus     当得到焦点

要获得事件,需要拿到Event(侦探)对象

preventDefault : 阻止默认行为. 例如 :在点击submit按钮时,表单提交就是默认动作.

stopPropergation : 停止事件的继续传播. 例如: 在嵌套的DIV中,点击里面的div ,同时也会触发外层div的onclick事件.如果不想触发外层使用该方法

5,常见操作

A,增

创建元素:  document.createElement

添加: element.appendChild => 添加到末尾

  element.insertBefore => 指定添加位置

B,删

removeAttribute 删除属性

removeChild  删除子节点

C,改

replaceChild 改元素

setAttribute 改属性

D,查

getAttribute 查属性值

getElementById

getElementsByTagName

getElementsByClassName

getElementsByName