Web-第三天 JavaScript学习【悟空教程】

Java帮帮

发布于 2018-07-27 14:15:36

3.3K0

发布于 2018-07-27 14:15:36

文章被收录于专栏：Java帮帮-微信公众号-技术文章全总结Java帮帮-微信公众号-技术文章全总结

Web-第三天 JavaScript学习【悟空教程】

JavaScript入门1

今日内容介绍

使用JS完成简单的数据校验
使用JS完成图片轮播效果
使用JS完成页面定时弹出广告

今日内容学习目标

掌握JavaScript的基本语法
掌握JavaScript的对象获取
掌握JavaScript标签的基本操作
使用JS可以获得指定元素
使用JS可以对指定元素的样式进行操作（获得或修改）
使用JS可以编写定时程序

第1章案例：使用JS完成注册页面的校验

1.1 案例介绍

用户在提交表单时，需要对用户的填写的数据进行校验。本案例只对用户名、密码、确认密码和邮箱进行校验。

1.2 相关知识点：

1.2.1 JavaScript的概述

1.2.1.1 什么是JavaScript

JavaScript是web上一种功能强大的编程语言，用于开发交互式的web页面。它不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。

JavaScript 被设计用来向 HTML 页面添加交互行为。
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript 由数行可执行计算机代码组成。
JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。

JavaScript的组成：

ECMAScript：语法，语句.
BOM:浏览器对象
DOM:Document Object Model.操作文档中的元素和内容.

1.2.1.2 JavaScript的作用

使用JavaScript添加页面动画效果，提供用户操作体验。主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。

1.2.1.3 JavaScript的引入

在HTML文件中引入JavaScript有两种方式，一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式，另一种是链接外部JavaScript脚本文件，称为外联式。对他们的具体讲解如下：

1) 内嵌式，在HTML文档中，通过<script>标签引入，如下

//此处为JavaScript代码

</script>

2) 外联式，在HTML文档中，通过<script src=””>标签引入.js文件，如下：

1.2.2 基本语法

1.2.2.1 变量

1) 在使用JavaScript时，需要遵循以下命名规范：

必须以字母或下划线开头，中间可以是数字、字符或下划线
变量名不能包含空格等符号
不能使用JavaScript关键字作为变量名，如：function
JavaScript严格区分大小写。

2) 变量的声明

var 变量名; //JavaScript变量可以不声明，直接使用。默认值：undefined

3) 变量的赋值

var 变量名 = 值; //JavaScript变量是弱类型，及同一个变量可以存放不同类型的数据

1.2.2.2 数据类型

【基本类型】

Undefined ,Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
Null ,只有一个专用值 null，表示空，一个占位符。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
alert(null == undefined); //输出 "true"，尽管这两个值相等，但它们的含义不同。
- Boolean，有两个值 true 和 false
- Number，表示任意数字
- String，字符串由双引号（"）或单引号（'）声明的。JavaScript 没有字符类型

【引用类型】

引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
JavaScript是基于对象而不是面向对象。对象类型的默认值是null.
JavaScript提供众多预定义引用类型（内置对象）。

1.2.2.3 运算符

JavaScript运算符与Java运算符基本一致。

算术运算符

赋值运算符

比较运算符

逻辑运算符

1.2.2.4 运算符操作

JavaScript规范规定以下操作规则（了解）

Boolean运算

等性运算

1.2.2.5 基本操作

alert() ：向页面中弹出一个提示框！！
innerHTML ：向页面的某个元素中写一段内容，将原有的东西覆盖

1.3 案例分析

1.4 案例实现

步骤1：表单<form> 添加提交事件

步骤2：编写check()函数，进行校验

function check(){

//1 用户名

var loginName = document.getElementById("loginnameId").value;

if(loginName == ""){

alert("用户名不能为空");

return false;

}

//2 密码

var loginpwd = document.getElementById("loginpwdId").value;

if(loginpwd == ""){

alert("密码不能为空");

return false;

}

//3 确认密码

var reloginpwd = document.getElementById("reloginpwdId").value;

if(reloginpwd != loginpwd){

alert("密码和确认密码不一致");

return false;

}

//4 邮箱

var email = document.getElementById("emailId").value;

if(! /^([0-9a-zA-Z_-])+@([0-9a-zA-Z_-])+(\.[0-9a-zA-Z]+)$/.test(email)){

alert("邮箱格式不正确");

document.getElementById("emailId").focus(); //提示信息之后获得焦点

return false;

}

return true;

}

</script>

1.5 案例总结

1.5.1 JS中正则匹配的方式：

正则的匹配:

JS中有两种匹配正则的方式:

* 使用String对象中的match方法.

* 使用正则对象中的test方法.

1.5.2 JS中的函数编写方式：

函数：实现一定功能的代码块，类似与Java中的方法。关键字function，函数名自定义。

//方式1：声明函数

function demo01(){

alert("案例1");

}

// 方式1：调用函数

demo01();

//方式2：声明匿名函数

var demo02 = function(){

alert("案例2");

};

//方式2：调用函数

demo02();

</script>

第2章案例：轮播图

2.1 案例需求

第一天完成首页中，“轮播图”只提供一张图片进行显示。现需要编写程序，完成自动切换图片功能。

2.2 相关知识点：定时器setInterval

window.setInterval(code, millisec) 按照指定的周期（间隔）来执行函数或代码片段。

参数1： code 必需。执行的函数名或执行的代码字符串。

参数2：millisec 必须。时间间隔，单位：毫秒。

返回值：一个可以传递给 window.clearInterval() 从而取消对 code 的周期性执行的值。

例如：

* 方式1：函数名， setInterval(show , 100);

* 方式2：函数字符串， setInterval("show()" , 100);

window对象提供都是全局函数，调用函数时window可以省略。
- window.setInterval() 等效 setInterval()

2.3 案例分析

1. 编写html页面，为页面设置加载事件onload

2. 编写事件触发函数

3. 获得轮播图图片

4. 开启定时器，2000毫秒重新设置图片的src属性

2.4 案例实现

步骤1：为轮播图img标签添加id属性

步骤2：编写js代码，页面加载触发指定函数

// 加载成功启动监听器，5秒执行一次

window.onload = function () {

setInterval(changeImage , 5000);

}

//在3张照片之间切换

var num = 1 ;

function changeImage(){

if(num >= 3){

num = 1;

}

var imageObj = document.getElementById("imgId");

imageObj.src = "../img/"+ ++num +".jpg";

}

</script>

第3章案例：定时弹广告

3.1 案例需求

在平日浏览网页时，页面一打开5秒后显示广告，然后5秒后再隐藏广告。

3.2 相关知识点

3.2.1 JavaScript定时器：setTimeout

setTimeout() 在指定的毫秒数后调用函数或执行代码片段。

setTimeout(code,millisec)

code 必需。要调用的函数或要执行的代码字符串。

millisec 必需。在执行代码前需等待的毫秒数。

setInterval() 以指定周期执行函数或代码片段。（上一个案例已经讲解）
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。（本案例不使用，此处一并讲解）

3.2.2 JavaScript样式获得或修改

获得或设置样式

obj.style.属性，获得指定“属性”的值。

obj.style.属性=值，给指定“属性”设置内容。

如果属性由多个单词使用“-”连接，需要将“-”删除，并将后一个单词首字母大写。

例如：background-color 需要改成 backgroundColor

实例：

//1 获得div对象

var divObj = document.getElementById("divId");

//2 获得高度

// * divObj.style.height 数据为"100px"

// * 使用parseInt() ，将字符串“100px”转换成数字“100”

var height = window.parseInt(divObj.style.height);

//3 将原始高度翻倍，再设置给div。

// * 注意：必须添加单位，否则无效

divObj.style.height = height * 2 + "px";

</script>

3.3 案例分析

1. 页面加载成功后触发onload()事件

2. 加载成功后，触发延迟定时器，5秒后，开始显示广告。

3. 显示广告开始后，5秒后再次隐藏广告

3.4 案例实现

步骤1：在页面中，添加广告位div，并设置页面加载事件

<div>

</div> ….

步骤2：编程JS实现

<!—在html页面中引入js文件-->

<!—ad.js内容如下-->

var time;

function init(){

// 设置定时操作：

time = setInterval("showAd()",5000);

}

function showAd(){

// 获得div元素

var divAd = document.getElementById("divAd");

divAd.style.display = "block";

// 清除之前的定时操作：

clearInterval(time);

// 重新设置一个定时：5秒钟隐藏：

time = setInterval("hideAd()",5000);

}

function hideAd(){

// 获得div元素

var divAd = document.getElementById("divAd");

divAd.style.display="none";

clearInterval(time);

}

3.5 总结：BOM（Browser Object Mode）

3.5.1 BOM ：Window对象（掌握）

方法：定时器

函数名	描述
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 timeout。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout

方法：消息框

函数名	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的确认框。确认框：确定返回true 取消返回false
prompt()	显示可提示用户输入的提示框。点击确定获得用户输入数据

3.5.2 BOM ：Location对象

href属性：设置或返回完整的 URL。

function change(){

location.href = "http://www.javahelp.com.cn";

}

</script>

3.5.3 BOM ：History对象（了解）

go() 方法：跳转到指定页面

a) go(-1) 加载前一个连接，等效back()

b) go(1) 加载后一个链接，等效forward()

JavaScript入门1—事件

3.6 总结：事件

常见事件

事件名	描述
onload	某个页面或图像被完成加载
onsubmit	提交按钮被点击
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	用户改变域的内容
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousemove	鼠标被移动

参考：

HTML代码

<hr/>

<hr/>

JavaScript代码

// 页面加载事件：当整个html页面加载成功调用

window.onload = function(){

// 文本框事件

var e01 = document.getElementById("e01");

e01.onfocus = function(){

html("textMsg","文本框获得焦点：focus");

}

e01.onblur = function(){

html("textMsg","文本框失去焦点：blur");

}

e01.onkeydown = function(){

html("textMsg","键盘按下：keydown");

}

e01.onkeypress = function(){

append("textMsg","键盘按：keypress");

}

e01.onkeyup = function(){

append("textMsg","键盘弹起：keyup");

}

// 鼠标事件

var e02 = document.getElementById("e02");

var i = 0;

e02.onmouseover = function(){

html("divMsg","鼠标移上：mouseover");

}

e02.onmousemove = function(){

//html("divMsg","鼠标移动：mousemove , " + i++);

}

e02.onmouseout = function(){

html("divMsg","鼠标移出：mouseout");

}

e02.onmousedown = function(){

html("divMsg","鼠标按下：mousedown");

}

e02.onmouseup = function(){

html("divMsg","鼠标弹起：mouseup");

}

// 按钮事件

var e03 = document.getElementById("e03");

e03.onclick = function () {

html("buttonMsg","单击：click");

}

e03.ondblclick= function () {

html("buttonMsg","双击：dblclick");

}

};

/**

* 指定位置显示指定信息

* @param objId ，元素的id属性值

* @param text，需要显示文本信息

function html(objId,text){

document.getElementById(objId).innerHTML = text;

}

/**

* 指定位置追加指定信息

* @param objId ，元素的id属性值

* @param text，需要显示文本信息

function append(objId,text){

document.getElementById(objId).innerHTML += text;

}

</script>

event属性

属性名	描述
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
keyCode	返回当事件被触发时，键盘输入ASCII码

event方法：

方法名	描述
preventDefault()	阻止浏览器默认行为
stopPropagation()	阻止事件的传播

阻止浏览器默认行为

<a href="http://www.javahelp.com.cn" onclick="return two()">Java帮帮</a><br/>

function one(){

alert("我之后，百度继续访问");

}

function two(event){

alert("我之后，Java帮帮不再访问");

//方式1：

//return false;

//方式2：

var event = event || window.event;

event.preventDefault();

}

</script>

阻止事件的传播

</div>

<hr />

</div>

var e1 = document.getElementById("e1");

var e2 = document.getElementById("e2");

var e3 = document.getElementById("e3");

var e4 = document.getElementById("e4");

//设置“区域1”事件

e1.onclick = function(){

alert("e1");

}

e2.onclick = function(){

alert("e2，同时e1也触发");

}

//设置“区域2”事件

e3.onclick = function(){

alert("e3");

}

e4.onclick = function(event){

alert("e4，e3不触发");

var event = event || window.event;

event.stopPropagation();

}

</script>

JavaScript入门2

今日内容介绍

使用JS完成表单校验
使用JS完成表格的隔行换色
使用JS完成复选框的全选效果
使用JS完成省市联动效果

今日内容学习目标

使用JS可以编写各种事件
使用JS可以获得指定元素
使用JS可以创建元素
使用JS可以对元素的属性进行操作
使用JS可以对元素的标签体进行操作
使用JS可以对指定元素的样式进行操作（获得或修改）

第4章案例：完善注册表单校验

4.1 案例介绍

昨天我们已经完成了表单数据校验，整个实现过程存在两处不足的地方：

1. 使用弹出框进行提示，用户体验不友好，可以将错误提示信息现在在对应的表单元素后面

2. 在编写程序时存在多处重复代码，为了达到代码的重复利用，将进行内容抽取成，编写自定义函数。

4.2 相关知识点

4.2.1 标签体内容：innerHTML

innerHTML - HTML 元素的内部文本

获得：document.getElementById(“divId”).innerHTML

设置：document.getElementById(“divId”).innerHTML = "...."

4.2.2 相关事件

常见事件

事件名	描述
onsubmit	提交按钮被点击
onblur	元素失去焦点
onfocus	元素获得焦点

4.3 案例分析

1. 校验不通过，在当前标签后面，红色字体提示

2. 对所有需要校验的表单项进行全部校验

3. 第一个校验不通过的元素获得焦点

编写步骤：

1.添加错误提示显示区域 <span id=”usernamespan”></span>

2.表单元素id属性

3.校验不同，给span显示错误信息

4.第一个不通过的获得焦点

4.4 案例实现

4.4.1 修改html，添加错误显示区域

<tr>

<td>

<input type="text" id="username" name="username" placeholder="请输入用户名"

onfocus="showTips('username','用户名必须是字母或数字')"

onblur="checkUsername('username','用户名不能为空！')"/>

</td>

</tr>

<tr>

<td>

<input type="password" id="password" name="password"

onfocus="showTips('password','密码长度必须6位')"

onblur="checkUsername('password','密码不能为空！')"/>

</td>

</tr>

4.4.2 提供JS代码

function showTips(uid,info){

// 控制后面的span元素：

document.getElementById(uid+"span").innerHTML ="<font color='gray'>"+info+"</font>";

}

function checkUsername(uid,info){

// 判断用户名是否为""

var uValue = document.getElementById(uid).value;

if(uValue == ""){

document.getElementById(uid+"span").innerHTML ="<font color='red'>"+info+"</font>";

}else{

document.getElementById(uid+"span").innerHTML = "";

}

</script>

4.5 总结：事件

常见事件

事件名	描述
onload	某个页面或图像被完成加载
onsubmit	提交按钮被点击
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	用户改变域的内容
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousemove	鼠标被移动

参考：

HTML代码

<hr/>

<hr/>

JavaScript代码

// 页面加载事件：当整个html页面加载成功调用

window.onload = function(){

// 文本框事件

var e01 = document.getElementById("e01");

e01.onfocus = function(){

html("textMsg","文本框获得焦点：focus");

}

e01.onblur = function(){

html("textMsg","文本框失去焦点：blur");

}

e01.onkeydown = function(){

html("textMsg","键盘按下：keydown");

}

e01.onkeypress = function(){

append("textMsg","键盘按：keypress");

}

e01.onkeyup = function(){

append("textMsg","键盘弹起：keyup");

}

// 鼠标事件

var e02 = document.getElementById("e02");

var i = 0;

e02.onmouseover = function(){

html("divMsg","鼠标移上：mouseover");

}

e02.onmousemove = function(){

//html("divMsg","鼠标移动：mousemove , " + i++);

}

e02.onmouseout = function(){

html("divMsg","鼠标移出：mouseout");

}

e02.onmousedown = function(){

html("divMsg","鼠标按下：mousedown");

}

e02.onmouseup = function(){

html("divMsg","鼠标弹起：mouseup");

}

// 按钮事件

var e03 = document.getElementById("e03");

e03.onclick = function () {

html("buttonMsg","单击：click");

}

e03.ondblclick= function () {

html("buttonMsg","双击：dblclick");

}

};

/**

* 指定位置显示指定信息

* @param objId ，元素的id属性值

* @param text，需要显示文本信息

function html(objId,text){

document.getElementById(objId).innerHTML = text;

}

/**

* 指定位置追加指定信息

* @param objId ，元素的id属性值

* @param text，需要显示文本信息

function append(objId,text){

document.getElementById(objId).innerHTML += text;

}

</script>

第5章案例：表格隔行换色

5.1 案例描述

开发中，需要使用表格陈列数据，数据过多不易查看，通常使用隔行换色进行表示。

5.2 案例相关JS函数介绍

5.2.1 相关JS事件

onload() 页面加载成功触发
- 方式1：<body>使用onload属性确定需要执行的函数

<head>

//js代码在<body>之前，不能获得<body>标签体中的内容，还没有加载到

var e01 = document.getElementById("e01");

alert(e01); //打印：null

function init () {

//页面加载成功之后执行

var e02 = document.getElementById("e01");

alert(e02.value); //打印：Java帮帮

}

</script>

</head>

</body>

方式2：通过window.onload 设置匿名函数

<head>

window.onload = function () {

//页面加载成功之后执行

var e02 = document.getElementById("e01");

alert(e02.value); //打印：Java帮帮

}

</script>

</head>

<body>

</body>

5.2.2 this关键字

在函数内部this表示：当前操作的元素。

5.3 案例实现

在提供html页面的基础上，编写js代码

window.onload = function () {

var allTr = document.getElementsByTagName("tr");

// 跳过前2行

for (var i = 2 ; i < allTr.length ; i ++) {

//给行tr设置背景颜色，奇数行白色，偶数行指定颜色

if(i % 2 == 0){

allTr[i].style.backgroundColor="#FFF";

} else {

allTr[i].style.backgroundColor="#4E7FD1";

}

</script>

第6章案例：复选框全选/全不选

6.1 案例描述

开发中，经常需要对表格数据进行“批量处理”，就需要快速的对列表项进行操作，本案例我们来完成“全选和全不选”

6.2 案例相关的JS属性介绍

6.2.1 单选/复选选中

ele.checked 表示元素是否选中，true表示选中，false表示没有选中

例如：ele.checked = true; //设置元素被选中。

6.3 案例实现

步骤1：给复选框添加onclick事件

步骤2：编写selectAll(this)处理列表项的复选框是否勾选

function selectAll (obj) {

//当前复选框是否选择,如果选中其他都选中，如果没有选中其他都不选中。

// * getElementsByClassName 通过标签class属性的名称获得对应的所有标签。<xx class="">

var allCheckbox = document.getElementsByClassName("itemSelect");

for (var i = 0 ; i < allCheckbox.length ; i ++) {

allCheckbox[i].checked = obj.checked;

}

</script>

第7章案例：省市二级联动

7.1 案例介绍

在日常应用中，我们需要完善个人信息，“所在地”要求选择省市，当选择省时，该省对应的市将自动的更新。

7.2 案例相关的JS函数

7.2.1 数组：Array

创建语法

new Array();

new Array(size); // size 数组元素个数，数组成员默认值undefined

new Array(element0, element0, ..., elementn); //参数列表，为数组初始化数据

数组中的每一个成员没有类型限制，及可以存放任意类型
数组的长度可以自动修改，类似Java中的List 集合等。

7.2.2 元素操作：createElement、appendChild

document.createElement() 创建元素节点。

document.createTextNode() 创建文本节点。

ele.appendChild() 向标签体末尾添加新的子节点。

实例：

<!—HTML代码-->

<!—JavaScript代码-->

//1 获得div对象(元素--标签)

var divObj = document.getElementById("divId");

//2 创建a元素

// * createElement 创建指定名称的元素

var aObj = document.createElement("a");

//2.1 创建文件

var nodeObj = document.createTextNode("xxx");

// * 将文本添加到a元素

aObj.appendChild(nodeObj);

//2.2 给a元素设置属性

// setAttribute(name,value) 给指定的元素设置属性，name属性名，value属性值

aObj.setAttribute("href","http://www.javahelp.com.cn");

//3 将新创建的a元素，添加到div元素中

// * appendChild 追加子元素

divObj.appendChild(aObj);

</script>

7.3 案例实现

步骤1：给注册页面添加select标签

</select>

</select>

步骤2：js实现

// 定义二维数组,初始化数据

var cities = new Array(4);

cities[0] = new Array("市辖区","县");

cities[1] = new Array("长春市","吉林市","松原市","延边市");

cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");

cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");

cities[4] = new Array("南京市","苏州市","扬州市","无锡市");

//通过选择的省，显示对应的所有的市

function selectCity(index){

//通过索引获得对应的所有的市

var allCity = cities[index];

// 获得city select 对象

var cityObj = document.getElementById("cityId");

cityObj.innerHTML = "<option value=''>----请-选-择-市----</option>";

//遍历所有的市

for(var i = 0 ; i < allCity.length ; i ++){

// 获得具体的市

var cityName = allCity[i];

// 创建option

var option = document.createElement("option");

// 创建文本节点

var textNode = document.createTextNode(cityName);

//将文本添加到option中

option.appendChild(textNode);

// 将option追加到select中

cityObj.appendChild(option);

}

</script>

7.4 总结：DOM

从昨天到现在，所有的案例中，我们获得元素，创建元素等操作，统称为DOM操作。接下来我们一起总结一下DOM。

7.4.1 什么是DOM

DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。
- 创建的结构化文档：html、xml 等
- DOM包括：核心DOM、HTML DOM、XML DOM。通常情况下HTML DOM 和XML DOM是可以相互使用的。
HTML DOM 将整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员。

7.4.2 document文档对象

浏览器加载整个HTML文档形成Document 对象，Document 对象可以访问和操作HTML文档中的所有元素。
获得元素

lgetElementById() 通过id属性值获得元素（整个HTML文档id位置）

lgetElementsByName() 通过name属性值获得所有元素（整个HTML文档中name可能相同）

lgetElementsByClassName() 通过 class属性值获得所有元素

lgetElementsByTagName() 通过标签名获得所有的元素

<xxx>

创建

createElement() 创建指定名称的元素

createTextNode() 创建指定内容的文本节点

常见属性

childNodes，获得所有的子节点

nodeName，返回节点名称。(标签名)

nodeType，返回节点类型。（元素、属性、文本等）

nodeValue，节点的值。（只有文本节点才有该属性）

7.4.3 element元素对象

Element 对象表示 HTML文档中的元素（HTML称为标签）。元素可包含属性、其他元素或文本。也就是说HTML标签可以包含属性，其他子标签或文本。

appendChild() 给元素追加子元素

<a>

…

追加位置

</a>

insertBefore() 给当前元素前追加兄弟元素

插入位置

<a>

setAttribute(k,v) 给元素设置属性

7.4.4 名称解释

元素（标签）Element、属性Attribute、文本Text 统称为：节点Node

7.5 总结

7.5.1 全局函数

分类	函数名	描述
转换	parseFloat()	解析一个字符串并返回一个浮点数。
转换	parseInt()	解析一个字符串并返回一个整数。
执行	eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行。
编码	encodeURI()	把字符串编码为 URI。
编码	decodeURI()	解码某个编码的 URI。

JavaScript入门2扩展

第8章作业：列表左右选择（参考）

8.1 案例介绍

在很多应用程序中，都存在需要将若干项添加到另外一个位置，本案例将为大家实现此功能。

8.2 案例分析

当获得select标签后，可以通过element的childNodes属性获得的子节点（子元素和文本节点），通过子标签(option) 的 selected属性判断是否选中，就可以完成需要功能。

8.3 案例实现

8.3.1 html页面

<td>

<option>Java帮帮</option>

<option>Java学院</option>

</select>

</td>

<td>

<input id="left1" type="button" value=">" style="width:50px" onclick="leftToRightOne()"/> <br/>

<input id="left2" type="button" value=">>" style="width:50px"onclick="leftToRightSelect()"/> <br/>

<input id="left3" type="button" value=">>>" style="width:50px"onclick="leftToRightAll()"/> <br/>

</td>

<td>

</select>

</td>

8.3.2 选中一个

/**

* 此处使用 childNodes 获得所有子节点，也可以使用 <select>标签特有的属性options获得所有的<option>子标签

function leftToRightOne(){

var leftSelect = document.getElementById("leftSelectId");

var rightSelect = document.getElementById("rightSelectId");

//alert(leftSelect.childNodes[1].nodeName);

for(var i = 0 ; i < leftSelect.childNodes.length ; i ++){

if(leftSelect.childNodes[i].selected){

rightSelect.appendChild(leftSelect.childNodes[i]);

break;

}

8.3.3 选中多个

/**

* leftSelect.childNodes.length 最终长度为7，获得4个text文本，3个option

* * 元素：text、option[1]、text、option[2]、text、option[3]、text

* * 当遍历时,第一个option移除后，length变成了6，此时i==2，正好是第二个option

* 移除第二个后，此时i=3，正好是第三个option，所以可以正常移动所有

function leftToRightSelect(){

var leftSelect = document.getElementById("leftSelectId");

var rightSelect = document.getElementById("rightSelectId");

for(var i = 0 ; i < leftSelect.childNodes.length ; i ++){

if(leftSelect.childNodes[i].selected){

rightSelect.appendChild(leftSelect.childNodes[i]);

}

8.3.4 所有，提供3种实现方式

方式1：子元素和文本同时都移动，

function leftToRightAll(){

var leftSelect = document.getElementById("leftSelectId");

var rightSelect = document.getElementById("rightSelectId");

for(var i = 0 ; i < leftSelect.childNodes.length ; i ++){

rightSelect.appendChild(leftSelect.childNodes[i]);

i--; //因为length是不断变化的，保证一直移除第一个。

}

方式2：length不断变化，i不需要变化

function leftToRightAll(){

var leftSelect = document.getElementById("leftSelectId");

var rightSelect = document.getElementById("rightSelectId");

for(var i = 0 ; i < leftSelect.childNodes.length ; ){

rightSelect.appendChild(leftSelect.childNodes[i]);

//因为length是不断变化的，保证一直移除第一个。

}

方式3：采用倒序，不过右边内容也是倒序的

function leftToRightAll(){

var leftSelect = document.getElementById("leftSelectId");

var rightSelect = document.getElementById("rightSelectId");

for(var i = leftSelect.childNodes.length - 1 ; i >=0 ; i --){

rightSelect.appendChild(leftSelect.childNodes[i]);

}

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-06-23，如有侵权请联系 cloudcommunity@tencent.com 删除

ecmascript

本文分享自 Java帮帮微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！