JavaScript特点
- 安全性(不允许直接访问本地硬盘),它可以做的就是信息的动态交互。
- 跨平台性。(只要是可以解释Js的浏览器都可以执行,和平台无关。)
JavaScript与Java不同
JS是Netscape公司的产品,Java是Sun公司的产品
JS是基于对象,Java是面向对象。
JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。
JS是弱类型,Java是强类型。
JavaScript内容
EDB.png1.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/>")
}
网友评论