JavaSript
2017-02-24 本文已影响0人
陈洲
JavaScript特点
- 安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。
- 跨平台性。（只要是可以解释Js的浏览器都可以执行，和平台无关。）
JavaScript与Java不同
JS是Netscape公司的产品，Java是Sun公司的产品
JS是基于对象，Java是面向对象。
JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
JS是弱类型，Java是强类型。
JavaScript内容
EDB.png
1.JavaScript语法基础
2.使用JS操作网页（DOM）
2.使用JS操作浏览器（BOM）
如何编写javascript的代码
方式1：可以使用<script>标签体内进行编写。
格式：
<script type="text/javascript">
js代码
</script>
方式2： 引入外部的javascript文件。
格式：
<script src="......" type="text/javascript"></script>
注意：
1.<script>是有开始标签与结束标签的，千万不要在一个标签中结束了。
2.如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写js代码了
javascript的变量声明:
格式：
var 变量名 = 数据;
声明变量要注意的事项：
1. 在javascript中声明变量是 使用var关键字声明的，javascript中的变量可以存储任意的数据类型数据.
2. javascript中变量数据类型是根据存储的值决定的，可以随时更改存储数据的类型。
3. 定义了多个同名的变量是，后定义的同名变量是覆盖前面定义的同名变量。
4. 声明变量的时候可以省略var关键字，但是不建议省略。
Javascript的数据类型：
typeof 查看变量的数据类型: typeof 变量名
number 小数与整数
string 字符串 注意： javascript中没有字符的概念，只有字符串，字符串可以写在单引号或双引号中。
boolean 布尔数据类型，
undefined undefined代表该变量没有定义。
document.write("10数据类型是"+(typeof 10)+"<br/>");
document.write("3.14数据类型是"+(typeof 3.14)+"<br/>");
document.write("a数据类型是"+(typeof 'abc')+"<br/>");
document.write("abc数据类型是"+(typeof "abc")+"<br/>");
document.write("abc数据类型是"+(typeof true)+"<br/>");
document.write("a变量数据类型是"+(typeof a)+"<br/>"); //undefined
字符串转数字
parseInt() 可以把一个字符串转换成整数。
parseFloat() 可以把一个字符串转换成小数。
a = "123abc123";
//parseInt方法如果接收的字符串含有非数字的字符，那么parseInt方法会从字符串的首个字符开始寻找，一直找到非数字字符为止，然后就使用前面的数字字符转换成数字
a = "a123";
// NaN not a number(不是一个数字)
a = "012";
//12 如果首位是0，那么就想祛除0再进行转换。
a = "0x10";
//如果一个字符串是以0x开头，那么会把字符串中的内容当成十六进行的数据处理的
var b = parseInt(a);
document.write("结果："+b+"<br/>");
isNaN() 不是一个数字返回true，是一个数字返回false.
document.write(isNaN("123")+"<br/>");//f
document.write(isNaN("abc123")); //t
Javascript的运算符：
+(加法、正数、 连接符)
var a = 1;
document.write((1+true)+"<br/>"); //true 是1， false是0
document.write((1+false)+"<br/>");
document.write("hello"+1); // hello1
/ 除法
var a = 10;
var b = 3;
document.write("除法运算是："+(a/b)+"<br/>"); //如果两个整数相除不能整数的时候结果还是小数。
比较运算符
字符串与字符串的比较规则是：
情况1： 能找到对应位置上的不同字符，那么就比较第一个不同字符的大小。
情况2： 不能找到对应位置上的不同字符，这时候比较的是两个字符串的长度。
document.write("10大于3吗？"+(10>3)+"<br/>");
document.write("10字符串大于3字符串吗？"+("190">"19")+"<br/>"); //字符串与字符串比较
document.write("10大于字符串9吗？"+( 10 > "9")+"<br/>"); // 字符串还可以与数字进行比较。 凡是数字与字符串 进行比较，会先把字符串转换成数字再进行比较 的。
逻辑运算符
//没有单的。
document.write((true&&true)+"<br/>");
document.write((true||true)+"<br/>");
三目运算符
布尔表达式?值1:值2;
var age = 10;
document.write(age>18?"成年人":"未成年人");
补充：
javascript常用的函数：
alert("显示的内容..") ; 弹出框
document.write("数据") ; //向页面输出数据...
页面的注释：
html <!-- --> 注释的内容
css的注释 /* 注释的内容*/
javascript： //注释的内容 单行注释 /* 注释的内容*/ 多行注释
控制流程语句
if语句
格式：
if(判断条件){
符合条件执行的代码
}
if语句的特殊之处：
在javascript中的if语句条件不单止可以写布尔表达式，还可以写任何的数据。
number 非0为true, 0为false.
string 内容不能空是true， 内容空的时候是false。
undefined：false
NaN: false
switch语句
特殊之处：
在javascript中case后面可以跟常量与变量还可以跟表达式。
var option = "A";
var score =98;
switch(option){
case score>=90?"A":"B":
document.write("java");
break;
case "B":
document.write("ps");
case "C":
document.write("javascript");
break;
case "D":
document.write("C++");
break;
}
while语句
格式：
while(判断的条件){
循环体内容
}
for语句
格式：
for(初始化语句; 判断的条件 ; 循环后的语句){
循环体语句；
}
for-in语句
for-in语句的格式：
for(var 变量名 in 遍历的目标){
}
for-in语句的作用：
1. 可以用于遍历数组的元素。 注意： 使用for-in语句遍历数组元素的时候遍历出来是数组的下标。
2. 可以用于遍历对象的所有属性数据。 注意： 使用for-in语句遍历对象的属性的时候，遍历出来的是对象的属性名。
for(var index in arr){
document.write(arr[index]+",");
}
var p = new Person(110,"aa");
for(var property in p){
document.write(p[property]+",");
} //110,aa
with语句
有了 with 语句，在存取对象属性和调用方法时就不用重复指定对象。
格式：
with(对象){
}
with(document){
write("<hr/>");
}
函数
函数的定义格式：
function 函数名(形参列表){
函数体 ;
}
javascript的函数要注意的细节：
1. 在 javascript中函数 定义形参时是不能使用var关键字声明变量 的。
2. 在javascript中 的函数是没有 返回值类型 的，如果函数需要返回数据给调用者，直接返回即可，如果不需要返回则不返回。
3. 在 javascript中是没有函数 重载 的概念 的，后定义的同名函数会直接覆盖前面定义同名函数。
4. 在javascript中任何的函数内部都隐式的维护了一个arguments（数组）的对象，给函数 传递数据的时候，是会先传递到arguments对象中，
然后再由arguments对象分配数据给形参的。
//加法
function add(){
document.write("长度："+arguments.length+"<br/>");
for(var index = 0 ; index<arguments.length ; index++){
document.write(arguments[index]+",");
}
add(11,21,13,14);
例子：
显示月份天数：
function showDay(){
//找到对应 的标签对象。
var inputObj = document.getElementById("month");
//获取input标签数据
var month = inputObj.value;
if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
alert("本月是31天");
}else if(month==4||month==6||month==9||month==11){
alert("本月是30天");
}else if(month==2){
alert("本月是28天");
}else{
alert("没有该月份");
}
}
<body>
月份:<input id="month" type="text" /><input type="button" value="查询" onclick="showDay()" />
</body>/
String
创建一个字符串的方式：
方式1：
new String("字符串的内容");
方式2：
var str = "字符串的内容";
var str1 = new String("hello");
var str2 = new String("hello");
//地址不同但是内容相同
字符串常用的方法：
anchor() 生产锚点
blink() 为元素添加blink标签
charAt() 返回指定索引位置处的字符。
charCodeAt() 回一个整数，代表指定位置上字符的 Unicode 编码。
fontcolor() 把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端
indexOf() 返回 String 对象内第一次出现子字符串的字符位置
italics() 把 HTML <I> 标记放置在 String 对象中的文本两端。
link() 把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
replace() 返回根据正则表达式进行文字替换后的字符串的复制
split() 切割
Substr() 截取子串
toUpperCase() 转大写
toLowerCase() 转小写
document.write("aa".anchor("five")+"<br/>");
document.write("aa".blink()+"<br/>");
document.write("abc".charAt(1)+"<br/>");
document.write("abc".charCodeAt(1)+"<br/>"); //chatCodeAt返回的是索引值对应的字符的码值。
document.write(aa".fontcolor("red")+"<br/>"); //fontcolor() 给字符串添加font标签，然后设置color的属性值。
document.write("abchellohehehello".indexOf("hello")+"<br/>"); //返回指定字符串第一次出现的索引值。
document.write("aa".italics()+"<br/>"); //给文本添加一个i标签，把文本内容设置成斜体。
document.write("aa".link("http://www.itcast.cn")+"<br/>"); // 给文本添加一个a标签，
document.write("aaxml".replace("xml","aa")+"<br/>");
var str = "A-B-C";
var arr = str.split("-");
for(var index = 0 ; index<arr.length ; index++){
document.write(arr[index]+",");
}
document.write("<br/>");
document.write("abc".toUpperCase()+"<br/>"); //转大写
document.write("ABC".toLowerCase()+"<br/>"); //转小写
Date
var date = new Date(); //获取到当前的系统时间
document.write("年："+ date.getFullYear()+"<br/>");
document.write("月："+ (date.getMonth()+1)+"<br/>");
document.write("日："+ date.getDate()+"<br/>");
document.write("时："+ date.getHours()+"<br/>");
document.write("分："+ date.getMinutes()+"<br/>");
document.write("秒："+ date.getSeconds()+"<br/>");
//xxxx年yy月dd日 hh:mm:ss
document.write("当前时间是："+date.toLocaleString());
document.write("当前时间是："+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+
date.getHours()+":"+date.getMinutes()+":"+date.getSeconds());
例子：
<body>
当前系统时间：<span id="time"></span>
</body>
<script type="text/javascript">
function getCurrentTime(){
var date = new Date();
var timeInfo = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+
date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
//找span对象
var spanObj = document.getElementById("time");
//设置span标签体的内容
spanObj.innerHTML = timeInfo.fontcolor("red");
}
getCurrentTime();
//定时方法.
window.setInterval("getCurrentTime()",1000);
/* setInterval 定时方法，第一个参数要指定调用的代码，第二参数是每 隔指定的毫秒数调用指定的代码。*/
</script>
Number
创建Number对象的方式：
方式1：
var 变量= new Number(数字)
方式2：
var 变量 = 数字;
常用的方法：
toString() 把数字转换成指定进制形式的字符串。
toFixed() 指定保留小数位,而且还带四舍五入的功能。
var num = 10; // 十进制
document.write("十进制："+num.toString()+"<br/>");
document.write("二进制："+num.toString(2)+"<br/>"); //2进制
document.write("八进制："+num.toString(8)+"<br/>");
document.write("十六进制："+num.toString(16)+"<br/>");
document.write("三进制："+num.toString(3)+"<br/>"); // 101
var num2 = 3.455;
document.write("保留两位小数:"+num2.toFixed(2))
Math
ceil 向上取整
floor（） 向下取整
random() 随机数方法 // 产生的伪随机数介于 0 和 1 之间（含 0，不含 1），
round 四舍五入
document.write("向上取整："+ Math.ceil(3.14)+"<br/>");
document.write("向下取整："+ Math.floor(3.14)+"<br/>");
document.write("随机数："+ Math.random()+"<br/>");
document.write("四舍五入："+ Math.round(3.75)+"<br/>");
Array
方式1：
var 变量名 = new Array(); 创建一个长度为0的数组。
方式2：
var 变量名= new Array(长度) 创建一个指定长度的数组对象。
方式3：
var 变量名 = new Array("元素1","元素2"...); 给数组指定元素创建数组 的对象。
方式4：
var 变量名 = ["元素1","元素2"...];
数组要注意的细节：
在javascript中数组的长度是可以发生变化的。
var arr = new Array(3); //创建了一个长度为0的数组对象。
arr[100] = 10;
document.write("arr长度："+arr.length+"<br/>"); //101
Array数组常用方法：
1.arr1.concat(arr2);
arr1 = arr1.concat(arr2); //concat把arr1与arr2的数组元素组成一个新的数组返回。
2.arr.join(str);
var elements = arr1.join(","); // join使用指定的分隔符把数组中的元素拼装成一个字符串返回。
//如arr1 = [a,b,c,d];上式结果为字符串"a,b,c,d"
3.x = arr.pop();
pop ：移除数组中的最后一个元素并返回该元素。
4.length = arr.push();
arr1.push("abc"); // 将新元素添加到一个数组中，并返回数组的新长度值。
5.arr1.reverse(); //翻转数组的元素
6.x = arr.shift();
document.write("删除第一个元素并返回："+arr1.shift()+"<br/>"); //移除数组中第一个元素，并且返回。
7.arr2 = arr1.slice(begin,end)
var subArr = arr1.slice(1,2); //指定数组 的开始索引值与结束索引值截取数组的元素，并且返回子数组。
8.arr.sort(compare);
arr1 = [19,1,20,5];
arr1.sort(sortNumber); //排序，排序的时候一定要传入排序的方法。
function sortNumber(num1,num2){
return num1-num2;
}
9.arr.splice(.....)
arr1.splice(1,1,"a","b","c");
//第一个参数是开始删除元素的索引值， 第二参数是删除元素的个数，往后的数据就是插入的元素。
自定义对象
在javascript没有类的概念，只要有函数即可创建对象。
方式1：
使用无参的函数创建对象。
例子：
function Person(){}
var p = new Person(); //创建了一个Person对象了
p.id = 110;
p.name = "abc";
方式2：//推荐
使用带参的函数创建对象。
function Person(id,name){
this.id = id;
this.name = name;
this.say = function(){
....
}
}
var p = new Person(110,"abc"); //创建对象
方式3： 使用Object函数创建对象
var p = new Object();
p.id = 110;
p.name = "abc";
方式4：使用字面量的方式创建.
var p = {
id:110,
name:"狗娃",
say:function(){
....
}
注意：javascript的类名可以直接访问属性，如类名.成员；也可以这样访问类名[成员名字（字符串）]或对象[成员名字（字符串）]
//一个数组工具类例子
javascript 文件：
var tool = new ArrayTool();
function ArrayTool(){
//找最大值
this.getMax = function(arr){
........
return max;
}
//找元素的索引值
this.searchEle = function(arr,target){
.........
}
}
HTML文件：
<script src="ArrayTool.js" type="text/javascript"></script>
<script type="text/javascript">
var arr = [12,15,9,4];
var max = tool.getMax(arr);
document.write("最大值："+ max+"<br/>");
var index = tool.searchEle(arr,9);
document.write("找到的索引值是："+ index);</script>
prototype
prototype注意的细节：
1. prototype是函数(function)的一个必备属性(书面一点的说法是"保留属性")(只要是function,就一定有一个prototype属性)
2. prototype的值是一个对象
3. 可以任意修改函数的prototype属性的值。
4. 一个对象会自动拥有prototype的所有成员属性和方法。
例子:为String类加新方法：
//为String对象的prototype对象添加新的方法，也使得String拥有该方法
String.prototype.toCharArray = function(){
var arr = new Array();
for(var index = 0; index<this.length ;index++){
arr[index] = this.charAt(index);
}
return arr;
}
String.prototype.reverse = function(){
var arr = this.toCharArray();
arr.reverse();
return arr.join("");
}
继承用途：
function Super(){
this.val = 1;
this.arr = [1];
}
function Sub(){
// ...
}
Sub.prototype = new Super(); // 核心 ，使得Sub拥有Super的所有方法```
var sub1 = new Sub();
var sub2 = new Sub();
sub1.val = 2;
sub1.arr.push(2);
alert(sub1.val); // 2
alert(sub2.val); // 1
alert(sub1.arr); // 1, 2
alert(sub2.arr); // 1, 2
BOM编程(Browser Object Model )
- BOM编程基础
全称 Browser Object Model，浏览器对象模型。
JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。
为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。
BOM对象：
- window 对象
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
- window中的方法
document 对 Document 对象的只读引用
location 用于窗口或框架的 Location 对象,代表了地址栏对象。
history 对 History 对象的只读引用。
document.tilte 设置网页的标题
moveto() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
moveby() 相对于目前的位置移动。
resizeTo() 调整当前浏览器的窗口。
open() 打开新窗口显示指定的URL（有的浏览器中是打一个新的选项卡）
setTimeout(vCode, iMilliSeconds) 超时后执行代码。
setInterval(vCode, iMilliSeconds) 定时执行代码，第一次也是先待，到时再执行。
事件
注册事件的方式：
方式一： 直接在html元素上注册
<body onload="ready()">
function ready(){
alert("body的元素被加载完毕了..");
}
方式二：可以js代码向找到对应的对象再注册。 推荐使用。
var bodyNode = document.getElementById("body");
bodyNode.onload = function(){
alert("body的元素被加载完毕");
}
- 事件说明
基本上所有的HTML元素中都可以指定事件属性。
所有的事件属性都是以on开头，后面的是事件的触发方式，如：
onclick，表示单击
onkeydown，表示键按下
...
- 常用的事件类型：
鼠标点击相关：
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
鼠标移动相关：
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
焦点相关的：
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
其他：
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
location 对象
location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。
location中的重要方法：
href属性 设置或获取整个 URL 为字符串。
reload() 重新装入当前页面
function showURL(){
alert(location.href);
}
function download(){
location.href="http://www.baidu.com";
}
function rafresh(){
location.reload();
}
screen 对象
Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。
属性：
availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
示例：
document.write("屏幕工作区: " + screen.availHeight + ", " + screen.availWidth + "<br>");
document.write("屏幕分辨率: " + screen.height + ", " + screen.width + "<br>");
document对象
DOM编程主要内容。
DOM编程(Document Object Model )
DOM简介
全称Document Object Model，即文档对象模型。
DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。
浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，
而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，
组建好之后，按照树的结构将页面显示在浏览器的窗口中。
节点层次
HTML网页是可以看做是一个树状的结构，如下：
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。
节点最多有一个父节点，可以有多个子节点。
HTML DOM 定义了访问和操作HTML文档的标准方法。
document
代表当前页面的整个文档树。
all 获取页面所有元素对象
var allNodes = document.all; //获取html文件中的所有标签节点 。
for(var i = 0; i<allNodes.length ; i++){
alert(allNodes[i].nodeName); //标签的名字 nodeName;
}
forms 获取页面所有表单对象
images 获取页面所有图片对象
links 获取所有超链接或area对象
var links = document.links; // 获取文档中含有href的属性的标签。
获取节点对象
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
<script type="text/javascript">
function showText(){
var inputNode = document.getElementById("userName"); //根据ID属性值找元素
inputNode.value = "设置好了文本";
}
//InnerHTml是用于设置标签体的内容的。 value是用于设置标签的value属性值.
function showImage(){
var images = document.getElementsByTagName("img"); //根据标签名获取所有的标签对象。
for(var i = 0 ; i<images.length ; i++){
images[i].src = "33.jpg";
images[i].width="100";
images[i].height="100";
}
}
function showDiv(){
var divs = document.getElementsByName("info"); //根据标签的name属性值取找对应的标签，返回的是一个数组。
for(var i = 0 ; i<divs.length ; i++){
divs[i].innerHTML = "aaaa".fontcolor("red");
}
}
</script>
......
<body>
<input type="text" id="userName" value="请输入用户名..." /><input type="button" onclick="showText()" value="设置文本"/>
<hr/>
<img src="" />
<img src="" />
<img src="" />
<input type="button" onclick="showImage()" value="显示图片"/>
<hr/>
<div name="info"></div>
<div name="info"></div>
<div name="info"></div>
<input type="button" onclick="showDiv()" value="设置div内容"/>
</body>
通过关系(父子关系、兄弟关系)找节点
从一个节点出发开始查找：
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）
示例1：
firstChild属性最普遍的用法是访问某个元素的文本：
var text=x.firstChild.nodeValue;
示例2：
parentNode 属性常被用来改变文档的结构。
假设您希望从文档中删除带有 id 为 "maindiv" 的节点：
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
节点操作
创建新节点
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性,如type = file
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中，child之前。
elt.removeChild(eChild) 删除指定的子节点
城市联动框例子：
<script type="text/javascript">
function showCity(){
var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];
//获取省份对应的节点
var provinceNode = document.getElementById("province");
//获取省份选中的选项
var selectIndex = provinceNode.selectedIndex;
//获取对应的城市
var cityDatas = citys[selectIndex];
//找到city节点
var cityNode = document.getElementById("city");
//设置options的个数。
cityNode.options.length = 1 ;
//遍历对应的所有城市然后创建对应的option添加到city上。
for(var index = 0; index<cityDatas.length ; index++){
var option = document.createElement("option");
option.innerHTML = cityDatas[index];
cityNode.appendChild(option);
}
}
</script>
......
<body>
省份<select id="province" onchange="showCity()">
<option>省份</option>
<option>广东</option>
<option>湖南</option>
<option>广西</option>
</select>
城市<select id="city"><option>城市</option></select>
</body>
操作CSS例子
<script type="text/javascript">
//产生一个四位的验证码。
function createCode(){
var datas = ['A','B','何','敏','凡','江','1','9']; // 0-7 长度8
var code = "";
for(var i = 0 ; i<4; i++){
//随机产生四个索引值
var index = Math.floor(Math.random()*datas.length); // random 0.0-1.0（不包括1.0）
code+=datas[index];
}
var spanNode = document.getElementById("code");
spanNode.innerHTML = code;
spanNode.style.fontSize ="24px";
spanNode.style.color = "red";
spanNode.style.backgroundColor="gray";
spanNode.style.textDecoration = "line-through";
}
function ready(){
createCode();
}
</script>
.......
<body onload="ready()">
<span id="code"></span><a href="#" onclick="createCode()">change</a>
</body>
正则表达式
方式1：
/正则表达式/模式
var regex = /正则表达式/标志
方式2：
new RegExp("正则表达式",模式);
var regex = new RegExp("正则表达式", "标志");
正则表达式对象常用的方法：
test() 使用正则对象去匹配字符串 如果匹配成功返回ture，否则返回false.
exec() 根据正则表达式去查找字符串符合规则的内容。
模式：
g （全文查找出现的所有 pattern）
i （忽略大小写）
位置：
^ 开头
$ 结尾
次数：
* 0或多个
+ 1或多个
? 0或1个
{n} 就是n个
{n,} 至少n个
{n,m} 最少n个，最多m个
通配符：
\b 空格
\d 任意数字
\D 任意非数字
\s 任意空白
\S 任意非空白
. 任意字符（除'\n'外）
组合：
[a-z]
[0-9]
等
组：
(正则) 匹配括号中正则表达式对应的结果，并暂存这个结果。
(?:正则) 匹配括号中正则表达式对应的结果，但不暂存这个结果。
\数字 使用第n个组匹配的结果
例子：
var str = "hello123";
var reg = /^[A-Z0-9]+$/i;
alert("匹配吗？"+reg.test(str));
var str ="da jia hao hao xue xi a";
var reg = /\b[a-z]{3}\b/gi;
var line ="";
while((line = reg.exec(str))!=null){
document.write(line+"<br/>")
}
