js_quickstart
JavaScript简介
为什么出现js
- 拨号上网的年代
- 网速很慢,数据需要提交到服务器验证
- JavaScript出现,使浏览器可以做简单验证
- 现在
- 时至今日,js已经不再局限于表单的验证,而是具备了与浏览器窗口及其内容等几乎所有方面交互的能力,js可以写客户端,还可以写服务器
- nodejs的出现抢占了php不少市场,nodejs+mongodb
js是什么
JavaScript是一种直译式(解释型)脚本语言,是一种动态类型、弱类型(对象、数字、字符串)、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端(浏览器)的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。
HelloWorld
|
|
变量
-
使用var关键字声明变量,声明时不需要指定类型
5种原始类型:number string boolean null(没有声明或者声明为null) undefined(没有赋值)除了这5种外,其他都是引用类型object(包括function)
1 2 3
var num1 = "12"; alert(typeof num1); // 会弹出string
注意,null是不能typeof出来的,null本身是一个object
-
变量在使用过程中可以接受不同类型的值
1 2 3 4 5 6
<script type="text/javascript"> var num1; num1 = 12; num1 = "你好"; alert(num1); </script>
函数
|
|
对象
|
|
其他语法
判断、循环与java用法相同
-
if-else
-
switch-case
-
for
1 2 3 4 5
<script type="text/javascript"> for (let i = 1; i < 10; i++) { alert(i); } </script>
-
while
-
break
-
continue
-
try-catch
1 2 3 4 5
try { xxxx("未定义方法"); } catch (e) { alert(e); // 会弹出ReferenceError: xxxx is not defined }
事件
- 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
- js与html交互是通过事件实现的
- 我们可以在事件发生时执行js,比如当用户在html元素上点击时
事件种类
所有事件:http://www.w3s.com.cn/js/jsref_events.asp
事件响应方式
- 在标签事件属性中编写js代码
- 动态绑定事件
示例
|
|
js代码的加载方式
js代码主要在页面中有以下几种方式接入
-
将js代码写到网页头部的
<script>
中1 2 3 4 5 6 7 8 9 10 11 12
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /*写在script标签内,无法获取button,原因是浏览器顺序加载, 可以将script标签体放在body结束为止之前*/ var btn = document.getElementById("btn"); alert(btn); </script> </head> <body>
缺点:无法获取元素,必须使用
window.onload = function () {形式
解决,保证页面被完全加载,这种做法是最推荐的做法 -
将js代码写成外部文件,并引入
1 2 3 4 5 6 7 8
<head> <meta charset="UTF-8"> <title>Title</title> <!--注意这里不能使用<script /> 这种自闭合形式, 浏览器不识别--> <script type="text/javascript" src="demo.js"></script> </head>
-
如果是事件触发,还可以将js代码写在事件属性位置
结构与行为耦合,不推荐
-
将js代码写在网页结束位置,推荐使用,但是也有缺陷,比如在前面加载一个外部图片,扫描完成但是没有加载完毕,此时后面的js代码中有引用到图片的大小信息就会报undefined等错误。
1 2 3 4 5 6 7 8 9 10 11 12
<body> <!--第一种 在标签的事件属性中编写js代码 调用方法、声明变量都可以--> <button id="btn" onclick="alert('HelloWorld')">Say Hello</button> <button id="btn1">Say Hello1</button> <script type="text/javascript"> /*写在script标签内,无法获取button,原因是浏览器顺序加载, 可以将script标签体放在body结束为止之前*/ var btn = document.getElementById("btn"); alert(btn); </script> </body>
小结
-
写在标签的事件属性里面,不推荐
-
写在script标签里
-
写在head里面(推荐,但一定写在window.onload里面)
如果不用window.onload 会出现找不到元素
-
写在body闭合之前
可以找到元素,但是比如图片,iframe请求较长事件,可能导致下面使用img的属性的时候获取不到正确属性值
-
-
引入外部文件,同上面两种形式
标签事件属性
html元素的事件属性本身就有,写js代码只是给这些原有的事件属性赋值
dom模型
dom,Document Object model文档对象模型
DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
可以把DOM认为是页面上数据和结构的一个树形表示。
注意,属性节点不参与“顺藤摸瓜”;document对象是window对象的属性,可以通过window.document获取。
节点关系
- 节点:每一个元素都是节点
- 父节点
- 子节点
- 祖先节点
- 后代节点
- 兄弟节点(同一个父节点)
节点分类
- 元素节点:HTML文档中的HTML标签
- 属性节点:元素的属性,ele.getAttributeNode(“属性名”)
- 文本节点:HTML标签中的文本内容,也即对象
节点属性
每个节点都含有3个属性,分别是nodeName、nodeType、nodeValue
js中的对象
- js本地对象和内置对象
- Browser对象(BOM)
- Window
- Navigator
- Screen
- History
- Location
- HTML DOM对象
document对象
- document是一个文档节点
- 代表整个文档
- 所有节点都是它的后代节点
- 它是window对象的属性
- 可以直接使用
获取元素节点
-
document.getElementById()
通过id属性值获取一个元素节点对象
-
document.getElementsByTagName(),注意这个方法也可以在已找到的其他节点对象上进行使用,其他两个则不行
通过标签名获取一组元素节点对象
-
document.getElementsByName()
通过name属性获取一组元素节点对象,通常用来获取表单对象
获取元素节点的子节点
- getElementsByTagName() 返回当前节点的指定标签名子节点
- 对象.childNodes 返回对象的所有子节点
- 对象.firstChild 获取节点的第一个子节点,lastChild 最后一个子节点
- 对象.parentNode 返回节点的父节点
- 对象.previousSibling 前一个兄弟节点,nextSibling 后一个兄弟节点
元素节点的属性
元素对象.属性名
- 对象.value 获取对象的value属性值,对象.id,对象.className
- 对象.id
- 对象.className
设置属性值,元素对象.属性名=新的值
- element.value=“hello”
- element.id=“id01”
- element.className=“newClass”
其他属性
- nodeValue
- 文本节点可以通过nodeValue属性获取和设置文本节点的内容
- 获取文本值
- 对象.innerText 获取节点内部的文本内容
- 对象.innerHTML 获取节点内部的html代码
- 对象.firstChild.nodeValue,文本节点是节点的第一个节点
dom增删改
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代码[非W3C标准,但主流浏览器都支持],注意element一定是元素节点 |
使用js创建节点比较麻烦,以创建li节点为例,需要分成以下3步
|
|
取消事件默认行为
比如超链接点击事件和表单提交按钮,点击后会有一个默认的行为,可以使用“return false”
|
|