web DevOps / webops d2 / css id / css class / css hover / javascript / Browser Object Model / bom / Document Object Model / dom

NSD_DEVOPS_02

CSS 概述

概念與理解

層疊樣式表 — 也就是 CSS — 是在 HTML 之后應該學習的第二門技術。HTML 用于定義內容的結構和語義，CSS 用于設計風格和布局。比如，我們可以使用 CSS 來更改內容的字體、顏色、大小、間距，將內容分為多列，或者添加動畫及其他的裝飾效果。

修改頁面樣式

根據樣式表在頁面中呈現的方式不同，可以通過以下三種方式在頁面中使用

內聯樣式

該樣式用于某個元素屬性中，借助于 style 標簽屬性，為當前的標簽添加樣式說明，格式如下：

樣式聲明：由 CSS 屬性和值組成

style="屬性: 值;屬性: 值;"

實驗：css內聯樣式

css內聯樣式表就是把css代碼直接寫在現有的HTML標簽中

創建一個新的 HTML 文件 myhtml9.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 style="background-color:red;color:white;font-size: 40px;text-align:center;">
    CSS基本概念
</h1>
<!--樣式太長了，如果還有h1，和上面的樣式一模一樣，只能復制一次樣式，麻煩-->
<!--要修改，得改多處，麻煩，大項目很麻煩-->
<!--解決：樣式和頁面分離   內嵌樣式-->
<h1 style="background-color:red;color:white;font-size: 40px;text-align:center;">
    俺也一樣
</h1>
</body>
</html>

點擊瀏覽器圖標，查看網頁效果

選擇器（很多標簽如何選定）

內嵌樣式

借助于 style 標簽，在 HTML 文檔中嵌入 CSS 樣式代碼，實現 CSS 樣式與 HTML 標簽之間的分離，格式如下：

<style>
    選擇器 {
        屬性: 值;
        屬性: 值;
        ......
    }
</style>

實驗：css內嵌樣式

嵌入式css樣式，就是可以把css樣式代碼寫在 <style type="text/css"> 標簽之間。

創建一個新的 HTML 文件 myhtml10.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            background-color: red;
            color: white;
            font-size: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
<!--background-color 背景顏色-->
<!--color 字體顏色-->
<!--font-size 字體大小-->
<!--text-align 文本水平對齊方式-->
<h1>CSS基本概念</h1>
<h1>俺也一樣</h1>
</body>
</html>

點擊瀏覽器圖標，查看網頁效果

外鏈樣式

外鏈式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外鏈文件中，這個css樣式文件以“.css”為擴展名，在<head>內（不是在<style>標簽內）使用<link>標簽將css樣式文件鏈接到HTML文件內，創建一個單獨的樣式表文件用來保存樣式規則

一個純文本文件，文件后綴為 .css
該文件中只能包含樣式規則
樣式規則由選擇器和樣式聲明組成

CSS 選擇器用于查找 HTML 中的標簽，通過標簽名或者某些屬性值到頁面中選取相應的標簽，并為其應用樣式

實驗：css外鏈樣式

新建一個css外部層疊樣式表，文件名css1.css，存放在 static/css目錄下

h1 {
    background-color: red;
    color: white;
    font-size: 40px;
    text-align: center;
}

修改 HTML 文件 myhtml10.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 內嵌樣式 -->
    <!--<style>
        h1 {
            background-color: red;
            color: white;
            font-size: 40px;
            text-align: center;
        }
    </style>-->
    <!-- 外鏈樣式 -->
    <link rel="stylesheet" href="static/css/css1.css"/>
</head>
<body>
<!--background-color 背景顏色-->
<!--color 字體顏色-->
<!--font-size 字體大小-->
<!--text-align 文本水平對齊方式-->
<h1>CSS基本概念</h1>
<h1>俺也一樣</h1>
</body>
</html>

點擊瀏覽器圖標，查看網頁效果

CSS 選擇器

作用

匹配文檔中的某些標簽為其應用樣式，根據查找元素的方式不同，可以分為以下幾類：

標簽選擇器	id選擇器	class選擇器
群組選擇器	后代選擇器	子代選擇器
偽類選擇器

標簽選擇器

根據標簽名匹配文檔中所有該標簽，語法格式：

標簽名 {
    屬性:值;
}

實驗：標簽選擇器

修改 HTML 文件 myhtml10.html 文件，將外鏈樣式注釋掉，重新修改h1的樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            background-color: pink;
            color: blue;
            font-size: 40px;
            text-align: center;
        }
    </style>
    <!-- 外鏈樣式 -->
<!--    <link rel="stylesheet" href="static/css/css1.css"/>-->
</head>
<body>
<!--background-color 背景顏色-->
<!--color 字體顏色-->
<!--font-size 字體大小-->
<!--text-align 文本水平對齊方式-->
<h1>CSS基本概念</h1>
<h1>俺也一樣</h1>
</body>
</html>

點擊瀏覽器圖標，查看網頁效果

ID選擇器

通過 id 屬性進行標簽的定位，然后進行屬性的修改

實驗：ID 選擇器

修改 HTML 文件 myhtml10.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            background-color: pink;
            color: blue;
            font-size: 40px;
            text-align: center;
        }
        /* 通過id查找元素 */
        #last {
            font-size: 40px;
            color: aqua;
        }
    </style>
    <!-- 外鏈樣式 -->
<!--    <link rel="stylesheet" href="static/css/css1.css"/>-->
</head>
<body>
<!--background-color 背景顏色-->
<!--color 字體顏色-->
<!--font-size 字體大小-->
<!--text-align 文本水平對齊方式-->
<h1 style="">CSS基本概念</h1>
<h1>俺也一樣</h1>
<h1 id="last">我們不一樣</h1>
</body>
</html>

點擊瀏覽器圖標，查看網頁效果

class 選擇器

根據標簽的 class 屬性值匹配相應的標簽，class屬性值可以重復使用，實現樣式的復用，語法格式：

.class 類名{
    屬性:值;
}

實驗：class 選擇器

修改 HTML 文件 myhtml10.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            background-color: pink;
            color: blue;
            font-size: 40px;
            text-align: center;
        }
        /* 通過id查找元素 */
        #last {
            font-size: 40px;
            color: aqua;
        }
        /* 通過class查找元素 */
        .red {
            background-color: red;
            color: white;
        }
    </style>
    <!-- 外鏈樣式 -->
<!--    <link rel="stylesheet" href="static/css/css1.css"/>-->
</head>
<body>
<!--background-color 背景顏色-->
<!--color 字體顏色-->
<!--font-size 字體大小-->
<!--text-align 文本水平對齊方式-->
<h1 class="red" style="">CSS基本概念</h1>
<h1>俺也一樣</h1>
<h1 id="last">我們不一樣</h1>
<p class="red">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto cupiditate eos facilis natus rerum! Accusantium, aut dicta eius est laboriosam molestiae nulla numquam unde! Non omnis quos unde! Cum, odit?
</p>
</body>
</html>

點擊瀏覽器圖標，查看網頁效果

使用最頻繁，類選擇器，可以選單個，可以選多個

后代選擇器

使用后代選擇器，需要在HTML頁面中說明父子關系

實驗：后代選擇器

創建一個新的 HTML 文件 myhtml11.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div p {
            /* 查找div的后代元素(包含直接子元素) */
            color: red;
        }
        div span {
            color : blue;
        }
    </style>
</head>
<body>
    <div>祖父標簽
        <p>父標簽
            <span>子標簽</span>
        </p>
    </div>
</body>
</html>

點擊瀏覽器圖標，查看網頁效果

子代選擇器

匹配蠻子選擇器的所有直接子標簽，語法格式：

selector1 > selector2 {
    屬性: 值;
}

實驗：子代選擇器

修改 HTML 文件 myhtml11.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div p {
            /* 查找div的后代元素(包含直接子元素) */
            color: red;
        }
        div span {
            color : blue;
        }
        ul > li {
            text-align: center;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
    <div>祖父標簽
        <p>父標簽
            <span>子標簽</span>
        </p>
    </div>
</body>
</html>

點擊瀏覽器圖標，查看網頁效果

常見標簽創建方法的快捷鍵

<!--div#title + tab-->
<div id="title"></div>
<!--p.red + tab-->
<p class="red"></p>
<!--div#d1.red + tab-->
<div id="d1" class="red"></div>

偽類選擇器

該類選擇器可以為標簽的不同狀態分別設置樣式，但必須與基礎選擇器結合使用才能生效。

使用

.c1:hover {}
.txt:focus {}

實驗：偽類選擇器

創建一個新的 HTML 文件 myhtml12.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color: white;
            background-color: red;
        }
        h1:hover {
            /* h1鼠標移出時顯示的樣式 */
            color: green;
        }
    </style>
</head>
<body>
    <h1>看我看我看我</h1>
</body>
</html>

鼠標只有移動到文字上時才變色，接著修改 myhtml12.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color: white;
            background-color: red;
            display: inline;
        }
        h1:hover {
            /* h1鼠標移出時顯示的樣式 */
            color: green;
        }
    </style>
</head>
<body>
    <h1>看我看我看我</h1>
</body>
</html>

加過渡變化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color: white;
            background-color: red;
            display: inline;
            /* transition過度：讓樣式的變化在規定時間內完成，all表示所有的樣式 */
            /* 或者改為 color 0.5s */
            transition: all 0.5s;
        }
        h1:hover {
            /* h1鼠標移出時顯示的樣式 */
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>看我看我看我</h1>
</body>
</html>

鼠標移動的樣式修改，現在是豎線，改成手形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color: white;
            background-color: red;
            display: inline;
            /* transition過度：讓樣式的變化在規定時間內完成，all表示所有的樣式 */
            /* 或者改為 color 0.5s */
            transition: all 0.5s;
        }
        h1:hover {
            /* h1鼠標移出時顯示的樣式 */
            color: green;
            background-color: yellow;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>看我看我看我</h1>
</body>
</html>

點擊瀏覽器圖標，查看網頁效果

JavaScript

介紹

簡稱JS，是一種瀏覽器解釋型語言,嵌套在HTML文件中交給瀏覽器解釋執行。主要用來實現網頁的動態效果，用戶交互及前后端的數據傳輸等

組成

核心語法 -ECMAScript 規范了JS的基本語法
瀏覽器對象模型 -BOM
- Browser Object Model，提供了一系列操作瀏覽器的方法
文檔對象模型 -DOM
- Document Object Model ，提供了一系列操作的文檔的方法

使用方式

元素綁定事件

事件：指用戶的行為（單擊，雙擊等）或元素的狀態（輸入框的焦點狀態等）
事件處理：元素監聽某種事件并在事件發生后自動執行事件處理函數。
常用事件：onclick (單擊事件)

<!--實現點擊按鈕在控制臺輸出-->
<button onclick="console.log('Hello World');">點擊</button>

文檔內嵌

使用<script type="text/javascript"></script>標簽書寫 JS 代碼
語法

<script>
  alert("網頁警告框");
</script>

注意：<script></script>標簽可以書寫在文檔的任意位置，書寫多次，一旦加載到script標簽就會立即執行內部的JS代碼，因此不同的位置會影響代碼最終的執行效果。通常放在head中的js會在點擊等事件發生時調用，而放在body中的js往往是為了生成一定的內容。

外部鏈接

創建外部的JS文件 XX.js，在HTML文檔中使用<script src=""></script>引入

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

注意：<script src=""></script>既可以實現內嵌 JS 代碼，也可以實現引入外部的 JS 文件，但是只能二選一

實驗：JS 使用方式

創建一個新的 HTML 文件 myhtml13.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS使用方法</title>
    <style>
        div {
            width: 100px;
            height: 40px;
            background-color: #bbbbbb;
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            color:#ff2222;

        }
        div:hover{
            /* 鼠標指針樣式 */
            cursor: pointer;
            background-color: #666666;
            color:white
        }
    </style>

    <!-- 外部鏈接 js文件 可以在任何位置引入js代碼 -->
    <script src="static/js/demo.js"></script>
</head>
<body>
    <!-- js 代碼以屬性值的形式付給事件屬性 當事件出發就會執行該代碼-->
    <!-- alert() 警告彈窗 -->
    <div onclick="alert('讓你點就點啊！');">點我試試</div>

    <!-- 文檔內嵌 script 標簽中寫js代碼，可以放在任意位置 -->
    <script>
        alert("內嵌代碼，習慣性的放在body最后");
    </script>

</body>
</html>

在指定位置（static/js/demo.js）創建 demo.js 文件，編寫指定內容

/* js注釋   /*多行注釋*/   // 單行注釋    */
// js程序  控制臺打印
console.log("這是外部的js獨立代碼");

點擊瀏覽器圖標，查看網頁效果

基礎語法

語法規范

JS是由語句組成,語句由關鍵字,變量,常量,運算符,方法組成。分號可以作為語句結束的標志,也可以省略
JS嚴格區分大小寫
注釋語法
- 單行注釋使用 //
- 多行注釋使用 /* */

JS的變量與常量

作用 : 用于存儲程序運行過程中可動態修改的數據
語法 : 使用關鍵var聲明,自定義變量名

var a;      //變量聲明
a = 100;    //變量賦值
var b = 200; //聲明并賦值
var m,n,k;  //同時聲明多個變量
var j = 10,c = 20; //同時聲明并賦值多個變量

命名規范 :
- 變量名,常量名,函數名,方法名自定義,可以由數字,字母,下劃線,$組成,禁止以數字開頭
- 禁止與關鍵字沖突(var const function if else for while do break case switch return class)
- 變量名嚴格區分大小寫
- 變量名盡量見名知意,多個單詞組成采用小駝峰,例如："userName"
使用注意 :
- 變量如果省略var關鍵字,并且未賦值,直接訪問會報錯
- 變量使用var關鍵字聲明但未賦值,變量初始值為undefined
- 變量省略var關鍵字聲明,已被賦值,大多可正常使用，某些瀏覽器嚴格條件下會報錯，不建議這么做

數據類型

基本數據類型

// 1、number 數值類型
// 整數
var a = 100;
// 小數
var m = 1.2345;
// 2、string 字符串類型
// 字符串 : 由一個或多個字符組成,使用""或''表示,每一位字符都有對應的Unicode編碼
var s = "100";
var s1 = "張三";
// 3、boolean 布爾類型
// 只有真和假兩個值，布爾值與number值可以互相轉換。true 為 1，false 為 0
var isSave = true;
var isChecked = false;
//4、undefined (程序返回的值)
// 特殊值,變量聲明未賦值時顯示undefined
var a;
console.log(a);//undefined
// 5、null 空類型 (主動使用的)
// 解除對象引用時使用null,表示對象為空
// 6、數組類型
var arr = [1,2,3,4,5];
console.log(arr[0]);
// 7、 對象
var obj = {one:1,two:2}; // 注意鍵不必加引號也可以
console.log(obj.one);
console.log(obj["one"]);

數據類型轉換

不同類型的數據參與運算時,需要轉換類型

強制類型轉換

轉換字符串類型方法 : toString() 返回轉換后的字符串

 var a = 100;
 a = a.toString(); //"100"
 var b = true;
 b = b.toString(); //"true"

轉換number類型

方法： Number(param)
- 參數為要進行數據類型轉換的變量或值，返回轉換后的結果:
  - 如果轉換成功,返回number值
  - 如果轉換失敗,返回NaN,(Not a Number)，只要數據中存在非number字符,一律轉換失敗，返回 NaN
隱式類型轉換（自動轉換）
- 當字符串與其他數據類型進行"+"運算時,表示字符串的拼接，不再是數學運算
- 轉換規則：將非字符串類型的數據轉換成字符串之后進行拼接，最終結果為字符串

實驗：JS 數據類型

創建一個新的 HTML 文件 myhtml14.html 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS的變量和數據類型</title>
</head>

<body>
<script>
        var num;   // 聲明一個變量
        // console.log(num);  //undefined  聲明的但是沒有賦值的變量
        num = 1; // 變量賦值
        var a = 1; // 聲明變量同時進行初始化
        var m, n = 1; // 同時聲明多個變量，用逗號隔開

        // js的基礎數據類型
        var i = 1; // 整形
        var f = 3.14; //浮點型
        var s = "hello"; // 字符串
        var b = true // 布爾類型變量  true  false
        var n = null // 空值沒有意義 --》 None

        // console.log(i,f,s,b,n);
        // console.log(typeof s); // 查看變量數據類型

        // 數組
        var arr = [1,2,3,4,5];
        console.log(arr);
        console.log(arr[1]);
        console.log(typeof arr);

        // 對象  鍵是字符串  值可是js的任何類型  鍵不能重復
        var person = {name:"Tom",age:18,score:4.9};
        console.log(person);
        console.log(person["name"]);  // 中括號鍵取值，鍵需要引號
        console.log(person.name);
        console.log(typeof person);

        // 修改屬性，添加心得屬性
        person.age = 19;
        person.hobby = "唱歌";
        console.log(person);

        // 字符串常用操作
        var info = "Hello world";
        // console.log(info[0]); // 取單個字符 沒有逆向索引的寫法
        // console.log(info.length); // 獲取字符串長度
        // console.log("哈哈哈," + info); // 字符串拼接
        // console.log(info.slice(0,4)); // 切片
        // console.log(info.search("world")); // 沒有找到-1 找到返回起始位索引號

        // 字符串格式化
        var name="Tom";
        // console.log(`I'm ${name}`);

        // 數組的常用方法
        var arr = [1,2,3,4,5,6,7]
        console.log(arr.length);  // 數組長度
        console.log(arr.slice(1,3));  // 切片

        arr.push(10);  // 從后邊增加一項
        console.log(arr);
        arr.pop()  // 從后邊刪除一項
        console.log(arr);


        // 數字轉換為字符串
        var a = 100;
        // 顯式轉換  數字類型 --》 字符串類型
        // var res = a.toString()
        // console.log(res);
        // console.log(typeof res);

        // 隱式轉換  "1" + 100
        var res = "1" + a;
        // console.log(res); // 1100
        // console.log(typeof res);

        // 字符串轉換為數字
        var s = "1234";
        var res = Number(s);  //  字符串 --》 數字
        console.log(res)   // NaN  Not a number
        console.log(typeof res)

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

運算符

賦值運算符

= 將右邊的值賦給左邊變量
算數運算符

+    -    *    /    %

復合運算符

+=     -=       *=       /=       %=

自增或自減運算符

++      --

- 變量的自增和自減指的是在自身基礎上進行 +1或-1 的操作注意：
  - 如果自增或自減運算符與其他語句結合使用時，做前綴表示先進行自增/減++/--,再使用自增/減后的值參與語句，如果做后綴，就先結合其他語句，再進行自增/減++ / --
關系運算符/比較運算符

<     >     >=     <=      ==(相等)      !=(不相等)     ===(全等)   !==(不全等)

關系運算符用來判斷表達式之間的關系,結果永遠是布爾值 true/false
相等與全等
- 相等 : 不考慮數據類型,只做值的比較(包含自動類型轉換)
- 全等 : 不會進行數據類型轉換,要求數據類型一致并且值相等才判斷全等
邏輯運算符
- && 邏輯與條件1&&條件2，表達式同時成立,最終結果才為true;
- || 邏輯或條件1||條件2，表達式中只要有一個成立,最終結果即為true;
- ! 邏輯非 !條件，對已有表達式的結果取反

實驗：JS 運算符

創建一個新的 HTML 文件 myhtml15.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>運算符</title>
</head>
<body>
    <script>
        var a = 10;
        // ++a;  // a += 1   a++  ++a   a--  --a
        // console.log(a);

        // console.log(a++); // 10  先使用a原值，再自增
        // console.log(a); // 11

        // console.log(++a); // 11   先自增再使用自增后的值
        // console.log(a); // 11

        // 相等  帶有隱式的轉換
        console.log("100" == 100);  // true

        // 全等  判斷類型和數值  --》 類似python ==
        console.log("100" === 100);  // false

        // 邏輯運算符
        console.log(true && false);  // false
        console.log(true || false); //true
        console.log(! true); // false
    </script>
</body>
</html>

點擊瀏覽器圖標，查看網頁效果

流程控制

分支/選擇結構

if 語句，簡單 if 結構

if(條件表達式){
    表達式成立時執行的代碼段
}

注意 : 除零值以外，其他值都為真，以下條件為假值false

if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}

if - else結構

if (條件表達式) {
    //條件成立時執行
}else{
    //條件不成立時選擇執行
}

多重分支結構

if(條件1){
    //條件1成立時執行
}else if(條件2){
    //條件2成立時執行
}else if(條件3){
    //條件3成立時執行
}...else{
    //條件不成立時執行
}

實驗：條件分支

創建一個新的 HTML 文件 myhtml16.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if條件語句</title>
</head>
<body>
    <script>
        var a = 10, b = 20;
        if (a < b) {
            console.log("條件為真");
        }

        // 多分支的if
        var score = prompt("輸入一個分數:")
        if(score>=90){
            console.log("優秀");
        }else if(score >= 80){
            console.log("良好");
        }else if(score >= 60){
            console.log("及格");
        }else{
            console.log("不及格");
        }
    </script>
</body>
</html>

點擊瀏覽器圖標，查看網頁效果

循環結構

while循環

定義循環變量;
   while(循環條件){
   條件滿足時執行的代碼段
   更新循環變量;
}

for 循環

for (定義循環變量;循環條件;更新循環變量){
    循環體;
}

關鍵字

break 強制結束循環
continue 結束當次循環，開始下一次循環循環嵌套 : 在循環中嵌套添加其他循環

實驗：條件分支

創建一個新的 HTML 文件 myhtml17.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循環</title>
</head>
<body>
    <script>
        var n = 0;
        while(n < 6){
            console.log(n);
            n++;
        }

        // 先執行語句在判斷 ---》 語句至少執行1次
        do{
            console.log("----",n);
            n++;
        }while(n < 10);
        
        // 3條件
        // for(var i=0;i<6;i++){
        //     console.log(i);
        // }

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

        for(var i=0;i < arr.length;i++){
            console.log(i,arr[i]);
        }
    </script>
</body>
</html>

函數

//函數聲明
function 函數名(參數列表){
    函數體
    return 返回值;
}
//函數調用
函數名(參數列表);

帶返回值的語法格式

匿名函數

匿名函數：省略函數名的函數。語法為：

匿名函數自執行

 (function (形參){
  
 })(實參);

定義變量接收匿名函數

 var fn = function (){};
 fn(); //函數調用

匿名函數在執行時，也可以通過括號向函數體傳遞參數

DOM節點操作

DOM全稱為 “Document Object Model”，文檔對象模型，提供操作HTML文檔的方法。（注：每個html文件在瀏覽器中都視為一篇文檔,操作文檔實際就是操作頁面元素。）

節點對象

JavaScript 會對 html 文檔中的元素、屬性、文本進行封裝，統稱為節點對象，獲取節點對象后可以通過方法操作相關的屬性內容。

元素節點 ( 用于操作標簽）

方法	描述
document.getElementById(id)	通過元素 id 來查找元素
document.getElementsByTagName(name)	通過標簽名來查找元素
document.getElementsByClassName(name)	通過類名來查找元素

操作標簽的屬性和內容

元素節點對象提供了以下屬性來操作元素內容

innerHTML : 讀取或設置元素文本內容,可識別標簽語法
innerText : 設置元素文本內容,不能識別標簽語法

操作 DOM 樹中的屬性值：
用于操作標簽屬性

element.id = "d1";  //set 方法 注意屬性值都要寫成字符串形式
console.log(element.id);  //get 方法
elem.getAttribute("attrname");  //根據指定的屬性名返回對應屬性值
elem.setAttribute("attrname","value");  //為元素添加屬性,參數為屬性名和屬性值
elem.removeAttribute("attrname");  //移除指定屬性

操作元素樣式

為元素添加 id、class屬性，或操作元素的行內樣式，訪問元素節點的style屬性，獲取樣式對象；樣式對象中包含CSS屬性，使用點語法操作。

elem.style = "width:300px;";
elem.style.color = "white";
elem.style.fontSize = "20px";

注意 :
- 屬性值以字符串形式給出，單位不能省略
- 如果css屬性名包含連接符，使用JS訪問時，一律去掉連接符,改為駝峰， font-size -> fontSize

end

posted @ 2024-01-16 10:06 siemens800 閱讀(28) 評論(0) 收藏舉報

刷新頁面返回頂部

天行健 - Lindows

web DevOps / webops d2 / css id / css class / css hover / javascript / Browser Object Model / bom / Document Object Model / dom

NSD_DEVOPS_02

CSS 概述

概念與理解

修改頁面樣式

內聯樣式

實驗：css內聯樣式

內嵌樣式

實驗：css內嵌樣式

外鏈樣式

實驗：css外鏈樣式

CSS 選擇器

作用

標簽選擇器

實驗：標簽選擇器

ID選擇器

實驗：ID 選擇器

class 選擇器

實驗：class 選擇器

后代選擇器

實驗：后代選擇器

子代選擇器

實驗：子代選擇器

偽類選擇器

分類

使用

實驗：偽類選擇器

JavaScript

介紹

組成

使用方式

元素綁定事件

文檔內嵌

外部鏈接

實驗：JS 使用方式

基礎語法

語法規范

JS的變量與常量

數據類型

數據類型轉換

實驗：JS 數據類型

運算符

實驗：JS 運算符

流程控制

分支/選擇結構

實驗：條件分支

循環結構

while循環

for 循環

關鍵字

實驗：條件分支

函數

匿名函數

DOM節點操作

節點對象

操作標簽的屬性和內容

公告