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