JavaScript 控制網頁行為

UI 框架

Ant-Design：阿里巴巴出品，基于 React 的 UI 框架
ElementUI、iview、ice：餓了么出品，基于 Vue 的UI框架
Bootstrap：Twitter 推出的一個用于前端的開源工具包
AmazeUI：又叫“妹子UI”，一款 HTML5 跨屏前端框架

1.基本使用

1.1.引入 JavaScript

內部標簽使用

<script>
    //......
</script>

外部引入
abc.js

//......

test.html

<script src="abc.js"></script>

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

    <!--script標簽內，寫JavaScript代碼-->
    <!--<script>
        alert('hello world');
    </script>-->

    <!--外部引入-->
    <!--注意：script標簽必須承兌出現-->
    <script src="js/qj.js"></script>
    <!--不用顯示定義type，默認就是JavaScript-->
    <script type="text/javascript"></script>
</head>
<body>
<!--這里也可以存放-->
</body>
</html>

1.2.基本語法

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

    <script>
        // 1.定義變量
        var score = 71;
        // alert(num);
        // 2.條件控制
        if (score > 60 & score < 70){
            alert("60-70");
        }else if (score >= 70 && score < 80){
            alert("70-80");
        }else {
            alert("other");
        }
        //console.log(score) 在瀏覽器的控制臺打印變量 ==> System.out.println()
        /**
         * 多行注釋
         */

    </script>

</head>
<body>

</body>
</html>

1.3.數據類型

1.3.1.變量

var 變量名 = 值;

1.3.2.數字

不區分小數和整數，統一使用 Number 類型

123 //整數
123.1 //浮點數
1.123e3 //科學計數法
-99 //負數
NaN // not a number
Infinity //表示無限大

1.3.3.字符串

'abc'、"abc"
consloe.log('a');
consloe.log("a");
consloe.log('a'');
換行：\n
tab：\t
Unicode字符：\u4e2d
ASCII字符：\x41

多行字符串編寫：

var test=`khbk
fer
fref`

模板字符串

let name = "xiaoming";
let age = 3;
let msd = `hello,${name}`;

字符串長度：console.log(student.length)
字符串不可變
大小寫轉換：

student.toUpperCase()
stydent.toLowerCase()

獲取指定字符下標：student,indexOf('t')
substring：
student.substring(1)//從第一個字符截取到最后一個字符
student.substring(1,3)//[1,3)

1.3.4.布爾值

true、false

1.3.5.邏輯運算

&&、||、!

1.3.6.比較運算符

=
==：等于（類型不一樣，值一樣，也會判斷為 true）
===：絕對等于（類型和值都一樣，結果true）

堅持不要使用 == 比較
注意：

NaN 與所有的數值都不相等，包括自己（通過 isNaN(NaN) 來判斷這個數是否是 NaN）
盡量避免使用浮點數進行運算，存在精度問題

1.3.7.null和undefined

null：空
undefined：未定義

1.3.8.數組

Java的數值必須是相同類型對象，JS 中不需要這樣
取數組下標：如果越界，報 undefined
Array 可以包含任意的數據類型，通過下標取值和賦值
1、長度：arr.length
注意：給arr.length賦值，數組大小就會發生變化，如果賦值過小，元素就會丟失
2、indexOf，通過元素獲得下標索引（字符串的 "1" 和數字 1 是不同的）
3、slice()，截取 Array 的一部分，返回一個新數組，類似于 String 的 substring
4、push（壓入到尾部），pop（彈出尾部的一個元素）
5、unshift（壓入頭部）,shift（彈出頭部一個元素）
6、排序：sort()
7、元素反轉：reverse()
8、拼接：concat()
9、連接符：join（打印拼接數組，使用特定的字符串連接）
10、多維數組

1.3.8.對象

對象是大括號，數組是中括號

    <script>
        var person = {
            name: "zhangsan",
            age: 3,
            tags: ['js', 'java', 'python']
        }
    </script>

賦值或取對象的值：person.name
使用不存在的對象屬性，報：undefined
動態刪減屬性：delete person.name
動態添加：person.name = 'haha'
判斷屬性值是否在這個對象中：'name' in person
判斷一個屬性是否是這個對象自身擁有的：person.hasOwnProperty('age')

1.4.嚴格檢查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    前提：IDEA 需要設置支持 ES6 語法
    'use strict'; 嚴格檢查模式，預防JavaScript的隨意性導致產生一些問題
    必須寫在JavaScript的第一行
    局部變量建議使用 let 去定義
    -->
    <script>
        'use strict';
        let i = 1;
    </script>
</head>
<body>

</body>
</html>

1.5.流程控制

if(){}else if(){}else{}

循環
while(){}
do{}while()
for(let i=0;i<100;i++){}
forEach循環
for(let i in arr){}

1.6.Map 和 Set

Map：

    <script>
        'use strict';
        // 學生的成績、名字
        let map = new Map([['tom',100],['Jack',90],['haha',80]]);
        let name = map.get('tom');// 通過key獲得value
        map.set('admin',1234);// 新增或修改
        map.delete('tom');// 刪除
        console.log(name);
    </script>

Set：無序不重復的集合

    <script>
        'use strict';
        let set = new Set([3,4,2,1,1,1,1]);// set可以去重
        set.add(5);// 添加
        set.delete(1);// 刪除
        set.has(1);// 是否包含某個元素
    </script>

1.7.iterator

        'use strict';
        // 遍歷數組
        let arr = [1,3,5];
        // for in 是下標
        for (var number of arr) {
            console.log(number);
        }

        // 遍歷 Map
        let map = new Map([['tom',100],['Jack',90],['haha',80]]);
        for (let x of map) {
            console.log(x);
        }
        // 遍歷 Set
        let set = new Set([2,3,4,5]);
        for (let x of set) {
            console.log(x);
        }

2.函數及面向對象

2.1.定義函數

方式一：
絕對值函數

        'use strict';
        function abs(x){
            if (x > 0){
                return x;
            }else {
                return -x;
            }
        }

如果沒有執行 return，函數執行完畢也會返回結果：undefined

方式二：

        'use strict';
        var abs = function (x){
            if (x > 0){
                return x;
            }else {
                return -x;
            }
        }

function(x){……} 這是一個匿名函數，但是可以把結果賦值給 abs

調用函數：abs(10)

參數問題：
假設不存在參數，如何規避？

        'use strict';
        var abs = function (x){
            // 手動拋出異常來判斷
            if (typeof x !== 'number'){
                throw 'Not a Number!';
            }
            if (x >= 0){
                return x;
            }else {
                return -x;
            }
        }

arguments：代表傳遞進來的所有參數是一個數組

        'use strict';
        var abs = function (x){
            console.log("x=>"+x);
            for (let i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }

rest：獲取除了已經定義的參數之外的所有參數

        'use strict';
        function aaa(a, b, ...rest){
            console.log("a=>"+a);
            console.log("b=>"+b);
            console.log(rest);
        }

2.2.變量的作用域

var 定義的變量實際是有作用域的。

假設在函數體中聲明，則在函數體外不可使用（要實現的話，可以研究閉包）
如果兩個函數使用了相同的變量名，只要在函數內部，就不影響
內部函數可以訪問外部函數的成員，反之不行
內外函數的變量重名，由內向外查找，內部函數調用內部的變量，外部調用外部的變量

提升變量的作用域：
js 執行引擎，自動提升了 y 的聲明，但不會提升 y 的賦值；
規范：所有的變量定義都放在函數的頭部，不要亂放，便于代碼維護；

'use strict';
function xx(){
    var x = 'x' + y;
    console.log(x);
    var y = 'y';
}

全局函數：定義在外部
全局對象 window：默認所有的全局變量，都會自動綁定在 window 對象下

var x = '123';
alert(x);
alert(window.x);

alert() 這個函數本身也是 window 對象的變量：window.alert(x)
JS 實際上只有一個全局作用域，任何變量（函數也可以視為變量），假設沒有在函數作用域范圍內找到，就會向外查找，如果在全局作用域找不到，報錯：RefrenceError

規范：

'use strict';
// 唯一全局變量
var Test = {};
// 定義全局變量
Test.name = 'zhangsan';
Test.add = function (a, b){
    return a+b;
}

把自己的代碼全部放入自己定義的唯一空間名字中，降低全局命名沖突的問題

let 關鍵字，解決局部作用域沖突問題
const 常量關鍵字（全部大寫的變量名）

2.3.方法

方法：就是把函數放在對象的里面，對象只有兩個東西：屬性和方法

'use strict';
var test = {
    name: 'zhangsan',
    birth: 2009,
    // 方法
    age: function (){
        // 今年 - 出生的年
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
//屬性
test.name;
//方法
test.age();

'use strict';
function getAge(){
    // 今年 - 出生的年
    var now = new Date().getFullYear();
    return now - this.birth;
}
var test = {
    name: 'zhangsan',
    birth: 2009,
    age: getAge
}；

在 JS 中可以控制 this 的指向-apply

'use strict';
function getAge (){
    // 今年 - 出生的年
    var now = new Date().getFullYear();
    return now - this.birth;
}
var test = {
    name: 'zhangsan',
    birth: 2009,
    age: getAge
};
getAge.apply(test,[]);// this 指向了 test，參數為空

3.常用對象

3.1.內部對象

標準對象：number、string、boolean、object、function、undefined

3.2.Date

基本使用

var now = new Date();
now.getFullYear(); // 年
now.getMonth();// 月 0-11
now.getDate();// 日
now.getDay();// 星期幾
now.getHours();// 時
now.getMinutes();// 分
now.getSeconds();// 秒

now.getTime();// 時間戳，統一：1970-1-1 0:00:00
console.log(new Date("時間戳"));// 時間戳轉時間

3.3.JSON

JSON：輕量級的數據交換格式
在JavaScript中一切皆對象，任何JS支持的類型都可以用 JSON 來表示，格式：

對象都用 {}
數組都用 []
所有的鍵值對都用：key:value

'use strict';
var user = {
    name: "xiaoming",
    age: 3,
    sex: "男"
};
// 對象轉化為 JSON 字符串：{"name":"xiaoming","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);
//JSON 字符串轉化為對象,參數為 JSON 字符串
var obj = JSON.parse('{"name":"xiaoming","age":3,"sex":"男"}');

4.面向對象編程

類：模板
對象：具體的實例

JavaScript：

原型：

'use strict';
var Student = {
    name: "zhangsan",
    age: 3,
    run: function (){
        console.log(this.name + " run ...");
    }
};
var xiaoming = {
    name: "xiaoming"
};
var Bird = {
    fly: function (){
        console.log(this.name + " fly ...");
    }
};
//小明的原型是 Student
xiaoming.__proto__ = Student;
// 小明的原型是 Bird
xiaoming.__proto__ = Bird;

class 繼承

'use strict';
// 定義一個學生的類
class Student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('hello');
    }
}
class XiaoStudent extends Student{
    constructor(name, grade) {
        super();
        this.grade = grade;
    }
    myGrade(){
        alert("我是個小學生");
    }
}
let xiaoming = new Student("xiaoming");
let xiaohong = new XiaoStudent("xiaohong", 89);

5.操作 BOM 元素

BOM：瀏覽器對象模型

5.1.window

window 代表瀏覽器窗口

window.innerHeight //內部窗口高度
window.innerWidth //內部窗口寬度
window.outerHeight //外部窗口高度
window.outerWidth

5.2.Navigator

Navigator：封裝了瀏覽器的信息

navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform

大多數時候，不會使用navigator對象，因為會被人為修改

5.3.screen

screen：屏幕

screen.windth
screen.height

5.4.location

location：代表當前頁面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload() //刷新網頁
//設置新的地址
location.assign("URL")

5.5.document

document：代表當前的頁面

document.title //網站標題，可以賦值
document.getElementById('id') //獲取網頁文檔樹節點
document.cookie
// 服務器端可以設置 cookie: httpOnly

5.6.history

history：瀏覽器的歷史記錄

history.back() //后退
history.forward() //前進

6.操作 DOM 元素

DOM：文檔對象模型

6.1.獲得DOM節點

document.getElementById();
document.getElementsByTagName();
document.getElementsByClassName();
document.getElementById('father').children;// 獲取父節點下的所有子節點

6.2.更新節點

// div id="id1"
var id1 = document.getElementById("id1");

操作文本：

id1.innerText = 'ddd'
id1.innerHTML = '<strong>123</strong>' //解析HTML文本標簽

操作CSS：

id1.style.color = 'yellow';
id1.style.fontSize = '20px';

6.3.刪除節點

步驟：先獲取父節點，再通過父節點刪除自己

var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self);

刪除多個節點的時候，children 是時刻在變化的

6.4.插入節點

獲得的DOM節點如果是空的，可以通過 innerHTML 增加一個元素，如果有元素，那么會覆蓋

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js); //追加到后面
    // 創建新節點
    var newP = document.createElement('p');
    newP.id = 'newP';
    newP.innerText = 'hello';
</script>

7.操作表單（驗證）

<form action="post">
    <p>
        <span>用戶名:</span><input type="text" id="username" required>
    </p>
    <p>
        <span>性別：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
</form>
<script>
    var input_text = document.getElementById('username');
    var boy_raido = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    //得到輸入框的值
    input_text.value;
    //修改輸入框的值
    input_text.value = '123';
    // 對于單選框、多選框等固定的值，boy_radio.value 只能的取到當前的值
    boy_raido.checked;// 查看返回的結果，是否為true
    boy_raido.checked = true;// 賦值

</script>

提交表單：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5 工具類-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表單綁定提交事件
onsubmit 綁定一個提交檢測的函數，true false
將這個結果返回給表單，使用 onsubmit 函數
-->
<form action="https://www.baidu.com/" method="post" onsubmit="aaa()">
    <p>
        <span>用戶名:</span><input type="text" id="username" name="username">
    </p>
    <p>
        <!--<span>密碼:</span><input type="password" id="password" name="password">-->
        <span>密碼:</span><input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <!--綁定事件 onclick 被點擊-->
    <button type="submit">提交</button>
</form>
<script>
    function aaa() {
        alert(1);
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5Pwd = document.getElementById('md5-password');
        md5Pwd.value = md5(md5Pwd.value);
        // 可以校驗判斷表單內容，true：提交；false：阻止提交
        return true;

        /*console.log(uname.value);
        // MD5 算法
        pwd.value = md5(pwd.value);
        console.log(pwd.value);*/
    }
</script>
</body>
</html>

8.jQuery 庫

獲取 jQuery：https://jquery.com
在線鏈接（CND jQuery）：

https://www.bootcdn.cn/jquery
https://www.jq22.com/cdn

API 中文文檔：https://www.32r.com/soft/41594.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
$(選擇器).事件(函數)
-->
<a href="" id="test-jquery">點我</a>
<script>
    // 選擇器就是 css 的選擇器
    $('#test-jquery').click(function () {
        alert('hello');
    });
</script>
</body>
</html>

posted @ 2024-05-27 14:42 落落的學習閱讀(80) 評論(0) 收藏舉報

刷新頁面返回頂部

luoluostudy