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

忘是亡心i 2022-06-03 00:26 180阅读 0赞

## 正则表达式 ##

**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属性**

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

--------------------

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

--------------------

**6.传递参数**

*  通过值传递函数

*  通过对象传递参数

--------------------

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