天天看點
傳回

javascript基礎知識總結javascript

javascript

1.javascript曆史

2.快速入門

2.1引入JavaScript

  1. 内部标簽 
<script>
    alert('hello world');
</script>
  1. 外部标簽
  • 注意script标簽需要都寫完，不要寫自閉和
  1. 測試代碼 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一個JavaScript</title>
    <!--  script裡面寫，JavaScript腳本  -->
    <!--
    <script>
        alert('hello.world');
    </script>
    -->

    <!--
    外部引入
    script标簽要成對出現
    -->
    <script src="yt.js"></script>
</head>
<body>

</body>
</html>

2.2 基本文法入門 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js基本文法</title>

    <script>
        /*
            JavaScript，區分大小寫

            console.log(num)        浏覽器控制台列印變量
            
        */
        // 變量    變量類型 變量名 = 初始值;
        var num = 1;
        var name = "yt";
        // alert(name);
        //條件控制
        if(num>-5){
            alert("haha");
        }else if(num<10){
            alert("haha1111111");
        }
        /*  多行注釋  */

    </script>
</head>
<body>

</body>
</html>
  1. 浏覽器調試須知
  • Element 元素
  • Console 控制台、可以輸入指令
  • Sources 源碼，用于調試
  • Network 網絡請求檢視
  • Application 檢視網頁在浏覽器的緩存，cookie
    javascript基礎知識總結javascript

2.3資料類型

數值、文本、音頻、視訊…

  • 變量
    • var
    • 不能以，數字開頭 
//全局變量
        i = 1;
  • number
    • js不區分小數和整數 
    122      //整數
122.3   //浮點數
2e3     //科學計數法
NaN     //not a number
Infinity //無限大
  • 字元串
    • ‘asd’
    • “qwe”
  • 布爾值
    • true
    • false
  • 邏輯運算
    • &&
    • ||
    • ！
  • 比較運算符
    • = 指派
    • == 等于(類型可以不一樣、數值相同就相等)
    • === 絕對等于(類型一樣、數值一樣、結果為true)
  • null和undefined
    • null，空
    • undefined，未定義
  • 數組
    • java數組是相同的類型集合，JavaScript不要求類型一緻
    • 數組下标越界了就會，undefine 
var a = [1,2,3,"hello",true];
        new Array(1,2,5,'hello',false);
  • 對象
    • 對象大括号，對象中括号
    • 每個屬性之間用逗号隔開，最後一個不用加逗号 
var person = {
            name : "yutang",
            age : 3,
            tag : ['java','mysql','javascript']
        }
           
//使用對象中的資料
person.name
"yutang"
  • 注意
    • 盡量使用、=== ，不要使用，==
    • NaN，與所有的數值都不想等，包括自己
    • isNaN(NaN)，通過這個方法來判斷是否為NaN
    • 盡量避免浮點數的運算、比較因為存在浮點數的精度問題 
<script>
        //false  浮點數精度問題
        console.log(1/3===(1-2/3));

        //true    用這個方法來避免
        console.log(Math.abs(1/3===(1-2/3))<0.00001);

    </script>

2.4嚴格檢查模式 

<script>
        //嚴格檢查模式，預防JavaScript的随意性産生問題，必須寫在第一行
        //局部變量建議就是用，let
        'use strict'

        //非嚴格模式認為是全局變量，嚴格模式報錯
        i = 1;
        //es6中，局部變量用let
        let a = 2;
    </script>

3.資料類型

3.1字元串

  1. 正常字元串用，單、雙引号包裹
  2. 單、雙引号輸出，需要轉義字元(\)
  3. 多行字元串 
<script>
        //多行字元串，使用反引号括起來
        var a = `
        hello world!
        i need happy!
        `;
        alert(a);
    </script>
  1. 模闆字元串 
//模闆字元串
        let name = "yutang";
        let age = 3;
        let b = `你好,${name}`;
        alert(b);
  1. 字元串長度
  • .length
  1. 字元串無可變性
  2. 大小寫轉化 
console.log(name.toUpperCase())
VM98:1 YUTANG
undefined
console.log(name.toLowerCase())
VM168:1 yutang
  1. javascript無單個字個字元，單個字元認為是長度為1的字元串
  2. substring,左開右閉

3.2數組

  • Array可以包含任何資料類型
  • 給數組的長度指派，過大會出現空的位置，過小會把多餘的數值丢棄 
<script>
        //定義數組
        var a = [1,2,3,4,5,6];
        //數組的長度
        alert(a.length);
    </script>
           
//給長度指派
a.length=10
10
a
(10) [1, 2, 3, 4, 5, 6, empty × 4]
//根據元素找位置
a.indexOf(1)
0
//截取數組
a.slice(2,4)
(2) [3, 4]
//push、尾部添加，pop、彈出最後一個
a
(6) [1, 2, 3, 4, 5, 6]
a.push('q','e')
8
a
(8) [1, 2, 3, 4, 5, 6, "q", "e"]
a.pop()
"e"
//shift、彈出頭部，unshift、添加頭部
a
(7) [1, 2, 3, 4, 5, 6, "q"]
a.shift()
1
a.unshift(9)
7
//sort、排序
//revert、反轉
//concat，數組拼接，不會在原始的資料上改動，隻是傳回了新的
a.concat(0.6)
(7) [1, 2, 3, 4, 5, 6, 0.6]
//join、連接配接符
a.join("--")
"1--2--3--4--5--6"
//fill、填充

3.3對象

  • 若幹個鍵值對
  • 用大括号括起來，屬性之間用逗号隔開，最後一個屬性後面不用加逗号
  • 使用一個不存在的對象屬性，不會報錯顯示undefined 
//對象
   //最後一個不用逗号
   var person = {
       name : "yutang",
       age : 3,
       tag : ['java','mysql','javascript']
   }
  • javascript可以用delete動态删除屬性
  • Javascript可以動态添加 
person
{name: "yutang", age: 3, tag: Array(3)}
person.haha="huhdiuh"
"huhdiuh"
person
{name: "yutang", age: 3, tag: Array(3), haha: "huhdiuh"}
delete person.haha
true
person
{name: "yutang", age: 3, tag: Array(3)}
  • 判斷某個對象是否有某屬性 “xxx” in 對象
    • javascript中對象中的屬性都是字元串
    • javascript中對象中的值是其相應的類型 
"name" in person
true
//繼承自父類的方法
"toString" in person
true

3.4流程控制 

//if語句
if(){

}else if(){

}
//循環，避免死循環
while(){

}
for( ; ; ){

}
do{

}while()
//周遊對象裡的元素，類似java中的增強for循環,
//es6的新特性
for( of ){

}
//便利下标
for( in ){

}

3.5Map和Set 

<script>
        //嚴格文法
        "use strict"
        //es6的最新産品
        //map，通過key來擷取value
        var map = new Map([["zhangsan",100],["lisi",78],["wangwu",90]]);
        console.log(map.get("lisi"));
        //添加鍵值對
        map.set("hsuhdj",68);
        map.delete("lisi");

        //set，無序不重複的集合會去重
        var set = new Set([3,1,1,1,1,1]);
        console.log(set);
        set.add(2);   //添加
        set.delete(1);  //會删去所有的1
        set.has(1)    //判斷是否包含某個值
        // Set(2) {3, 1}
        // [[Entries]]
        // 0: 3
        // 1: 1
        // size: (...)
        // __proto__: Set
    </script>

3.6 iterator

  • es6新特性
  • 周遊set、map用for-of

4.函數

  • 方法，對象裡面的函數

4.1定義函數

  • 執行到return就代表函數執行結束。未執行到return函數也會結束，結果為undefined 
<script>
    //定義方式一
        //絕對值函數
        function abs(x) {
            if(x<0){
                x=-x;
            }
            return x;
        }
    //定義方式二
        var  abs = function(x) {
            if(x<0){
                x=-x;
            }
            return x;
        }
    //調用函數
        abs(10);  //10
        abs(-10);  //10
    </script>
  • 參數問題
    • JavaScript可以不傳遞參數，也可以傳遞多個參數 
    <script>
    //絕對值函數
    function abs(x) {
        //判斷傳入參數的值，手動抛出異常
        if(typeof x !== "number"){
            throw "not a number";
        }
        if(x<0){
            x=-x;
        }
        return x;
    }
</script>
    • arguments
      • 是JavaScript免費贈送的關鍵字
      • 它表示函數接受的所有的參數，是一個數組
      • 會包含所有的參數，使用未包含的參數需要排除已有的參數
    • rest
      • 擷取除了已經擷取的參數，剩餘的參數
      • 隻能放在參數清單的最後面，前面加… 
      //使用格式
    function aaa(a,d,...rest) {
        console.log(rest);
    }

4.2變量的作用域

  • javascript中的，var有作用域
  • 假設在函數體中申明，在函數體外不能使用 （若想使用則用，閉包）
  • 如果函數内部申明了相同的變量，使用不沖突
  • 内部函數變量與外部函數變量名相同，則先在自生函數内向外查找
  • 先用後定義，不會出錯。隻是變量未指派。js引擎，自動提升y的定義，為提升指派。
  • 變量都在最前面進行指派 
<script>
        function f() {
            var x = 0;
            x = x + 1;
        }
        x = x + 2;  //Uncaught ReferenceError: x is not defined
    </script>

    <!-- 申明相同變量 -->
    <script>
        function f() {
            var x = 0;
            x = x + 1;
        }
        function f1() {
            var x = "0";
            x = x + 1;
        }
    </script>

    <!-- 内部函數能使用外部的變量，反之不可以 -->
    <script>
        function f() {
            var x = 0;
            x = x + 1;
            function f1() {
            var y = x + 1;
            }
            x = y;//Uncaught ReferenceError: x is not defined
        }
    </script>

    <!-- 内部函數變量與外部的變量相同 -->
    <!-- 内部函數變量與外部函數變量名相同，則先在自生函數内向外查找 -->
    <script>
        function f() {
            var x = 0;
            x = x + 1;
            function f1() {
            var x = x + 1;
            }
            f1();
        }
    </script>

    <!-- 先用後定義 -->
    <script>
        var a = 1 + y;
        var y = "1";   
        // x is not defined

        //等價于
        var y;
        var a = 1 + y;
        y = "1";
    </script>
  1. 全局變量 var
  • window，全局對象
  • 由于js所有的全局變量都是綁定window上的，是以會引發沖突。我們可以通過綁定在别的對象上解決沖突。 
//全局變量
    var a = 1;
    alert(a);
    alert(window.a);//全局變量綁定在windosw對象下

    <script>
        //唯一全局變量
        var yt = {};
        //定義全局變量
        yt.a = 1;
        yt.aaa function (x) {
            console.log(x);
        }
    </script>
  1. 局部變量 let 
<script>
        function aaa(){
            for (var i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i+1);   //會輸出  i  為  101
        }
    </script>

    <script>
        function aaa(){
            for (let i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i+1);   //i is not defined
        }
    </script>
  • es6，關鍵字let，用于解決沖突問題。
  1. 常量 const
  • es6之前，全是大寫命名的變量是常量
  • 現在用const，就可以不改變了

4.3方法

  • 方法就是把函數放在對象内
  • js中apply可以控制this的指向 
<script>
        var me = {
            name : "jjsji",
            birth : 2010,
            //方法
            age : function () {
                var now = new Date().getFullYear();
                return now - this.birth;
            }
        }

        //屬性
        me.name
        //方法
        me.age()

        //等價于上面
        <script>
        function getage() {
            var now = new Date().getFullYear();
            return now - this.birth;
        }
        var me = {
            name : "jjsji",
            birth : 2010,
            //方法
            age : getage
            
        }
        var meeee = {
            name : "jjsjirrfff",
            birth : 2010,
            //方法
            age : getage
            
        }


    // me.age()    可以調用
    //getage().apply(me,[])    可以調用
    //getage()     NaN     因為直接調用的方法是window的方法
    </script>

5.内部對象

  • 标準對象

5.1 Date 

<script>
        var now = new Date();       //Fri Apr 02 2021 18:09:49 GMT+0800 (中國标準時間)    裝置的時間
        now.getFullYear();          //年
        now.getMonth();             //月     1--11
        now.getDate();              //日期
        now.getDay();               //星期幾
        now.getHours();             //時
        now.getMinutes();           //分
        now.getSeconds();           //秒

        now.getTime();              //時間戳，從1970-1.1-00:00:00，開始計算全世界統一
        now = new Date(時間戳);
        now.toLocaleString();       //轉換為當地時間
    </script>

5.2 json

  • 早期用XML進行資料傳輸，json用于替代XML
  • 輕量級的資料傳輸格式
  • JavaScript一切都是對象，任何js支援的類型都可以用json來表示
  • json是一種格式化的字元串，以鍵值對的形式存在
  • 格式
    • 對象 {}
    • 數組 []
    • 所有的鍵值對，key:value 
<script>
        var person = {
            name : "zhamnjh",
            age : 3,
            tall : 175
        }

        //對象轉化為json
        var userjosn = JSON.stringify(person);
        //json轉化為對象     參數為json字元串
        var user = JSON.parse(userjosn);
    </script>
  • json與js對象的差別 
//json
    var josn = '{"name":"yt","age":"18"}';
    //js對象
    var obj = {name:"yt",age:18};

5.3 Ajax

  • 原生的js寫法，xhr異步請求
  • jQuery封裝好的方法，$("#name").ajax("")
  • axios請求

6.面向對象程式設計

6.1 什麼是面向對象

JavaScript的面向對象與Java、c#等有一些差別

  • 類：原指模闆
  • 對象：指執行個體

在JavaScript中有以下的不同

  • 原型 
<script>
        var person = {
            name : "qwe",
            age : 3,
            run : function () {
                console.log(this.name+"---run...");
            }
        };

        var yt = {
            name : "yt"
        };
        //原型
        yt.__proto__ = person;
    </script>
<!-- 
    yt
    {name: "yt"}name: "yt"
    __proto__:
     age: 3name:
      "qwe"run:
       ƒ ()
       __proto__: Object
    yt.run()
    yt---run...
 -->
  • class繼承
    • es6的新特性 
<script>
        //定義一個類
        class student{
            //構造器
            constructor(name) {
                this.name = name;
            }
            //方法
            hello(){
                console.log(this.name+"---hahaha");
            }
        }
        //繼承
        var yt = new student("yt");

        class xiaostudent extends student{
            constructor(name,age) {
                super(name);
                this.age = age;
            }
            myage(){
                console.log("我是一名"+this.age+"歲的國小生");
            }
        }
        var xiaohong = new xiaostudent("xiaohong",1);
    </script>
  • 原型鍊 (__proto__)

7.操作BOM對象(重要)

BOM：浏覽器對象模型

  • IE6-11
  • Chrome
  • Safari
  • Firefox
  • Opera
  1. window對象(重要)
  • window代表浏覽器視窗，視窗的寬高n
  1. navigation
  • 封裝了浏覽器的資訊，平台、版本、使用者資訊
  • 一般我們不會使用這個對象，因為可以進行人為修改
  1. scree
  • 擷取螢幕的寬高
  1. location(重要)
  • 代表目前網頁指向的URL 
host: "www.bilibili.com"    
    href: "https://www.bilibili.com/video/BV1JJ41177di?p=19&spm_id_from=pageDriver"
    protocol: "https:"      //協定
    reload: ƒ reload()      //重新加載
  1. document
  • 代表目前頁面，HTML的DOM樹
  • 擷取具體的文檔樹節點
  • 擷取網頁的cookie
  1. history
  • history.back(); //浏覽器曆史記錄後退
  • history.forward(); //浏覽器曆史記錄前進

8.操作DOM對象

DOM；文檔對象模型

浏覽器的網頁就是一個Dom樹形結構

  • 更新Dom節點
  • 周遊Dom節點
  • 删除Dom節點
  • 添加新的節點

8.1擷取Dom節點

  • 除了通過id擷取到的值是單個值，其他(class、tag)都是數組 
<div id="div">
    <h1>一級标題</h1>
    <p id="p1">jdjdkj</p>
    <p class="p2">jdkjdkljdlkj</p>
</div>

<script>
    //擷取标簽屬性
    document.getElementsByTagName("h1");
    //擷取id屬性
    document.getElementById("p1");
    //擷取class屬性
    document.getElementsByClassName("p2");
    //擷取父節點下的子節點
    var div = document.getElementById("div");
    div.children
</script>

8.2更新節點 

<body>
<div id="div">123</div>

<script>
    var div = document.getElementById("div");
    //修改文本内容
    div.innerText = "nihai";
    //修改HTML
    div.innerHTML = "<strong>hdjhdjhdjdhj</strong>";
    //修改css樣式
    //樣式屬性全為，駝峰命名。
    //屬性值全為，字元串
    div.style.fontSize = "30px";
</script>
</body>

8.3删除節點

  • 删除是一個動态的過程，删除多個節點時children是一直變化的
  1. 先擷取父節點
  2. 再通過父節點删除掉自己 
<body>
<div id="div">
    <h1>一級标題</h1>
    <p id="p1">jdjdkj</p>
    <p class="p2">jdkjdkljdlkj</p>
</div>

<script>

    //删除子節點
    var self = document.getElementById("p1");
    var father = self.parentElement;
    father.removeChild(self);
    //下面是錯誤的，因為删除過程是動态的
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>
</body>

8.4插入節點

我們獲得某個DOM節點。如果此節點是一個空節點，我們可以使用innerHTML、innerText，這兩個方法進行填充。但是如果此節點不是空節點，那麼我們就會把節點中已有的内容進行覆寫，此時不能用這個方法。

  • append，插入到父節點的最後面
  • insert，插入到節點之前
  1. 追加 
<body>
<p id="js">javascript</p>
<div id="div">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>

<script>
    //把js追加到div中，移動節點
    var js = document.getElementById("js");
    var div = document.getElementById("div");
    div.appendChild(js);
</script>
</body>
  1. 建立一個新标簽，插入 
<body>
<p id="js">javascript</p>
<div id="div">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>

<script>
    //建立一個新節點
    var newp = document.createElement("p");
    newp.innerText = "nihjjsjhjh";
    newp.setAttribute("id","newp");     //newp.id = "newp";
    //插入想要的位置
    var div = document.getElementById("div");
    div.appendChild(newp);
</script>
</body>
  1. 插入到子節點之前 
<body>
<p id="js">javascript</p>
<div id="div">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>

<script>
    //把js追加到div中，移動節點
    var js = document.getElementById("js");
    var div = document.getElementById("div");
    //插入到某節點之前
    var ee = document.getElementById("ee");
    div.insertBefore(js,ee);
</script>
</body>

9.操作表單

  1. 表單
    • form
    • input 
<body>
<form action="#">
    <P>
        <span>使用者名：</span><input type="text" id="username">
    </P>
    <p>
        <input type="radio" name="sex" id="boy">男
        <input type="radio" name="sex" id="girl">女
    </p>
</form>
<script>
    //擷取使用者名輸入框内容
    var un = document.getElementById("username");
    un.value;
    //修改輸入框内容
    un.innerText = "qwer";
    //擷取單選框是否被選中
    var boy = document.getElementById("boy");
    boy.checked;
    //修改單選框的值
    boy.checked = true;

</script>
</body>
  1. 送出表單、md5加密 
<!-- 低級玩法，不安全 -->
<body>
<form action="">
    <p>
        <span>賬戶：</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密碼：</span>
        <input type="password" id="pwd" name="pwd">
    </p>
    <p>
        <button type="submit" onclick="tj()">送出</button>
    </p>
</form>
<script>

    function tj() {
        var username = document.getElementById("username");
        var pwd = document.getElementById("pwd");
        console.log(username.value);
        console.log(pwd.value);
        //md5加密
        pwd.value = md5(username.value);
        console.log(pwd.value);
    }
</script>
</body>
<!-- 進階玩法 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單驗證</title>
    <!--  MD5工具類  -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
    onsubmit    綁定送出檢測函數
    将結果傳回給表單，使用onsubmit接受
    οnsubmit="return tj()"
-->
<form action="" onsubmit="return tj()">
    <p>
        <span>賬戶：</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密碼：</span>
        <input type="password" id="pwd" name="input-pwd">
    </p>
    <p>
        <span>密碼：</span>
        <input type="hidden" id="md5pwd" name="md5-pwd">
    </p>
    <p>
        <button type="submit">送出</button>
    </p>
</form>
<script>

    function tj() {
        var username = document.getElementById("username");
        var input_pwd = document.getElementById("input-pwd");
        var md5_pwd = document.getElementById("md5-pwd");

        //md5加密
        md5_pwd.value = md5(input_pwd.value);
        console.log(pwd.value);
        //可以在此處校驗表單内容，true表示送出通過，false表示阻止送出
        return true;
    }
</script>
</body>
</html>

10.jQuery

  • jQuery庫，裡面存在着大量的javascript函數
  • 可以引入jQuery的js檔案來使用
  • 可以使用jQuery的連結來使用 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入jQuery</title>
    <!-- cdn引入 -->
    <!--    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <!--    本地引入-->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!--
    選擇器就是css選擇器
    公式  $(selector).action()
    -->
</head>
<body>

<a href="https://www.baid.com" id="a">111</a>

<script>

    $("#a").click(
        function () {
            alert("jdijfoijfoi");
        }
    );
</script>
</body>
</html>

10.1選擇器 

<script>
    //https://jquery.cuishifeng.cn/
    //jQuery使用手冊，不會就去看下

    //就是原生選擇器
    //标簽
    document.getElementsByTagName();
    //類
    document.getElementsByClassName();
    //id
    document.getElementById();

    //jQuery能使用所有的css選擇器
    //标簽
    $("p").click();
    //類
    $(".pp").click();
    //id
    $("#ppp").click();
</script>

10.2jQuery事件

  • 事件有很多，不會就去上方網站查找 
<script>
    //滑鼠移動事件
    $().onmousemove();
    //滑鼠按下事件
    $().onmousedown();
    //網頁加載完畢事件
    $(document).ready(function () {});    //簡化為  $(function () {});
</script>

10.3jQuery操作DOM 

<body>
<ul id="ul">
    <li name="li1">java</li>
    <li class="li2">python</li>
</ul>
<script>
    //擷取值
    $('#ul li[name=\"li1\"]').text();                        //$().html();
    //修改文本内容
    $('#ul li[name=\"li1\"]').text("hduqwhjdiuhio");         //$('#ul li[name=\"li1\"]').text("<P>huhuh</p>")
    //修改css樣式
    $('#ul li[name=\"li1\"]').css("color","red");
    //隐藏，本質---------display : none;
    $('#ul li[name=\"li1\"]').hide();
    //顯示
    $('#ul li[name=\"li1\"]').show();
</script>
</body>

10.3還需學習Ajax

javascript jquery css html5
上一篇: JavaScript個人學習筆記總結 - 錯誤處理錯誤處理
下一篇: 【知識整理】Node.js-Koa之錯誤處理

繼續閱讀