Regular expressions, arrays, DOM in JS

regular expression

Regular expression arguments can be used in the above methods (instead of string arguments).

Regular expressions make the search more powerful (eg case insensitive in the example).

i	Performs case-insensitive matching.
g	Do a global match (find all matches instead of stopping at the first match found).
m	Perform multi-line matching.

^ means the beginning

$ indicates the end

reg=/^a|a$/;

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

Create a regular expression to check whether a string is a legal phone number

Start with 1

No. 2 3-9

9 any numbers after three digits

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

Check if a string contains .\

Use the escape character \

It is not necessary to set the variable of the regular expression, and the above two lines of code can be combined into one line:

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

Metacharacters

Metacharacters are characters with special meaning:

Metacharacters	describe
.	Finds a single character, except newlines and line terminators.
\w	Find numbers, letters and underscores.
\W	Find non-word characters.
\d	Find numbers.
\D	Find non-numeric characters.
\s	Find whitespace characters.
\S	Find non-whitespace characters.
\b	Match word boundaries.
\B	Match non-word boundaries.
\0	Find NULL characters.
\n	Find newline characters.
\f	Find form feed character.
\r	Find the carriage return character.
\t	Find the tab character.
\v	Find the vertical tab character.
\xxx	Finds the character specified by the octal number xxx.
\xdd	Finds the character specified by the hexadecimal number dd.
\uxxxx	Finds the Unicode character specified by the hexadecimal number xxxx.

//Accept input from a user

varstr=prompt("Please enter your username:");

//Automatically remove spaces from strings, replace spaces with an empty string ""

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

//Remove leading spaces

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

//Remove trailing spaces

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");

});

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

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

元素本身

元素的索引

正在遍历的数组

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对象调用

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

getElementsByTagName()

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

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页面，从网页图标到导航栏在到轮播图，还有许多待完成，希望能顺利通过考核。