ウェブAPI

Web APIの基本的な理解

機能と分類

機能：JSを利用してhtmlやブラウザを操作する
カテゴリ: DOM (ドキュメントオブジェクトモデル)、BOM (ブラウザオブジェクトモデル)

DOM (ドキュメントオブジェクトモデル)

DOM (Document Object Model) は、HTML または XML ドキュメントのレンダリングと操作に使用される API です。

Vernacular: DOM は、特に Web コンテンツを操作するためにブラウザーによって提供される一連の関数です。

DOM ツリー

DOM ツリーとは

HTML ドキュメントをツリー構造で視覚的に表現します。これをドキュメントツリーまたは DOM ツリーと呼びます。
Web ページのコンテンツ間の関係を表す名詞
機能：タグ間の関係を直観的に反映したドキュメントツリー

画像の説明を追加してください

DOMオブジェクト

DOMオブジェクト：HTMLタグに基づいてブラウザによって生成されるJSオブジェクト

すべてのラベルプロパティはこのオブジェクトで見つかります
このオブジェクトのプロパティを変更すると、自動的にラベルにマッピングされます。

DOM の核となる考え方

Web コンテンツをオブジェクトとして扱う

ドキュメントオブジェクト

DOMで提供されるオブジェクトです
したがって、Web コンテンツにアクセスして操作するために、Web コンテンツが提供するプロパティとメソッドが使用されます。
- 例: document.write()
Web ページのすべてのコンテンツはドキュメント内にあります

DOMオブジェクトを取得する

CSS セレクターに基づいて DOM 要素を取得 (強調)

一致する最初の要素を選択します

文法：

document.querySelector('css选择器')

パラメータ:

1 つ以上の有効な CSS セレクター文字列が含まれています

戻り値:

CSS セレクターによって一致する最初の要素は HTMLElement オブジェクトです。

一致するものが見つからない場合は、null が返されます。

一致する複数の要素を選択する

文法

document.querySelector('css选择器')

パラメータ:

1 つ以上の有効な CSS セレクター文字列が含まれています

戻り値:

CSS セレクターによって一致した NodeList オブジェクトのコレクション

document.querySelectorAll('ul li')

querySelector() メソッドは直接操作および変更できます。

querySelectorAll() メソッドは直接変更できず、トラバーサルを通じて内部の要素のみを変更できます。

document.querySelectorAll('css选择器')

得られるのは疑似配列です。

長さとインデックス番号を含む配列
ただし、pop()、push()などの配列メソッドはありません。
内部の各オブジェクトを取得したい場合は、それを取得するためにトラバース (for) する必要があります。

知らせ：

要素が 1 つしかない場合でも、querySelectAll() によって取得されるのは、要素が 1 つだけ含まれる擬似配列です。

DOM 要素を取得するその他の方法

// 根据id获取一个元素
document.getElementById('nav')
// 根据标签获取一个元素 获取页面  所有div
document.getElementsByTagName('div')
// 根据类获取一个元素 获取页面  所有类为w的元素
document.getElementsByClassName('w')

DOM要素の内容を設定/変更する

document.write()
- テキストコンテンツは前の位置にのみ追加できます
- ```
document.write('<h3> 你好，世界！ </h3>')
```
- テキストに含まれるタグが解析されます
Element.innerText プロパティ
- 任意のラベル位置テキストにテキストコンテンツを追加/更新します
- 含まれるタグは解析されません
要素 .innerHTML 属性
- 任意のラベル位置にテキストコンテンツを推奨/更新します
- テキストに含まれるタグが解析されます

// innerHTML 属性
 box.innerHTML = '<h3>前端程序员<br>的头发都很多</h3>'

3つの違い

document.write() メソッドは本文にのみ追加できます
要素の .innerText 属性はコンテンツを識別するだけであり、タグを解析することはできません
要素 .innerHTML 属性 - タグを解析する機能
どちらを使用するか迷っている場合は、innerHTML を選択できます。

ランダムに選択されたケースの名前が、指定したラベル内に表示されます。

要件: スパンボックス内に名前を入力します。

分析します:

スパン要素の取得
ランダムな名前を取得する
innerText または innerHTML を通じて要素内に名前を記述します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            display: inline-block;
            width: 150px;
            height: 30px;
            border: 1px solid pink;
            vertical-align: middle;
            line-height: 30px;
            
        }
    </style>
</head>
<body>
    抽中的选手：<div></div>
    <script>
        // 1.获取元素
        let box = document.querySelector('div')
        // 2.得到随机名字
        // 随机数
        function getRandom(min,max) {
      
      
            return Math.floor(Math.random() * ( max - min +1 )) +min
        }
        // 声明一个数组
        let arr = ['小米','小吗','小是','小的','小发',
        '小人','小他','小哦','小明']

        // 生成一个随机数  作为数组的索引号
        let random = getRandom(0,arr.length - 1)
        // document.write(arr[random])

        //3. 写入标签内部
        box.innerHTML = arr[random]

        // 之后删除这个名字
        arr.splice(random,1 )
        console.log(arr);
    </script>
</body>
</html>

途中でエラーが発生してdivにjsが書き込まれてしまい、ランダムな名前が表示されなくなりました。

DOM 要素の属性を設定/変更する

共通のプロパティ

src を介して画像を変更するなど、JS を介してタグ要素のスタイル属性を設定/変更することもできます。

最も一般的な属性は、href、title.src などです。

文法：

对象.属性 = 值

//1.获取元素
let pic = document.querySelector('img')
//2.操作元素
pic.src = './images/b02.jpg'
pic.title = '这是一个图片'

場合

要件: ページを更新すると、ページ上の画像に別の画像がランダムに表示されます。

分析します:

ランダムに表示するにはrandom関数を使用する必要があります
イメージを変更するには、イメージの src 属性を使用して変更する必要があります。

核となるアイデア:

画像要素を取得する
画像のシリアルナンバーをランダムで入手
Picture.src = 画像のランダムパス

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
      
      
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
    <img src="../10327.gif" alt="#">
    <!-- <img src="../案例/小学期/images/book1.png" alt=""> -->

    <script>
        //1. 获取图片元素
        let pic  =document.querySelector('img')
        //2. 随机得到图片序号
        function getRandom(min,max) {
      
      
            return Math.floor(Math.random() * ( max - min +1 )) +min
        }
        let num = getRandom(1,6)
        //3. 完成src  属性赋值
        pic.src = `../案例/小学期/images/book${ 
        num}.png`
    </script>
</body>
</html>

スタイルプロパティ

JS を通じてラベル要素のスタイル属性を設定/変更することもできます。

たとえば、カラースタイルはカルーセルドットを通じて自動的に変更できます。
ボタンをクリックすると画像がスクロールされ、移動した画像の左の位置などが表示されます。

学習パス:

style 属性を使用して CSS を操作する
オペレーションクラス名(className) オペレーション cSs3．classList 操作クラスを通じて CSS を制御する
classList 操作クラスを通じて CSS を制御する

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //1.获取元素
        let box = document.querySelector('div')
        //2.改变1背景颜色  样式 style
        box.style.background = 'hotpink'
        box.style.width = '400px'
        box.style.marginTop = '100px'

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

知らせ：

style 属性を使用してスタイルを変更します。
属性に - コネクタがある場合は、キャメルケース (marginTop) に変換する必要があります。
値を割り当てるときは、必要に応じて CSS ユニットを追加することを忘れないでください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
      
      
            background-image: url(../案例/xtx/images/sprites.png);
        }
    </style>
</head>
<body>
    <script>
        function getRandom(min,max) {
      
      
            return Math.floor(Math.random() * ( max - min +1 )) +min
        }

        // 随机的值1-10
        let num = getRandom(1,10)

        // 修改背景图片
        document.body.style.backgroundImage = `url(../aadada/ada${ 
        num}.jpg )`
        // 图片路径
    </script>
</body>
</html>

2.クラス名(className)の操作とCSSの操作

変更するスタイルが多数ある場合、style 属性を使用して直接変更するのは面倒ですが、CSS クラス名を使用できます。

文法：

//active是一个css类名
元素.className = 'active'

知らせ：

class はキーワードであるため、代わりに className を使用します。
className は古い値を新しい値に置き換えます。クラスを追加する必要がある場合は、以前のクラス名を保持する必要があります。

3. classList 操作クラスによる CSS の制御

className が以前のクラス名を簡単に上書きしてしまうという問題を解決するために、classList を通じてクラス名を追加および削除できます。

文法：

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

フォーム要素の属性

多くの場合、フォームのプロパティも変更する必要があります。たとえば、目をクリックすると、パスワードが表示されます。本質的には、フォームタイプをテキストボックスに変換することです。これには、通常の属性と値があります。他のラベル属性と何ら変わりません。

取得: DOM オブジェクト.属性名

パスワードを設定してください

設定: DOM オブジェクト.プロパティ名=新しい値

表单.value = '用户名'
表单.type = 'password'

フォーム属性を追加すると効果があり、削除すると効果がありません。常にブール値を使用して、true の場合は属性が追加されたことを意味し、false の場合は属性が削除されたことを意味します。

例: 無効、チェック済み、選択済み

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" value="请输入">
    <button disabled>按钮</button>
    <input type="checkbox" id="check">
    <script>
        //1.获取元素
        let input = document.querySelector('input')
        //2.取值或者设置值   得到input里面的值可以用value
        console.log(input.value)
        input.value = '小米手机'
        input.type = 'password'

        //2.启用按钮
        let button = document.querySelector('button')
        button.disabled = false
        // false启用按钮，ture关闭按钮


        //勾选复选框
        let checkbox = document.querySelector('.check')
        checkbox.checked = false

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

タイマー間欠機能

タイマーを開始します

setInterval(函数,间歇时间)

関数: この関数を時々呼び出します。

間隔の単位はミリ秒です

function repeat() {
    
    
    console.log('ajdahdajdpajpo')
}
//每间隔一秒调用repeat函数
srtInterval(repeat,1000)

知らせ：

関数名には括弧は必要ありません
タイマーは ID 番号を返します

オフタイマー

let 变量名 = setInterval(函数，间歇时间)
clearINterval(变量名)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        setInterval(function() {
      
      
            console.log('高新就业');
        },1000)

        function show() {
      
      
            console.log('月薪过万');
        }

        setInterval(show,1000)


        // 清除定时器
        clearInterval(cheakbox)
    </script>
</body>
</html>

場合

カウントダウンエフェクト

要件: ボタンは 60 秒後に使用可能になります

分析します:

ボタンを無効にすることから始めます (disabled 属性)
要素を取得する必要があります
関数内の処理ロジック
- 秒数が減り始める
- ボタン内のテキストもそれに応じて変化します
- 秒が 0 の場合、停止タイマー内のテキストが「同意する」に変わり、最後のボタンをクリックできるようになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .btn{
      
      
        margin-left: 30px;
    }
</style>
<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户!在您注册过程中，您需要完成我们的注册流程【请您注意】
        如果您不同意以下协议全部或任何条款约定，请您停止注;
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议（3）</button>
    <script>
        //1.获取元素
        let btn = document.querySelector('.btn')
        //2.计算逻辑
        //2.1需要一个变量，用来计数
        let i = 3
        //2.2 开启定时器   简歇一秒
        let timer = setInterval(function() {
      
      
            i--
            // console.log(i);
            btn.innerHTML = `我已经阅读用户协议(${ 
        i})`
            if (i === 0) {
      
      
                // 不走了，清除定时器
                clearInterval(timer)
                //开启按钮
                btn.disabled = false
                //更换文字
                btn.innerHTML = '我已经阅读用户协议'
            }
        },1000)

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

Web ページのカルーセル

要件: 1 秒ごとに画像を切り替える

分析します:

要素（画像とテキスト）を取得します
タイマー機能を設定する
- 変数を設定する++
- 写真の枚数を変更する
- テキストメッセージを変更する
画像を処理し、最初から再生できるように自動的に復元します
- 最後まで再生すると9枚目になります
- 次に変数を 0 にリセットします
- ロジックコードは画像の前に記述され、テキストが変更されることに注意してください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="img-box">
        <img src="../素材/images/b01.jpg" alt="">
        <div class="tip">
            <h3 class="text">挑战云歌单，欢迎你来</h3>
        </div>
    </div>
    <script>
         // 数据
         let data = [
            {
      
      
                imgSrc: '../素材/images/b01.jpg',
                title: '挑战云歌单，欢迎你来'
            },
            {
      
      
                imgSrc: '../素材/images/b02.jpg',
                title: '田园日记，上演上京记'
            },
            {
      
      
                imgSrc: '../素材/images/b03.jpg',
                title: '甜蜜攻势再次回归'
            },
            {
      
      
                imgSrc: '../素材/images/b04.jpg',
                title: '我为歌狂，生为歌王'
            },
            {
      
      
                imgSrc: '../素材/images/b05.jpg',
                title: '年度校园主题活动'
            },
            {
      
      
                imgSrc: '../素材/images/b06.jpg',
                title: 'pink老师新歌发布，5月10号正式推出'
            },
            {
      
      
                imgSrc: '../素材/images/b07.jpg',
                title: '动力火车来到西安'
            },
            {
      
      
                imgSrc: '../素材/images/b08.jpg',
                title: '钢铁侠3，英雄镇东风'
            },
            {
      
      
                imgSrc: '../素材/images/b09.jpg',
                title: '我用整颗心来等你'
            },
        ]

        //1.获取元素（图片和文字)
        let pic  = document.querySelector('.pic')
        let text  = document.querySelector('.text')
        let i = 0
        // 开定时器
        setInterval(function(){
      
      
            i++
            //修改src属性
            pic.src = data[i].imgSrc
            text.innerHTML = data[i].title

            //衔接
            if(i === data.length - 1){
      
      
                i= -1
                //用-1是因为代码运行到上面就1要++，
                // 使用用-1.然后++之后刚好为0
                //  i === 8? i = -1 : i
            }
        },1000)
    </script>
</body>
</html>

イベント

イベントリスニング

イベントとは、プログラミング中にシステム内で発生するアクションまたは物事です。
- たとえば、ユーザーが Web ページ上のボタンをクリックすると、
イベントリスニング
- これは、プログラムにイベントが発生したかどうかを検出させるためのもので、イベントがトリガーされると、すぐに関数を呼び出して応答します。これはイベントの登録とも呼ばれます。
文法

元素.addEVentListener('事件',要执行的函数)
//事件必须是字符串

イベント監視の 3 つの要素:
- イベントソース: DOM 要素がイベントによってトリガーされました。DOM 要素を取得するには
- イベント: マウスクリック、マウスオーバーなど、イベントをトリガーする方法。
- イベントによって呼び出される関数: 何をするか

//获取元素
let btn = document.querySelector('button')
//事件监听（注册事件）
btn.addEventListener('click',function() {
    
    
    alert('被点击了')
})

知らせ：

イベントの種類は引用符で囲む必要があります
クリック後に関数が実行されます。クリックするたびに 1 回実行されます。

イベントタイプ

イベント	コンテンツ	属性
マウスイベント	マウストリガー	マウスをクリックするマウスをクリックするマウスを入力するマウスを通過させるマウスを離れるマウスを離れる
フォーカスイベント	フォームがカーソルを取得します	フォーカスがフォーカスされるぼやけがフォーカスを失う
キーボードイベント	キーボードトリガー	keydown はキーボードが押されたときにトリガーされ、 keyup はキーボードが上げられたときにトリガーされます。
テキストイベント	フォーム入力トリガー	入力ユーザー入力トリガー

場合

高次関数

高階関数とは、簡単に言うと関数の高度な応用と考えることができ、JavaScriptでは関数を「値」として扱うことができ、この特徴を利用して関数の高度な応用を実現することができます。

[値] は、数値、文字列、ブール値、オブジェクトなどの JavaScript のデータです。

折り返し電話

関数 A が関数 B にパラメーターとして渡される場合、関数 A をコールバック関数と呼びます。

簡単な理解: 関数がパラメーターとして別の関数に渡される場合、この関数はコールバック関数です。

一般的な使用シナリオ

function fn() {
    
    
    cinsole.log('我是回调函数。。。')
}
setInterval(fn,1000)

環境オブジェクト

環境オブジェクトは、関数内の特別な変数 this を参照します。これは、現在の関数が実行されている環境を表します。

機能: この点を明確にすることで、コードをより簡潔にすることができます。

関数の呼び出し方法が異なり、これが参照するオブジェクトも異なります。
[誰が電話しても、これは誰だ] がどこを指すかを判断するためのおおよそのルールです。
この関数を直接呼び出すことは実際には window. 関数と同等であるため、これは window を指します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        // 环境对象 this 他就是个对象
        function fn() {
      
      
            console.log(this);
        }
        fn()


        let btn = document.querySelector('button')
        btn.addEventListener('click',function() {
      
      
            console.log(typeof this);
        })

        //因为btn调用了这个函数，所以this指向谁
    </script>
</body>
</html>

排他的思考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pink{
      
      
            background-color: pink;
        }
    </style>
</head>
<body>
    <button class="pink">1</button><button>2</button>
    <button>3</button><button>4</button>


    <script>
        let btns = document.querySelectorAll('button')
        for(let i = 0; i< btns.length; i++) {
      
      
            btns[i].addEventListener('click',function(){
      
      
                // this.classList.add('pink')
                // 干掉所有人
                // for(let j = 0; j < btns.length; j++) {
      
      
                //     btns[j].classList.remove('pink')
                    
                // }


                // 我只需要找出那个唯一的pink类，删除
                document.querySelector('.pink').classList.remove('pink')
                // 复活我自己
                this.classList.add('pink')


                
            })
        }
    </script>
</body>
</html>

ノードの操作

DOMノード

DOMノード
- DOM ツリー内の各コンテンツは、ノードノードタイプと呼ばれます。
要素ノード
- body.div などのすべてのタグ
- html はルートノードです
属性ノード
- href などのすべての属性
テキストノード
- その他すべてのテキスト
他の

ノードの検索

ノード関係:

親ノード

子ノード

兄弟ノード

親ノードの検索

親ノード属性
最も近い親ノードを返します。見つからない場合は、null が返されます。

子元素.parentNode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="father">
        <div class="son">儿子</div>
    </div>
    <script>
        let son = document.querySelector('.son')
        // 找爸爸   属性
        // console.log(son.parentNode)
        son.parentNode.style.dispaly = 'none'
    </script>
</body>
</html>

子ノードの検索

子ノード

テキストノード (スペース、改行)、コメントノードなどを含むすべての子ノードを取得します。

子供たち（強調）

すべての要素ノードのみを取得します
返されるものは依然として擬似配列です

父元素.children

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <ul>
        <li>我是孩子</li>
        <li>我是孩子</li>
        <li>我是孩子</li>
        <li>我是孩子</li>
        <li>我是孩子</li>
        <li>我是孩子</li>
    </ul>


    <script>
        let btn = document.querySelector('button')
        let ul = document.querySelector('ul')
        btn.addEventListener('click',function() {
      
      
            // console.log(ul.children)
            for (let i = 0;i < ul.children.length; i++){
      
      
                ul.children[i].style.color = 'red'
            }
        })
        ul.children[0].style.color = 'green'
    </script>
</body>
</html>

兄弟ノードの検索

次の兄弟ノード
- nextElementSiblingProperty
前の兄弟ノード
- prevElementSibling プロパティ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <ul>
        <li>第1个</li>
        <li class="two">第2个</li>
        <li>第3个</li>
        <li>第4个</li>
    </ul>
    <script>
        let btn = document.querySelector('button')
        let two = document.querySelector('.two')
        btn.addEventListener('click',function(){
      
      
            two.nextElementSibling.style.color = 'red'
            two.previousElementSibling.style.color = 'green'
        })
    </script>
</body>
</html>

ノードの操作

多くの場合、ページに要素を追加する必要があります。

たとえば、[公開] ボタンをクリックして新しいメッセージを追加します。

通常、新しいノードを追加するときは次のように行います。

新しいノードを作成する
作成した新しいノードを指定した要素内に配置します

ノードの作成

文法：

document.createElement('标签名')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        
    </ul>
    <script>
        let div = document.createElement('div')
        // 追加属性
        div.className = 'current'
        let li = document.createElement('li')
    </script>
</body>
</html>

追加ノード

インターフェース上でそれを表示したい場合は、親要素に挿入する必要があります。
親要素の最後の子要素に挿入します

//插入到父元素的最后一个子元素
父元素.appendChild(子元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        
    </ul>
    <script>
        // let div = document.createElement('div')
        // 追加属性
        // div.className = 'current'
        let ul = document.querySelector('ul')
        let li = document.createElement('li')
        li.innerHTML = '我是li'

        ul.appendChild(li)

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

子要素の前の親要素に挿入します。

//插入到父元素中某个子元素前面
父元素.insertBefore(要出入的元素，在哪个元素前面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我是孩子</li>
        <li class="two">two</li>
    </ul>
    <script>
        // let div = document.createElement('div')
        // 追加属性
        // div.className = 'current'
        let ul = document.querySelector('ul')
        let li = document.createElement('li')
        li.innerHTML = '我是li'
        // 2.追加节点 父元素.appendChild(子元素) 插入到父元素的最后一个子元素
        // ul.appendChild(li)
        // 3、追加节点 父元素.insertBefore(要出入的元素，在哪个元素前面)
        // ul.children[1]获取ul中第二个li
        ul.insertBefore(li,ul.children[1])


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

場合

要件: データに基づいてページ分析をレンダリングします。

①：空のUL構造体を用意する

②：データ数に応じて空のliを新規作成

③：liにコンテンツ画像タイトル等を追加

④:ulに追加

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <!-- <li>
                    <img src="./images/course01.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span> 1125</span>人在学习
                    </div>
                </li> -->
            </ul>
        </div>
    </div>
    <script>
        let data = [
            {
      
      
                src: 'images/course01.png',
                title: 'Think PHP 5.0 博客系统实战项目演练',
                num: 1125
            },
            {
      
      
                src: 'images/course02.png',
                title: 'Android 网络动态图片加载实战',
                num: 357
            },
            {
      
      
                src: 'images/course03.png',
                title: 'Angular2 大前端商城实战项目演练',
                num: 22250
            },
            {
      
      
                src: 'images/course04.png',
                title: 'Android APP 实战项目演练',
                num: 389
            },
            {
      
      
                src: 'images/course05.png',
                title: 'UGUI 源码深度分析案例',
                num: 124
            },
            {
      
      
                src: 'images/course06.png',
                title: 'Kami2首页界面切换效果实战演练',
                num: 432
            },
            {
      
      
                src: 'images/course07.png',
                title: 'UNITY 从入门到精通实战案例',
                num: 888
            },
            {
      
      
                src: 'images/course08.png',
                title: '我会变，你呢？',
                num: 590
            },
            {
      
      
                src: 'images/course08.png',
                title: '我会变，你呢？',
                num: 590
            }
        ]
        let ul = document.querySelector('ul')
        // 1. 根据数据的个数，决定这小li的个数
        for (let i = 0; i < data.length; i++) {
      
      
            // 2. 创建小li
            let li = document.createElement('li')
            // console.log(li)

            // 4. 先准备好内容，再追加 
            li.innerHTML = `
            <img src=${ 
        data[i].src} alt="">
            <h4>
                ${ 
        data[i].title}
            </h4>
            <div class="info">
                <span>高级</span> • <span> ${ 
        data[i].num}</span>人在学习
            </div>
            `
            // 3. 追加给ul   父元素.appendChild(子元素)
            ul.appendChild(li)

        }
    </script>
</body>

</html>

クローンノード

特殊な状況では、新しいノードを追加し、次の操作に従います。

元のノードをコピーする

コピーしたノードを指定された要素内に配置します

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

cloneNode は、元のタグと同じ要素のクローンを作成し、かっこ内のブール値を渡します。

true の場合、クローン作成時に子孫ノードも一緒にクローンされることを意味します。
false の場合、子孫ノードがクローンに含まれていないことを意味します。
デフォルトは false です

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我是内容</li>
    </ul>
    <script>
        let ul = document.querySelector('ul')
        // 括号为空则，默认为false 若为false，则代表克隆时不包含后代节点
        let newul = ul.cloneNode(true)
        document.body.appendChild(newul)
    </script>
</body>
</html>

ノードの削除

ページ内でノードが不要になった場合は、削除できます。

JavaScript ネイティブ DOM 操作では、要素を削除するには、親要素を通じて要素を削除する必要があります。

文法

父元素.removeChild(要删除的元素)

注:
親子関係がない場合、削除は成功しません。

ノードの削除とノードの非表示 (display.none) には違いがあります。非表示のノードはまだ存在しますが、それを削除すると、ノードは HTML から削除されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <ul>
        <li>我是内容</li>
    </ul>
    <script>
        let btn = document.querySelector('button')
        let ul =document.querySelector('ul')
        btn.addEventListener('click',function(){
      
      
            // 删除语法
            ul.removeChild(ul.children[0])
        })
    </script>
</body>
</html>

時間オブジェクト

時間オブジェクト: 時間を表すために使用されるオブジェクト

機能: 現在のシステム時刻を取得できます。

インスタンス化する

新しいキーワードがコード内で見つかった場合、この操作は一般にインスタンス化と呼ばれます。

時刻オブジェクトを作成して時刻を取得する

現在時刻を取得する

//获取当前时间
let date = new Date()

// 获取指定时间
let date = new Date('1949-10-09')

時間オブジェクトのメソッド

時刻オブジェクトが返すデータはそのままでは利用できないため、実際の開発でよく使われる形式に変換する必要があります。

方法	効果	説明する
getFull Year()	年を取得する	4 桁の年を取得する
getMonth()	月を取得する	値は0～11です
getDate()	毎月毎日取得します	月によって値が異なります
getDay()	曜日を取得する	値は0~6です
getHours()	時間を取得する	値は0～23です
getMinutes()	議事録を取得する	値は0～59です
getSeconds()	秒を取得する	値は0～59です

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>
        let arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
        getTime()

        setInterval(getTime,1000)

        function getTime() {
      
      
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() +1 
            let date1 = date.getDate()
            let day = date.getDay()
            let hour = date.getHours()
            let min = date.getMinutes()
            let sec = date.getSeconds()

            let div = document.querySelector('div')
            div.innerHTML = `今天是：${ 
        year}年${ 
        month}月${ 
        date1}日
            ${ 
        hour}:${ 
        min}:${ 
        sec} ${ 
        arr[day]}`
        }
    </script>
</body>
</html>

タイムスタンプ

タイムスタンプとは何ですか

1970 年 1 月 1 日の 00:00:00 から現在までのミリ秒数を指し、時間を測定する特別な方法です。

タイムスタンプを取得する 3 つの方法

 // 1.getTime()
let date = new Date()
console.log(date.getTime())
// 2.简写 + new Date()  （推荐）
console.log(+new Date());
// 3.使用Date.now()  只能得到当前的
console.log(Date.now());

リペイントとリフロー（インタビュー）

ブラウザがインターフェイスをレンダリングする方法

HTMLを解析（パーサー）し、DOMツリー（DOMツリー）を生成します。
cssを解析（パーサー）すると同時にスタイルルールを生成（スタイルルール）
DOMツリーとスタイルルールに基づいてレンダリングツリー(Render Tree)を生成します。
レイアウト（リフロー・再配置）を行う：生成されたレンダリングツリーに従い、ノードの幾何学情報（位置、サイズ）を取得し、レイアウト（大きなボックス）に使用します。
ペイント（再描画）：計算と取得した情報をもとにページ全体を描画します。
表示：ページ上に表示

再描画とリフロー（リフロー）

リフロー（再配置）

レンダーツリー内の一部またはすべての要素のサイズ、構造、レイアウトなどが変更されると、ブラウザはドキュメントの一部または全体を再レンダリングします。これはリフローと呼ばれるプロセスです。

再描画

ノード (要素) のスタイルの変更は、ドキュメントフロー内での位置やドキュメントレイアウト (色、背景色、アウトラインなど) に影響を与えないため、再描画と呼ばれます。

再描画は必ずしもリフローを引き起こすわけではありませんが、リフローは常に再描画を引き起こします。（インタビュー中心）

リフロー（リフロー）を引き起こす操作：
- ページの最初の更新
- ブラウザのウィンドウサイズが変わる
- 要素のサイズまたは位置が変更される
- フォントサイズ
  とコンテンツ (入力ボックスの入力、画像サイズなど)を変更します。
- CSS 疑似クラスをアクティブ化します (例: :hover)
- DOM を操作するスクリプト (表示される DOM 要素の追加または削除)
レイアウトに影響を与える場合はリフローが発生することを理解してください。

イベントオブジェクト

イベントオブジェクトを取得する

イベントオブジェクトとは何ですか

これはオブジェクトでもあり、このオブジェクトにはイベントがトリガーされたときの関連情報が含まれています。
たとえば、マウスクリックイベントでは、イベントオブジェクトはマウスポイントの位置などの情報を保存します。

取得する方法

イベントバインドコールバック関数の最初のパラメーターはイベントオブジェクトです。
一般的に名前が付けられたイベント、ev.e

元素.addEventListener('click',function(e) {
    
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('mouseenter',function(e) {
      
      
            console.log(e);
        })
    </script>
</body>
</html>

カーソル

いくつかの共通プロパティ

タイプ
- 現在のイベントタイプを取得する
クライアントX/クライアントY
- ブラウザの表示ウィンドウの左上隅を基準としたカーソルの位置を取得します。
オフセットX/オフセットY
- 現在の DOM 要素の左上隅を基準としたカーソルの位置を取得します。
鍵
- ユーザーが押したキーボードのキーの値
- キーコードの使用は現在非推奨です

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.addEventListener('mousemove',function(e){
      
      
            // console.log(11);
            // pageX 和 pageY 跟文档坐标有关系
            // console.log(e);
            console.log('clinetx:' + e.clientX,'clientY:' + e.clientY)
            console.log('pageX:' + e.pageX,'pageY:' + e.pageY)
            console.log('offsetx:' + e.offsetX,'offsetY:' + e.offsetY)
        })
    </script>
</body>
</html>

場合

写真はマウスを追いかけます

分析：
①：mousemoveイベントを使用して、ページ上でマウスを移動します。
②：ページ上のマウスの座標位置を画像の左と上の値に常に代入します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
      
      
           position: absolute ; /*定位 */
           top: 0;
           left: 0;

        }
    </style>
</head>
<body>
    <img src="./tianshi.gif" alt="">
    <script>
        let pic = document.querySelector('img')
        document.addEventListener('mousemove',function(e) {
      
      
            // 不断获取当前鼠标坐标
            console.log(e.pageX)
            console.log(e.pageY)
            //把坐标给图片
            pic.style.left = e.pageX -40 + 'px'
            pic.style.top = e.pageY - 40 + 'px'
        })
    </script>
</body>
</html>

Enterを押してWeiboに投稿します

要件: Enter キーボードを押して情報を公開します

要件 1: ユーザーが入力した単語の数を検出する

入力イベントを登録する
テキストコンテンツの長さを対応する値に割り当てます。
フォームの maxlength 属性は、数値を 200 に直接制限できます。

要件 2: 入力を空にすることはできません

コンテンツが空であるか、プロンプトを空にすることができないか、直接リターンを空にすることができないかを判断します。
意味のないスペースが入力されないようにするには、string.trim() を使用して先頭と末尾のスペースを削除します。
そしてフォームの値を空の文字列に設定します
同時に下の赤色を0に設定します。

要件 3: 新しいメッセージを追加する

小さな li を作成し、innerHTML を通じてデータを追加します。
データ配列の内容をランダムに取得し、newNodeの画像と名前、メッセージ内容を置き換えます
時刻オブジェクトを使用して時刻を動的にする new Date().toLocaleString()
ul に追加

イベントストリーム

イベントフローは、イベントの完全な実行中のフローパスを指します。

注: ページに div があると仮定すると、イベントがトリガーされると、キャプチャステージとバブリングステージという 2 つのステージを通過します。
簡単に言うと、キャプチャフェーズは親から子へ、バブリングフェーズは子から親へです。

イベントバブリング

イベントバブリングのコンセプト:

要素でイベントがトリガーされると、その要素のすべての祖先要素で同じイベントが順番にトリガーされます。このプロセスはイベントバブリングと呼ばれます

簡単に理解すると、要素がイベントをトリガーすると、すべての親要素の同じ名前のイベントが上向きに順番に呼び出されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
      
      
            margin: 100px auto;
            width: 400px;
            height: 400px;
            background-color: pink;
        }


        .son {
      
      
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let fa = document.querySelector('.father')
        let son = document.querySelector('.son')

        fa.addEventListener('click', function() {
      
      
            alert('我是爸爸')
        })

        son.addEventListener('click', function() {
      
      
            alert('我是儿子')
        })
    </script>
</body>
</html>

イベントキャプチャ

イベントキャプチャのコンセプト:

DOM のルート要素から開始して、対応するイベントを実行します (外側から内側へ)

イベントキャプチャでは、効果を確認するために対応するコードを記述する必要があります。

コード

son.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

例証します:

addEventListener の 3 番目のパラメーターは true で渡され、キャプチャフェーズがトリガーされたことを示します (めったに使用されません)。
false が渡された場合、バブリングフェーズがトリガーされることを意味します。デフォルトは false です。
LO イベント監視を使用する場合、バブリングフェーズのみが存在し、キャプチャはありません。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
      
      
            margin: 100px auto;
            width: 400px;
            height: 400px;
            background-color: pink;
        }


        .son {
      
      
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let fa = document.querySelector('.father')
        let son = document.querySelector('.son')

        fa.addEventListener('click', function() {
      
      
            alert('我是爸爸')
        },true)

        son.addEventListener('click', function() {
      
      
            alert('我是儿子')
        },ture)
    </script>
</body>
</html>

イベントの流れをブロックする

バブルモードがデフォルトで存在するため、イベントが親要素に影響を与えやすくなります。

イベントを現在の要素に制限したい場合は、イベントの流れを防ぐ必要があります。

イベントの流れを防ぐには、イベントオブジェクトを取得する必要があります。

文法：

事件对象.stopPropagation()

この方法はイベントの流れと伝播をブロックすることができ、バブリング段階だけでなくキャプチャ段階でも効果的です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
      
      
            margin: 100px auto;
            width: 400px;
            height: 400px;
            background-color: pink;
        }


        .son {
      
      
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let fa = document.querySelector('.father')
        let son = document.querySelector('.son')

        fa.addEventListener('click', function() {
      
      
            alert('我是爸爸')
        })

        son.addEventListener('click', function(e) {
      
      
            alert('我是儿子')
            // 阻止事件流动
            e.stopPropagation()
        })
    </script>
</body>
</html>

マウスオーバーイベント:

マウスオーバーとマウスアウトにはバブリング効果があります

Mouseenter と MouseLeave にはバブリング効果がありません (推奨)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
      
      
            margin: 100px auto;
            width: 400px;
            height: 400px;
            background-color: pink;
        }


        .son {
      
      
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('mouseenter',function() {
      
      
            console.log(111);
        })

        fa.addEventListener('click', function() {
      
      
            alert('我是爸爸')
        })

        son.addEventListener('click', function(e) {
      
      
            alert('我是儿子')
            // 阻止事件流动
            e.stopPropagation()
        })
    </script>
</body>
</html>

リンクのクリックがジャンプしない、フォームフィールドがジャンプするなどのデフォルトの動作を防止します。

文法：

e.preventDefault()

2 つの登録イベントの違いは次のとおりです。
従来のGN登録(LO)
- 同じオブジェクトに対して、後で登録されたイベントは、以前に登録されたイベント (同じイベント) を上書きします。
- イベントを null で直接上書きすることで、イベントのバインドを解除できます。
- これらはすべてバブリングフェーズで実行されます。
イベントリスニング登録(L2)
- 構文：addEventListener(イベントタイプ、イベント処理関数、キャプチャ使用有無)
- 後で登録されたイベントは、以前に登録されたイベント（同じイベント）を上書きしません。
- 3 番目のパラメータを使用して、バブリングフェーズで実行するかキャプチャフェーズで実行するかを決定できます。
- RemoveEventListener (イベントタイプ、イベント処理関数、キャプチャまたはバブリングフェーズ) を使用する必要があります。
- 匿名関数はバインドを解除できません

イベントの代表団

イベント委任は、イベントストリームの特性を使用して開発ニーズの一部を解決する知識とスキルです。

要約:

利点: 親要素にイベントを追加します (パフォーマンスを向上させることができます)
原則: イベントの委任は実際にイベントバブリングの特性を使用して親要素にイベントを追加し、子要素がイベントをトリガーできます。
実装: イベント object.target は、実際にイベントをトリガーした要素を取得できます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我是第一个小li</li>
        <li>我是第二个小li</li>
        <li>我是第三个小li</li>
        <li>我是第四个小li</li>
        <li>我是第五个小li</li>
    </ul>
    <script>
        //不要每个小Li注册事件了而是把事件委托给他的爸爸
        // 事件委托是给父级添加事件而不是孩子添加事件
        let ul = document.querySelector('ul')
        ul.addEventListener('click',function(e) {
      
      
            // alert('我点击了')
            // 得到当前元素
            // console.log(e.target)
            e.target.style.color = 'red'
        })
    </script>
</body>
</html>

アコーディオンエフェクト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
      
      
      list-style: none;
    }

    * {
      
      
      margin: 0;
      padding: 0;
    }

    div {
      
      
      width: 1200px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      
      
      width: 240px;
      height: 400px;
      float: left;
      /* 过渡 */
      transition: all 500ms;
    }

    div ul {
      
      
      width: 1200px;
    }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>
                <a href="#">
                    <img src='../手风琴images/1.jpg' alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src='../手风琴images/2.jpg' alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src='../手风琴images/3.jpg' alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src='../手风琴images/4.jpg' alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../手风琴images/5.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>


    <script>
        // 1.li默认有个宽度是240像素
        // 2．当我们鼠标经过，当前的小i 宽度变大 800px其余的小Li 变为100px
        // 3.·鼠标离开事件，所有的小Li都要复原宽度为240px
        // （1）获取元素
        let lis = document.querySelectorAll('li')
        // (2)绑定鼠标经过和离开事件
        for (let i = 0; i < lis.length; i++) {
      
      
            // 鼠标经过事件
            lis[i].addEventListener('mouseenter',function() {
      
      
                // 排他思想干掉所有人108px，复活我自己800px
                for ( j = 0; j < lis.length; j++) {
      
      
                    lis[j].style.width = '100px'
                }
                this.style.width = "800px"
            })
            // 鼠标离开
            lis[i].addEventListener('mouseleave',function() {
      
      
                // 排他思想干掉所有人108px，复活我自己800px
                for ( j = 0; j < lis.length; j++) {
      
      
                    lis[j].style.width = '240px'
                }
            })
        }
    </script>
</body>
</html>

list は HTMLLIElement で定義されていません。

このエラーは、ループ内で list.length としてすべての幅を 100px に変更する lis.length を書いたため、この期間中に発生しました。

スクロールイベントとロードイベント

スクロールイベント

ページがスクロールされたときにトリガーされるイベント
なぜ勉強するのか？
- 多くの Web ページでは、ユーザーがページを特定の領域までスクロールしたことを検出し、先頭に戻るなどのナビゲーションバーの修正などの何らかの処理を実行する必要があります。
イベント名：スクロール
ページ全体のスクロールを聞いてください。

window.addEventListener('scroll',function(){
})

スクロールイベントをウィンドウまたはドキュメントに追加する

要素の内部スクロールを監視するには、それを要素に直接追加するだけです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
      
      
            height: 3000px;
        }
        div{
      
      
            overflow:auto ;
            width: 200px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        文字
        文字
        文字
        文字
        文字
        文字
        文字

        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字
        文字

        文字
        文字
        文字
        文字
        文字

    </div>
    <script>
        let div = document.querySelector('div')
        // window.addEventListener('scroll',function(){
      
      
        //     console.log(111);
        // })
        div.addEventListener('scroll',function(){
      
      
            console.log(111)
        })
    </script>
</body>
</html>

ロードイベント

外部リソース (画像、外部 CSS、JavaScript など) が読み込まれるときにトリガーされるイベント。

なぜ勉強するのか？

何かを行うために、すべてのページリソースが処理されるまで待つ必要がある場合があります。
古いコードはヘッド内にスクリプトを記述する傾向があり、現時点では DOM 要素を直接探しても見つかりません。

イベント名：ロード

監視ページ上のすべてのリソースがロードされました。

ウィンドウにロードイベントを追加

window.addEventListener('load',function(){
    
    }

注: ページリソース全体がいつロードされるかを監視できるだけでなく、ロードイベントを特定のリソースにバインドすることもできます。

最初の HTML ドキュメントが完全にロードされて解析されると、スタイルシートや画像などが完全にロードされるのを待たずに、DOMContentLoaded イベントがトリガーされます。

イベント名:DOMcontentLoaded

リスニングページ DOM がロードされます。

DOMContentLoaded イベントをドキュメントに追加

document.addEventListener('DOMcontentLoaded',function(){
    
    }

要素のサイズと位置

スクロールファミリー

使用するシーン:

特定の要素を表示または非表示にするために、ページを特定の距離 (100 ピクセルなど) スクロールさせたいと考えています。では、ページが 100 ピクセルスクロールしたことをどのように確認すればよいでしょうか?

スクロールを使用してページのスクロール距離を検出できます

幅と高さを取得する
- 要素のコンテンツ (スクロールバーを除く) の合計の幅と高さを取得し、単位なしの値を返します。
- スクロール幅とスクロール高さ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
      
      
            width: 150px;
            height: 150px;
            background-color: pink;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
        我有很多很多的内容哦
    </div>
    <script>
        // scrollwidth和scrollHeight   内容的大小(了解)
        let div = document.querySelector('div')
        console.log(div.scrollWidth)
        console.log(div.scrollHeight)
    </script>
</body>
</html>

位置情報を取得
- 要素のコンテンツを取得し、左または上に目に見えない距離までスクロールします
- スクロール左とスクロール上
- これら 2 つのプロパティは変更できます

div.addEventListener('scroll',function() {
            console.log(this.scrollLeft)

開発中、ページのスクロール距離を検出することがよくあります。たとえば、ページが 100 ピクセルスクロールすると、要素が表示されたり、要素が固定されたりすることがあります。

場合

ページをスクロールすると「トップに戻る」ボタンが表示される

要件: ページが 500 ピクセルスクロールするとトップに戻るボタンが表示され、それ以外の場合は非表示になります。ボタンを同時にクリックするとトップに戻ります。

分析:
①: ページスクロールイベントを使用します。
②: ページスクロールが 100 ピクセル以上であることを検出し、ボタンを表示します。
③: ボタンをクリックしてページのスクロールトップを 0 にリセットします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .content {
      
      
            height: 3000px;
            width: 1000px;
            background-color: pink;
            margin: auto;
        }

        .backtop {
      
      
            display: none;
            width: 50px;
            left: 50%;
            margin: 0 0 0 505px;
            position: fixed;
            bottom: 60px;
            z-index: 100;
        }

        .backtop a {
      
      
            height: 50px;
            width: 50px;
            background: url(../素材/images/bg2.png) 0 -600px no-repeat;
            opacity: 0.35;
            overflow: hidden;
            display: block;
            text-indent: -999em;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="content"></div>
    <div class="backtop">
        <img src="../素材/images/close2.png" alt="">
        <a href="javascript:;"></a>
    </div>
    <script>
        var i = 500
        let backtop = document.querySelector('.backtop')
        // 页面滚动事件
        window.addEventListener('scroll', function() {
      
      
            // 检测滚动距离
            let num = document.documentElement.scrollTop
            // 进行判断和隐藏
            if (num >= i) {
      
      
                // 显示返回顶部
                backtop.style.display = 'block'
            } else {
      
      
                // 或者隐藏元素
                backtop.style.display = 'none'
            }
        })
        // 点击返回顶部
        backtop.children[1].addEventListener('click',function() {
      
      
            document.documentElement.scrollTop = 0
            
        })
        

        let img = document.querySelector('img')
        img.addEventListener('click',function() {
      
      
            backtop.style.display = 'none'
            // function addi () {
      
      
            //     i += 500
            // }
            
            // // console.log(i)
        })
    </script>
</body>
</html>

改善点は×をクリックした後、先頭のパターンに戻らずに500ずつ増やすというアイデアですローカル変数iを使ってグローバル変数iを変更するというアイデアです

offset 家族

使用シナリオ:
前例のスクロール距離は自分で計算していますが、ページが特定の要素までスクロールしたときに何らかの処理を行うのが最適です。
簡単に言うと、js を使用してページ上の要素の位置を取得し、ページがこの位置までスクロールしたときに上部の小さなボックス表示に戻ることができるようにします。

幅と高さを取得する

要素自体とpadding.borderによって設定された幅と高さを含む、要素自体の幅と高さを取得します。
オフセット高さとオフセット幅

位置情報を取得

配置している親要素から要素の左と上の距離を取得します。
offsetLeft と offsetTop は読み取り専用のプロパティであることに注意してください。

場合

顧客家族

幅と高さを取得する

要素の表示部分の幅と高さを取得します(境界線、スクロールバーなどを除く)。
クライアント幅とクライアント高さ

位置情報を取得

左と上の境界線の幅を取得する
clientLeft と clientTop は読み取り専用のプロパティであることに注意してください。

ウィンドウサイズが変更されるとイベントがトリガーされます

サイズ変更

window.addEventListener('resize',function() {
    
    
            //执行代码
        })

画面幅の検出

window.addEventListener('resize',function() {
    
    
            let w = document.documentElement.clientWidth
            console.log(w)
            })

ウィンドウオブジェクト

BOM (ブラウザオブジェクトモデル)

BOM

BOM (Browser Object Model) はブラウザのオブジェクトモデルです。

画像の説明を追加してください

ウィンドウはブラウザに組み込まれたグローバルオブジェクトであり、これまでに学習した WebAPls の知識コンテンツはすべてウィンドウオブジェクトに基づいています。
ウィンドウオブジェクトには、ナビゲーター、場所、ドキュメント、履歴、画面という 5 つの属性が含まれており、これはいわゆる BOM (ブラウザオブジェクトモデル) です。
ドキュメントはDOMを実装するための基礎であり、実際にはウィンドウのプロパティに添付されます。

タイマー - 遅延機能

JavaScript には、コードの実行を遅らせる setTimeout という関数が組み込まれています。

文法：

setTimeout(回调函数,等待的毫秒数)

setTimeout は 1 回だけ実行されるため、コードの一部の実行を遅らせ、通常はウィンドウを省略すると理解できます。

let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>解除</button>
    <script>
        // 只能使用一次
        let timer = setTimeout(function(){
      
      
            console.log(111)
        },3000)
        let btn = document.querySelector('button')
        btn.addEventListener('click',function(){
      
      
            clearTimeout(timer)
        })
    </script>
</body>
</html>

再帰関数

自分自身を呼び出すのは再帰関数です

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 所以要加一个退出条件，使得递归不死
        let num = 0
        // 死递归
        function fn() {
      
      
            num++
            console.log(111)
            if (num>= 100){
      
      
                return
            }
            fn()
        }
        fn()
    </script>
</body>
</html>

ケース: 再帰を使用した setInterval の実装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>
        let div = document.querySelector('div')
        function fn() {
      
      
            div.innerHTML = new Date().toLocaleDateString()
            setTimeout(fn,1000)
        }
        fn()
    </script>
</body>
</html>

2 つのタイマーの比較

setInterval の特徴は繰り返し実行されるため、最初の実行が遅れることです。
setTimeout は遅延ホット実行を特徴とし、一度だけ実行されます。
setTimeout を再帰関数と組み合わせると、setInterval の繰り返し実行をシミュレートできます。
clearTimeout は、setTimeout によって作成されたスケジュールされたタスクをクリアします

JS実行メカニズム

典型的な面接の質問

console.log(111)
setTimeout(function() {
    
    
    console.log(222)
},1000)
console.log(333)

//结果111 333 222

console.log(111)
setTimeout(function() {
    
    
    console.log(222)
},0)
console.log(333)
//结果还是111 333 222

JSはシングルスレッドです

JavaScript 言語の主な特徴は、シングルスレッドであることです。つまり、一度に 1 つのことしか実行できません。これは、スクリプト言語 Javascript の使命によるものです。JavaScript は、ページ上でのユーザー操作を処理し、DOM を操作するために生まれました。たとえば、特定の DOM 要素の追加と削除を同時に行うことはできません。最初に追加してから削除する必要があります。

シングルスレッドとは、すべてのタスクをキューに入れる必要があり、前のタスクが完了するまで次のタスクは実行されないことを意味します。これによって生じる問題は、JS の実行時間が長すぎると、ページのレンダリングに一貫性がなくなり、ページのレンダリングと読み込みがブロックされたように感じられることです。

同期と非同期

この問題を解決し、マルチコア CPU の計算能力を活用するために、HTML5 は、JavaScript スクリプトが複数のスレッドを作成できるようにする Web ワーカー標準を提案しています。その結果、JSには同期と非同期が登場しました。

同期する

前のタスクが完了した後に次のタスクが実行される場合、プログラムの実行順序はタスクの配置順序と一致し、同期します。たとえば、同期調理法では、水を沸騰させてご飯を炊き、沸騰するのを待って（10分後）、野菜を切って炒めます。
非同期

何かをやっていると、時間がかかるので、やりながら他のこともできる。たとえば、非同期調理法では、水を沸騰させながら、この10分を使って野菜を切ったり炒めたりします。

それらの本質的な違いは、この組立ラインにおける各プロセスの実行順序が異なることです。

タスクを同期する

同期タスクはメインスレッドで実行され、実行スタックを形成します。

非同期タスク

JS 非同期はコールバック関数を通じて実装されます。

一般に、非同期タスクには次の 3 種類があります。

クリック、サイズ変更などの一般的なイベント。
ロード、エラーなどのリソースの読み込み。
setInterval、setTimeout などのタイマー。

JS実行メカニズム

非同期タスクはタスクキューに追加されます (タスクキューはメッセージキューとも呼ばれます)。

まず、実行スタック内の同期タスクを実行します。
非同期タスクはタスクキューに配置されます。
実行スタック内のすべての同期タスクが実行されると、システムはタスクキュー内の非同期タスクを順番に読み取ります。そのため、読み取られた非同期タスクは待機状態を終了し、実行スタックに入り、実行を開始します。

画像の説明を追加してください

メインスレッドはタスクの取得、タスクの実行、タスクの取得、再実行を繰り返すため、この仕組みをイベントループと呼びます。

位置オブジェクト

location のデータタイプはオブジェクトであり、URL アドレスのさまざまなコンポーネントを分割して保存します。

共通のプロパティとメソッド:

href 属性は完全な URL アドレスを取得し、値を割り当てるときにそのアドレスにジャンプするために使用されます。

// 可以得到当前文件url地址
console.log(location.href)
// 可以通过js方式跳转到目标地址
location.href = 'http://www.baidu.com'

場合

5 秒後にジャンプするページ
要件: ユーザーがクリックしてジャンプできます。そうでない場合は、5 秒後に自動的にジャンプします。秒数のカウントダウン分析が必要です。 ①: 対象要素はリンクです。 ②: タイマーを使用して設定し
ます
。デジタルカウントダウン

③：制限時間が経過すると自動的に新しいページにジャンプし、
決済が完了すると1秒後に元のページに戻ります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
        
        
            color: red;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">支付成功，<span>5</span>秒之后跳转首页</a>
    <script>
        let a = document.querySelector('a')
        let num = 5
        let timer = setInterval(function() {
        
        
            num--
            a.innerHTML = `支付成功，<span>${ 
          num}</span>秒之后跳转首页`
            if(num === 0) {
        
        
                clearTimeout(timer)
                location.href = 'https://www.bilibili.com/'
            }
        },1000)
    </script>
</body>
</html>

検索属性は、アドレスに含まれるパラメーター (シンボル? の後の部分) を取得します。

console.log(loaction.search)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="target.html">
        <input type="text" name="username">
        <button>提交</button>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(location.search)
    </script>
</body>
</html>

ハッシュ属性は、アドレスの # 記号以降の部分のハッシュ値を取得します。
```
console.log(location.hash)
```
後の vue ルーティングの基盤は、NetEase Cloud Music など、ページを更新せずに別のページを表示するためによく使用されます。

reload メソッドは、現在のページを更新するために使用されます。パラメータ true が渡されると、強制的に更新されます。

<button>点击刷新</button>
<script>
    let btn = document.querySelector('button')
	btn.addEventListener('click', function() {
        
        
        //刷新方法 有本地缓存 强制刷新ctrl + f5  直接更新最新内容从网上拉去，不走本地缓存
           location.reload(true)
        //强制刷新  CTRL+f5
        })
</script>

ナビゲーターオブジェクト

userAgent を介してブラウザのバージョンとプラットフォームを検出する

履歴オブジェクト

履歴のデータ型はオブジェクトであり、ブラウザのアドレスバーの進む、戻る、履歴などの操作に対応します。

共通のプロパティとメソッド

履歴オブジェクトのメソッド	効果
戻る（）	戻る機能
フォワード（）	フォワード機能
go(パラメータ)	前方および後方関数のパラメータが 1 の場合、前景は 1 ページであり、-1 の場合、前方および後方関数のパラメータは 1 ページです。

履歴オブジェクトは、実際の開発では一般にあまり使用されませんが、一部の OA オフィスシステムで見られることがあります。

スワイパープラグイン

プラグイン: 他の人が書いたコードで、対応するコードをコピーするだけで直接実装できます。

対応エフェクト学習プラグインの基本処理

公式 Web サイトをよく理解し、このプラグインが満たせる要件を理解してください https://www.swiper.com.cn/

オンラインデモを見て、ニーズに合ったデモを見つけてください https://www.swiper.com.cn/demo/index.html

基本的な使用プロセスを表示します https://www.swiper.com.cn/usage/index.html

独自のプラグインを構成するには、API ドキュメントを参照してください https://www.swiper.com.cn/api/index.html

注: 複数のスワイパーを同時に使用する場合は、クラス名を区別する必要があります。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <style>
        .box {
      
      
            width: 600px;
            height: 350px;
            background-color: pink;
            margin: 100px auto;
        }

        html,
        body {
      
      
            position: relative;
            height: 100%;
        }

        body {
      
      
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
      
      
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
      
      
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
      
      
            width: 100%;
            height: 350px;
        }

        .swiper-pagination-bullet {
      
      
            width: 12px;
            height: 12px;
        }

        .swiper-pagination-bullet-active {
      
      
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- Swiper -->
        <div class="swiper-container one">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./images/b_01.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./images/b_02.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./images/b_03.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./images/b_04.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./images/b_05.jpg" alt="">
                    </a>
                </div>


            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

    </div>


    <div class="box">
        <!-- Swiper -->
        <div class="swiper-container two">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./images/b_01.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./images/b_02.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./images/b_03.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./images/b_04.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="./images/b_05.jpg" alt="">
                    </a>
                </div>


            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <!-- 要放到插件的下面 -->
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.one', {
      
      
            slidesPerView: 1,
            autoplay: {
      
      
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            spaceBetween: 0,
            loop: true,
            pagination: {
      
      
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
      
      
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            keyboard: true,
        });
        var swiper = new Swiper('.two', {
      
      
            slidesPerView: 1,
            autoplay: {
      
      
                delay: 5000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            spaceBetween: 0,
            loop: true,
            pagination: {
      
      
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
      
      
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            keyboard: true,
        });
    </script>
</body>

</html>

ローカルストレージ

インターネットの急速な発展に伴い、Web ベースのアプリケーションはますます一般的になり、ますます複雑になってきています。さまざまなニーズを満たすために、大量のデータがローカルに保存されることがよくあります。HTML5 仕様は、関連するソリューションを提案しています。計画されています。
1. データはユーザーのブラウザに保存されます
2. 設定と読み込みが簡単で、ページを更新してもデータが失われません
3. 容量が大きく、sessionStorage と localStorage は約 5M です。

ローカルストレージ

1. ライフサイクルは永続的に有効になり、手動で削除しない限り、閉じたページは残ります。

2. 複数のウィンドウ（ページ）を共有可能（同じブラウザを共有可能）

3. キーと値のペアの形式で保存して使用する

データの保存
- localStorage.setItem(キー,値)
データを取得する
- localStorage.getItem(キー)
データを削除する
- localStorage.removeItem(キー)

複雑なデータ型を保存する

ローカルに保存できるのは文字列のみであり、複雑なデータ型は保存できません。複雑なデータ型は、ローカルに保存する前に JSON 文字列に変換する必要があります。

JSON.stringify (複合データ型)

複雑なデータを JSON 文字列に変換し、ローカルストレージに保存します

JSON.parse(JSON文字列)

JSON文字列をオブジェクトに変換して取り出す際に使用します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 存储数据   localStorage.setItem(键,值)
        // localStorage.setItem('uname','孙悟空')
        // localStorage.setItem('age',18)
        // 获取数据    localStorage.getItem(key)
        // localStorage.getItem('uname')
        // 删除数据
        // localStorage.removeItem('uname')

        // 调用复杂类型
        let obj = {
      
      
            uname : '老八' ,
            age : 18 ,
            address : '试吃员'

        }
        // 复杂数据类型一定要转换为json字符串在进行存储
        localStorage.setItem('obj' ,JSON.stringify(obj))

        // 取数据可以使用JSON.parseo将json字符串转换为对系
        JSON.parse(localStorage.getItem('obj'))

        // // json字符串  属性和值都是双引号进行包含
        // let ob = {
      
      
        //     "uname" : "老八" ,
        //     "age" : "18 ",
        //     "address" : "试吃员"

        // }
        let object = {
      
      
            age : 18
        }
        //本地存储只能存储字符串所以我要转换转换为JSON格式的字符串
        localStorage.setItem('key',JSON.stringify(object))
        // //获取的过来的值是字符串，不是对象了没有办法直接使用，因此我们首先吧字符串转换为对象
        // JSON.parse()
        console.log(JSON.parse(localStorage.getItem('key')));


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

正規表現

正規表現 (正規表現) は、文字列内の文字の組み合わせを照合するために使用されるパターンです。JavaScript では正規表現もオブジェクトです
通常、正規表現に一致するテキストを検索して置換するために使用され、多くの言語が正規表現をサポートしています。

正規表現関数:

フォーム検証 (一致)
機密性の高い単語をフィルタリング (置換)
文字列から必要な部分を抽出する（抽出）

構文手順:

ルールを定義する
- 文法：
```
let 变量名 = /表达式/
```
- // は正規表現リテラルです
- 例えば
```
let reg = /前端/
```
ルールに一致する文字列があるかどうかを確認します。
test() メソッドは、正規表現が指定された文字列と一致するかどうかを確認するために使用されます。
- 文法（強調）
```
regObj.test(被检测的字符串)
```
- 正規表現が指定された文字列と一致する場合は true、それ以外の場合は false を返します。
ルールに一致する文字列を取得 (検索) します。
exec() メソッドは、指定された文字列で検索一致を実行します。
- 文法
```
regObj.exec(被检测的字符串)
```
  一致が成功した場合、exec() メソッドは配列を返し、それ以外の場合は null を返します。

メタキャラクター

● 通常の文字:

ほとんどの文字は、それ自体を説明することしかできません。これらの文字は、すべての文字や数字など、通常の文字と呼ばれます。つまり、通常の文字は、文字列内のそれらと同じ文字とのみ一致します。

● メタキャラクター (特殊文字) は、
特別な意味を持つ文字であり、柔軟性と強力な照合機能を大幅に向上させることができます。

例えば、英語では26文字までしか入力できないと定められており、一般的な文字の場合はabcdefghijklm...
ただし、メタキャラクター記述に変更します: [az]

参照文書：

MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/ Regular_Expressions
定期テストツール http://tool.oschina.net/regex

境界文字

正規表現における境界文字（位置文字）は、文字の位置を示すために使用され、主に 2 つの文字があります。

境界文字	説明する
^	行頭（sleepで始まる）のテキストとの一致を示します。
$	行末に一致するテキストを示します（行末が誰であるか）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(/哈/.test('哈哈哈'))
        //^开头
        console.log(/^哈/.test('二哈哈'))
        console.log(/^哈$/.test('二哈哈'))
        console.log(/^哈$/.test('哈'))
    </script>
</body>
</html>

数量詞

数量子は、特定のパターンの出現数を設定するために使用されます。

数量詞	説明する
*	0 回以上繰り返します
+	1 回以上繰り返します
?	0 回または 1 回繰り返す
{n}	n回繰り返す
{n,}	n回以上繰り返す
{n,m}	n回からm回繰り返します

注: カンマの両側にスペースを入れてはなりません。

文字クラス

(1) [] は文字列コレクションと一致します

ハイフンを使用して範囲を示します

// 只要中括号里面的任意字符出现都返回为true
console.log(/[abc]/.test('andy'))  //true
console.log(/[abc]/.test('bady'))  //true
console.log(/[abc]/.test('cry'))  //true
console.log(/[abc]/.test('die'))  //false

例えば：

[az] は、a から z までの任意の 26 文字の英字が使用できることを意味します
[a-zA-Z] は大文字と小文字の両方を使用できることを意味します
[0-9] は、0 から 9 までの任意の数値が受け入れられることを意味します

(2) []内に否定記号^を追加します。

例えば：

[^az] は小文字を除く文字に一致します
角括弧内に記入することに注意してください

(3) 事前定義: いくつかの一般的なパターンの省略形を指します。

予約カテゴリー	説明する
\d	0 ～ 9 の任意の数値と一致します ([0 ～ 9] と同等)
\D	0 ～ 9 以外のすべての文字と一致します ([^0-9] と同等)
\w	[A-Za-z0-9_] に相当する任意の文字、数字、アンダースコアと一致します。
\W	文字、数字、アンダースコアを除くすべての文字 ([^A-Za-z0-9_] と同等)
\s	[\t\r\n\v\f] と同等のスペース (改行、タブ、スペースなどを含む) と一致します。
\S	[^\t\r\n\v\f] と同等のスペース以外の文字と一致します。

日付形式: ^\d{4} - \d{1,2} - \d{1,2}

\d{4}0-9 が 4 回出現する (これは年)、その後 1 つまたは 2 つ出現する (09-11 または 9-11)

WEB APLSの読書体験

ウェブAPI

Web APIの基本的な理解

DOM (ドキュメント オブジェクト モデル)

DOMオブジェクト

DOMオブジェクトを取得する

DOM要素の内容を設定/変更する

DOM 要素の属性を設定/変更する

共通のプロパティ

スタイルプロパティ

フォーム要素の属性

タイマー間欠機能

イベント

イベントリスニング

イベントタイプ

高次関数

環境オブジェクト

排他的思考

ノードの操作

DOMノード

ノードの検索

親ノードの検索

子ノードの検索

兄弟ノードの検索

ノードの操作

ノードの作成

追加ノード

クローンノード

ノードの削除

時間オブジェクト

インスタンス化する

時間オブジェクトのメソッド

タイムスタンプ

リペイントとリフロー（インタビュー）

イベントオブジェクト

イベントオブジェクトを取得する

イベントストリーム

イベントバブリング

イベントキャプチャ

イベントの流れをブロックする

イベントの代表団

アコーディオンエフェクト

スクロールイベントとロードイベント

スクロールイベント

ロードイベント

要素のサイズと位置

スクロールファミリー

場合

offset 家族

顧客家族

ウィンドウオブジェクト

BOM (ブラウザ オブジェクト モデル)

タイマー - 遅延機能

再帰関数

JS実行メカニズム

位置オブジェクト

ナビゲーターオブジェクト

履歴オブジェクト

スワイパープラグイン

ローカルストレージ

正規表現

メタキャラクター

境界文字

数量詞

文字クラス

おすすめ

DOM (ドキュメントオブジェクトモデル)

BOM (ブラウザオブジェクトモデル)