Web前端开发师需要掌握什么技术?
也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已。我们还需使用JavaScript增加行为,为网页添加动态效果。准备好,让JavaScript带你进入新境界吧!
术语
术语“ECMAScript”和“JavaScript”指的是同一个东西。但如果把JavaScript看成是“Mozilla或其他组织的ECMAScript实现”,那么ECMAScript就是实现JavaScript所依据的标准。术语“ECMAScript”也用来描述语言版本(比如ECMAScript5)。
JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序。比方说,当编写了 var a = 1 + 1; 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a的值变为2。JavaScript引擎就是直接解析并将代码运行结果输出的JavaScript的解释JavaScript由三部分组成:
核心(ECMAScript) 描述了该语言的语法和基本对象
文档对象模型(DOM,Documnet)描述了处理网页内容的方法和接口
浏览器对象模型(BOM)描述了与浏览器进行交互的方法和接口
JavaScript的主要特点
1.解释型脚本语言
JavaScript是一种解释型脚本语言,在嵌入JavaScript脚本的HTML文档载入时被浏览器逐行地解释,大量节省客户端与服务器端进行数据交互的时间。
2.基于对象的语言
JavaScript语言是基于对象的(Object-Based),JavaScript提供了大量的内置对象,如:String、Number、Boolean、 Array、Date、Math、RegExp等等。但它还是具有一些面向对象的基本特征,可以根据需要创建自己的对象,从而进一步扩大JavaScript的应用范围,编写功能强大的Web文档。
3.简单性
JavaScript基本结构类似C语言,采用小程序段的方式编程,并提供了简易的开发平台和便捷的开发流程,就可以嵌入到HTML文档中供浏览器解释执行。同时JavaScript的变量类型是弱类型,不强制检查变量的类型,也就是说可以不定义其变量的类型。
4.动态性
JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的响应,是采用事件驱动的方式进行的。所谓事件就是指在主页(homepage)中执行了某种操作所产生的动作,例如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应,即事件驱动。
5.跨平台性
JavaScript依赖于浏览器本身,与操作系统环境无关,只要操作系统能运行浏览器并且浏览器支持JavaScript,就可以正确执行。
JavaScript相关应用:
1 选择 JavaScript 脚本编辑器
2 引入JavaScript脚本代码到HTML文档中方法
Javascript常用的输出语句:
• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。
JavaScript能做什么?
1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等
2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)
如何安装 HBuilder?
HBuilder下载地址:在HBuilder官网https://www.dcloud.io/点击免费下载,下载最新版的HBuilder。
HBuilder目前有两个版本,一个是windows版,一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。
使用sc代码块生成一个script块来编写js代码(输入sc,回车)如下图
注意事项:
JavaScript可以让网页呈现各种动态效果。做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。
JavaScript易学性体现:
1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序。
2.我们可以用简单命令,完成一些基本操作。
注意事项:
1.JavaScript是区分大小写的,如:document和Document是不一样的。同时注意方法、属性、变量等的大小写。
2.JavaScript中的字符、符号等一定要在英文状态下输入吆。
JavaScript位置:
我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。
放在部分
最常用的方式是在页面中head部分放置元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分。
放在部分
JavaScript代码在网页读取到该语句的时候就会执行。
注意: javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。
JavaScript引用方式
使用标签在HTML文件中添加JavaScript代码,如图:
JavaScript代码只能写在HTML文件中吗?当然不是,我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中。
注意:在JS文件中,不需要标签,直接编写JavaScript代码就可以了。
JS文件不能直接运行,需嵌入到HTML文件中执行,我们需在HTML中添加如下代码,就可将JS文件嵌入HTML文件中。
<script src="script.js"></script>
JavaScript-输出内容(document.write)
document.write()可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
第一种:输出内容用"“括起,直接输出”"号内的内容。
<script type="text/javascript">
document.write("I love JavaScript!");
//内容用""括起来,""里的内容直接输出。
</script>
第二种:通过变量,输出内容
<script type="text/javascript">
var mystr="hello world!";
document.write(mystr);
//直接写变量名,输出变量存储的内容。
</script>
第三种:输出多项内容,内容之间用+号连接。
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"I love JavaScript");
//多项内容之间用+号连接
</script>
第四种:输出HTML标签,并起作用,标签使用""括起来。
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"
");
//输出hello后,输出一个换行符
document.write("JavaScript");
</script>
JavaScript-警告(alert 消息对话框)
我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。
语法:
alert(字符串或变量);
看下面的代码:
<script type="text/javascript">
var mynum = 30;
alert("hello!");
alert(mynum);
</script>
注:alert弹出消息对话框(包含一个确定按钮)。
注意:
1 在点击对话框"确定"按钮前,不能进行任何其它操作。
2 消息对话框通常可以用于调试程序。
3 alert输出内容,可以是字符串或变量,与document.write 相似。
使用 console.log() 写入到浏览器的控制台
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示JavaScript 值。 在调试窗口中点击“console”选项卡。在HBuilder默认控制台里也可以显示结果。
直接操作文档
这是最佳的方式,尽量使用这种方式来与网页和用户交互。使用JavaScript可以访获取用户输入的值,修改HTML或样式,更新网页的内容,全面控制页面。这些都是利用浏览器的文档对象模型(后面将更详细地讨论)实现的。这是与用户交流的最佳方式。然而,要使用文档对象模型,你必须知道网页的结构,并熟悉用来读写网页的编程接口。
使用innerHTML写入到HTML元素。
学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。
语法:
document.getElementById(“id”)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Sample Page!</title>
</head>
<body>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
以上JavaScript语句可以在web浏览器中执行:document.getElementById(“demo”) 是使用id属性来查找HTML元素的JavaScript代码。innerHTML = “段落已修改。” 是用于修改元素的HTML内容(innerHTML)的JavaScript代码。
注释
注释的作用是提高代码的可读性,帮助自己和别人阅读和理解你所编写的JavaScript代码,注释的内容不会在网页中显示。注释可分为单行注释与多行注释两种。
我们为了方便阅读,注释内容一般放到需要解释语句的结尾处或周围。
单行注释,在注释内容前加符号 “//”。
<script type="text/javascript">
document.write("单行注释使用'//'");
// 我是注释,该语句功能在网页中输出内容
</script>
多行注释以"/“开始,以”/"结束。
<script type="text/javascript">
document.write("多行注释使用/*注释内容*/");
/*
多行注释
养成书写注释的良好习惯
*/
</script>
样式的注释也是以"/“开始,以”/"结束。
商品详情展示完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商品详情展示</title>
<style type="text/css">
div{
float: left;
line-height: 26px;
width: 180px;
}
img{
float: left;
margin: 0 10px;
width: 390px;
}
</style>
</head>
<body>
<img src="img/sf.jpg" onclick="clickMe()" />
<div id="demo">
<h2>布艺转角沙发</h2>包含件数1
<br />编号:HSHB-F59A-2
<br />规格:930*1600*740
<br />点击图片查看详细说明
<br />
</div>
<script>
function clickMe(){
str="布艺转角沙发
该沙发采用高温烘干的
进口硬木木架,超弹力橡筋,进口弹簧底价以及高密度
海绵座包制造而成,比较传统的转角沙发,线条明朗,
颜色和尺寸设计合理,符合大众化家庭";
document.getElementById("demo").innerHTML=str;
}
</script>
</body>
</html>
概述:
数字(number)是最基本的数据类型。JavaScript和其他程序设计语言(例如C语言或者Java语言)的不同之处在于他并不区分整型数值和浮点数值。在JavaScript中,所有的数字都是浮点型。JavaScript采用64位浮点格式表示数字,这意味着它所表示的数值范围。
当一个数字直接出现在JavaScript程序中时,被称为数值直接量。JavaScript支持的数值直接量有整型数据、十六进制和八进制数据、浮点型数据几种,下面将对这几种进行形式进行详细介绍。
注意:在任何数值直接量前加上负号(-)可以构成它的负数。但是负数是一元求反运算符,不是数值直接量的一部分。
分类:
1、 整型数据
在JavaScript程序中,十进制的整数是一个数字序列,例如:
0 6 -8 200
var x=34;
2.、十六进制和八进制
JavaScript不但能够处理十进制的整型数据,还能够识别十六进制的数据。所谓的十六进制数据(基数为16),是以“0X”和“0x”开头,其后跟随十六进制数字串的直接量。十六进制的数字可以是09中的某个数字,也可以是a(A)f(F)中的某个字母,他们用来表示0~15之间(包含0和15)的某个值,下面是十六进制整型数据的例子。例如:
0x8f //8*16+15=143(基数为10)
尽管ECMAScript标准不支持八进制数据,但是JavaScript的某些实现却允许采用八进制格式的整型数据(基数为8)。八进制数据以数字0开头,其后跟随一个数字序列,这个序列中的每个数字都在0~7之间(包括0和7),例如:
0566 //5*64+6*8+6=374(基数为10)
注意:由于某些JavaScript实现支持八进制数据,而有些不支持,所以最好不要使用0开头的整型数据,因为不知道某个JavaScript的实现是将其解释为十六进制,还是解释为八进制。
八进制数值字面量,(以 8 为基数),前导必须是 0,八进制序列(0~7)。
var x = 070; //八进制,56
var x = 079; //无效的八进制,自动解析为 79
var x = 08; //无效的八进制,自动解析为 8
十六进制字面量前面两位必须是 0x,后面是(0~9 及 A~F)。
var x = 0xA; //十六进制,10
var x = 0x1f; //十六进制,31
3、 浮点型数据
浮点类型,就是该数值中必须包含一个小数点,并且小数点后面必须至少有一位数字。
var x = 3.8;
var x = 0.8;
var x = .8; //有效,但不推荐此写法
4、toFixed() 方法
toFixed() 方法可把number四舍五入为指定小数位数的数字,返回值为string类型。
var num = 3.456789;
var n=num.toFixed(); //将一个数字,不留任何小数:n 的值为3
var num = 3.456789;
var n=num.toFixed(2); //将一个数字,留2位小数:n 的值为3.46
alert(typeof n); // string
概述:
字符串(string)是有Unicode字符、数字、标点符号等组成的序列,它是JavaScript用来表示文本的数据类型。程序中的字符串型数据包含在单引号和双引号中,由单引号定界的字符串中可以包含双引号,由双引号定界的字符串中也可以包含单引号。
例如:单引号括起来的一个或多个字符,代码如下:
'A'
' Hello JavaScript!'
例如:双引号括起来的一个或多个字符,代码如下:
"B"
" Hello JavaScript!"
例如:单引号定界的字符串中可以包含双引号,代码如下:
'pass="mypass" '
例如:双引号定界的字符串中可以包含单引号,代码如下:
"You can call her 'Rose '"
说明:JavaScript与C、Java不同的是,它没有char这样的单字符数据类型。要表示单个字符,必须使用长度为1的字符串。
概述:
数值数据类型和字符串数据类型的值都是无穷多个,但布尔数据类型只有两个值,这两个合法的值分别由直接量“true”和“false”表示。它说明某个事物是真还是假。
在JavaScript程序中,布尔值通常用来比较所得的结果,例如:
m==1
这行代码测试了变量m的值是否和数值1相等。如果相等,比较的结果就是布尔值true,否则结果就是false。
布尔值通常用于JavaScript的控制结构。例如,JavaScript的if/else 语句就是在布尔值true时执行一个动作,而在布尔值为false时执行另一个操作。JavaScript在必要的时候将true转化为1,将false转化为0。
概述:
JavaScript还包括一些特殊类型的数据,如转义字符、未定义值等。
分类:
1、转义字符
以反杠开头的,不可显示的特殊字符通常称为控制字符,也被称为转义字符。通过转义字符可以在字符串中添加不可以显示的特殊字符,或者避免引号匹配混乱。JavaScript常用的转义字符如表所示。
表 JavaScript常用的转义字符
转义字符 | 描述 | 转义字符 | 描述 |
---|---|---|---|
\b | 退格 | \v | 跳格(Tab、水平) |
\n | 回车换行 | \r | 换行 |
\t | Tab符号 | \ | 反斜杠 |
\f | 换页 | \OO | 八进制整数,范围00~77 |
\’ | 单引号 | \xHH | 十六进制整数,范围00~FF |
\” | 双引号 | \uhhhh | 十六进制编码的Unicode字符 |
在document.write( )语句中使用转义字符时,只有将其放在格式化文本标签中才会起作用。如:
document.write("
努力学习\nJavaScript语言!
");
2、未定义值
未定义类型的变量是undefined,表示变量还没有赋值(如var m;),或者赋予一个不存在的属性值(如var m=String.noproperty;)。
此外,JavaScript中还有一种特殊类型的数字常量NaN
,即“非数字”。当程序由于某种原因计算错误后,将产生一个没有意义的数字,此时JavaScript返回的数值就是NaN。
3、 空值
JavaScript中的关键字null是一个特殊的值,它表示值为空,用于定义空的或者不存在的引用。这里必须注意的是,null不等同与空字符串("")和0。.
由此可见,null和undefined的区别是,null表示一个变量被赋予了一个空值,而undefined则表示该变量尚未被赋值。
4、 复合数据类型:Object类型
概述:
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
什么是 JSON?
1、JSON 英文全称 JavaScript Object Notation
2、JSON 是一种轻量级的数据交换格式。
3、JSON是独立的语言 *
4、JSON 易于理解。
5、JSON 格式化后为 JavaScript 对象
6、JSON 格式在语法上与创建 JavaScript 对象代码是相同的。
由于它们很相似,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。
JSON 语法规则
数据为 键/值 对。
数据由逗号分隔。
大括号保存对象
方括号保存数组
JSON 数据 - 一个名称对应一个值
JSON 数据格式为 键/值 对,就像 JavaScript 对象属性。
键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:
"name":"Runoob"
JSON 对象
JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个 键/值 对:
{"name":"Runoob", "url":"www.runoob.com"}
JSON 数组
JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象:
"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}]
在以上实例中,对象 “sites” 是一个数组,包含了三个对象。
每个对象为站点的信息(网站名和网站地址)。
JSON 字符串转换为 JavaScript 对象
通常我们从服务器中读取 JSON 数据,并在网页中显示数据。
简单起见,我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):
首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:
var text = '{ "sites" : [' +'{ "name":"Runoob" ,
"url":"www.runoob.com" },' +'{ "name":"Google" ,
"url":"www.google.com" },' +'{ "name":"Taobao" ,
"url":"www.taobao.com" } ]}';
然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
最后,在你的页面中使用新的 JavaScript 对象:
实例
var text = '{ "sites" : [' + '{ "name":"Runoob" ,
"url":"www.runoob.com" },' + '{ "name":"Google" ,
"url":"www.google.com" },' + '{ "name":"Taobao" ,
"url":"www.taobao.com" } ]}'; obj =
JSON.parse(text);document.getElementById("demo").innerHT
ML = obj.sites[1].name + " " + obj.sites[1].url;
数据类型的自动转换
当JavaScript尝试操作一个"错误"的数据类型时,会自动转换为"正确"的数据类型。以下输出结果不是你所期望的:
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5
"5"* 2 // 返回 10 "5" 转换为 5
"6" / 2 // 返回 3 "6" 转换为 6
总结:当字符串与其它类型用+连接,其它类型会转为字符串,其它的运算符-,*,/,%都会转换成Number类型
typeof的用法
typeof运算符返回其操作数当前的数据类型。这对于判断一个变量是否已被定义特别有用。例如,下面应用typeof运算符返回当前操作数的数据类型,代码如:typeof false
说明:typeof运算符把类型信息用字符串返回。typeof运算符的返回值有6种:“number”、“string”、“boolean”、“object”、“function”和“undefined”。
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof undefined // undefined
typeof null // object
typeof是操作符,不是方法,也就是说和加减号一样用,不考虑优先级问题,没必要给操作数加括号,当然加了也没事儿,说实话可读性还挺高
typeof返回值都是小写字符串
null的类型不是null,而是"object"
NaN这个不是数字的类型也是"number"
function明明也是对象,但是typeof却给了"function"类型
其它对象都返回"object",很没有识别性
具体识别对象类型使用instanceof 操作符,这个记住一点儿就行,对于基本类型,instanceof 永远返回false
1 instanceof Number; //false
new Number(1) instanceof Number; //true
变量命名
我们为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。
我们赶快给变量取个好名字吧!变量名字可以任意取,只不过取名字要遵循一些规则:
1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。如下:
正确: mysum _mychar $numa1
错误:6num //开头不能用数字
%sum //开头不能用除(_ $)外特殊符号,如(% + /等)
sum+num //开头中间不能使用除(_ $)外特殊符号,如(% + /等)
2.变量名区分大小写,如:A与a是两个不同变量。
3.不允许使用JavaScript关键字和保留字做变量名。
变量赋值
我们可以把变量看做一个盒子,盒子用来存放物品,那如何在变量中存储内容呢?
我们使用"="号给变量存储内容,看下面的语句:
var mynum = 5 ; //声明变量mynum并赋值。
这个语句怎么读呢? 给变量mynum赋值,值为5。我们也可以这样写:
var mynum; //声明变量mynum mynum = 5 ; //给变量mynum赋值
注:这里 "="号的作用是给变量赋值,不是等于号。
盒子可以装衣服、玩具、水果…等。其实,变量是无所不能的容器,你可以把任何东西存储在变量里,如数值、字符串、布尔值等,例如:
var num1 = 123; // 123是数值
var num2 = "一二三"; //"一二三"是字符串
var num3=true; //布尔值true(真),false(假)
其中,num1变量存储的内容是数值;num2变量存储的内容是字符串,字符串需要用一对引号""括起来,num3变量存储的内容是布尔值(true、false)。
JavaScript-什么是函数
函数是完成某个特定功能的一组语句。如没有函数,完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省重复输入大量代码的麻烦。
如何定义一个函数呢?基本语法如下:
function 函数名() { 函数代码; }
说明:
1、 function定义函数的关键字。
2、 "函数名"你为函数取的名字。
3、 "函数代码"替换为完成特定功能的代码。
我们来编写一个实现两数相加的简单函数,并给函数起个有意义的名字:“add2”,代码如下:
function add2(){ var sum = 3 + 2; alert(sum); }
函数调用:
函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok
我们完成对两个数求和并显示结果的功能。并给函数起个有意义的名字:“add2”,代码如下:
<script type="text/javascript">
function add2(){
sum = 3 + 2;
alert(sum);
}
add2();
</script>
有参数的函数
上节中add2()函数不能实现任意指定两数相加。其实,定义函数还可以如下格式:
function 函数名(参数1,参数2) { 函数代码 }
注意:参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开。
按照这个格式,函数实现任意两个数的和应该写成:
function add2(x,y) {
sum = x + y;
document.write(sum);
}
x和y则是函数的两个参数,调用函数的时候,我们可通过这两个参数把两个实际的加数传递给函数了。
例如,add2(3,4)
会求3+4的和,add2(60,20)
则会求出60和20的和。
调用带参数的函数
在调用函数时,您可以向其传递值,这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数,由逗号 (,) 分隔:
myFunction(argument1,argument2)
当您声明函数时,请把参数作为变量来声明:
function myFunction(var1,var2)
{
// 这里是要执行的代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
点亮灯泡完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点亮灯泡</title>
</head>
<body>
<img id="myimage" onclick="changeImage()" src="img/off.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
<script>
function changeImage() {
element = document.getElementById("myimage");
if (element.src.match("bulbon")) {
element.src="ima/off.gif";
} else {
element.src = "img/on.gif";
}
}
</script>
</body>
</html>
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
这条语句:
carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。
操作符优先级
我们都知道,除法、乘法等操作符的优先级比加法和减法高,例如:
var numa=3; var numb=6 jq= numa + 30 / 2 - numb * 3;
// 结果为0
如果我们要改变运算顺序,需添加括号的方法来改变优先级:
var numa=3; var numb=6 jq= ((numa + 30) / (2 - numb)) * 3;
//结果是-24.75
操作符之间的优先级(高到低):
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。
var numa=3; var numb=6; jq= numa + 30 >10 && numb * 3<2;
//结果为false
自加一,自减一 ( ++和- -)
算术操作符除了(+、-、*、/)外,还有两个非常常用的操作符,自加一“++”;自减一“–”。首先来看一个例子:
mynum = 10; mynum++; //mynum的值变为11 mynum--;
//mynum的值又变回10
上面的例子中,mynum++使mynum值在原基础上增加1,mynum–使mynum在原基础上减去1,其实也可以写成:
mynum = mynum + 1;//等同于mynum++
mynum = mynum - 1;//等同于mynum--
条件运算符
条件运算符是三元运算符,使用该运算符可以方便地由条件逻辑表达式的真假值得到各自对应的取值。或由一个值转换成另外两个值,使用条件运算符嵌套多个值。其格式如下:
操作数?结果1:结果2
如果操作数的值为true,则整个表达式的结果为结果1,否则为结果2。
说明:条件运算符中条件部分若不是逻辑类型,按“非零即真”的原则进行判断。条件运算符嵌套时按“左结合性”计算。在编写语句时用多行表示一条复杂语句,会使语句结构清晰,增强程序的可读性。
三元运算实现图片转换完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片转换</title>
<style>
#image{
display: block;
width: 960px;
height: 400px;
margin: 50px auto;
}
#next{
margin-left: 750px;
}
</style>
</head>
<body>
<img src="img/1.jpg" id="image"/>
<button id="next">next</button>
<button id="prev">prev</button>
<script>
var img=document.getElementById("image");
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var nowIndex=1;
var count=6;
next.onclick=function(){
nowIndex=nowIndex+1>count?1:nowIndex+1;
img.src="img/"+nowIndex+".jpg";
}
prev.onclick=function(){
nowIndex=nowIndex-1<=0?count:nowIndex-1;
img.src="img/"+nowIndex+".jpg";
}
</script>
</body>
</html>
做判断(if语句)
if语句是基于条件成立才执行相应代码时使用的语句。
语法:
if(条件) { 条件成立时执行代码}
注意:if小写,大写字母(IF)会出错!
假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司。代码表示如下:
<script type="text/javascript">
var mycarrer = "HTML";
if (mycarrer == "HTML") {
document.write("你面试成功,欢迎加入公司。");
}
</script>
二选一 (if…else语句)
if…else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码。
语法:
if(条件) { 条件成立时执行的代码} else {条件不成立时执行的代码}
假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公司,否则你面试不成功,不能加入公司。
代码表示如下:
<script type="text/javascript">
var mycarrer = "HTML"; //mycarrer变量存储技能
if (mycarrer == "HTML") {
document.write("你面试成功,欢迎加入公司。");
}
else //否则,技能不是HTML {
document.write("你面试不成功,不能加入公司。");
}
</script>
多种选择(Switch语句)
当有很多种选项的时候,switch比if else使用更方便。
语法:
`switch(表达式) {
case值1: 执行代码块 1 break;
case值2: 执行代码块` 2 break;
...
case值n: 执行代码块 n break;
default: // 与 case值1 、 case值2...case值n 不同时执行的代码
}
语法说明:
Switch必须赋初始值,值与每个case值匹配。满足执行该 case 后的所有语句,并用break语句来阻止运行下一个case。如所有case值都不匹配,执行default后的语句。
假设评价学生的考试成绩,10分满分制,我们按照每一分一个等级将成绩分等,并根据成绩的等级做出不同的评价。
代码如下:
执行结果:
评语: 及格,加油!
注意:记得在case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句,看以下代码:
执行结果:
评语: 继续努力!
评语: 及格,加油!
评语: 凑合,奋进
评语: 很棒,很棒
评语: 高手,大牛
在上面的代码中,没有break停止语句,如果成绩是4分,则case 5后面的语句将会得到执行,同样,case6、7-10后面的语句都会得到执行。
循环结构
(1)循环结构的三个要素
循环初始化,设置循环变量初值;
循环控制,设置继续循环进行的条件;
循环体,重复执行的语句块。
(2)当循环结构:
当循环结构,while语句格式如下:
while(条件表达式){
语句块
}
(3)直到循环结构:
直到循环结构,do…while语句格式如下:
do{
语句块
} while(条件表达式);
(4)计数循环结构:
计数循环结构, for语句格式如下:
for(var i=0;i<length;i++){
语句块
}
现有数组和json对象如下
var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt',
'jQuery', 'angular'];
var demoObj = {
aaa: 'Javascript',
bbb: 'Gulp',
ccc: 'CSS3',
ddd: 'Grunt',
eee: 'jQuery',
fff: 'angular'
};
避免使用for(var i=0; i (5)枚举循环结构: 遍历数组时,item表示索引值, arr表示当前索引值对应的元素 arr[item] 在while、for、do…while、while循环中使用break语句退出当前循环,直接执行后面的代码。 当遇到特殊情况的时候,循环就会立即结束。看看下面的例子,输出10个数,如果数值为5,就停止输出。 continue的作用是仅仅跳过本次循环,而整个循环体继续执行。 语句结构: 上面的循环中,当特殊情况发生的时候,本次循环将被跳过,而后续的循环则不会受到影响。好比输出10个数字,如果数字为5就不输出了。 异常处理语句 程序运行过程中难免会出错,出错后的运行结果往往是不正确的,因此运行时,出错的程序通常被强制中止。运行时的错误统称为异常,为了能在错误发生时得到一个处理的机会,JavaScript提供了异常处理语句:try-catch。编码时通常将可能发生错误的语句写入try块的花括号中,并在其后的catch块中处理错误。错误信息包含在一个错误对象里,通过exception的引用可以访问该对象。根据错误对象中的错误信息以确定如果处理。 示例如下: throw语句允许创建自定义错误,创建或抛出异常(exception)。如果把throw与try和catch一起使用,能够控制程序流,并生成自定义的错误消息。 提示用户:prompt()方法 语法: 案例1–猜数字游戏 案例2-- 99乘法表 什么是数组 数组是一组值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值。 向数组增加一个新元素 数组的表达方式: 第一步:创建数组 下面创建一个数组,用于存储5个人的数学成绩。 注意:数组每个值有一个索引号,从0开始。 我们还可以用简单的方法创建上面的数组和赋值: 第一种方法: 第二种方法: 注意:数组存储的数据可以是任何类型(数字、字符、布尔值等) 我们使用myarray变量存储了5个人的成绩,现在多出一个人的成绩,如何存储呢? 数组属性length 语法: 注意:因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。如数组的长度是5,数组的上下限分别是0和4。 同时,JavaScript数组的length属性是可变的,这一点需要特别注意。 数组随元素的增加,长度也会改变,如下: 数组对象的常用属性与方法 使用for…in…循环对数组进行遍历操作 每次在循环时,系统会自动将当前数组的索引下标放入变量i中,如下: 下面是数组的一些方法如表3-1所示。 假设定义以下数组: splice()语法: splice()是修改Array的万能方法,主要用途是向数组的中部插入项。其中index必需,该参数是开始插入和(或)删除的数组元素的下标,必须是数字;howmany必需,规定应该删除多少元素,必须是数字,但可以是 “0”,如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素;item1, …, itemX可选,要添加到数组的新元素。 插入:splice()可以向指定位置插入任意数量的项,只需提供3个参数,起始位置,0(要删除的项数) 和要插入的项,如果插入多个项,可以在传入第四,第五,多个。 例如: 指定分隔符连接数组元素join() 语法: 参数说明: 运行结果: 运行结果: 数组排序sort() 语法: 注意: 该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下: 1.使用sort()将数组进行排序,代码如下: 运行结果: 注意:上面的代码没有按照数值的大小对数字进行排序。 2.如要实现这一点,就必须使用一个排序函数,代码如下: 运行结果: 数组连接concat() 语法 运行结果: 我们创建了三个数组,然后使用 concat() 把它们连接起来,代码如下: 运行结果: 颠倒数组元素顺序reverse() 语法: 注意:该方法会改变原来的数组,而不会创建新的数组。 定义数组myarr并赋值,然后颠倒其元素的顺序: 运行结果: 选定元素slice() 参数说明: 注意: 我们将创建一个新数组,然后从其中选取的元素,代码如下: 运行结果: 二维数组的概述 二维数组,我们看成一组盒子,不过每个盒子里还可以放多个盒子。 注意: 二维数组的两个维度的索引值也是从0开始,两个维度的最后一个索引值为长度-1。 二维数组的定义方法一 注意: 关于for 循环语句,请看第四章 二维数组的赋值 说明: myarr[0][1] ,0 表示表的行,1表示表的列。 JavaScript定时器有以下两个方法: 例: ------------------------------------------------------------------------------------------ setTimeout()函数用法如: 实现循环调用需要把setTimeout定时器函数写在被调用函数里面。如下: 其中,myTime为setTimeout()函数返回的定时器对象。 从性能上来说,如果针对的是不断运行的代码,不应该使用setTimeout,而应该是用setInterval,因为setTimeout每一次都会初始化一个定时器,而setInterval只会在开始的时候初始化一个定时器。 随机点名器完整代码: 概述 注意:使用关键字new,Date()的首字母必须大写。 使 Udate 成为日期对象,并且已有初始值:当前时间(当前电脑系统时间)。 如果要自定义初始值,可以用以下方法: 我们最好使用下面介绍的“方法”来严格定义时间。 访问方法语法: Date对象中处理时间和日期的常用方法: 经典案例 代码: 代码: 代码: JavaScript substring() 方法 所有主要浏览器都支持 substring() 方法 在本例中,我们将使用 substring() 从字符串中提取一些字符:: 以上代码输出结果: JavaScript substr() 方法 所有主要浏览器都支持 substr() 方法 参数值 返回值 实例 n 输出结果: JavaScript split() 方法 n 输出一个数组的值: 定义和用法 参数值 返回值 省略分割参数: n 输出数组值得结果: 分割每个字符,包括空格: n 输出数组值得结果: 使用 limit 参数: n 将输出3个数组的值: 使用一个字符作为分隔符: n 输出数组值得结果: JavaScript substring() 方法 如果省略该参数,那么返回的子串会一直到字符串的结尾。 在本例中,我们将使用 substring() 从字符串中提取一些字符:: 以上代码输出结果: JavaScript substr() 方法 提示: substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用。 语法 参数值 返回值 实例 n 输出结果: 标题栏滚动显示代码: form(表单) 2.form method属性 method 属性可以是get,在 URL 中添加表单数据,也可以使用使用post方法提交表单数据。 表单控件 实现form表单提交的 onsubmit只能表单上使用,提交表单前会触发, onclick是普通按钮等控件使用, 用来触发点击事件。在提交表单前,一般都会进行数据验证,可以选择在按钮上的onclick中验证,也可以在表单上的onsubmit中验证。 下表列出了表单对象的常用属性、方法。示例中myForm是一个表单对象。 表单对象常用方法 表单控件元素对象的常用方法 表单对象常用事件: input 控件常用方法 表单对象常用事件: Select 对象 Select 对象集合 Select 对象属性 Select 对象方法 Select 对象事件句柄 概述: 典型的数据验证有: 大多数情况下,数据验证用于确保用户正确输入数据。 数据验证可以使用不同方法来定义,并通过多种方式来调用。 服务端数据验证是在数据提交到服务器上后再验证。 客户端数据验证 side validation是在数据发送到服务器前,在浏览器上完成验证。 HTML 约束验证 约束验证 HTML 输入属性 示例1 示例2 JavaScript正则表达式 1.测试字符串的某个模式 2.替换文本 3.根据模式匹配从字符串中提取一个子字符串 正则表达式语法: 简写 全称 大部分情况用简写,只有一种情况用全称写法:正则需要传参的时候 正则表达式的使用,可以通过简单的办法来实现强大的功能。下面先给出一个简单的示例: 我们在写用户注册表单时,只允许用户名包含字符、数字、下划线和连接字符(-),并设置用户名的长度,我们就可以使用以下正则表达式来设定。 正则表达式中方括号的应用: 正则表达式中常用元字符的含义: 正则表达式中常用限定符的含义: 正则表达式中常用反义词的含义: 字符转义:如果想查找元字符本身的话,比如查找.,或者*,就出现了问题:没办法指定它们,因为它们会被解释成别的意思。这时就得使用\来取消这些字符的特殊意义。因此,应该使用 分组:要想重复单个字符,直接在字符后面加上限定符就行了;想要重复多个字符,可以用小括号来指定子表达式(也叫做分组),然后就可以指定这个子表达式的重复次数了。 案例 JavaScript eval() 函数 返回值 案例 JavaScript replace() 方法 返回值 本案例中: JavaScript substring() 方法 如果省略该参数,那么返回的子串会一直到字符串的结尾。 substring() 方法返回的子串包括 start 处的字符,但不包括 stop 处的字符。 如果参数 start 与 stop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。如果 start 比 stop 大,那么该方法在提取子串之前会先交换这两个参数。 **重要事项:**与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。 案例 随机数 random() 语法: 注意:返回一个大于或等于 0 但小于 1 的符号为正的数字值。 我们取得介于 0 到 1 之间的一个随机数,代码如下: 运行结果: 注意:因为是随机数,所以每次运行结果不一样,但是0 ~ 1的数值。 获得0 ~ 10之间的随机数,代码如下: 运行结果: ------------------------------------------------------------------------------------------------ 语法: 注意:返回的是小于或等于x,并且与 x 最接近的整数。 我们将在不同的数字上使用 floor() 方法,代码如下: 运行结果: ------------------------------------------------------------------------------------------------ 返回值 说明 注释:该方法会改变数组的长度。 提示:要想数组的开头添加一个或多个元素,请使用 unshift() 方法。 在本例中,我们将创建一个数组,并通过添加一个元素来改变其长度: 输出: 案例 JavaScript 定时器 语法: 参数说明: 当我们打开网页3秒后,在弹出一个提示框,代码如下: 当按钮start被点击时,setTimeout()调用函数,在5秒后弹出一个提示框。 要创建一个运行于无穷循环中的计数器,我们需要编写一个函数来调用其自身。在下面的代码,当按钮被点击后,输入域便从0开始计数。 取消定时器clearTimeout() 语法: 参数说明: 下面的例子和上节的无穷循环的例子相似。唯一不同是,现在我们添加了一个 “Stop” 按钮来停止这个定时器: 案例 动态改变元素样式 语法: 注意:Object是获取的元素对象,如通过document.getElementById(“id”)获取的元素。 基本属性表(property): 看看下面的代码: 改变 元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝: 结果: 网页中经常会看到显示和隐藏的效果,可以通过display属性来设置。 语法: 注意:Object是获取的元素对象,如通过document.getElementById(“id”)获取的元素。 案例 构造函数模式 使用构造函数可以创建特定类型的对象,类似于Array、Date等原生JavaScript的对象。其实现方法如下: 在创建对象的构造函数、方法成员中,this指向为实例对象本身。当我们创建了一个Person的对象时,this即是指这个创建的对象。现在,我们可以识别出对象person1和person2的具体类型了。使用console.log(person2 instanceOf Person)后可以发现,输出的值为true。 可以看出这种方式解决了工厂模式中不能识别对象的类型的问题,这个例子与工厂模式中除了函数名不同以外,还有许多不同之处: 构造函数虽然 然而创建两次完全相同的方法是没有必要的, 问题解决了,但这种方法又带来了新的问题。首先,函数speak是在全局作用域中声明的,但它却只能被用于Person构造函数,放在全局作用域中有被误用的风险;其次,如果一个自定义类型有很多的方法,则需要声明很多的全局函数,这既将导致全局作用域的污染,也不利于代码的封装。因此可以通过原型来解决此问题。 原型模式 可以看到,虽然构造函数内没有声明speak方法,但我们创建的对象person1还是能调用speak方法,这是因为JavaScript有一个搜索规则,先搜索实例属性和方法,找到则返回;如果没找到,则再到prototype中去搜索。因此没有污染全局作用域。 原型模式省略了构造函数传递初始化参数这一环节,结果所有实例在默认情况下都取得了相同的属性值,这样非常不方便, 混合模式(原型模式 + 构造函数模式) 混合模式中构造函数模式 动态原型模式 动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。 动态原型模式将所有信息封装在了构造函数中,而通过构造函数中初始化原型(仅第一个对象实例化时初始化原型),这个可以通过判断该方法是否有效而选择是否需要初始化原型。即先判断原型中的某个属性或方法是不是已经声明过,如果没有声明,则声明整个原型;否则,什么也不用做。示例代码如下: 可以看到上面的例子中只弹出一次窗,‘exe time’,即当person1初始化后,person2就不在需要初始化原型。 如前所述,目前使用最广泛的是** 动态插入行和单元格 语法: 该方法创建一个新的 TableRow 对象,表示一个新的 标记,用于在表格中的指定位置插入一个新行,并返回这个新插入的行 TableRow,新行将被插入 index 所在行之前。若 index 等于表中的行数,则新行将被附加到表的末尾。如果表是空的,则新行将被插入到一个新的 段,该段自身会被插入表中。若参数 index 小于 0 或大于表中的行数,该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。 cells保存着元素中单元格的HTMLCollectioin集合; 还可以根据需要动态改变单元格的属性, 案例 动态删除某行 案例: Radio Object 在 HTML 表单中 单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。 当单选按钮被选中或不选中时,该按钮就会触发 onclick 事件句柄。 您可通过 语法: 表示通过name属性的值获取一组元素。该方法接受一个参数,查找名称。方法返回一个HTMLCollection对象,返回所有带有给定name属性的元素,通常用于表单单复选按钮组的获取。 案例: 单复选按钮的应用 表示通过name属性的值获取一组元素。该方法接受一个参数,查找名称。方法返回一个HTMLCollection对象,返回所有带有给定name属性的元素,通常用于表单单复选按钮组的获取。 单复选按钮值的获取和展示,如图所示,代码如下: 布局: 功能实现: 案例 案例一 复选框的全选、不选、反选· 浏览器窗口可视区域大小 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 二、对于 Internet Explorer 8、7、6、5: 或者 在不同浏览器都实用的 JavaScript 方案: 网页尺寸scrollHeight 一、针对IE、Opera: 二、针对NS、FF: 三、浏览器兼容性 scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。 网页尺寸offsetHeight 一、值 二、浏览器兼容性 网页卷去的距离与偏移量 注意: 案例一 打开广告窗口并更改其属性 案例二 弹出及关闭小窗口 案例三 页面滚动 History 对象 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。 语法: 注意:window可以省略。 返回前一个浏览的页面 比如,返回前一个浏览的页面,代码如下: 注意:等同于点击浏览器的倒退按钮。 back()相当于go(-1),代码如下: 返回下一个浏览的页面 如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下: 注意:等价点击前进按钮。 返回浏览历史中的其他页面 浏览器中,返回当前页面之前浏览过的第二个历史页面,代码如下: 注意:和在浏览器中单击两次后退按钮操作一样。 Location对象 语法: location 对象属性: 对象属性: 查看浏览器的名称和版本,代码如下: userAgent 语法 几种浏览的user_agent.,像360的兼容模式用的是IE、极速模式用的是chrom的内核。 screen对象 语法: 对象属性: 注意: 屏幕可用高和宽度 注意: 我们来获取屏幕的可用高和宽度,代码如下: **注意:**根据屏幕的不同显示值不同。 ***案例一 *** 运行结果: 认识DOM 遍历节点树: 节点属性 属性 :** 一、nodeName 属性: 节点的名称,是只读的。 二、nodeValue 属性:节点的值 三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型: 案例一 DOM对象节点类型 案例二 元素的innerText,innerHtml,outerText,outerHtml 区别getElementByID,getElementsByName,getElementsByTagName 1 ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。 把上面的例子转换到HTML中,如下: input标签就像人的类别。 方法总结如下: 注意:方法区分大小写 通过下面的例子(6个name="hobby"的复选项,两个按钮)来区分三种方法的不同: 1.document.getElementsByTagName(“input”),结果为获取所有标签为input的元素,共8个。 访问子节点childNodes 语法: 注意: 其它浏览器: 注意: 运行结果:(IE和其它浏览器结果是一样的) 访问子节点的第一和最后项 一、firstChild属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。 **说明:**与elementNode.childNodes[0]是同样的效果。 二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。 说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。 注意: 上一节中,我们知道Internet Explorer 会忽略节点之间生成的空白文本节点,而其它浏览器不会。我们可以通过检测节点类型,过滤子节点。 (以后章节讲解) 访问父节点parentNode 注意:父节点只能有一个。 看看下面的例子,获取 P 节点的父节点,代码如下: 运行结果: 访问祖节点: 看看下面的代码: 运行结果: 注意: 浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。 访问兄弟节点 语法: 说明:如果无此节点,则该属性返回 null。 2 previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。 语法: 说明:如果无此节点,则该属性返回 null。 注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。 解决问题方法: 插入节点appendChild() 语法: 参数: 我们来看看,div标签内创建一个新的 P 标签,代码如下: 插入节点insertBefore() 语法: 参数: This is a new p JavaScript HTML 注意: otest.insertBefore(newnode,node); 也可以改为: otest.insertBefore(newnode,otest.childNodes[0]); 创建元素节点createElement 语法: 参数: 注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。 我们来创建一个按钮,代码如下: 效果:在HTML文档中,创建一个按钮。 我们也可以使用setAttribute来设置属性,代码如下: 效果:在HTML文档中,创建一个文本框,使用setAttribute设置属性值。 当点击这个文本框时,会弹出对话框“This is a text!”。 创建文本节点createTextNode 语法: 参数: 我们来创建一个 删除节点removeChild() 语法: 参数: 注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x 操作。 如果要完全删除对象,给 x 赋 null 值,代码如下: 语法: 参数: 效果: 将文档中的 Java 改为 JavaScript。 注意: DOM优化 DOM事件 比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。 主要事件表: 如下代码, 当将光标移到文本框内时,即焦点在文本框内,触发onfocus 事件,并调用函数message()。 运行结果: 如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时(即焦点在文本框),在光标离开该文本框后(即失焦时),触发onblur事件,并调用函数message()。 如下代码,当用户将文本框内的文字改变后,弹出对话框“您改变了文本内容!”。 案例一 querySelector()与querySelectorAll() 案例三 案例一 简易选项卡 案例一 Javascript cookie 案例一 Javascript cookievar i = 0, len = demo1Arr.length;
for(; i<len; i++) {};
枚举循环结构,for…in语句格式如下:for(var i=0 in array){
或者 for(i in array){
语句块
语句块
}
}
for(var item in arr|obj){}
可以用于遍历数组和对象
遍历对象时,item表示key值,arr表示key值对应的value值 obj[item]4、退出循环break
格式如下:for(初始条件;判断条件;循环后条件值更新)
{
if(特殊情况) {break;}
循环代码
}
执行结果:
注:当num=5的时候循环就会结束,不会输出后面循环的内容5、继续循环continue
for(初始条件;判断条件;循环后条件值更新) {
if(特殊情况) { continue; }
循环代码
}
6、异常处理语句
try{
tryStatements //必选项。可能发生错误的语句序列。
}
catch(exception){
//必选项。任何变量名,用于引用错误发生时的错误对象。
catchStatements
//可选项。错误处理语句,用于处理tryStatements中发生的错误。
}
var txt="";
function message()
{
try {
adddlert("Welcome guest!");
}
catch(err)
{
txt="本页有一个错误。\n\n";
txt+="错误描述:" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
message();
7、prompt()方法及动态输入
有时候,不是仅希望用户回答 Yes/No,而是希望得到更特定的响应。在这种情况下,可问一个问题(带默认回答),然后接收回复。
prompt()方法用于显示可提示用户进行输入的对话框。方法返回用户输入的字符串。prompt(msg,defaultText)
参数msg可选。要在对话框中显示的纯文本(而不是HTML格式的文本)。用于提示。
参数defaultText可选。默认的输入文本。
可以使用对话框询问用户账号并处理回复。<script>
var ans = prompt("请输入您的账号?","666");
if (ans) {
alert("您的账号是: " + ans);
}
else {
alert("您拒绝了回答!");
}
</script>
8、控制语句综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猜数字游戏</title>
<script>
var num = Math.floor(Math.random() * 100 + 1);
// 产生1~100的随机整数
do {
var guess = parseInt(prompt("下面开始猜数游戏……请输入1~100的整数"));
if (guess == num) {
alert("恭喜你,答对了,幸运数字是" + num);
} else if (guess > num) {
alert("你猜的数字大了。");
go_on = confirm("是否继续游戏?");
} else {
alert("你猜的数字小了。");
go_on = confirm("是否继续游戏?");
}
} while (go_on) {
alert("谢谢参与游戏!!!");
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>99乘法表</title>
</head>
<body>
<table border="0" cellpadding="6" style="border-collapse: collapse;">
<script>
for (var i = 1; i <= 9; i++) {
document.write("
")
for (var j = 1; j <= 9; j++) {
if (j <= i) {
document.write(" ")
}
</script>
</table>
</body>
</html>
" + i + "*" + j +
"=" + (i * j) + " ")
}
}
document.write("第三章 常用内置对象-常用属性与方法
1、新建 JavaScript 数组
我们知道变量用来存储数据,一个变量只能存储一个内容。假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果需要存储更多数据,那就会变的更麻烦。我们用数组解决问题,一个数组变量可以存放多个数据。好比一个团,团里有很多人,如下我们使用数组存储5个学生成绩。var myarr=new Array();
第二步:给数组赋值 myarr[1]=" 张三";
myarr[2]=" 李四";
var myarray=new Array(); //创建一个新的空数组
myarray[0]=66; //存储第1个人的成绩
myarray[1]=80; //存储第2个人的成绩
myarray[2]=90; //存储第3个人的成绩
myarray[3]=77; //存储第4个人的成绩
myarray[4]=59; //存储第5个人的成绩
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
var myarray = [66,80,90,77,59];
//直接输入一个数组(称 “字面量数组”)
只需使用下一个未用的索引,任何时刻可以不断向数组增加新元素。myarray[5]=88; //使用一个新索引,为数组增加一个新元素
2、数组对象的常用属性和方法
如果我们想知道数组的大小,只需引用数组的一个属性length。Length属性表示数组的长度,即数组中元素的个数。myarray.length; //获得数组myarray的长度
var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组
arrdocument.write(arr.length); //显示数组长度8 document.write(arr[7]); //显示第8个元素的值54arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10
var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34; //增加元素,使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16
基于数组对象中的length属性,我们可以使用for循环对其进行遍历操作,如下:var aFruit = ["apple","pear","peach"];
for (var i = 0; i < aFruit.length; i++) {
document.write (aFruit [i] +'
');
}
基本语法:for(var i in 数组) {}
var aFruit = ["apple","pear","peach"];
for (var i in aFruit) {
document.write (aFruit [i] +'
');
}
var a1=new Array("a","b","c");
var a2=new Array("y "," x ","z");
array.splice(index,howmany,item1,.....,itemX)
删除:splice()可以删除任意数量的项,只需指定2个参数。
例如:splice(0,2)会删除数组中的前两项。 // 只删除,不添加,返回被删除的元素
splice(2,0,"red","green") // 只添加,不删除,返回[],因为没有删除任何元素
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。arrayObject.join(分隔符)
注意:返回一个字符串,该字符串把数组中的各个元素串起来,用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。 我们使用join()方法,将数组的所有元素放入一个字符串中,代码如下:
I,love,JavaScript
我们将使用分隔符来分隔数组中的元素,代码如下:<script type="text/javascript">
var myarr = new Array(3)
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join("."));
</script>
I.love.JavaScript
sort()方法使数组中的元素按照一定的顺序排列。arrayObject.sort(方法函数)
参数说明:
1.如果不指定<方法函数>,则按unicode码顺序排列。
2.如果指定<方法函数>,则按<方法函数>所指定的排序方法排序。
myArray.sort(sortMethod);
若返回值<=-1,则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1,则表示 A 和 B 具有相同的排序顺序。
若返回值>=1,则表示 A 在排序后的序列中出现在 B 之后。<script type="text/javascript">
var myarr1 = new Array("Hello","John","love","JavaScript");
var myarr2 = new Array("80","16","50","6","100","1"); document.write(myarr1.sort()+"
");
document.write(myarr2.sort());
</script>
Hello,JavaScript,John,love 1,100,16,50,6,80
<script type="text/javascript">
function sortNum(a,b) {
return a - b; //升序,如降序,把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1"); document.write(myarr + "
"); document.write(myarr.sort(sortNum));
</script>
80,16,50,6,100,1 1,6,16,50,80,100
concat() 方法用于连接两个或多个数组。此方法返回一个新数组,不改变原来的数组。arrayObject.concat(array1,array2,...,arrayN)
参数说明:
注意: 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
我们创建一个数组,将把 concat() 中的参数连接到数组 myarr 中,代码如下:<script type="text/javascript">
var mya = new Array(3);
mya[0] = "1";
mya[1] = "2";
mya[2] = "3";
document.write(mya.concat(4,5)+"
");
document.write(mya);
</script>
1,2,3,4,5 1,2,3
hello!,I,love,JavaScript,!
reverse() 方法用于颠倒数组中元素的顺序。arrayObject.reverse()
<script type="text/javascript">
var myarr = new Array(3)
myarr[0] = "1"
myarr[1] = "2"
myarr[2] = "3"
document.write(myarr + "
") document.write(myarr.reverse())
</script>
1,2,3 3,2,1
slice() 方法可从已有的数组中返回选定的元素。
语法arrayObject.slice(start,end)
1.返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
2. 该方法并不会修改数组,而是返回一个子数组。1、可使用负值从数组的尾部选取元素。
2、如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3.、String.slice() 与 Array.slice() 相似。
<script type="text/javascript">
var myarr = new Array(1,2,3,4,5,6);
document.write(myarr + "
");
document.write(myarr.slice(2,4) + "
");
document.write(myarr);
</script>
1,2,3,4,5,6 3,4 1,2,3,4,5,6
3、二维数组的数据访问
一维数组,我们看成一组盒子,每个盒子只能放一个内容。
一维数组的表示: myarray[ ]
二维数组的表示: myarray[ ][ ]
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值,每个数组元素的值为i+j
}
}
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
myarr[0][1]=5; //将5的值传入到数组中,覆盖原有值。
4、定时器函数setInterval()与setTimeout()
setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。setInterval()函数用法如下:setInterval() ("调用函数","周期性执行或调用code之间的时间间隔"),
function hello(){ alert("hello"); }
重复执行某个方法:
var t1= window.setInterval("hello()",3000);
去掉定时器的方法
window.clearInterval(t1);
setTimeout() :在指定的毫秒数后调用函数或计算表达式。setTimeout("调用函数","在执行代码前需等待的毫秒数。")
只执行一次,3 秒后显示一个弹窗:
var t=setTimeout(function(){alert("Hello")},3000)
function show(){
alert("Hello");
var myTime = setTimeout("show()",1000);
}
关闭定时器的用法:clearTimeout(myTime);
5、日期对象的实现
Date 日期对象
日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒)。
定义一个时间对象 :var Udate=new Date();
var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日
“<日期对象>.<方法>”
返回星期方法
getDay() 返回星期,返回的是0-6的数字,0 表示星期天。如果要返回相对应“星期”,通过数组完成,代码如下:<script type="text/javascript">
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四"
,"星期五","星期六"];
//定义数组对象,给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write(mydate.getDay());//输出getDay()获取值
document.write("今天是:"+ weekday[mynum]);//输出星期几
</script>
动态时钟的实现:<html>
<head>
<meta charset="utf-8">
<title>正在运行的时钟</title>
<style type="text/css">
/*设置样式:无边框的文本框*/
input,
#clock {
width: 390;
font-size: 30px;
font-weight: 900;
color: #FFFFFF;
background-color: #930;
border: 8px double #900;
}
</style>
</head>
<body onLoad="disptime( ) ">
<form name="myform">
<input name="myclock" type="text" value="" size="20">
</form>
<span id="clock"></span>
<script language="JavaScript">
function disptime() {
var time = new Date(); //获得当前时间
var year = time.getFullYear(); //获得年月日
var month = time.getMonth(); //获得年月日
var date = time.getDate(); //获得年月日
var hour = time.getHours(); //获得小时、分钟、秒
var minute = time.getMinutes();
var second = time.getSeconds();
if (minute < 10) //如果分钟只有1位,补0显示
minute = "0" + minute;
if (second < 10) //如果秒数只有1位,补0显示
second = "0" + second; /*设置文本框的内容为当前时间*/
document.getElementById('clock').innerHTML = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" + second ;
document.myform.myclock.value = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" + second ;
/*设置定时器每隔1秒(1000毫秒),调用函数disptime()执行,刷新时钟显示*/
var myTime = setTimeout("disptime()", 1000);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>考试倒计时</title>
<style type="text/css">
#time{
height: 100px;
background: url(img/jz3.gif) no-repeat;
padding: 20px 126px;
color: #0000FF;
font-size: 28px;
}
</style>
</head>
<body>
<div id="time"></div>
<script type="text/javascript">
var time=document.getElementById('time');
var ks=new Date();
var msks=ks.getTime();//换算成毫秒数
var x=60;//考试分钟
var js=msks+x*60*1000;//结束毫秒值
function jsover(){
var syfz=Math.floor((js-new Date().getTime())/(1000*60));//剩余分钟
var sym=Math.floor(((js-new Date().getTime())-syfz*1000*60)/1000);//剩余秒
if(syfz<5) time.style.background="url(img/jz1.gif) no-repeat";
if(syfz<2) time.style.background="url(img/jz2.gif) no-repeat";
if(syfz<0){
time.innerHTML="";
clearInterval(TimeID);
}
else{
time.innerHTML="距离考试结束还剩下"+syfz+"分"+sym+"秒";
}
}
TimeID=setInterval("jsover()",1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节日倒计时</title>
<style type="text/css">
#date{
font-size: 22px;
font-weight: bold;
color: darkorchid;
width: 900px;
height: 230px;
padding: 10px;
background-color: #FFA500;
}
</style>
</head>
<body>
<div id="date"></div>
<script language="JavaScript">
var urodz=new Date("4/1/2020");//距离日期
var s="今天离2020年4月1日";
var now=new Date();
var ile=urodz.getTime()-now.getTime();
var dni=Math.floor(ile/(1000*60*60*24));//距离天数
var datashow=document.getElementById("date");
if(dni>1){
datashow.innerHTML=s+"还有"+dni+"天";
}
else if(dni==1){
datashow.innerHTML=s+"只有2天啦";
}
else if(dni==0){
datashow.innerHTML=s+"只有1天啦";
}
else{
datashow.innerHTML="好像已经过了耶";
}
</script>
</body>
</html>
第三章 常用内置对象-字符串及应用于表单(续)
1、随机点名器的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机点名</title>
<style type="text/css">
#bodybj {
background-image: url(img/images.jpg);
}
#box {
margin: auto;
width: 660px;
font-size: 66px;
height: 94px;
color: #000000;
text-align: center;
margin-top: 200px;
margin-left: 500px;
}
#bt {
margin: auto;
width: 200px;
text-align: center;
margin-top: 75px;
color: #55aaff;
font-size: 25px;
margin-left: 700px;
cursor: pointer;
}
</style>
</head>
<body id="bodybj">
<div id="box">亲,准备好点名了吗?</div>
<div id="bt" onClick="doit()">开始点名</div>
<script type="text/javascript">
var namelist = ["张三", "李四", "王五", "六六", "赵雷"];
var mytime = null;
function show() {
var box = window.document.getElementById("box");
var num = Math.floor((Math.random() * 100000)) % namelist.length;
box.innerHTML = namelist[num];
mytime = setTimeout("show()", 10);
}
function doit() {
var bt = document.getElementById("bt");
if (mytime == null) {
bt.innerHTML = "停止点名";
show();
} else {
bt.innerHTML = "开始点名";
window.clearTimeout(mytime);
mytime = null;
}
}
</script>
</body>
</html>
2、字符串对象常用的属性和方法
定义和用法:
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substring() 方法返回的子串包括 开始 处的字符,但不包括 结束 处的字符。
语法:string.substring(from, to)
参数
描述
from
必需。一个非负的整数,规定要提取的子串的第一个字符在 string Object 中的位置。
to
可选。一个非负的整数,比要提取的子串的最后一个字符在 string Object 中的位置多 1。
如果省略该参数,那么返回的子串会一直到字符串的结尾。
实例<script>
var str="Hello world!";
document.write(str.substring(3)+"
");
document.write(str.substring(3,7));
</script>
lo world!
lo w
定义和用法:
substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符。
提示: substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用。
注意: substr() 方法不会改变源字符串。
语法string.substr(start,length)
参数
描述
start
必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。
length
可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。
类型
描述
String
A new string containing the extracted part of the text
在本例中,我们将使用 substr() 从字符串第二个位置中提取一些字符:var str="Hello world!";
var n=str.substr(2)
llo world!
把一个字符串分割成字符串数组:var str="How are you doing today?";
var n=str.split(" ");
How,are,you,doing,today?
split() 方法用于把一个字符串分割成字符串数组。
提示: 如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
注意: split() 方法不改变原始字符串。
所有主要浏览器都支持 split() 方法
语法string.split(separator,limit)
参数
描述
separator
可选。字符串或正则表达式,从该参数指定的地方分割 string Object。
limit
可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
类型
描述
Array
一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 string Object 分割成子串创建的。返回的数组中的字串不包括 separator 自身。
var str="How are you doing today?";
var n=str.split();
How are you doing today?
var str="How are you doing today?";
var n=str.split("");
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
var str="How are you doing today?";
var n=str.split(" ",3);
How,are,you
var str="How are you doing today?";
var n=str.split("o");
H,w are y,u d,ing t,day?
3、标题栏滚动显示效果
定义和用法
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substring() 方法返回的子串包括 开始 处的字符,但不包括 结束 处的字符。
语法string.substring(from, to)
参数
描述
from
必需。一个非负的整数,规定要提取的子串的第一个字符在 string Object 中的位置。
to
可选。一个非负的整数,比要提取的子串的最后一个字符在 string Object 中的位置多 1。
所有主要浏览器都支持 substring() 方法
实例<script>
var str="Hello world!";
document.write(str.substring(3)+"
");
document.write(str.substring(3,7));
</script>
lo world!
lo w
定义和用法
substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符。
注意: substr() 方法不会改变源字符串。
所有主要浏览器都支持 substr() 方法string.substr(start,length)
参数
描述
start
必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。
length
可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。
类型
描述
String
A new string containing the extracted part of the text
在本例中,我们将使用 substr() 从字符串第二个位置中提取一些字符:var str="Hello world!";
var n=str.substr(2)
llo world!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题栏滚动</title>
</head>
<body>
<script>
var msg="欢迎来到网页特效,各种奇乐无限……";
function scrollTitle(){
document.title=msg;
msg=msg.substring(1,msg.length)+msg.substring(0,1);
}
setInterval("scrollTitle()",500);
</script>
</body>
</html>
4、form对象-表单
form(表单)对于每个Web开发人员来说,应该是再熟悉不过的东西了,它是页面与Web服务器交互过程中最重要的信息来源。表单form的常用属性和常用的控件input如下:
1.form action属性
action 属性规定当提交表单时,向何处发送表单数据。当提交表单时,发送表单数据到名为"a.php "的文件(处理输入):<form action="a.php " method="get" >
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
method属性可设置或者返回表单method属性值。制订了如何发送表单数据 (表单数据提交地址在action属性中指定)。<form action="a.php " method="get" >
学号: <input type="text" name="stuId">
<input type="submit" value="查询">
</form>
5、表单及其控件的访问
input控件
input表示form表单中的一种输入对象,其又随type类型的不同而分为文本输入框,type="password"为密码输入框,type=“radio”/type="checkbox"为单选/复选框,type="button"为普通按钮等。其中type=“text”,表示输入类型是文本框,输入单行文本,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等。当然这也是input的默认类型。input控件的常用属性如下:name
:同样是表示的该文本输入框名称。size
:输入框的长度大小。
maxlength
:输入框中允许输入字符的最大数。value
:输入框中的默认值,根据表单name属性值和文本框name属性值可以访问到文本框对象,再访问文本框value的属性就可以得到文本框中的值。这种方式同样使用于密码框,和下拉列表框。如下:表单名称.控件名称.value 或 表单名称.elements[下标] .value
readonly
:表示该框中只能显示,不能添加修改。placeholder
:是指文本框或处于未输入状态并且未获得光标焦点时,降低显示输入提示文字不透明度,
如搜索框效果:,由于placeholder是html5的新属性,仅支持html5的浏览器才支持placeholder。
onclick
和onsubmit
:type= "submit"
and type="reset"
,分别是“提交”和“重置”两按钮。submit主要功能是将form中所有内容进行提交action页处理,reset则起快速清空所有填写内容的功能。在表单中加上onsubmit="return false
;"可以阻止表单提交。
方法
意义
示例
reset()
将表单中各元素恢复到缺省值,与单击重置按钮(reset)的效果是一样的
myForm.reset()
submit()
提交表单,与单击提交按钮(submit)效果是一样的
myForm.submit()
方法
意义
blur()
让光标离开当前元素
focus()
让光标落到当前元素上
select()
用于种类为text,textarea,password的元素,选择用户输入的内容
click()
模仿鼠标单击当前元素
onfocus
:在表单元素收到输入焦点时触发;onblur
:在表单元素失去输入焦点时触发。如:文本框失去焦点时,以下代码将调用myfun()函数。<input type="text" value="" name="txtName" onblur ="myfun( )" >
6、input控件常用方法
表单控件元素对象的常用方法
方法
意义
blur()
让光标离开当前元素
focus()
让光标落到当前元素上
select()
用于种类为text,textarea,password的元素,选择用户输入的内容
click()
模仿鼠标单击当前元素
onfocus
:在表单元素收到输入焦点时触发;onblur
:在表单元素失去输入焦点时触发。如:文本框失去焦点时,以下代码将调用myfun()函数。<input type="text" value="" name="txtName" onblur ="myfun( )" >
7、下拉列表框的应用
Select 对象代表 HTML 表单中的一个下拉列表。
在 HTML 表单中, 标签每出现一次,一个 Select 对象就会被创建。
您可通过遍历表单的 elements[] 数组
来访问某个 Select 对象,或者使用 document.getElementById()
。
集合
描述
options[]
返回包含下拉列表中的所有选项的一个数组。
属性
描述
disabled
设置或返回是否应禁用下拉列表。
form
返回对包含下拉列表的表单的引用。
id
设置或返回下拉列表的 id。
length
返回下拉列表中的选项数目。
multiple
设置或返回是否选择多个项目。
name
设置或返回下拉列表的名称。
selectedIndex
设置或返回下拉列表中被选项目的索引号。
size
设置或返回下拉列表中的可见行数。
tabIndex
设置或返回下拉列表的 tab 键控制次序。
type
返回下拉列表的表单类型。
方法
描述
add()
向下拉列表添加一个选项。
blur()
从下拉列表移开焦点。
focus()
在下拉列表上设置焦点。
remove()
从下拉列表中删除一个选项。
事件句柄
描述
onchange
当改变选择时调用的事件句柄。
8、表单简单验证
数据验证
数据验证用于确保用户输入的数据是有效的。必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?
HTML5 新增了 HTML 表单的验证方式:约束验证(constraint validation)。
约束验证是表单被提交时浏览器用来实现验证的一种算法。
属性
描述
disabled
规定输入的元素不可用
max
规定输入元素的最大值
min
规定输入元素的最小值
pattern
规定输入元素值的模式
required
规定输入元素字段是必需的
type
规定输入元素的类型
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单简单验证</title>
</head>
<body>
<h1>JavaScript 验证数字输入</h1>
<p>请输入 1 到 10 之间的数字:</p>
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// 获取 id="numb" 的值
x = document.getElementById("numb").value;
// 如果输入的值 x 不是数字或者小于 1 或者大于 10,则提示
// 错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = "输入正确";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单简单验证</title>
</head>
<body>
<h2>用户登录</h2>
<form name="cform" method="post" action="123.php" onsubmit="return checkForm();">
用户账号: <input name="user"><br />
用户密码: <input name="pass" type="password"><br />
<input type="submit" value="验 证">
</form>
<script>
function checkForm() {
var user = cform.user.value;
var pass = cform.pass.value;
if (user.length < 2) {
alert("用户名不少于2位");
return false;
}
var str_temp = user.substr(0, 1);
if (!((str_temp >= "a" && str_temp <= "w") || (str_temp >= "A" && str_temp <= "W"))) {
alert("用户名第一个字符需为字母!");
return false;
}
if (pass.length < 6 || pass.length > 15) {
alert("密码长度须在6-15之间!");
return false;
}
return true;
}
</script>
</body>
</html>
第三章 常用内置对象-综合案例
1、正则表达式实现表单严谨验证
什么是正则表达式?
正则表达式(英语:Regular Expression,RegExp是正则表达式的缩写。)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。RegExp对象用于存储检索模式。正则表达式主要用来验证客户端的输入数据,可以节约大量的服务器端的系统资源,并且提供更好的用户体验。而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。正则表达式可以:
例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。
可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字。
可以用来在文本或输入字段中查找特定文字。
/正则表达式主体/修饰符(可选)
一个正则表达式就是由普通字符(例如字符a到z)以及特殊字符(称为元字符)组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。 var re=http://;
//只写两斜杠,浏览器会认为是注释,所以尽量不要
//给他为空,注意两斜杠之间不要有引号
var re=new RegExp(); //Reg是正则的简写,Exp是表达式的简写
注:全称写法用到\时,需要两个\,否则是转义字符
^ 为匹配输入字符串的开始位置。
[0-9]+匹配多个数字, [0-9] 匹配单个数字,+ 匹配一个或者多个。
abc$匹配字母 abc 并以 abc 结尾,$ 为匹配输入字符串的结束位置。
正则表达式中常用符号
正则表达式中的方括号用于查找某个范围内的字符。
表达式
描述
[abc]
查找方括号之间的任何字符。
[^abc]
查找任何不在方括号之间的字符。
[0-9]
查找任何从 0 至 9 的数字。
[a-z]
查找任何从小写 a 到小写 z 的字符。
[A-Z]
查找任何从大写 A 到大写 Z 的字符。
表达式
描述
.
匹配除换行符以外的任意字符
\w
匹配字母或数字或下划线
\s
匹配任意的空白符
\d
匹配数字
\b
匹配单词的开始或结束
^
匹配字符串的开始
$
匹配字符串的结束
表达式
描述
*
重复零次或更多次
+
重复一次或更多次
?
重复零次或一次
{n}
重复n次
{n,}
重复n次或更多次
{n,m}
重复n到m次
表达式
描述
\W
匹配任意不是字母,数字,下划线,汉字的字符
\S
匹配任意不是空白符的字符
\D
匹配任意非数字的字符
\B
匹配不是单词开头或结束的位置
[^x]
匹配除了x以外的任意字符
[^aeiou]
匹配除了aeiou这几个字母以外的任意字符
\.
和\*
。当然,要查找\本身,也得用\\
, 例如:unibetter\.com匹配unibetter.com
,C:\\Windows匹配C:\Windows
。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式严谨验证</title>
</head>
<body>
<h2>用户登录</h2>
<form name="cform" method="post" action="123.php" onsubmit="return checkForm();">
用户账号: <input name="user"><br />
用户密码: <input name="pass" type="password"><br />
<input type="submit" value="验 证">
</form>
<script>
function checkForm() {
var user = cform.user.value;
var pass = cform.pass.value;
//验证账号是否合法
//验证规则:字母、数字和下划线组成,字母开头,4-16位
if(!(/^[a-zA-Z]\w{3,15}$/.test(user))){
alert("用户账号是由字母、数字和下划线组成,字母开头,4-16位");
// 选中user选框内容
cform.user.select();
return false;
}
//验证密码是否合法
//验证规则:字母、数字和下划线组成,4-16位
if(!(/^\w{4,16}$/.test(pass))){
alert("用户密码是由字母、数字和下划线组成,4-6位");
// 选中user选框内容
cform.pass.select();
return false;
}
return true;
}
</script>
</body>
</html>
2、综合案例-计算机功能实现
定义和用法
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
语法eval(string)
参数
描述
string
必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。
通过计算 string 得到的值(如果有的话)。
计算机实现代码:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器功能</title>
<style type="text/css">
#sDiv {
/*简易版计算器布局及样式参考*/
text-align: center;
border: solid 1px;
width: 200px;
border-radius: 15px;
margin: 10px;
padding: 2px;
background-color: lavenderblush;
}
#t {
border: solid 1px;
width: 150px;
border-radius: 15px;
margin: 10px 0;
font-size: 20px;
padding: 0 3px;
}
input[type=button] {
border-radius: 15px;
width: 30px;
height: 30px;
margin: 2px;
font-size: 20px;
}
#equ {
width: 80px;
font-size: 26px;
padding-bottom: 30px;
}
</style>
</head>
<body>
<div id="sDiv">
<input type="text" name="t" id="input-box" value="0" /><br />
<input type="button" name="" id="" value="1" onclick="a('1')" />
<input type="button" name="" id="" value="2" onclick="a('2')" />
<input type="button" name="" id="" value="3" onclick="a('3')" />
<input type="button" name="" id="" value="4" onclick="a('4')" /><br />
<input type="button" name="" id="" value="5" onclick="a('5')" />
<input type="button" name="" id="" value="6" onclick="a('6')" />
<input type="button" name="" id="" value="7" onclick="a('7')" />
<input type="button" name="" id="" value="8" onclick="a('8')" /><br />
<input type="button" name="" id="" value="9" onclick="a('9')" />
<input type="button" name="" id="" value="0" onclick="a('0')" />
<input type="button" name="" id="" value="." onclick="a('.')" />
<input type="button" name="" id="" value="←" onclick="operator('backspace')" /><br />
<input type="button" name="" id="" value="+" onclick="a('+')" />
<input type="button" name="" id="" value="-" onclick="a('-')" />
<input type="button" name="" id="" value="*" onclick="a('*')" />
<input type="button" name="" id="" value="/" onclick="a('/')" /><br />
<input type="button" name="" id="" value="+/-" onclick="operator('opposite')" />
<input type="button" name="" id="" value="%" onclick="operator('percent')" />
<input type="button" name="" id="" value="X²" onclick="operator('pow')" />
<input type="button" name="" id="" value="√" onclick="operator('sqrt')" /><br />
<input type="button" name="" id="equ" value="C" onclick="s(' ')" />
<input type="button" name="" id="equ" value="=" onclick="e()" />
</div>
<script>
input = document.getElementById('input-box');
function s(v) {
input.value = v
}
function a(v) {
input.value += v
}
function e() {
try {
s(eval(input.value))
} catch (e) {
s('Error')
}
}
function operator(type) {
switch (type) {
case "backspace":
var str = input.value;
//str = (str != "0") ? str : "";
str = str.substr(0, str.length - 1);
str = (str != "") ? str : "0";
input.value = str;
break;
case "opposite":
input.value = -input.value;
break;
case "percent":
input.value = input.value / 100;
break;
case "pow":
input.value = Math.pow(input.value, 2);
break;
case "sqrt":
input.value = Math.sqrt(input.value);
break;
}
}
</script>
</body>
</html>
3、案例拓展-计算机功能拓展
定义和用法:
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
语法:stringObject.replace(regexp/substr,replacement)
参数
描述
regexp/substr
必需。规定子字符串或要替换的模式的 RegExp 对象。注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。
replacement
必需。一个字符串值。规定了替换文本或生成替换文本的函数。
一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。/*使用 replace 替换匹配到的数据*/
var pattern = /gift/ig;
var str = 'This is a Gift order!,That is a Gift order too';
alert(str.replace(pattern, 'simple')); //将 Gift 替换成了 simple
input.value=input.value.replace(/.$/,'');
//正则表达式实现回退功能
定义和用法:
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法:stringObject.substring(start,stop)
参数
描述
start
必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
stop
可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。
返回值
一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop减 start。
说明
提示和注释
代码<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器功能拓展</title>
<style type="text/css">
#sDiv,#show {
/*简易版计算器布局及样式参考*/
text-align: center;
border: solid 1px;
width: 200px;
border-radius: 15px;
margin-left: 20px;
padding: 2px;
background-color: lavenderblush;
}
#show{
height: 56px;
overflow: hidden;
}
#t {
border: solid 1px;
width: 150px;
border-radius: 15px;
margin: 10px 0;
font-size: 20px;
padding: 0 3px;
}
input[type=button] {
border-radius: 15px;
width: 30px;
height: 30px;
margin: 2px;
font-size: 20px;
}
#equ {
width: 80px;
font-size: 26px;
padding-bottom: 30px;
}
</style>
</head>
<body>
<div id="show">
<div id="showme"></div>
</div>
<div id="sDiv">
<input type="text" name="t" id="input-box" value="0" /><br />
<input type="button" name="" id="" value="1" onclick="a('1')" />
<input type="button" name="" id="" value="2" onclick="a('2')" />
<input type="button" name="" id="" value="3" onclick="a('3')" />
<input type="button" name="" id="" value="4" onclick="a('4')" /><br />
<input type="button" name="" id="" value="5" onclick="a('5')" />
<input type="button" name="" id="" value="6" onclick="a('6')" />
<input type="button" name="" id="" value="7" onclick="a('7')" />
<input type="button" name="" id="" value="8" onclick="a('8')" /><br />
<input type="button" name="" id="" value="9" onclick="a('9')" />
<input type="button" name="" id="" value="0" onclick="a('0')" />
<input type="button" name="" id="" value="." onclick="a('.')" />
<input type="button" name="" id="" value="←" onclick="operator('backspace')" /><br />
<input type="button" name="" id="" value="+" onclick="a('+')" />
<input type="button" name="" id="" value="-" onclick="a('-')" />
<input type="button" name="" id="" value="*" onclick="a('*')" />
<input type="button" name="" id="" value="/" onclick="a('/')" /><br />
<input type="button" name="" id="" value="+/-" onclick="operator('opposite')" />
<input type="button" name="" id="" value="%" onclick="operator('percent')" />
<input type="button" name="" id="" value="X²" onclick="operator('pow')" />
<input type="button" name="" id="" value="√" onclick="operator('sqrt')" /><br />
<input type="button" name="" id="equ" value="C" onclick="s(' ')" />
<input type="button" name="" id="equ" value="=" onclick="e()" />
</div>
<script>
input = document.getElementById('input-box');
show=document.getElementById("show");
function s(v) {
input.value = v
}
function a(v) {
if(input.value=='0' && v=='0'){
input.value='0';
}
else if(input.value=='0' && v!='.'){
input.value=v;
}
else input.value += v;
}
function e() {
try {
if(show.offsetHeight>50){
t=show.innerHTML.indexOf('=
');
var str=show.innerHTML;
str=str.substr(t+5,str.length);
show.innerHTML=str;
}
show.innerHTML+=input.value+'=
';
s(eval(input.value));
} catch (e) {
s('Error')
}
}
function operator(type) {
switch (type) {
case "backspace":
var str = input.value;
//str = (str != "0") ? str : "";
str = str.substr(0, str.length - 1);
str = (str != "") ? str : "0";
input.value = str;
break;
case "opposite":
input.value = -input.value;
break;
case "percent":
input.value = input.value / 100;
break;
case "pow":
input.value = Math.pow(input.value, 2);
break;
case "sqrt":
input.value = Math.sqrt(input.value);
br
</script>
</body>
</html>
4、体彩11选5实现方案一
random() 方法可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数。Math.random();
<script type="text/javascript">
document.write(Math.random());
</script>
0.190305486195328
<script type="text/javascript">
document.write((Math.random())*10);
</script>
8.72153625893887
向下取整floor()
floor() 方法可对一个数进行向下取整。Math.floor(x)
<script type="text/javascript">
document.write(Math.floor(0.8)+ "
")
document.write(Math.floor(6.3)+ "
")
document.write(Math.floor(5)+ "
")
document.write(Math.floor(3.5)+ "
")
document.write(Math.floor(-5.1)+ "
")
document.write(Math.floor(-5.9))
</script>
0
6
5
3
-6
-6
JavaScript push() 方法
定义和用法
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
语法arrayObject.push(newelement1,newelement2,....,newelementX)
参数
描述
newelement1
必需。要添加到数组的第一个元素。
newelement2
可选。要添加到数组的第二个元素。
newelementX
可选。可添加多个元素。
把指定的值添加到数组后的新长度。
push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
提示和注释
实例<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "
")
document.write(arr.push("James") + "
")
document.write(arr)
</script>
George,John,Thomas
4
George,John,Thomas,James
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>体彩</title>
</head>
<body><img src="img/tc.png" />
<script>
var arr = []; //
var i=0;
function add() {
number = Math.floor(Math.random() * 11 + 1);
for (x in arr)
if (arr[x] == number)
return; //
arr[i]=number; //
i++;
arr.push(number)
}
do {
add();
} while (arr.length < 5) /*输出数组*/
for (x in arr)
if (arr[x] < 10)
arr[x] = '0' + arr[x];
document.write("
本期的幸运号码:"
, arr.join(" "), "");
</script>
</body>
</html>
5、体彩11选5实现方案二
概述:
在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。
定时器类型:
一次性定时器:仅在指定的延迟时间之后触发一次。
间隔性触发定时器:每隔一定的时间间隔就触发一次。
定时器方法:
setTimeout()定时器
概述:
setTimeout()定时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次。setTimeout(代码,延迟时间);
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>
概述:
setTimeout()和clearTimeout()一起使用,停止定时器。clearTimeout(id_of_setTimeout)
id_of_setTimeout:由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0,i;
function timedCount(){
document.getElementById('txt').value=num;
num=num+1;
i=setTimeout(timedCount,1000);
}
setTimeout(timedCount,1000);
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" value="Stop" onClick="stopCount()">
</form>
</body>
</html>
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>体彩</title>
<style type="text/css">
#box,#lucky{
font-family: "黑体";
font-size: 109px;
color: #138eee;
font-weight: 900;
}
#lucky{
color: darkred;
font-size: 60px;
}
</style>
</head>
<body>
<img src="img/tc.png" height="290px" />
<span id="box">开奖了</span>
<div id="lucky"></div>
<script>
var list=["01","02","03","04","05","06","07","08","09","10","11"];
var ar=[];
var box=document.getElementById("box");
var lucky=document.getElementById("lucky");
var count=8;//初始化count
function show(){
var num=Math.floor(Math.random()*list.length);
box.innerHTML=list[num];//显示随机号码
var mytime=null;
mytime=setTimeout("show()",1000);//跳动转换
count--;
if(count<0){
clearTimeout(mytime);
ar.push(list[num]);//添加数组元素
list.splice(num,1);//删除数组元素
lucky.innerHTML="本期幸运号码是:"+ar.join(" ");
if(ar.length<5){
count=8;
setTimeout("show()",1000)
}
else{
setTimeout("box.innerHTML=",1000)
}
}
}
show();
</script>
</body>
</html>
6、列表的隐藏
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?Object.style.property=new style;
注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
改变元素的可见性 :
上述案例增加代码:mychar.style.display=“none”;//改变元素的可见性,隐藏元素,设为block变为显示元素Object.style.display = value
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隐藏列表</title>
<style type="text/css">
body,
div,
ul,
li,
h2 {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 Tahoma;
}
ul {
list-style-type: none;
}
#outer {
width: 200px;
border: 1px solid #aaa;
margin: 10px auto;
}
#outer h2 {
cursor: pointer;
color: #57646E;
font-size: 14px;
font-weight: 400;
border: 1px solid;
height: 30px;
line-height: 30px;
padding-left: 10px;
border-color: #fff #e9edf2;
}
#outer ul {
border-top: 1px solid #DEE3E6;
}
#outer li {
height: 25px;
line-height: 25px;
vertical-align: top;
}
#outer a {
display: block;
color: #6b7980;
background: #e9edf2;
text-decoration: none;
padding: 0 10px;
}
#outer a:hover {
background: #fff;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="outer">
<h2>播放列表</h2>
<ul>
<li><a href="#">列表1</a></li>
<li><a href="#">列表2</a></li>
<li><a href="#">列表3</a></li>
<li><a href="#">列表4</a></li>
</ul>
</div>
<script>
window.onload = function() { //匿名函数
var oh2 = document.getElementsByTagName("h2")[0];
var oul = document.getElementsByTagName("ul")[0];
oh2.onclick = function() {
var style = oul.style;
style.display = style.display == "none" ? "block" : "none";
}
}
</script>
</body>
</html>
第四章 自定义对象及表格操作-操作表格
1、自定义对象的创建
function Person(name, age){
this.name = name;
this.age = age;
this.speak = function(){
alert(this.name + "is " + this.age + "years old");
}
}
var person1 = new Person("Lily ", 19);
var person2 = new Person("Jack", 18);
console.log(person2 instanceof Person);
// true, 判断person2是否是Person的实例
函数名首写字母为大写(按照惯例,构造函数的首写字母用大写);
没有显示的创建对象;
直接将属性和方法赋值给了this对象;
没有return语句;
使用new创建对象;
能够识别对象(这正是构造函数模式胜于工厂模式的地方)。
好用
,但也并非没有缺点,使用构造函数的最大的问题在于每次创建实例的时候都要重新创建一次方法
(理论上每次创建对象的时候对象的属性均不同,而对象的方法是相同的),也就是说,构造函数内的方法是与对象绑定的。下面代码的输出可以验证我们的推断:alert(person1.speak == person2.speak); // false
解决这个缺点的一种比较简单的方法就是将函数的声明放到构造函数的外面
,如下:function Person(name, age){
this.name = name;
this.age = age;
this.speak = speak;
}
function speak(){
alert(this.name + "is " + this.age + "years old");
}
var person1 = new Person("Lily", 19);
var person2 = new Person("Jack", 18);
alert(person1.speak == person2.speak); // true
创建的每个函数都有prototype(原型)属性,这个属性会被对象副本所继承,这样创建新对象时不用重复已有的属性、方法,节省了内存空间。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性及方法
。function Person(){}
Person.prototype.name="Lily";
Person.prototype.age=19;
Person.prototype.speak = function(){
alert(this.name + "is " + this.age + "years old");
}
var person1 = new Person();
person1.speak();
var person2 = new Person();
alert(person1.speak == person2.speak); // true
但这还不是原型的最大问题,原型模式的最大问题在于共享的本性所导致的,由于共享,因此一个实例修改了引用,另一个也随之更改了引用。因此通常不单独使用原型,而是结合原型模式与构造函数模式。
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.speak = function(){
alert(this.name + "is " + this.age + "years old");
}
var person1 = new Person();
person1.speak();
var person2 = new Person();
alert(person1.speak == person2.speak); // true
用于定义实例属性
,而原型模式用于定义方法和共享属性。每个实例都会有自己的一份实例属性,但同时又共享着方法,最大限度的节省了内存。示例中因为只创建speak()函数的一个实例,所以没有内存浪费。另外这种模式还支持传递初始参数。优点甚多。这种模式在ECMAScript中是使用最广泛、认同度最高的一种创建自定义对象的方法。所有的非函数属性都由构造函数创建,意味着又可用构造函数的参数赋予属性默认值了。
有面向对象编程经验的开发人员可能会觉得将prototype的声明放在构造函数外面有点别扭,动态原型模式可以实现方法放到构造函数里去。function Person(name, age){
this.name = name;
this.age = age;
if (Person.prototype.speak == "undefined"){ //这段代码只执行了一次
alert('exe time');
Person.prototype.speak = function(){
alert(this.name + "is " + this.age + "years old");
}
}
}
var person1 = new Person();
var person2 = new Person()
混合的构造函数/原型方式
**。些外,动态原型方法也很流行,在功能上与前者等价,可以采用这两种方式中的任何一种。2、动态增加表格的行和单元格
Javascript可以控制table,动态的插入行和单元格。rows保存着元素中行的HTMLCollection。tableObject.insertRow(index)
table.insertRow(),默认添加到最后一行,统计行数:table.rows.length
insertCell(pos) 向cells集合的指定位置插入一个单元格,并返回引用;
table.insertCell(),默认添加到最后一列
table.rows.item(0).cells.length,统计列数
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态增加表格的行和单元格</title>
</head>
<body>
<table id="info" align="center" width="300">
<caption>学生基本信息统计表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
<button onclick="add()">add</button>
<script>
var tab = document.getElementById("info");
var tb = tab.border = "1";
function add() {
var r = tab.insertRow();
var c1 = r.insertCell(0);
c1.innerHTML = "0001";
var c2 = r.insertCell(1);
c2.innerHTML = "小明";
var c3 = r.insertCell(2);
c3.innerHTML = "16";
}
</script>
</body>
</html>
3、动态删除表格的行
语法:table.deleteRow(index) 用来删除指定位置的行。
row.deleteCell(index) 用来/删除指定位置的单元格;
DOM方法:removeChild(node)用来删除子节点(元素);
parentNode 用来获取节点(元素)的父节点。
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态删除表格的行</title>
<script>
function del(a){
var index=a.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(index);
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>hang1</td>
<td><input type="button" value="del" onclick="del(this)"></td>
</tr>
<tr>
<td>hang1</td>
<td><input type="button" value="del" onclick="del(this)"></td>
</tr>
<tr>
<td>hang1</td>
<td><input type="button" value="del" onclick="del(this)"></td>
</tr>
</table>
</body>
</html>
第四章 自定义对象及表格操作-综合案例(续)
1、单选框的应用
Radio 对象代表 HTML 表单中的单选按钮。 每出现一次,一个 Radio 对象就会被创建。
遍历表单的 elements[] 数组
来访问 Radio 对象,或者通过使用 document.getElementById()
。更多的是通过元素对象的name属性获取,如下:document.getElementsByName(nodeName)
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单选框的应用</title>
</head>
<body>
<form action="#" method="get" name="myForm1">
<p>你最喜欢做的事情是:</p>
<p>
<input type="radio" name="hobby" value="001" />
<label for="001">001</label>
</p>
<p>
<input type="radio" name="hobby" value="002" />
<label for="002">002</label>
</p>
<p>
<input type="radio" name="hobby" value="003" />
<label for="003">003</label>
</p>
<p>
<input type="button" value="获得选中项" onclick="getChoice()" />
<input type="button" value="设置首选项" onclick="setChoice(0)" />
</p>
</form>
<script>
var oForm = document.forms["myForm1"]; //获得name的属性值
//根据索引号 document.forms[0]
//根据name值 document.myForm1.
var aChoices = oForm.hobby;
//获得选中项
function getChoice() {
for (i = 0; i < aChoices.length; i++) {
if (aChoices[i].checked) {
alert("您选中的是" + aChoices[i].value);
break;
}
}
}
function setChoice(x) {
oForm.hobby[x].checked = true; //其他选项会默认为false
}
//设置首选项
</script>
</body>
</html>
2、复选框的应用
语法:document.getElementsByName(nodeName)
<label>
<input type="radio" name="gender" value="男" checked="checked" />男
</label>
<label>
<input type="radio" name="gender" value="女" />女
</label>
<label>
<input type="checkbox" name="hobby" value="足球" />足球
</label>
<label>
<input type="checkbox" name="hobby" value="篮球" />篮球
</label>
<label>
<input type="checkbox" name="hobby" value="乒乓球" checked="checked" />乒乓球
</label>
<input type="button" value="show" onclick="show()"/>
<input type="button" value="全选" onclick="changeBoxes(1);" />
<input type="button" value="全不选" onclick="changeBoxes(0);" />
<input type="button" value="反选" onclick="changeBoxes(-1);" />
<div id="info"></div>
function show()
{
var oRadio= document.getElementsByName("gender");
//根据name属性获取单选按钮组
var s="我是";
var info=document.getElementById("info");
if(oRadio [0].checked==true)
s+=oRadio[0].value;
//单选按钮组的第一个元素
else
s+=oRadio[1].value;
var oCheckbox= document.getElementsByName("hobby");
s+="生,喜欢";
for(var i=0;i<oCheckbox.length;i++)
if(oCheckbox[i].checked==true)
s+=oCheckbox[i].value+",";
info.innerHTML=s;
}
function changeBoxes(action)
{
//实现全选、反选、全不选效果
var oCheckbox=document.getElementsByName("hobby");
//根据name属性获取复选按钮组,再遍历每个
for(var i=0;i<oCheckbox.length;i++)
if(action<0)
oCheckbox[i].checked=!oCheckbox[i].checked;
else
oCheckbox[i].checked=action;
}
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框的应用</title>
<script>
function changBoxes(action){
var oForm=document.forms["myForm1"];
// document.forms[0]; document.myForm1
var oCheckBox=oForm.hobby;
for(var i=0;i<oCheckBox.length;i++){
if(action<0){
oCheckBox[i].checked=!oCheckBox[i].checked;
}
else{
oCheckBox[i].checked=action;
}
}
}
</script>
</head>
<body>
<form name="myForm1">
<p>你喜欢做的事情:</p>
<p>
<input type="checkbox" name="hobby" id="ball" value="ball" />
<label for="ball">打球</label>
</p>
<p>
<input type="checkbox" name="hobby" id="dance" value="dance" />
<label for="dance">跳舞</label>
</p>
<p>
<input type="checkbox" name="hobby" id="sing" value="sing" />
<label for="sing">唱歌</label>
</p>
<p>
<input type="checkbox" name="hobby" id="game" value="game" />
<label for="game">玩游戏</label>
</p>
<p>
<input type="checkbox" name="hobby" id="read" value="read" />
<label for="read">阅读</label>
</p>
<p>
<input type="checkbox" name="hobby" id="other" value="other" />
<label for="other">其他</label>
</p>
</form>
<p>
<button id="all" onclick="changBoxes(1)">全选</button>
<button id="none" onclick="changBoxes(0)">全不选</button>
<button id="reserve" onclick="changBoxes(-1)">反选</button>
</p>
</body>
</html>
3、复选框应用在表格上
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function all_check() {
var allCheck = document.getElementById("all"); //全选复选框
var oInput = document.getElementsByName("ic"); //复选框
for (var i = 0; i < oInput.length; i++) {
if (allCheck.checked == true) {
oInput[i].checked = true;
} else {
oInput[i].checked = false;
}
}
}
function sigle_check() {
var allCheck = document.getElementById("all"); //全选复选框
var oInput = document.getElementsByName("ic"); //复选框
var j = 0;
for (var i = 0; i < oInput.length; i++) {
if (oInput[i].checked == true) {
j++;
}
}
if (j == oInput.length) {
allCheck.checked = true;
} else {
allCheck.checked = false;
}
}
</script>
</head>
<body>
<table border="1">
<caption>
<h2>请选择前端设计参考书</h2>
</caption>
<tr style="font-weight: bold;">
<td>
<input id="all" type="checkbox" value="全选" onclick="all_check()" />全选
</td>
<td>书名</td>
<td>价格</td>
<td>数量</td>
</tr>
<tr>
<td>
<input name="ic" type="checkbox" value="1" onclick="sigle_check()" />
</td>
<td>JavaScript入门与提高</td>
<td>39</td>
<td>6</td>
</tr>
<tr>
<td>
<input name="ic" type="checkbox" value="2" onclick="sigle_check()" />
</td>
<td>JavaScript入门与提高</td>
<td>39</td>
<td>6</td>
</tr>
<tr>
<td>
<input name="ic" type="checkbox" value="3" onclick="sigle_check()" />
</td>
<td>JavaScript入门与提高</td>
<td>39</td>
<td>6</td>
</tr>
<tr>
<td>
<input name="ic" type="checkbox" value="4" onclick="sigle_check()" />
</td>
<td>JavaScript入门与提高</td>
<td>39</td>
<td>6</td>
</tr>
<tr>
<td>
<input name="ic" type="checkbox" value="5" onclick="sigle_check()" />
</td>
<td>JavaScript入门与提高</td>
<td>39</td>
<td>6</td>
</tr>
<tr>
<td colspan="4"><b>删除</b></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除多行</title>
<style>
table{
width: 600px;
border: 1px solid #007108;
background-color: #d9ffdc;
text-align: center;
padding: 5px;
}
th{
background-color: #00a40c;
color: #FFF;
padding: 5px;
border-color: #030;
}
td{
border-color: #030;
}
</style>
</head>
<body>
<form>
<table id="list" border="1">
<caption style="font-weight: bold;">我的购物车</caption>
<tr>
<th><input type="checkbox" id="all" onclick="all_check()">全选</th>
<th>商品</th>
<th>价格</th>
<th>数量</th>
</tr>
<tr>
<td><input type="checkbox" name="ic" onclick="sigle_check()"> </td>
<td>商品1</td>
<td>29</td>
<td>6</td>
</tr>
<tr>
<td><input type="checkbox" name="ic" onclick="sigle_check()"> </td>
<td>商品1</td>
<td>29</td>
<td>6</td>
</tr>
<tr>
<td><input type="checkbox" name="ic" onclick="sigle_check()"> </td>
<td>商品1</td>
<td>29</td>
<td>6</td>
</tr>
<tr>
<td colspan="4" align="center"><span onclick="removeRow()">删除</span></td>
</tr>
</table>
</form>
<script>
function all_check() {
var allCheck = document.getElementById("all"); //全选复选框
var oInput = document.getElementsByName("ic"); //复选框
for (var i = 0; i < oInput.length; i++) {
if (allCheck.checked == true) {
oInput[i].checked = true;
} else {
oInput[i].checked = false;
}
}
}
function sigle_check() {
var allCheck = document.getElementById("all"); //全选复选框
var oInput = document.getElementsByName("ic"); //复选框
var j = 0;
for (var i = 0; i < oInput.length; i++) {
if (oInput[i].checked == true) {
j++;
}
}
if (j == oInput.length) {
allCheck.checked = true;
} else {
allCheck.checked = false;
}
}
function removeRow() {
var oInput = document.getElementsByName("ic"); //复选框
var tab = document.getElementById("list");
if (confirm("确定要删除吗?")) {
for (var i = 0; i < oInput.length; i++) {
if (oInput[i].checked == true) {
tab.deleteRow(i + 1);
i = -1;
}
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>焦点行高亮效果</title>
<style>
table {
border: 1px solid #007108;
border-collapse: collapse; //边框重叠
background-color: #d9ffdc;
font-size: 14px;
text-align: center;
padding: 5px;
}
th {
background-color: #00a40c;
color: #FFFFFF;
}
</style>
</head>
<body>
<table id="oTable" align="center" width="300" border="1">
<caption>学生基本信息统计表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>0000001</td>
<td>小明</td>
<td>19</td>
</tr>
<tr>
<td>0000001</td>
<td>小明</td>
<td>19</td>
</tr>
<tr>
<td>0000001</td>
<td>小明</td>
<td>19</td>
</tr>
</table>
<script>
var oTable = document.getElementById("oTable");
for (var i = 0; i < oTable.rows.length; i++) {
oTable.rows[i].onmouseover = function() {
this.bgColor = "#ddd";
}
oTable.rows[i].onmouseout = function() {
this.bgColor = "#d9ffdc";
}
}
</script>
</body>
</html>
第五章 BOM和DOM-基础
1、认识浏览器对象模型
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari:
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
Document对象的body属性对应HTML文档的标签
• document.body.clientHeight
• document.body.clientWidth
var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight ||
document.body.clientHeight;
scrollHeight和scrollWidth,获取网页内容高度和宽度。
scrollHeight 是网页内容实际高度,可以小于 clientHeight。
scrollHeight 是网页内容高度,不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,scrollHeight 返回 clientHeight 。
var w=document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight || document.body.scrollHeight;
注意:区分大小写
offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。
offsetHeight = clientHeight + 滚动条 + 边框。
var w= document.documentElement.offsetWidth || document.body.offsetWidth; var h= document.documentElement.offsetHeight || document.body.offsetHeight;
我们先来看看下面的图:
scrollLeft
:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。
scrollTop
:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。
offsetLeft
:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop
:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。
1.区分大小写
2.offsetParent:布局中设置postion属性(Relative、Absolute、fixed)的父容器,从最近的父节点开始,一层层向上找,直到HTML的body。
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打开广告窗口并更改其属性</title>
</head>
<body>
<button onclick="mkNewWindow()">打开新窗口</button>
<script>
function mkNewWindow() {
newWindow = window.open('', 'new', 'width=770,height=380');
newWindow.document.write('');
newWindow.document.body.style.margin = 0;
newWindow.document.title = "招标";
newWindow.focus();
newWindow.opener.document.write("这是父窗口");
}
</script>
</body>
</html>
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹出及关闭小窗口</title>
<script>
window.onload=function(){
window.open('adv.html','_blank','width=499px,
height=194px,top=100px,left=120px');
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<img src="img/open.gif" width="499" height="194">
</div>
<script type="text/javascript">
window.onload=function(){
setTimeout("this.close()",8000);
}
</script>
</body>
</html>
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面滚动</title>
<style>
#container {
text-align: center;
height: 2000px;
}
</style>
</head>
<body>
<div id="container">
<img src="img/open.gif">
</div>
<script>
function myWinScroll() {
window.scrollBy(0, 20);
setTimeout("myWinScroll()", 1000);
}
myWinScroll();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面居中</title>
<style>
#login {
position: absolute;
}
</style>
</head>
<body>
<div id="login">
<img src="img/login.gif" />
</div>
<script>
function show() {
//获取浏览器窗口的尺寸
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// document.getElementById("show").innerHTML="浏览器窗口宽为"+w+",高为"+h;
var login = document.getElementById("login");
var top = (h - 396) / 2;
var left = (w - 360) / 2;
login.style.top = top + "px";
login.style.left = left + "px";
setTimeout("show()", 1000);
}
show();
</script>
</body>
</html>
2、window子对象
history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。window.history.[属性|方法]
<script type="text/javascript">
var HL = window.history.length;
document.write(HL);
</script>
back()方法,加载 history 列表中的前一个 URL。
语法:window.history.back();
window.history.back();
window.history.go(-1);
forward()方法,加载 history 列表中的下一个 URL。
window.history.forward();
forward()相当于go(1),代码如下:window.history.go(1);
go()方法,根据当前所处的页面,加载 history 列表中的某个具体的页面。
语法:window.history.go(number);
window.history.go(-2);
同理,返回当前页面之后浏览过的第三个历史页面,代码如下:window.history.go(3);
location用于获取或设置窗体的URL,并且可以用于解析URL。location.[属性|方法]
location 对象方法:
Navigator对象
Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。<script type="text/javascript">
var browser=navigator.appName;//浏览器名称
var b_version=navigator.appVersion;//版本号
document.write("Browser name"+browser);
document.write("
");
document.write("Browser version"+b_version);
</script>
返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)navigator.userAgent
screen对象用于获取用户的屏幕信息。window.screen.属性
屏幕分辨率的高和宽
window.screen 对象包含有关用户屏幕的信息。
1 screen.height 返回屏幕分辨率的高
2 screen.width 返回屏幕分辨率的宽
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。
我们来获取屏幕的高和宽,代码如下:<script type="text/javascript">
document.write( "屏幕宽度:"+screen.width+"px
" );
document.write( "屏幕高度:"+screen.height+"px
" );
</script>
1.screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如任务栏。
2.screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如任务栏。
不同系统的任务栏默认高度不一样,及任务栏的位置可在屏幕上下左右任何位置,所以有可能可用宽度和高度不一样。<script type="text/javascript">
document.write("可用宽度:" + screen.availWidth);
document.write("可用高度:" + screen.availHeight);
</script>
使用userAgent判断使用的是什么浏览器(假设使用的是谷歌浏览器),代码如下:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>检测浏览器</title>
</head>
<body>
<script>
function validB() {
var u_agent = navigator.userAgent;
var B_name = "Failed to identify the browser";
if (u_agent.indexOf("Firefox") > -1) {
B_name = "Firefox";
} else if (u_agent.indexOf("Chrome") > -1) {
B_name = "Chrome";
} else if (u_agent.indexOf("MSIE") > -1 && u_agent.indexOf("Trident") > -1) {
B_name = "IE(8-10)";
}
document.write("B_name:" + B_name + "
"); //浏览器名称
document.write("u_agent:" + u_agent + "
");
}
validB()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>检测浏览器</title>
</head>
<body>
<script>
function validB() {
var u = navigator.userAgent.toLowerCase();
var info = {
ie: /msie/.test(u) || /trident/.test(u),
op: /opera/.test(u),
sa: /version.*safari/.test(u),
ch: /chrome/.test(u),
ff: /gecko/.test(u) && /firefox/.test(u)
};
if (info.ie) {
document.write("B_name: ie
"); //浏览器名称
}
if (info.ff) {
document.write("B_name: 火狐
"); //浏览器名称
}
if (info.ch) {
document.write("B_name: 谷歌
"); //浏览器名称
}
}
validB()
</script>
</body>
</html>
3、初识文档对象及DOM节点访问
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
HTML文档可以说由节点构成的集合,DOM节点有:
1 元素节点:上图中、
、
等都是元素节点,即标签。
2.文本节点:向用户展示的内容,如
中的JavaScript、DOM、CSS等文本。
3.属性节点:元素属性,如标签的链接属性href=“https://www.imooc.com”。
以上图ul为例,它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。
DOM操作:
注意:前两个是document方法。
在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的**
1.nodeName : 节点的名称
2. nodeValue :节点的值
3. nodeType :节点的类型
1.元素节点的 nodeName 与标签名相同
2.属性节点的 nodeName 是属性的名称
3.文本节点的 nodeName 永远是 #text
4.文档节点的 nodeName 永远是 #document
1.元素节点的 nodeValue 是 undefined 或 null
2.文本节点的 nodeValue 是文本自身
3.属性节点的 nodeValue 是属性的值元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM对象节点类型</title>
</head>
<body>
<span id="s1">11</span>
<script>
var sp = document.getElementById("s1");
//1、元素节点的三个属性
alert(sp.nodeType);# 1
alert(sp.nodeName); //节点名:span
alert(sp.nodeValue); //元素节点没有nodeValue,null
alert(document.nodeType);//9
//2、属性节点
var Attr = document.getElementById("s1").getAttributeNode("id");
alert(Attr.nodeType); // 属性节点 2
alert(Attr.nodeName); //属性节点的节点名:属性值id
alert(Attr.nodeValue); //属性节点的nodeValue,s1
//3、文本节点
var textNode = sp.firstChild;
alert(textNode.nodeType);// 文本节点 3
alert(textNode.nodeName); //节点名:#text
alert(textNode.nodeValue); //文本节点的nodeValue,属性值:文本值本身11
//nodeType nodeName是只读的 nodeValue是可以编辑的
//以上三个属性值,文本节点的nodeValue使用得最多
</script>
</body>
</html>
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素的innerText,innerHtml,outerText,outerHtml</title>
</head>
<body>
<div id="test">
<span>test1</span>
test2
</div>
<script>
function test() {
var t = document.getElementById("test");
alert(t.innerHTML);
alert(t.innerText);
alert(t.outerHTML);
alert(t.outerText);
}
test();
document.getElementById("test").innerHTML = "年年有余";
test();
</script>
</body>
</html>
以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。
2. Name 是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类,getElementsByTagName获取相同类的人集合。如获取小孩这类人,getElementsByTagName(“小孩”)。<input type="checkbox" name="hobby" id="hobby1"> 音乐
name属性就像人的姓名。
id属性就像人的身份证。 <input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步
<input type="button" value = "全选" id="button1">
<input type="button" value = "全不选" id="button1">
2. document.getElementsByName(“hobby”),结果为获取属性name="hobby"的元素,共6个。
3. document.getElementById(“hobby6”),结果为获取属性id="hobby6"的元素,只有一个,"跑步"这个复选项。4、DOM操作
访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。elementNode.childNodes
如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。 UL子节点个数:3 节点类型:1
UL子节点个数:7 节点类型:3
1 IE全系列、firefox、chrome、opera、safari兼容问题
2 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7,如下图所示:
如果把代码改成这样:<ul>
<li>javascript</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
UL子节点个数:3 节点类型:1
语法:node.firstChild
语法:node.lastChild
获取指定节点的父节点
语法:elementNode.parentNode
<div id="text">
<p id="con"> parentNode 获取指点节点的父节点</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>
parentNode 获取指点节点的父节点 DIV
elementNode.parentNode.parentNode
<div id="text">
<p> parentNode
<span id="con"> 获取指点节点的父节点</span>
</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.parentNode.nodeName);
</script>
parentNode获取指点节点的父节点 DIV
1.nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。nodeObject.nextSibling
nodeObject.previousSibling
判断节点nodeType是否为1, 如是为元素节点,跳过。
运行结果:
LI = javascript nextsibling: LI = jquery
在指定节点的最后一个子节点列表之后添加一个新的子节点。appendChild(newnode)
newnode:指定追加的节点。
运行结果:HTML JavaScript This is a new p
insertBefore() 方法可在已有的子节点前插入一个新的子节点。insertBefore(newnode,node);
newnode: 要插入的新节点。
ode: 指定此节点前插入节点。
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。document.createElement(tagName)
tagName:字符串值,这个字符串用来指明创建元素的类型。<script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "创建一个按钮";
body.appendChild(input);
</script>
<script type="text/javascript">
var body= document.body;
var btn = document.createElement("input");
btn.setAttribute("type", "text");
btn.setAttribute("name", "q");
btn.setAttribute("value", "使用setAttribute");
btn.setAttribute("onclick", "javascript:alert('This is a text!');");
body.appendChild(btn);
</script>
createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。document.createTextNode(data)
data : 字符串值,可规定此节点的文本。
removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。nodeObject.removeChild(node)
node :必需,指定需要删除的节点。HTML 删除节点的内容: javascript
替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。node.replaceChild (newnode,oldnew )
newnode : 必需,用于替换 oldnew 的对象。
oldnew : 必需,被 newnode 替换的对象。
1.当 oldnode 被替换时,所有与之相关的属性内容都将被移除。
2.newnode 必须先被建立。第五章 BOM和DOM-综合案例及拓展
1、DOM优化和DOM事件
案例优化 js生成无序列表<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js生成无序列表</title>
</head>
<body>
<ul id="list">
</ul>
<script>
var list = document.getElementById("list");
//不好
/* for (var i = 0; i < 6; i++) {
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option" + i));
list.appendChild(item);
} */
// 比较好
var fragment=document.createDocumentFragment();//文档片段
for(var i=0;i<6;i++){
var item=document.createElement("li");
item.appendChild(document.createTextNode("Option" + i));
fragment.appendChild(item);
}
list.appendChild(fragment);
</script>
</body>
</html>
什么是事件
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
光标聚焦事件(onfocus)
当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行。
失焦事件(onblur)
onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。
运行结果:
文本框内容改变事件(onchange)
通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。
运行结果:
加载事件(onload)
事件会在页面加载完成后,立即发生,同时执行被调用的程序。
注意:
1.加载页面时,触发onload事件,事件写在标签内。
2. 此节的加载页面,可理解为打开一个新页面时。
如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”。
运行结果:
案例 DOM节点对象的事件处理<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM节点对象的事件处理</title>
<style>
.red {
color: #FFFFFF;
background-color: red;
}
p {
padding: 5px;
margin: 2px;
background-color: #FF9;
border: 1px solid #093;
}
</style>
</head>
<body>
<script>
for (var i = 0; i < 5; i++) {
var p = document.createElement("p");
p.onmouseover = function() {
this.className = "red";
}
p.onmouseout = function() {
this.className = "";
}
var text = document.createTextNode("行内元素" + i);
p.appendChild(text);
document.body.appendChild(p);
}
</script>
</body>
</html>
2、DOM拓展
代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>querySelector()与querySelectorAll()</title>
</head>
<body>
<h2 class="example">class="example"的标题</h2>
<p class="example">class="example"的段落</p>
<p>111111111111111111111111111111111111111111111</p>
<script>
function myFunction(){
var para=document.createElement("p");
var Tnode=document.createTextNode("新段落");
para.appendChild(Tnode);
para.setAttribute("class","example");
document.body.appendChild(para);
document.querySelector("p.example").style.fontSize="56px";
var oPt=document.querySelectorAll("p.example");
for(var i=0;i<oPt.length;i++){
isIndex=oPt.item(i);
isIndex.style.backgroundColor="blue";
}
}
myFunction();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>段落1</p>
<div id="div1">
<a href="javascript:;" class="lits">1111</a>
<a href="javascript:;" class="lits">2222</a>
<a href="javascript:;" class="lits">3333</a>
<a href="javascript:;" class="lits">4444</a>
</div>
<p id="demo">段落2</p>
<script>
var oDiv=document.querySelector("#div1");
console.log(oDiv.childElementCount);
console.log(oDiv.firstElementChild);
console.log(oDiv.lastElementChild);
console.log(oDiv.previousElementSibling);
</script>
</body>
</html>
代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="show()">show</button>
<div id="pq"></div>
<script>
function show(){
var dome=document.querySelector("#pq");
dome.classList.add("gg");
// 相当于JQery的addClass()
dome.classList.remove("aa");
// 相当于JQery的removeClass()
alert(dome.classList.contains("bb"));
// 相当于JQery的hasClass()
alert(dome.classList.toggle("pp"));
alert(dome.classList);
}
</script>
</body>
</html>
3、DOM综合案例
代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简易选项卡</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
}
body {
font: 12px/1.5 tahoma;
}
#outer {
width: 450px;
margin: 10px auto;
}
#tab {
overflow: hidden;
zoom: 1;
background: #000;
border: 1;
}
#tab li {
float: left;
color: #fff;
width: 90px;
height: 30px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
#tab li.current {
color: #000;
background: #ccc;
}
#content {
border: 1px solid #000;
border-top-width: 0;
}
#content ul {
line-height: 25px;
display: none;
margin: 0 3;
}
</style>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<div id="content">
<ul style="display: block;">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
</ul>
<ul style="display: block;">
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
</ul>
<ul style="display: block;">
<li>021</li>
<li>022</li>
<li>023</li>
<li>024</li>
</ul>
</div>
<script>
window.onload = function() {
var oLi = document.getElementById("tab").getElementsByTagName("li");
var oUl = document.getElementById("content").getElementsByTagName("ul");
for (var i = 0; i < oLi.length; i++) {
oLi[i].index = i;
oLi[i].onmouseover = function() {
for (var n = 0; n < oLi.length; n++) {
this.className = "current";
}
for (var i = 0; i < oUl.length; i++) {
oUl[i].style.display = "none";
oUl[this.index].style.display = "block";
}
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#imagegallery li {
display: inline;
list-style: none;
}
</style>
</head>
<body>
<h1>动物相册</h1>
<ul id="imagegallery">
<li>
<a href="img/1.jpg" title="猫猫">
<img src="img/small1.jpg" align="猫" />
</a>
</li>
<li>
<a href="img/2.jpg" title="鸳鸯">
<img src="img/small2.jpg" align="鸳鸯" />
</a>
</li>
<li>
<a href="img/3.jpg" title="虎虎">
<img src="img/small3.jpg" align="虎虎" />
</a>
</li>
<li>
<a href="img/4.jpg" title="鹅鹅">
<img src="img/small4.jpg" align="鹅鹅" />
</a>
</li>
</ul>
<img id="placeholder" src="img/5.jpg" alt="动物相册" />
<p id="desrciption">选择你喜欢的图片</p>
<script>
function showPic(whichpic) {
var source = whichpic.getActiveAttrib("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
var text = whichpic.getActiveAttrib("title");
var desrciption = document.getElementById("desrciption");
desrciption.firstChild.nodeValue = text;
}
window.onload = function() {
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
showPic(this);
return false;
}
}
}
</script>
</body>
</html>
4、本地存储
代码<html>
<head>
<meta charset="utf-8">
<title>Javascript cookie</title>
</head>
<body onload="setTitle()">
<a href="savascript:newDocument()">点击这里</a>
<script>
function setTitle() {
document.title = "今天是" + new Date();
}
function updateList() {
document.write("网页更新日期:");
document.write(document.lastModified);
}
updateList();
function newDocument() { //显示新的网页内容
document.open("text/html", "replace");
document.write("这是新的网页
")
document.write(new Date() + "
")
document.bgColor = "#e8f9b5";
document.cookie = "name=李辉";
document.cookie = "age=18";
document.write("document cookie=", document.cookie, "
");
var strcookie = document.cookie;
var arrcookie = strcookie.split(";");
for (var i = 0; i < arrcookie.length; i++) {
var arr = arrcookie[i].split("=");
document.write("键:", arr[0], "
值:", arr[1] + "
");
}
document.close();
}
</script>
</body>
</html>
代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Storage</title>
</head>
<body>
<p><button onclick="clickCounter()">点击计数</button></p>
<p><button onclick="del()">点击清零</button></p>
<div id="resullt">
</div>
<p>点击该按钮查看计数器的增加</p>
<p>关闭浏览器选项卡,重新打开此窗口,计数器将继续计数,不是重置。</p>
<script>
function clickCounter(){
if(localStorage.clickcount){
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else{
localStorage.clickcount=1;
}
document.getElementById("resullt").innerHTML="你已经点击了此按钮"+localStorage.clickcount+"次。";
}
function del(){
localStorage.removeItem("clickcount");
document.getElementById("resullt").innerHTML="计数清零";
}
</script>
</body>
</html>