1.JavaScript
简介
-
-
起源
-
在
1995
年时,由
Netscape
公司的
Brendan Eich
,在
网景导航者
浏览器上首次设计实现而成。
Netscape
在最初将其脚本语言命名为
LiveScript
,因为
Netscape
与
Sun
合作,网景公司管理层希望它外观看起来像
Java
,因此取名为
JavaScript
。
-
-
特性
-
①
脚本语言。JavaScript是一种解释型的脚本语言,C、C++、Java等语言先编译 后执行, 而JavaScript是在程序的运行过程中逐行进行解释。
②基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也 能使用现有的对象。
③简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做 出严格的要求,是基于Java基本语句和控制的脚本语言。
④动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务 器就可以对用户的输入做出响应。
⑤跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因 此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
-
JavaScript 基本语法
-
编写位置
-
①
编写到
HTML
中
<script>
标签中。
<script type="text/javascript">
</
script
>
|
②写在外部的
.js
文件中。然后通过
script
标签引入。
<
script
type
=
"text/javascript"
src
=
"script.js"
></
script
>
|
-
-
变量
-
①变量的声明
[1]
变量声明时不需要指定类型,可以为其赋值任何类型的数据。
[2]JavaScript
严格区分大小写,
Num
和
num
是完全不同的两个变量。
②变量的使用:变量在使用过程中可以接受不同类型的值。
-
-
函数
-
①函数声明
[1]
使用
function
关键字
[2]
不需要指定形参类型
[3]
不需要指定返回值
function sum(n, m) {
return
n + m;
}
|
②函数调用
调用
JavaScript
函数时系统不检查传入参数的个数和类型。
③函数也是对象
在
JavaScript
中,函数也作为一种数据类型存在,而且是引用数据类型,函数名就是指向其内存空间地址的引用。
var a = function() {
return
2;
};
var
b = a;
a.fname = "tom";
alert(b.fname);
//
结果为
tom
|
④函数的执行
函数名
+ ( )
。
var a = function() {
return
2;
};
alert(a());
//
结果为
2
|
-
-
对象
-
①
对象的创建
第一种,使用new Object()创建
var
obj =
new
Object();
|
第二种,使用{}创建
var
obj = {};
|
②为对象添加属性
n 第一种,通过 对象.属性名 = “属性值” 添加
obj.name = "zhangsan";
obj.age = 12;
obj.sum =
function
(a,b){
return
a+b;
}
|
n 第二种,使用{}创建对象时,直接向对象中添加属性
var obj = {"name" : "zhangsan",
"age"
: 21,
"sum"
:
function
(a,b){
return
a+b;}
};
|
-
-
this 关键字
-
在
JavaScript
函数中,
this
关键字指向的是调用当前函数的对象。
var obj01 = {
name :
"obj01 name"
,
getName : showName
};
var
obj02 = {
name :
"obj02 name"
,
getName : showName
};
function
showName() {
alert(
this
.name);
}
obj01.getName();
//
结果为
obj01 name
obj02.getName();
//
结果为
obj02 name
|
-
JavaScript 事件驱动
-
事件
-
①用户事件:用户操作,例如单击、鼠标移入、鼠标移出等。
②系统事件:由系统触发的事件,例如文档加载完成。
-
-
自定义事件响应函数
-
①从文档对象模型中获取控件对象
[
借助
DOM API
实现
]
②声明一个事件响应函数
③将事件响应函数的引用赋值给控件对象的事件属性
例如:
window.onload = function(){}
-
-
取消控件默认行为
-
①默认行为
[1]
超链接跳转页面
[2]submit
按钮提交表单
②取消方式:
return false
-
JavaScript 嵌入方式
-
浏览器加载顺序
-
①按从上到下的顺序加载
②遇到
script
标签先执行脚本程序,执行完成后再继续加载
-
-
嵌入 HTML 标签的事件属性中
-
<
button
onclick
=
"alert('hello');"
>
点我
</
button
>
|
结构与行为耦合,不推荐使用
-
-
嵌入 head 标签内
-
<script type="text/javascript">
var
btnEle = document.getElementById(
"btn"
);
btnEle.onclick =
function
() {
alert(
"hello"
);
};
</
script
>
</head>
<
body
>
<
button
id
=
"btn"
>
点我
</
button
>
</
body
>
|
无法获取
body
标签中的节点
-
-
嵌入 body 标签后面
-
可以获取节点,但是不符合常规习惯
-
-
window 对象
-
代表当前浏览器窗口
-
-
onload 事件
-
将整个文档加载完成后触发
-
-
使用 window.onload 完美解决问题
-
<script type="text/javascript">
window.onload =
function
() {
var
btnEle = document.getElementById(
"btn"
);
btnEle.onclick =
function
() {
alert(
"hello"
);
};
};
</
script
>
</
head
>
<
body
>
<
button
id
=
"btn"
>
点我
</
button
>
</
body
>
|
-
DOM
-
DOM 标准
-
Document Object Model
:文档对象模型
定义了访问和处理
HTML
文档的标准方
法。是
W3C
国际组织制定的统一标准,在很多计算机语言中都有不同实现如
C#
、
PHP
、
Java
、
Ruby
、
perl
、
python
等
-
-
document 对象
-
window
对象的一个属性,代表当前
HTML
文档,包含了整个文档的树形结构。获
取
document
对象的本质方法是:
window.document
,而“
window.
”可以省略。
-
-
DOM 树
-
父元素:直接包含当前元素的元素就是当前元素的父元素
子元素:当前元素直接包含的元素就是当前元素的子元素
祖先元素:直接或间接包含当前元素的所有元素都是当前元素的祖先元素
后代元素:当前元素直接或间接包含的元素就是当前元素的后代元素
兄弟元素:有相同父元素的元素是兄弟元素
|
-
-
节点 (Node)
-
HTML 文档中的每个成分都是一个节点, HTML 文档是由 DOM 节点构成的集合。
-
节点的分类
-
-
①文档节点
(Document)
:
DOM
标准将整个
HTML
文档的相关信息封装后得到的对象。
②元素节点
(Element)
:
DOM
标准将
HTML
标签的相关信息封装后得到的对象。
③属性节点
(Attribute)
:
DOM
标准将
HTML
标签属性的相关信息封装后得到的对象。
④文本节点
(Text)
:
DOM
标准将
HTML
文本的相关信息封装后得到的对象。
-
-
-
节点的属性
-
-
-
nodeName: 代表当前节点的名字,只读属性。如果给定节点是一个文本节点,nodeName 属性将返回内容为 #text 的字符串。
-
nodeType:返回一个整数, 这个数值代表着给定节点的类型,只读属性。 1 -- 元素节点 2 -- 属性节点 3 -- 文本节点
-
nodeValue:返回给定节点的当前值(字符串),可读写的属性。
-
元素节点, 返回值是 null
-
属性节点: 返回值是这个属性的值
-
文本节点: 返回值是这个文本节点的内容
-
-
DOM 查询 API
-
①
元素查询
功能
|
API
|
返回值
|
·在整个文档范围内查询元素节点
| ||
根据
id
值查询
|
document.getElementById(“id
值
”)
|
一个具体的元素节点
|
根据标签名查询
|
document.getElementsByTagName(“
标签名
”)
|
元素节点数组
|
根据
name
属性值查询
|
document.getElementsByName(“name
值
”)
|
元素节点数组
|
·在具体元素节点范围内查找子节点
| ||
查找全部子节点
|
element.childNodes
【
W3C
考虑换行,
IE
≤
8
不考虑】
|
节点数组
|
查找第一个子节点
|
element.firstChild
【
W3C
考虑换行,
IE
≤
8
不考虑】
|
节点对象
|
查找最后一个子节点
|
element.lastChild
【
W3C
考虑换行,
IE
≤
8
不考虑】
|
节点对象
|
查找指定标签名的子节点
|
element.getElementsByTagName(“
标签名
”)
|
元素节点数组
|
·查找指定元素节点的父节点:
element.parentNode
| ||
·查找指定元素节点的兄弟节点
| ||
查找前一个兄弟节点
|
node.previousSibling
【
W3C
考虑换行,
IE
≤
8
不考虑】
|
节点对象
|
查找后一个兄弟节点
|
node.nextSibling
【
W3C
考虑换行,
IE
≤
8
不考虑】
|
节点对象
|
②
属性操作
[1]
读取属性值
元素对象
.
属性名
[2]
修改属性值
元素对象
.
属性名
=
新的属性值
③
文本操作
[1]
读取文本值:
element.firstChild.nodeValue
[2]
修改文本值:
element.firstChild.nodeValue=
新文本值
-
-
DOM 增删改 API
-
API
|
功能
|
document.createElement(“
标签名
”)
|
创建元素节点并返回,但不会自动添加到文档中
|
document.createTextNode(“
文本值
”)
|
创建文本节点并返回,但不会自动添加到文档中
|
element.appendChild(ele)
|
将
ele
添加到
element
所有子节点后面
|
parentEle.insertBefore(newEle,targetEle)
|
将
newEle
插入到
targetEle
前面
|
parentEle.replaceChild(newEle, oldEle)
|
用新节点替换原有的旧子节点
|
parentEle.removeChild(childNode)
|
删除指定的子节点
|
element.innerHTML
|
读写
HTML
代码
|