JS中正则表达式、数组、DOM

正则表达式

正则表达式参数可用在以上方法中 (替代字符串参数)。

正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

^ 表示开头

$ 表示结尾

reg=/^a|a$/;

console.log(reg.test("abcda"));

创建一个正则表达式，用来检查一个字符串是否是一个合法手机号

1. 以1 开头

2. 第2位 3—9

3. 三位以后任意数字9个

^1 [3-9] [0-9]{9}$

检查一个字符串中是否有.\

使用转义字符\

可以不用设置正则表达式的变量，以上两行代码可以合并为一行：

/e/.test("The best things in life are free!")

元字符

---

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找数字、字母及下划线。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

//接受一个用户的输入

varstr=prompt("请输入你的用户名：");

//自动去除字符串的空格，使用空串""替换空格

str1=str.replace(/\s/g,"");

// 去除开头的空格

str2=str.replace(/^\s*/,"");

// 去除结尾的空格

str3=str.replace(/\s*$/,"");

// 去除开头和结尾的空格

str4=str.replace(/^\s*|\s*$/g,"");

console.log(str1);

console.log(str2);

console.log(str3);

console.log(str4);

邮件的正则

电子邮件

任意字母数字下划线 .任意字母数字下划线 @任意字母数字 .任意字母(2-5位) .任意字母(2-5位)

<scripttype="text/javascript">

// 任意字母数字下划线 .任意字母数字下划线 @任意字母数字 .任意字母(2-5位) .任意字母(2-5位)

// \w{3,} (\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}/;

varemailReg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

varemail="[email protected]";

console.log(emailReg.test(email));

</script>

数组

数组对象是使用单独的变量名来存储一系列的值。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

创建一个数组

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1: 常规方式:

var myCars=new Array();myCars[0]="Saab";

myCars[1]="Volvo";myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

数组中的元素可以是任意的数据类型

arr=["hello",1,true,null,undefined];

​

​

也可以是对象

varobj={name:"孙悟空“}；

​

arr[arr.length]=obj;

​

arr=[{name:"孙悟空"},{name:"猪八戒"},{name:"沙和尚"}]；

也可以是一个函数

arr=[function(){},function(){}];

​

console.log)(arr);

数组的四个方法

push( )

向数组末尾添加一个或更多的元素，并返回数组的新长度

pop( )

删除数组的最后一个元素，并将删除的元素作为返回值返回

unshift( )

向数组的开头添加一个或更多的元素，并返回数组的新长度

shift( )

删除数组的第一个元素，并将删除的元素作为返回值返回

forEach( )

需要一个函数作为参数

arr.forEach(function(){

console.log("Hello");

});

像这种函数，由我们创建，但是不由我们调用的，我们成为回调函数。数组中有几个元素，函数就会执行几次。

浏览器会在回调函数中传递三个参数

1. 元素本身

2. 元素的索引

3. 正在遍历的数组

arr.forEach(function(value, index, obj){

console.log(value);

});

slice( )

从数组中提取指定的元素-该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

-参数:1.截取开始的位置的索引，包含开始索引

2.截取结束的位置的索引，不包含结束索引

结束索引可以不写，表示到最后

可以传递一个负值，倒数开始

-1 代表倒数第一个

varresult=arr.slice(start,end);

splice( )

删除数组中指定的元素

-参数:1.截取开始的位置的索引，包含开始索引

2.表示删除的数量

3.第三个及以后

可以传递一些新的元素，这些元素将自动插入到开始位置索引前边

数组的去重练习

<scripttype="text/javascript">

vararr=[1,2,3,2,2,1,3,4,2,5];

for(vari=0;i<arr.length;i++){

for(varj=i+1;j<arr.length;j++){

if(arr[i]==arr[j]){

arr.splice(j,1);

j--;

}

}

}

console.log(arr);

</script>

数组的剩余方法

cal和apply

functionfun(){

alert("我是fun函数! ");

}

call()和apply()

-这两个方法都是函数对象的方法，需要通过函数对象来调用，当对函数调用call()和apply()都会调用函数执行

在调用call()和apply()可以将一个对象指定为第一个参数

此时这个对象将会成为函数执行时的thiscall()方法可以将实参在对象之后依次传递apply(()方法需要将实参封装到一个数组中统一传递

• fun. apply()；

• fun.call();

• fun();

三者效果一样

this的情况:1.以函数形式调用时，this永远都是window

2.以方法的形式调用时，this是调用方法的对象

3.以构造函数的形式调用时，this是新创建的那个对象

4.使用call和apply调用时，this是指定的那个对象

arguments

在调用函数时，浏览器每次都会传递进两个隐含的参数:

1.函数的上下文对象this2.封装实参的对象arguments

arguments是一个类数组对象 ，它可以通过索引来操作数据，也可以获取长度。

在调用函数时，我们所传递的实参都会在arguments中保存。

有一个属性callee

<scripttype="text/javascript">

functionfun(){

console.log(arguments.length);

console.log(arguments[1]);

console.log(arguments.callee==fun);

}

fun("hello",true);

</script>

确定正在运行的对象，上述返回true

Date

在JS中使用Date对象表示一个时间

• 创建一个Date对象

如果直接使用一个构造函数创建一个Date对象，则会封装为当前代码执行时间

• 创建一个指定的时间对象

需要在构造函数中传递一个表示时间的字符串作为参数

日期格式 月份/日/年 时：分：秒

var d2 =new Date("12/03/2016 11:10:30");

DOM

---

DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

• Core DOM - 所有文档类型的标准模型

• XML DOM - XML 文档的标准模型

• HTML DOM - HTML 文档的标准模型

节点（Node）

构成HTML文档最基本的单元。

常用节点分为四类

• 文档节点:整个HTML文档

• 元素节点:HTML文档中的HTML标签

• 属性节点:元素的属性

• 文本节点:HTML标签中的文本内容

事件

就是用户和浏览器交互的行为。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

<body>

<buttonid="btn"οnclick="alert('讨厌，你点我干嘛');">我是一个按钮</button>

<!-- 结构和行为耦合，不方便使用，不推荐使用 -->

<!-- 可以为按钮的对应事件绑定处理函数的形式来响应事件

这样当我们的事件被触发时，其对应的函数将会被调用-->

<scripttype="text/javascript">

// console.log(document);

// 获取button对象

varbtn=document.getElementById("btn");

btn.innerHTML="I am Button";

// 绑定一个单击事件

// 像这种为单击事件绑定的函数，我们称为单击响应函数

btn.οnmοuseοver=function(){

alert("你还点~");

}

</script>

</body>

将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码

onload

会在整个页面加载完成后才被触发

为Windows绑定一个onload事件

window.οnlοad=function() {

alert("hello");

获取元素节点·通过document对象调用

1. getElementById()一通过id属性获取一个元素节点对象

2. getElementsByTagName()

—通过标签名获取一组元素节点对象

3. getElementsByName()一通过name属性获取一组元素节点对象

onload 和 onunload

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

onchange

onchange 事件常结合对输入字段的验证来使用。

onmouseover 和 onmouseout

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

目前正在做Tencent页面，从网页图标到导航栏在到轮播图，还有许多待完成，希望能顺利通过考核。