JavaScript（正则表达式、表单验证、邮箱验证、函数、HTML DOM）

正则表达式

1.定义：它是由一个字符序列形成的搜索模式，当在文本中搜索数据时，可以用搜索模式来描述你要查询的内容。它可以是一个简单的字符，或一个更复杂的模式。它可用于所有文本搜索和文本替换操作。

2.Eg：

var patt = /youngamber/i

其中，

/youngamber/i

是正则表达式，

youngamber

是用于检索的模式，i是修饰符（搜索不区分大小写）

3.使用字符串的方法

（1）search（）

使用正则表达式

Eg：使用正则表达式搜索“youngamber”，且不区分大小写。

var str = "Visit youngamber";
var n = str.search(/youngamber/i);

使用字符串

可以使用字符串为参数，字符串参数会转换为正则表达式。

（2）replace（）

使用正则表达式

Eg：使用正则表达式且不区分大小写将字符串中的Jingdogegg替换为youngamber

var str = "visit Jingdogegg";
var res = str.replace(/jingdogegg/i,"youngamber");

使用字符串

replace（）方法将接受字符串为参数。

4.正则表达式修饰符

i 执行对大小写不敏感的匹配
g 执行全局匹配
m 执行多行匹配

表单验证

function validateForm(){
var x = document.form["myForm"]["fname"].value;
if(x==null || x=="　"){
alert("First name must be filled out");//没填写fname时弹出警告框
return false;
}
}

E-mail验证

检查输入数据是否符合电子邮件地址的基本语法，输入的数据必须包含@和 . ，同时@不可以是邮件地址的首字符，并且@之后至少需要有一个 . 。

function validateForm()
{
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if(stpos<1 || dotpos<atpos + 2 || dotpos + 2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}

函数

1.函数的调用

<p id="demo"></p>
<script>
function myFunction(a,b)
{
return a*b;//输出12
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

函数的自动调用

<p id="demo"></p>
<script>
(function(){
document.getElementById("demo").innerHTML="Hello AmberYoung!";
})();
</script>

作为函数方法调用函数

call（）和apply（）是预定义的函数方法，两个方法的第一参数必须是对象本身。

//call
function myFunction(a,b){
return a*b;
}
myFunction.call(myObject,10,2);

//apply
function myFunction(a,b){
return a*b;
}
myArray = [10,2]
myFunction.apply(myObject,myArray);

2.函数表达式

var x = function(a,b){return a*b};//函数可以储存在变量中

//在函数表达式存储变量后，变量也可以作为一个函数使用
var x = function(a,b){return a*b};
var z = x(4,3);

3.函数提升

//提升hoisting是javascript默认将当前作用域提升到前面去的行为

myFunction(5)
function myFunction(y){
return y*y;
}

注意：使用表达式定义函数时无法提升。

4.arguments.length属性

返回函数调用过程收到的参数个数

<script>//寻找最大值
function findMax() {

var i, max = arguments[0];

if(arguments.length < 2){

return max;

}

for (i = 1; i < arguments.length; i++) {

if (arguments[i] > max) {

max = arguments[i];

}

}

return max;

}
document.getElementById("demo").innerHTML = findMax(4, 5, 6);
</script>

5.默认参数

如果函数在调用时缺少参数，参数会默认设置为undefined。

6.传递参数

通过值传递函数

<script>
var x = 1;
function myFunction(x){
x++;//修改参数x的值，将不会修改在函数外定义的变量x
console.log(x);//2
}
myFunction(x);//2
console.log(x);//1
</script>

通过对象传递参数

<script>
var obj = {x=1};
function myFunction(obj){
obj.x++;//修改对象obj.x的值，函数外定义的obj也将会修改
console.log(obj.x);//2
}
myFunction(obj);//2
console.log(obj.x);//2
</script>

7.内嵌函数

在javascript中，所有函数都能访问他们上一层的作用域，javascript支持嵌套函数。嵌套函数可以访问上一层的函数变量。

内嵌函数plus（）可以访问父函数的counter变量：

function add(){
var counter = 0 ;
function plus(){counter += 1;}
plus();
return counter;
}

8.闭包

JS HTML DOM

1.通过HTML DOM可访问javascript Html文档中的所有元素。

2.查找HTML元素

通过id查找

var x = document.getElementById("demo");

如果找到该元素，则该方法将以对象（在x中）的形式返回该元素。

如果未找到该元素，则x将包含null。

通过标签名查找

var x = document.getElementById("demo");
var y = x.getElementByTagName("p");

通过类名查找

var x = document.getElementsByClassName.("intro");

3.HTML DOM 改变HTML内容

改变html输出流

documen.write();

改变html内容

···.innerHTML=  ;

改变html属性

document.getElementById("id").属性名="new value";

4.HTML DOM改变CSS

document.getElementById("demo").style.color="blue";

隐藏：hidden 　显示：visible　　property：visibility

5.事件

onclick 点击                       onblur 失去焦点
onload 浏览器已完成页面的加载        onmouseover 鼠标放上去
onchange 表单元素的内容改变时触发     onmouseout 鼠标离开时
onfocus 获取焦点                    onmousemove 鼠标移动时
onmousedown 鼠标按下                onmouseup 鼠标松下

6.HTML DOM EventListener

addEventListener( )方法：用于向指定元素添加事件句柄，不会覆盖已存在的事件句柄，可以向一个元素添加多个事件句柄，可以向同一个元素添加多个同类型的事件句柄，可以向任何DOM对象添加事件监听，不仅仅是HTML元素，还可以是window对象。

element.addEventListener(event,function,useCapture);
//event：事件类型 click或者mousedown（注意没有on）
//useCapture：布尔值，用于描述事件是冒泡还是捕获，默认值是false，即冒泡；true，捕获。

使用它在同一个元素中添加多个事件：

<button id="myBtn"></button>
<p id="demo"></p>
<script>
var x =document.getElementById("demo");
x.addEventListener("mouseover",myFunction);
x.addEventListener("click",mySecondFunction);
x.addEventListener("mouseout",myThirdFunction);
function myFunction(){
document.getElementById("demo").innerHTML += "Moused over<br>";
}
function mySecondFunction(){
document.getElementById("demo").innerHTML += "Click <br>";
}
function myThirdFunction(){
document.getElementById("demo").innerHTML += "Moused out<br>";
}
</script>

removeEventListener（）移除由addEventListener（）方法添加的事件句柄

7.事件冒泡和事件捕获

事件传递定义了元素事件的触发顺序

在冒泡中，内部元素的事件会被先触发，然后再触发外部元素。

在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。

8.创建和删除HTML元素

创建

element.appendChild(para);

删除

element.removeChild(child);

但删除的时候要找到子元素和它的父元素，我们可以用parentNode属性直接找到父元素：

var child = document.getElementById("p1");
child.parentNode.removeChild(child);