JS基礎

時間 2019-12-05

原文原文鏈接

JS的引入方式

1 直接編寫
    <script>
        alert('hello yuan')
    </script>
2 導入文件
    <script src="hello.js"></script>

JS的變量、常量和標識符

一、聲明變量時不用聲明變量類型. 全都使用var關鍵字;javascript

var a=5;css

二、一行能夠聲明多個變量.而且能夠是不一樣類型html

var name="xx", age=20, job="wan";java

三、聲明變量時能夠不用var. 若是不用var 那麼它是全局變量node

四、變量命名,首字符只能是字母,下劃線,$美圓符三選一，餘下的字符能夠是下劃線、美圓符號或任何字母或數字字符且區分大小寫，x與X是兩個變量　python

Camel 標記法
首字母是小寫的，接下來的字母都以小寫字符開頭。例如：
var myTestValue = 0, mySecondValue = "hi";
Pascal 標記法
首字母是大寫的，接下來的字母都以大寫字符開頭。例如：
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利類型標記法
在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，以下所示「
Var iMyTestValue = 0, sMySecondValue = "hi";

命名規範

數據類型

/*       
        number     -----  數值
        boolean    -----  布爾值
        string     -----  字符串
        undefined  -----  undefined
        null       -----   null  
      
 */

Undefined類型數組

Undefined 類型只有一個值，即 undefined。瀏覽器

當聲明的變量未初始化時，該變量的默認值是 undefined。app

當函數無明確返回值時，返回的也是值 "undefined";dom

運算符

算術運算符：
    +   -    *    /     %       ++        -- 

比較運算符：
    >   >=   <    <=    !=    ==    ===   !==

邏輯運算符：
     &&   ||   ！   就是 and   和 or   

賦值運算符：
    =  +=   -=  *=   /=

字符串運算符：
    +  鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算

流程控制

順序結構，從上到下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //流程控制分支
        var num =0;
        if(num>=90){
            alert("優秀")
        }
        else if(num>80){
            alert("良好")
        }
        else{
            alert("及格")
        }

        var week=6;
        switch (week) {
            case 1:alert("xq1");break;
            case 2:alert("xq2");break;
            case 3:alert("xq3");break;
            case 4:alert("xq4");break;
            case 5:alert("xq55");break;
            default:alert("66");break;

        }
        s={'name':'zbb','age':18};
        console.log(typeof s);
        
    </script>
</head>
<body>



</body>
</html>

循環結構

for循環

語法規則： 推薦

    for(初始表達式;條件表達式;自增或自減)
    {
            執行語句
            ……
    }

for循環的另外一種形式

for( 變量 in 數組或對象)
    {
        執行語句
        ……
    }

while循環：　

語法規則：

while (條件){
    語句1；
    ...
}

　功能說明：運行功能和for相似，當條件成立循環執行語句花括號{}內的語句，不然跳出循環；一樣支持continue與break語句。　

舉例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var count=0;
        while (count<10){
            console.log("ok");
             count+=1;
        }
        for(var i=0;i<10;i++)
            console.log("xjj")


        var s=[1,2,3,4,5];
        for(var i in  s){
            console.log(s[i]) //i值得是索引

        }
        for(var i=0;i<s.length;i++)
            console.log("1")

    </script>

</head>
<body>

</body>
</html>

異常處理

try {
    //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
    // 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
    //e是一個局部變量，用來指向Error對象或者其餘拋出的對象
}
finally {
     //不管try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}

JS對象

簡介：

在JavaScript中除了null和undefined之外其餘的數據類型都被定義成了對象，也能夠用建立對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基於對象實現的。

<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用數字對象獲取可表示最大數
var bb=new String("hello JavaScript"); 
//建立字符串對象
var cc=new Date();
//建立日期對象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//數組對象
</script>

String(字符串)對象

1.字符串對象建立

字符串建立(兩種方式)
① 變量 = 「字符串」
② 字串串對象名稱 = new String (字符串)

-------屬性
x.length         －－－－獲取字符串的長度

------方法
 x.toLowerCase()        －－－－轉爲小寫
 x.toUpperCase()        －－－－轉爲大寫
 x.trim()               －－－－去除字符串兩邊空格       


－－－－字符串查詢方法

x.charAt(index)         －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index爲要獲取的字符索引

x.indexOf(index)－－－－查詢字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         －－－－match返回匹配字符串的數組，若是沒有匹配則返回null
x.search(regexp)        －－－－search返回匹配字符串的首字符位置索引

                        示例：
                        var str1="welcome to the world of JS!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 結果爲"world"
                        alert(str3);     // 結果爲15
                        

－－－－子字符串處理方法

x.substr(start, length) －－－－start表示開始位置，length表示截取長度
x.substring(start, end) －－－－end是結束位置

x.slice(start, end)     －－－－切片操做字符串
                        示例：
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //結果爲"cd"
                            
                            alert(str3); //結果爲"efgh"
                            
                            alert(str4); //結果爲"cdefg"
                            
                            alert(str5); //結果爲"fg"

x.replace(findstr,tostr) －－－－    字符串替換

x.split();                 －－－－分割字符串
                                 var str1="一,二,三,四,五,六,日"; 
                                var strArray=str1.split(",");
                                alert(strArray[1]);//結果爲"二"
                                
x.concat(addstr)         －－－－    拼接字符串

<script>
//        ========================
//        字符串對象的建立有兩種方式
//        方式一
          var s = 'sffghgfd';
//        方式二
          var s1 = new String('  hel lo ');
          console.log(s,s1);
          console.log(typeof(s)); //object類型
          console.log(typeof (s1)); //string類型

//        ======================
//        字符串對象的屬性和方法
//           1.字符串就這麼一個屬性
        console.log(s.length);  //獲取字符串的長度

//           2.字符串的方法
        console.log(s.toUpperCase()) ; //變大寫
        console.log(s.toLocaleLowerCase()) ;//變小寫
        console.log(s1.trim());  //去除字符串兩邊的空格(和python中的strip方法同樣，不會去除中間的空格)
////           3.字符串的查詢方法
        console.log(s.charAt(3));  //獲取指定索引位置的字符
        console.log(s.indexOf('f')); //若是有重複的，獲取第一個字符的索引,若是沒有你要找的字符在字符串中沒有就返回-1
        console.log(s.lastIndexOf('f')); //若是有重複的，獲取最後一個字符的索引
        var str='welcome to the world of JS!';
        var str1 = str.match('world');  //match返回匹配字符串的數組，若是沒有匹配則返回null
        var str2 = str.search('world');//search返回匹配字符串從首字符位置開始的索引，若是沒有返回-1
        console.log(str1);//打印
        alert(str1);//彈出
        console.log(str2);
        alert(str2);


//        =====================
//        子字符串處理方法
        var aaa='welcome to the world of JS!';
        console.log(aaa.substr(2,4)); //表示從第二個位置開始截取四個
        console.log(aaa.substring(2,4)); //索引從第二個開始到第四個，注意顧頭不顧尾
        //切片操做（和python中的同樣，都是顧頭不顧尾的）
        console.log(aaa.slice(3,6));//從第三個到第六個
        console.log(aaa.slice(4)); //從第四個開始取後面的
        console.log(aaa.slice(2,-1)); //從第二個到最後一個
        console.log(aaa.slice(-3,-1));


//        字符串替換、、
        console.log(aaa.replace('w','c')); //字符串替換，只能換一個
        //而在python中所有都能替換
        console.log(aaa.split(' ')); //吧字符串按照空格分割
        alert(aaa.split(' ')); //吧字符串按照空格分割
        var strArray = aaa.split(' ');
        alert(strArray[2])
    </script>

使用方法

使用方法

Array（數組）對象

數組的建立

var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

數組的方法和屬性

join方法：（拼接）

        var s=[1,2,3];
        var set=s.join("");
        console.log(set)；

concat方法：（轉換對象爲字符串）鏈接

        var s=["hellow",12];
        console.log(s.toString());
        console.log(typeof s.toString());

數組排序-reverse sort：（翻轉）

        var arr=[12,3,4,44];
        console.log(arr.reverse())

        function Mysort(x,y) {
            return x-y
        }

        var arr=[12,3,4,44];
        // console.log(arr.reverse())
        console.log(arr.sort(Mysort)); //按首字母ASCII碼排序

數組切片操做：

//x.slice(start, end)
//
//使用註解
//
//x表明數組對象
//start表示開始位置索引
//end是結束位置下一數組元素索引編號
//第一個數組元素索引爲0
//start、end可爲負數，-1表明最後一個數組元素
//end省略則至關於從start位置截取之後全部數組元素

var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);

alert(arr2.toString());
//結果爲"c,d" 
alert(arr3.toString());
//結果爲"e,f,g,h"
alert(arr4.toString());
//結果爲"c,d,e,f,g"

數組的push和pop：

//push pop這兩個方法模擬的是一個棧操做

//x.push(value, ...)  壓棧
//x.pop()             彈棧      
//使用註解
//
//x表明數組對象
//value能夠爲字符串、數字、數組等任何值
//push是將value值添加到數組x的結尾
//pop是將數組x的最後一個元素刪除


var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//結果爲"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//結果爲"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//結果爲"1,2,3,4,5"

數組的shift和unshift：

        var arr=[11,22,33];
        arr.unshift("hello");
        console.log(arr) ; //["hello",11,22,33]
        arr.unshift(44,55); //44,55是一個總體
        console.log(arr) ; //[44, 55, "hello", 11, 22, 33]

        arr.shift(); //從第一個刪
        console.log(arr); //[55, "hello", 11, 22, 33]

View Code

Date對象

建立Date對象

        //建立當前日期對象，並取值
        var nowd1=new Date();
        alert(nowd1.toLocaleString().substr(0,11));
        //建立具體日期
        var date2=new Date("2012/12/12");
        console.log(date2.toLocaleString());

獲取時間和日期

獲取日期和時間
getDate()                 獲取日
getDay ()                 獲取星期
getMonth ()               獲取月（0-11）
getFullYear ()            獲取完全年份
getYear ()                獲取年
getHours ()               獲取小時
getMinutes ()             獲取分鐘
getSeconds ()             獲取秒
getMilliseconds ()        獲取毫秒
getTime ()                返回累計毫秒數(從1970/1/1午夜)

Math對象

//該對象中的屬性方法 和數學有關.
   

abs(x)    返回數的絕對值。
exp(x)    返回 e 的指數。
floor(x)對數進行下舍入。
log(x)    返回數的天然對數（底爲e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入爲最接近的整數。
sin(x)    返回數的正弦。
sqrt(x)    返回數的平方根。
tan(x)    返回角的正切。

//方法練習:
        //alert(Math.random()); // 得到隨機數 0~1 不包括1.
        //alert(Math.round(1.5)); // 四捨五入
        //練習：獲取1-100的隨機整數，包括1和100
             //var num=Math.random();
             //num=num*10;
             //num=Math.round(num);
             //alert(num)
        //============max  min=========================
        /* alert(Math.max(1,2));// 2
        alert(Math.min(1,2));// 1 */
        //-------------pow--------------------------------
        alert(Math.pow(2,4));// pow 計算參數1 的參數2 次方.

Function對象

function 函數名 (參數){ 
　　　　函數體
}

功能說明：

可使用變量、常量或表達式做爲函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function 類能夠表示開發者定義的任何函數

// 函數定義


        function foo() {
           alert(123)
       }    

        foo(); // 函數調用


// 參數 arguments 對象

       function bar() {
           console.log(arguments);
           var s=0;
           for(var i=0;i<arguments.length;i++){
               s+=arguments[i]
           }
           return s
       }

       var ret=bar(2,4,6);
       alert(ret)
// 匿名函數
        (function (x) {
            alert(x)
        })("yuan")

BOM對象

1.對象方法

alert()            顯示帶有一段消息和一個確認按鈕的警告框。
confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt()           顯示可提示用戶輸入的對話框。

open()             打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close()            關閉瀏覽器窗口。

setInterval()      按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval()    取消由 setInterval() 設置的 timeout。
setTimeout()       在指定的毫秒數後調用函數或計算表達式。
clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
scrollTo()         把內容滾動到指定的座標。

2.方法使用

<script>
    window.open();
    window.alert(123);
    window.confirm(546);
    window.prompt(147258);
    window.close();

//    =============定時器
    function foo() {
        console.log(123)
    }
    var ID = setInterval(foo,1000); //每一個一秒執行一下foo函數，若是你不取消
                         //，就會一直執行下去
    clearInterval(ID)  //還沒來得及打印就已經停掉了
    
//    =====================
        function foo() {
            console.log(123)
        }
        var ID=setTimeout(foo,1000);
        clearTimeout(ID)

//    定時器實例
// var date = new Date();  //Date 2017-09-25T12:20:25.536Z
// console.log(date);
// var date1 = date.toLocaleString();
//  console.log(date1); //2017/9/25 下午8:20:59

    function foo() {
        var date = new Date();
        var date = date.toLocaleString();//吧日期字符串轉換成字符串形式
        var ele = document.getElementById('timer')  //從整個html中找到id=timer的標籤，也就是哪一個input框

        ele.value = date;
        console.log(ele)  //ele是一個標籤對象
//    value值是什麼input框就顯示什麼
    }
    var ID;
    function begin() {
        if (ID==undefined){
            foo();
            ID = setInterval(foo,1000)
        }
    }

    function end() {
        clearInterval(ID);
        console.log(ID);
        ID = undefined
    }

定時器實例

定時器

DOM對象

DOM節點

每個標籤都是一個節點對象

document 文檔節點

element 元素節點

DOM：操做節點

1查找標籤

（直接查找）

//     節點查找(節點也就是一個個的標籤)
        document.getElementById('idname');//按照id查找，拿到的是一個標籤對象
        document.getElementsByClassName('classname');//按照class標籤去找，獲得的是一個數組裏存放的標籤
        document.getElementsByTagName('tagname');//經過標籤名去找，拿到的也是一個數組
        var a = document.getElementsByName('yuan'); //按照name屬性去找,拿到的也是一個數組
        console.log(a);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="p1">P</p>
    <div class="c1">
        <div class="c2"></div>
        <div class="c2"></div>
        <div class="c2"></div>
    </div>

<script>
    var ele_p=document.getElementById("p1");
    var ele_c1=document.getElementsByClassName("c2");
    console.log(ele_c1)
    var eles_p=document.getElementsByTagName("p")
    console.log(eles_p)
</script>
</body>
</html>

方法

　（導航查找）　

經過某一個標籤的位置去查找另外一個標籤

屬性

parentElement           // 父節點標籤元素

children                // 全部子標籤

firstElementChild       // 第一個子標籤元素

lastElementChild        // 最後一個子標籤元素

nextElementtSibling     // 下一個兄弟標籤元素

previousElementSibling  // 上一個兄弟標籤元素

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>

<body>
     <p id="p1">P</p>
     <div class="c1">
        <div class="c2">123</div>
        <div class="c2" onclick="foo(this)">
            PPP
            <p>111</p>
            <p>222</p>
        </div>
        <div class="c2" id="p2">PPP</div>
     </div>


<script>
    
    function foo(self) {
       console.log("self",self);


        console.log(self);
        console.log(self.nextElementSibling) ; //  ele.nextElementSibling： <div class="c2" id="p2">PPP</div>

        console.log(" 父級標籤",self.parentElement.parentElement); //  父級標籤：
        console.log(" 兒子標籤",self.children); //  兒子標籤：[ele,ele]

        ele.nextElementSibling.style.color="red";
    }

     // 直接查找方法
//      var ele_p=document.getElementById("p1");   // DOM對象
//      var ele_c1=document.getElementsByClassName("c2");   // DOM對象的集合
//      console.log(ele_c1); // [div.c2, div.c2, div.c2, div.c2];
//
//      var eles_p=document.getElementsByTagName("p"); // DOM對象的集合
//      console.log(eles_p) ;// [p#p1,]






</script>
</body>
</html>

2操做標籤

1.建立節點

createElement(標籤名) ：建立一個指定名稱的元素。

例：var  tag=document.createElement(「input")
            tag.setAttribute('type','text');

2.添加節點

追加一個子節點（做爲最後的子節點）

somenode.appendChild(newnode)

把增長的節點放到某個節點的前邊

somenode.insertBefore(newnode,某個節點);

3.刪除節點

removeChild()：得到要刪除的元素，經過父元素調用刪除

4.替換節點

somenode.replaceChild(newnode, 某個節點);

5.節點屬性操做

　　1.獲取文本節點的值：innerText innerHTML

　　　　innerText:無論你是賦值仍是取值，只能識別純文本

     innerHtml:既能夠識別純文本，也能夠識別標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1"><a href="">click</a> </div>
<button>xx</button>
<script>
    var ele=document.getElementsByClassName("c1")[0];

    console.log(ele.innerText);
    console.log(ele.innerHTML);
    var ele_b=document.getElementsByTagName("button")[0];
    ele_b.onclick=function () {
        ele_b.innerHTML="<img src=ww.jpg>"
    }
</script>
</body>
</html>

　　2.屬性（attribute）操做：

 elementNode.setAttribute(name,value)    
 elementNode.getAttribute(屬性名)        <-------------->elementNode.屬性名(DHTML)
 elementNode.removeAttribute(「屬性名」);

 　　泛指全部的屬性
 　　getAttribute 能夠操做其餘的，，可是不能夠操做class

<body><div class="c1" id="d1">DIV</div>
<script>
    var ele = document.getElementsByClassName('c1')[0];
    ele.id='d2';//修改id
    console.log(ele);

//取屬性值 :
//    方式一
    console.log(ele.getAttribute('id'));
//    方式二
    console.log(ele.id);
/ 屬性賦值
//    方式一
    ele.setAttribute('id','d3');
    console.log(ele);
//    方式二
    ele.id = 'd3';
    console.log(ele);

　　3.value獲取當前選中的value值

　　 1.input
　　 2.select （selectedIndex）
　　3.textarea

　　4.關於class的操做：

//    class屬性=============
     var ele = document.getElementsByClassName('c1')[0];
     console.log(ele.className); //打印類的名字
     
     ele.classList.add('hide');
     console.log(ele); //<div class="c1 hide" id="d1">

     ele.classList.remove('hide');//吧添加的remove移除了
     console.log(ele)

5.改變css樣式：

<p id="p2">Hello world!</p>

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

                             .style.fontSize=48px

DOM Event(事件)

1.事件類型

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素得到焦點。               練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。

onload         一張頁面或一幅圖像完成加載。

onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開

onselect       文本被選中。
onsubmit       確認按鈕被點擊

2.綁定事件方式

方式1

<body>
<p class="c1" onclick="foo()">PPP</p>

<script>
    function foo() {
        alert("djj")
    }
</script>
</body>

方式2

//DOM對象.onclick=function(){}

<p class="c1">PPP</p>
<script>


    //查找標籤：
    var ele=document.getElementsByClassName("c1")[0];

    ele.onclick=function () {
        alert(123)
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p class="c1">PPP</p>
<ui>
    <li class="l1">111</li>
    <li class="l1">222</li>
    <li class="l1">333</li>
</ui>
<script>

//點擊標籤自動
    var ele=document.getElementsByTagName("li");
    for(var i=0;i<ele.length;i++){
        console.log(ele[i])

    ele[i].onclick=function () {
        alert("123")
    }
    }


</script>
</body>
</html>

多個標籤

2.屬性操做

　替換標籤和名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1"><a href="">djj</a></div>
<button>zzz</button>

<script>
    var ele=document.getElementsByClassName("c1")[0];

    console.log(ele.innerHTML);
    console.log(ele.innerText);
    var ele_button=document.getElementsByTagName("button")[0];
    ele_button.onclick=function () {
        // ele.innerText="egon"
        ele.innerHTML="<img src='ww.jpg'>";

    }
</script>

</body>
</html>

屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1  c2">DIV</div>

<script>
    var ele=document.getElementsByClassName("c1")[0];
    //簡易寫法
    // ele.id="123";  //賦值
    // console.log(ele.id);  //取值
    // //原生JS
    // console.log(ele.getAttribute("class")) //取值
    // ele.setAttribute("egrn","dog")  //賦值

    //class 屬性操做
    console.log(ele.className)
    ele.classList.add("c3")
    ele.classList.remove("c2");
</script>

</body>
</html>

事件介紹

onload事件

onload 屬性開發中 只給 body元素加.這個屬性的觸發 標誌着 頁面內容被加載完成.應用場景: 當有些事情咱們但願頁面加載完馬上執行,那麼可使用該事件屬性.

何時加載完何時觸發（若是你想把script放在body上面去，就用到onload事件了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
         /*
              window.onload=function(){
                   var ele=document.getElementById("ppp");
                   ele.onclick=function(){
                   alert(123)
                };
             };
         
         */



          function fun() {
              var ele=document.getElementById("ppp");
               ele.onclick=function(){
                alert(123)
            };
          }

    </script>
</head>
<body onload="fun()">

<p id="ppp">hello p</p>

</body>
</html>

View Code

Event 對象：

Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件一般與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經建立好了,而且會在事件函數被調用時傳給事件函數.咱們得到僅僅須要接收一下便可.好比onkeydown,咱們想知道哪一個鍵被按下了，須要問下event對象的屬性，這裏就時KeyCode.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        window.onload=function(){
            //阻止表單提交方式1().
            //onsubmit 命名的事件函數,能夠接受返回值. 其中返回false表示攔截表單提交.其餘爲放行.

             var ele=document.getElementById("form");
             ele.onsubmit=function(event) {
            //    alert("驗證失敗 表單不會提交!");
            //    return false;

            // 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動做。
             alert("驗證失敗 表單不會提交!");
             event.preventDefault();

    }

        };

    </script>
</head>
<body>

<form id="form">
            <input type="text"/>
            <input type="submit" value="點我!" />
</form>

</body>
</html>

View Code

onsubmit事件

當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.若是驗證失敗.在該方法中咱們應該阻止表單的提交.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit事件</title>
    <!--onsubmit事件:肯定按鈕被點擊-->
    <!--在表單提交前驗證用戶輸入是否正確.若是驗證失敗.在該方法中咱們應該阻止表單的提交.-->
    <!--提交按鈕自己就有一個默認事件（你點擊提交的時候就會把數據發過去）-->

</head>
<body>
<form action="" id="submit">
    <p>姓名：<input type="text" class="name"></p>
    <p>年齡：<input type="text" class="age"></p>
    <input type="submit">
</form>
<input type="text" class="test">
<script>
    var ele_form = document.getElementById('submit');
    var ele_name = document.getElementsByClassName('name')[0];
    var ele_age = document.getElementsByClassName('age')[0];
    ele_form.onsubmit = function (event) {
        var username = ele_name.value;
        var age = ele_age.value;
        alert(username);
        alert(age);
        if (username=='haiyan'){
            //阻止默認事件的兩種方式
//            方式一：
//            return false;
//            方式二
//            給函數給一個形參，這個形參寫什麼都行，通常咱們寫成event
            event.preventDefault() //阻止默認事件（表單的提交）
        }
    }
</script>
<script>
    //測試event對象
    var ele = document.getElementsByClassName('test')[0];
//    event :每次觸發事件時全部的狀態信息
//    event.keyCode ：保存着全部的狀態信息
    ele.onkeydown =function (event) {
//        onkeydown按下鍵盤觸發的事件
        console.log(event);
        console.log(event.keyCode);
        if (event.keyCode==13){
            //按回車就會彈出
            alert(666)
        }
    }
</script>
</body>
</html>

onsubmit

View Code

事件傳播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件傳播</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<script>
    //由於盒子1是盒子2的父親，因此當給父親綁定一個事件，給兒子也綁定一個事件，就像
//    繼承同樣，兒子會繼承父親的事件，因此如今運行的時候若是點擊盒子2，會把本身的是事件和
//    父親的事件都執行了。因此若是隻想讓兒子執行本身的事件，那麼就得阻止發生事件傳播
    var ele1 = document.getElementsByClassName('box1')[0];
    var ele2 = document.getElementsByClassName('box2')[0];
    ele1.onclick = function () {
        alert(123)
    };
    ele2.onclick = function (event) {
        alert(456);
        console.log(event);
        console.log(event.keyCode);
        //    阻止事件傳播的方式
        event.stopPropagation();
    };


</script>
</body>
</html>

事件傳播

View Code

onselect：

<input type="text">

<script>
    var ele=document.getElementsByTagName("input")[0];

    ele.onselect=function(){
          alert(123);
    }

</script>

View Code

onchange:

<select name="" id="">
    <option value="">111</option>
    <option value="">222</option>
    <option value="">333</option>
</select>

<script>
    var ele=document.getElementsByTagName("select")[0];

    ele.onchange=function(){
          alert(123);
    }

</script>

View Code

事件委派

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委派（委派給全部的子元素）</title>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<button class="addbtn">點我添加</button>
</body>
<script>
    var ele_btn = document.getElementsByClassName('addbtn')[0];
    var ele_ul = document.getElementsByTagName('ul')[0];
    var ele_li =document.getElementsByTagName('li');
    //綁定事件
    for (var i=0;i<ele_li.length;i++){
        ele_li[i].onclick = function () {
            alert(this.innerHTML)
        }
    }

    //事件委派
    ele_btn.onclick = function () {
        //建立一個li標籤
        var ele_li = document.createElement('li');
//        ele_li.innerHTML= 444;
        ele_li.innerText = Math.round(Math.random()*1000);
        ele_ul.appendChild(ele_li);//吧建立的li標籤添加到ul標籤
        ele_ul.addEventListener('click',function (e) {
            console.log(e.target); //當前點擊的標籤
            console.log(e.target.tagName);//拿到標籤的名字  LI
            if (e.target.tagName=='LI'){
                console.log('ok');
//                alert(ele_li.innerHTML)
            }
        })
    }
</script>
</html>

View Code

onmouse事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onmouse事件</title>
    <style>
        .box{
            width: 300%;
            height: 200px;
        }
        .title{
            background: steelblue;
            line-height: 40px;
        }
        .con{
            background: slategray;
            line-height: 30px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="title">onmouse</div>
    <div class="con hide">
        <div><a href="" class="item">你好嗎？</a></div>
        <div><a href="" class="item">我好啊</a></div>
        <div><a href="" class="item">好就好唄</a></div>
    </div>
</div>
<script>
    var ele_title = document.getElementsByClassName('title')[0];
    var ele_box = document.getElementsByClassName('box')[0];
    //鼠標指上去的事件
    ele_title.onmouseover = function () {
        this.nextElementSibling.classList.remove('hide');
    };
    //鼠標移走的事件的兩種方式
//    方式一（推薦）
     ele_box.onmouseleave= function () {
        ele_title.nextElementSibling.classList.add('hide');
    };
//    方式二
//    ele_title.onmouseout = function () {
//       this.nextElementSibling.classList.add('hide');
//    }
//    方式一和方式二的區別：
//    不一樣點
//      onmouseout：不論鼠標指針離開被選元素仍是任何子元素，都會觸發onmouseout事件
//      onmouseleave：只有在鼠標指針離開被選元素時，纔會觸發onmouseleave事件
//    相同點：都是鼠標移走觸發事件
</script>
</body>
</html>

onmouse

View Code

左側菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
          .left{
              width: 20%;
              height: 500px;
              float: left;
              background-color: wheat;
          }

          .right{
              float: left;
              width: 80%;
              height: 500px;
              background-color: lightgray;

          }

           .title{
               text-align: center;
               line-height: 40px;
               background-color: #0e90d2;
               color: white;
           }
        .item{
            padding: 10px;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>



<div class="outer">
      <div class="left">
           <div class="item">
               <div class="title">菜單一</div>
               <ul class="con">
                   <li>111</li>
                   <li>111</li>
                   <li>111</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜單二</div>
               <ul class="con hide">
                   <li>222</li>
                   <li>222</li>
                   <li>222</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜單三</div>
               <ul class="con hide">
                   <li>333</li>
                   <li>333</li>
                   <li>333</li>
               </ul>
           </div>
      </div>
      <div class="right"></div>
</div>


<script>

    var eles_title=document.getElementsByClassName("title");



    for (var i=0;i<eles_title.length;i++){
         eles_title[i].onclick=function(){

             this.nextElementSibling.classList.remove("hide");

             for(var j=0;j<eles_title.length;j++){

                 if (eles_title[j]!=this){
                     eles_title[j].nextElementSibling.classList.add("hide")
                 }

             }


         }

    }




</script>
</body>
</html>

View Code

搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


<script>

function Focus(){

    var input=document.getElementById("ID1");
    if (input.value=="請輸入用戶名"){
        input.value="";
    }

}

function Blurs(){

    var ele=document.getElementById("ID1");
    var val=ele.value;
    if(!val.trim()){

        ele.value="請輸入用戶名";
    }
}

</script>
</head>
<body>
    <input id="ID1" type="text" value="請輸入用戶名" onblur="Blurs()" onfocus="Focus()">
</body>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。