day52 BOM對象之定時器 BOM其餘和DOM介紹內容操做和樣式操做

時間 2020-06-15

標籤 day52 day bom 對象定時器其餘 dom 介紹內容樣式欄目 HTML 简体版

原文原文鏈接

上節回顧：html

day52

1. 前情回顧
    1. JS中的函數  *****
        1. 普通函數
        2. 帶參數的函數
        3. 有返回值的函數
        4. 匿名函數                    *****
        5. 當即執行函數（自執行函數）(function (形參){函數體})(實參)  *****
        
    2. 變量的做用域
        1. 全局變量
        2. 局部變量
        3. 閉包
    
    3. Date對象
    4. JSON   *****
        1. 序列化      JSON.stringify(obj) --> string
        2. 反序列化    JSON.parse(string)  --> obj
        
    5. RegExp對象
        1. 兩種生成正則對象的方式
            1. var p1 = new RegExp("正則表達式", "匹配模式")
            2. var p2 = /正則表達式/匹配模式                  **經常使用**
        2. p1.test(string)  --> 若是能匹配就返回true,不然返回false
        
        3. test()課上演示有問題，還須要解決。
        
    6. Math對象
        數學相關
        Math.max()
        Math.min()
        Math.random()
        Math.abs()

上節回顧課堂筆記

今日內容：前端

2. 今日內容

    JS

    BOM
        window
        
    DOM
        文檔結構
            元素節點
            文本節點
            屬性節點
    
    查找節點
        CSS選擇器
            基本選擇器
                標籤選擇器  --> 標籤名
                id選擇器    --> #id值
                class選擇器 --> .class名
                * 選擇器    --> *
                
        JS找標籤
            基本查找
                1. document.getElementsByTagName
                2. document.getElementById
                3. document.getElementsByClassName
            間接查找
                根據標籤的層級關係去找
                1. parentElement 父節點標籤元素
                2. children  全部子標籤
                3. firstElementChild  第一個子標籤元素
                4. lastElementChild  最後一個子標籤元素
                5. nextElementSibling  下一個兄弟標籤元素
                6. previousElementSibling  上一個兄弟標籤元素
                
    操做節點的屬性
        1. 修改文本
            innerText
        2. 修改節點文檔
            innerHTML
        3. 修改樣式
            1. 經過class屬性，修改
                className  獲取全部樣式類名(字符串)

                classList.remove(cls)  刪除指定類
                classList.add(cls)  添加類
                classList.contains(cls)  存在返回true，不然返回false
                classList.toggle(cls)  存在就刪除，不然添加
                
            2. 經過style屬性修改
                1. 沒有中橫線的
                    eleObj.style.padding
                2. 有中橫線的
                    eleObj.style.backgroundColor

今日內容課堂筆記

3. 今日做業
    1. 整理今天的知識點（博客或筆記）  整理慢的同窗，我上課說重點的那些整理下就行
    2. 左側菜單本身寫一遍
    3. 全選、反選、取消的做業寫完
    4. 抽屜的做業繼續寫
    5. 預習接下來的內容

今日做業

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>正則表達式示例</title>
    <script src="1正則表達式示例.js"></script>
</head>
<body>

</body>
</html>

正則表達式示例

var regl=/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
var name="Alex18age";
console.log(regl.test(name));
console.log(regl.test(name));

console.log(regl.test());
console.log(regl.test());

正則表達式JS部分

1、前端基礎 BOM和DOMnode

JavaScript分爲 ECMAScript，DOM，BOM。正則表達式

BOM（Browser Object Model）是指瀏覽器窗口對象模型，頂級對象是window。編程

DOM （Document Object Model）是指文檔對象模型，並不是一個對象。數組

一、Windows對象瀏覽器

alert()            顯示帶有一段消息和一個確認按鈕的警告框。
setInterval()      按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval()    取消由 setInterval() 設置的 timeout。
setTimeout()       在指定的毫秒數後調用函數或計算表達式。
clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
scrollTo()         把內容滾動到指定的座標。

confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt()           顯示可提示用戶輸入的對話框。
open()             打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close()            關閉瀏覽器窗口。

View Code

window 對象表示一個瀏覽器窗口。閉包

二、 app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑馬燈示例</title>
    <script>
        function run(){
//            找到ID 值爲il的標籤
            var ele=document.getElementById("il");
//            獲取標籤的文本內容，存到str變量
            var str=ele.innerText;
//            把字符串第一位拿出來
            var firstStr=str.charAt(0);
//            拼到最後組成新的字符串
            var newText=str.slice(1)+firstStr;
//            賦值給標籤的文本內容
            ele.innerText=newText;
        }
        var timmer=setInterval(run,500);
//        clearInterval(timmer);
    </script>
</head>
<body>
<h1 id="il">大海啊大海啊，你爲何這樣藍這樣藍呢</h1>
</body>
</html>

跑馬燈示例

alert()            顯示帶有一段消息和一個確認按鈕的警告框。
setInterval()      按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval()    取消由 setInterval() 設置的 timeout。
setTimeout()       在指定的毫秒數後調用函數或計算表達式。
clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
scrollTo()         把內容滾動到指定的座標。

confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt()           顯示可提示用戶輸入的對話框。
open()             打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close()            關閉瀏覽器窗口。

// 每隔一段時間就執行一次相應函數
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設置
clearInterval(timer);

// 在指定時間以後執行一次相應函數
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設置
clearTimeout(timer);

幾個例子

window的子對象

一、navigator對象

瀏覽器對象，經過這個對象能夠斷定用戶所使用的瀏覽器，包含了瀏覽器相關信息。dom

navigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操做系統

二、screen對象

屏幕對象，不經常使用。

三、history對象

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠用來前進或後退一個頁面。

history.forward()  // 前進一頁
history.back()  // 後退一頁
history.go(n)  //  前進n頁

四、location對象

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 從新加載頁面

DOM

DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。
它是一個與系統平臺和編程語言無關的接口，程序和腳本能夠經過這個接口動態地對文檔的內容、結構和樣式進行訪問和修改。簡單來說，DOM是一種API（應用編程接口）。
JavaScript對DOM進行了實現，對應於JavaScript中的document對象，經過該對象對DOM文檔進行程序級別的控制。

DOM標準規定HTML文檔中的每一個成分都是一個節點(node)：

文檔節點(document對象)：表明整個文檔
元素節點(element 對象)：表明一個元素（標籤）
文本節點(text對象)：表明元素（標籤）中的文本
屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性
註釋是註釋節點(comment對象)

介紹

一、查找標籤

document.getElementById                根據ID獲取一個標籤
document.getElementsByName         根據name屬性獲取標籤集合
document.getElementsByClassName 根據class屬性獲取
document.getElementsByTagName    根據標籤名獲取標籤合集

二、間接查找

parentNode  父節點
childNodes  全部子節點
firstChild  第一個子節點
lastChild  最後一個子節點
nextSibling 下一個兄弟節點
previousSibling  上一個兄弟節點
// 注意節點和標籤的區別，主要記下面的
parentElement 父節點標籤元素
children  全部子標籤
firstElementChild  第一個子標籤元素
lastElementChild  最後一個子標籤元素
nextElementSibling  下一個兄弟標籤元素
previousElementSibling  上一個兄弟標籤元素

document對象的屬性和操做

一、屬性節點

attributes	獲取全部標籤屬性
getAttribute()	獲取指定標籤屬性
setAttribute()	設置指定標籤屬
removeAttribute()	移除指定標籤屬
var s = document.createAttribute("age") s.nodeValue = "18"	建立age屬性設置屬性值爲18

二、文本節點

innerText	全部的純文本內容，包括子標籤中的文本
outerText	與innerText相似
innerHTML	全部子節點(包括元素、註釋和文本節點)
outerHTML	返回自身節點與全部子節點

textContent	與innerText相似，返回的內容帶樣式
data	文本內容
length	文本長度
createTextNode()	建立文本
normalize()	刪除文本與文本之間的空白
splitText()	分割
appendData()	追加
deleteData(offset,count)	從offset指定的位置開始刪除count個字符
insertData(offset,text)	在offset指定的位置插入text
replaceData(offset,count,text)	替換，從offset開始到offscount處的文本被text替換
substringData(offset,count)	提取從ffset開始到offscount處的文本

三、樣式操做

操做class類

className  獲取全部樣式類名(字符串)

classList.remove(cls)  刪除指定類
classList.add(cls)  添加類
classList.contains(cls)  存在返回true，不然返回false
classList.toggle(cls)  存在就刪除，不然添加

指定CSS操做

obj.style.backgroundColor="red"

JS操做CSS屬性的規律：

1.對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫便可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動做（action），好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動做。

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

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

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class屬性操做</title>
    <style>
        .c1{
            height: 300px;
            width: 300px;
            border-radius: 150px;
            background-color: red;
        }
        .c2{
            background-color: yellow;
        }
    </style>
    <script>
        function change() {
//            找標籤，改背景顏色
            var d1=document.getElementById("d1");
//            d1.classList.add("c2"); //這個只能加c2
            d1.classList.toggle("c2");
        }
    </script>
</head>
<body>
<div id="d1" class="c1"></div>
<input type="button" value="切換" onclick="change();">
</body>
</html>

例子：class屬性操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左側菜單示例</title>
    <style>
        .left {
            position: fixed;
            left: 0;
            top: 0;
            width: 20%;
            background-color: darkgrey;
            height: 100%;
        }
        .right {
            width: 80%;
        }
        .title {
            text-align: center;
            padding: 10px 15px;
            border-bottom: 1px solid red;
        }
        .content {
            background-color: #336699;
        }
        .content > div {
            padding: 10px;
            color: white;
            border-bottom: 1px solid black;
        }
        .hide {
            display: none;
        }
    </style>

    <script>
        // 定義一個函數
        function show(ths) {
             // 隱藏全部的.content標籤     --> classList.add("hide")
            // 1. 找標籤（全部.content標籤 ）
            var contentEles = document.getElementsByClassName("content");
            // 節點對象.屬性
            // 遍歷上面的標籤數組
            for (var i=0;i<contentEles.length;i++){
                contentEles[i].classList.add("hide");
            }
            // 如何讓函數知道我點的哪一個菜單（傳參數）
//            console.log(ths);
            // 顯示我下面的.content標籤 --> classList.remove("hide")
            // 2.找這個標籤下面的content標籤
            var nextEle = ths.nextElementSibling;
            // 2. 顯示這個content標籤
            nextEle.classList.toggle("hide");
            console.log(nextEle);
        }

    </script>
</head>
<body>

<div class="left">
    <div class="item">
        <div class="title" onclick="show(this);">菜單一</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
    <div class="item">
        <div  class="title" onclick="show(this);">菜單二</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
    <div class="item">
        <div  class="title" onclick="show(this);">菜單三</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>

例子：左側菜單示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>做業分解小禮包</title>
    <script>
        // 全選
        function checkAll() {
            // 找到全部的checkbox，所有選中
            // 1. 通過技術選型，決定使用.class方式查找標籤

            // 2. 修改  eleObj.checked = true;
        }

        // 反選
        function reverse() {
            // 找標籤，判斷
            // 1. 找標籤（和上面同樣）

            // 2. 判斷 eleObj.checked 屬性是true仍是false
            // 若是是true; 則改成false;
            // 若是是false,則改成true;

            // 取反   ！（先按照上面的方式實現，再嘗試一下使用取反的操做）
        }
        // 取消
        function cancleAll() {
            // 找到全部的checkbox，所有取消選中
            // 1. 通過技術選型，決定使用.class方式查找標籤

            // 2. 修改  eleObj.checked = false;
        }
    </script>
</head>
<body>
<label for="i1">技師1號</label>
<input id="i1" type="checkbox" checked="checked">
<label for="i2">技師2號</label>
<input id="i2" type="checkbox">

<input type="button" value="全選" onclick="checkAll();">
<input type="button" value="反選" onclick="reverse();">
<input type="button" value="取消" onclick="cancleAll();">
</body>
</html>

做業分解大禮包

經常使用的那些

操做內容

innerText  文本
innerHTML  HTML內容
value  值

文檔節點的增刪改查

增

createElement(name)  建立節點（標籤）

appendChild() 末尾添加節點，並返回新增節點
insertBefore()  參照節點以前插入節點，兩個參數：要插入的節點和參照節點

刪

查找到要刪除的元素
獲取它的父元素
使用removeChild()方法刪除

改

第一種方式:

使用上面增和刪結合完成修改

第二種方式:

使用setAttribute();方法修改屬性

使用innerHTML屬性修改元素的內容

查

使用以前介紹的方法.

相關標籤/搜索

每日一句

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

day52 BOM對象之定時器 BOM其餘和DOM介紹 內容操做和樣式操做