JavaScript基礎入門續-有解無憂

6、操作BOM物件(重點)

瀏覽器介紹

JavaScript和瀏覽器關系?

javascript 誕生就是為了能夠讓他在瀏覽器中運行！

BOM：瀏覽器物件模型

IE 6~11
Chrome
Safari
Firefox

第三方

QQ瀏覽器
360瀏覽器

window

window代表瀏覽器視窗

window.alert(1)
undefined
window.innerHeight
788
window.innerWidth
1045
window.outerHeight
860
window.outerWidth
1600
//大家可以調整瀏覽器視窗試試

Navigator

Navigator,封裝了瀏覽器的資訊

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"
navigator.platform
"Win32"

大多數時候，我們不會使用 navigator 物件，因為會被人修改！

不建議使用這些屬性來判斷和撰寫代碼

screen

screen.width
1920
screen.height
1080
//代表螢屏尺寸

location (重要)

location代表當前頁面的URL資訊

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ? reload()//重繪網頁
// 設定新的地址
location.assign('https://blog.csdn.net/HongLingya?type=blog')

document

document 代表當前的頁面 HTML DOM檔案樹

document.title
"百度一下，你就知道"
document.title='葉鴻凌'
"葉鴻凌"

獲取具體的檔案樹節點

<dl id="app">
    <dt>java</dt>
    <dd>js</dd>
    <dd>javaes</dd>
</dl>

<script>

    var dl = document.getElementById('app');

</script>

獲取cokie

document.cookie
"BIDUPSID=FA0BF84549D229E54AF7FC652FC64BA5; PSTM=1617004824; BAIDUID=FA0BF84549D229E520791FBA59D3C38A:FG=1; BD_UPN=12314753; BAIDUID_BFESS=FA0BF84549D229E520791FBA59D3C38A:FG=1; BD_HOME=1; H_PS_PSSID=33802_33822_33739_33272_31253_33690_33758_26350; delPer=0; BD_CK_SAM=1; PSINO=2; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; COOKIE_SESSION=519039_3_9_9_25_26_0_0_6_7_10_15_519024_19823_6_0_1618194851_1617346128_1618194845%7C9%23275704_38_1617621806%7C8; BA_HECTOR=8ka1al000k2h8h25t01g77fgf0q"

劫持 cookie原理

www.baidu.com

<script src="a.js"></script>
<!--惡意人人員：獲取你的cookie上傳到他的服務器-->

服務器端可以設定cookie：httpOnly

history

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

7、操作DOM物件 (重點)

核心

瀏覽器網頁就是一個DOM樹形結構

更新：更新dom節點
遍歷dom節點：得到dom節點
洗掉：洗掉一個dom節點
添加：添加一個dom節點

要操作一個dom節點，就必須先要獲得這個dom

<h1>java</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
<script>
    //對應css選擇器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');

</script>

這是原生代碼，之后我們盡量都是用jQuery（）；

更新節點

操作文本

id1.innerText=‘yehl’ 修改文本的值
id1.innerHTML=‘
yehl
’可以決議HTML文本標簽

操作js

id1.style.color='red';	//屬性使用字串
id1.style.fontSize = '100px' //駝峰命名問題

洗掉節點

洗掉節點步驟：先獲取父節點，然后在通過父節點洗掉自己

 <div id = "father">

    <h1>java</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>

</div>

<script>

    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self);
    
    //洗掉是一個動態程序
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);

    
</script>

注意：洗掉多個節點的時候，children是在時刻變化的，洗掉節點的時候一定要注意！

插入節點

我們獲得了某個dom節點，假設這個dom節點是空的，我們通過innerHTML就可以在家一個元素了，但是這個dom節點已經存在元素了，我們就不能這么干了，會產生覆寫

追加

<p id="js">javascript</p>

<div id="list">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>


<script>

    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);//追加到后面

</script>

效果：

在這里插入圖片描述

創建一個新的標簽

<script>

    var js = document.getElementById('js');
    var list = document.getElementById('list');

    //通過js創建一個新的節點
    var newP = document.createElement('p');//創建一個p標簽
    newP.id = 'newP';
    newP.innerText = 'hello';

    list.appendChild(newP);
    
    var myscript = document.createElement('script');
    myscript.setAttribute('type','text/javascript');

</script>

8、操作表單(驗證)

表單是什么 form DOM樹

文本框
下拉框
單選框
多選框
隱藏域
密碼框

表單的目的：提交資訊

獲得提交的資訊

<form action="post">

    <span>用戶名：</span><input type="text" id = "username">

<!--  多選框的值，就是定義號的value  -->
    <p>
        <span>性別：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>

<script>
    var input_text=document.getElementById('username');
    var bay_radio=document.getElementById('boy');
    var girl_radio =document.getElementById('girl');
    //得到輸入框的值
    input_text.value
    //修改輸入框的值
    input_text.value = '1324'

    //對于單選框，單選框等等固定的值，boy_radio.value只能取到當前的值
    boy_radio.checked;//查看回傳結果是否為true，如果為true，則被選中
    girl_radio.checked=true;//賦值

</script>

提交表單 md5加密密碼

<!--

表單系結提交時間
onsubmit = 系結一個提交檢測的函式， true  false
將這個結果回傳給表單，使用onsubmit接受
οnsubmit="return tj()"
-->
<form action="https://www.baidu.com" method="post" onsubmit="return tj()">

    <p>
        <span>用戶名：</span><input type="text" id = "username" name="username">
    </p>
    <p>
        <span>密碼：</span><input type="password" id = "input-password" name="input-password">
    </p>
    <!--基本上都使用隱藏就可以了-->
    <input type="hidden" id="md5-password" name="password">

    <!--系結時間onclick 被點擊-->
    <button type="submit" onclick="tj()">提交</button>


</form>

    <script>
        function tj(){
            var name = document.getElementById('username');
            var pwd = document.getElementById('input-password');
            //這個在提交的一瞬間會邊長，這樣不好
            var md5pwd = document.getElementById('md5-password');

            md5pwd.value = md5(pwd.value);
            //可以校驗判斷表單內容，true就是通過提交，false就是阻止提交
            return false;

            //MD5演算法
            // pwd.value = md5(pwd.value);
            // console.log(pwd.value);
        }
    </script>

9、jQuery

JavaScript

jQuery庫，里面存在大量的JavaScript函式

獲取jQuery

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  CDN jQuery  -->
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!--  lib下的jQuery  -->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>


<!--
公式 ： $(selector).action()
-->

<a href="" id="test-jquery">點我</a>

<script>

    //document.getElementById('id');
    //選擇器就是CSS選擇器 
    $('#test-jquery').click(function () {
        alert("Holle jQuery");
    })

</script>

</body>
</html>

選擇器

<script>
    //原生js，選擇器少，麻煩不好記
    //標簽
    document.getElementsByTagName();
    //id
    document.getElementById();
    //類
    document.getElementsByClassName();


    //jquery css 中的選擇器它全都能使用
    $('p').click();//標簽選擇器
    $('#id').click();//id選擇器
    $('.class').click();//class選擇器
</script>

檔案工具站：https://jquery.cuishifeng.cn/

事件

滑鼠事件，鍵盤事件，其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divmove{
            width: 700px;
            height: 700px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>

<!--要求：獲取滑鼠當前的一個坐標-->
mouse：<span id="move"></span>
<div id="divmove">
    在這里移動滑鼠試試
</div>

<script>
    //當網頁元素加載完畢之后，回應事件

    $(function () {
        $('#divmove').mousemove(function (e) {
            $('#move').text('x:'+e.pageX+'y:'+e.pageY);
        })
    })
</script>
</body>
</html>

最后給大家總結一些有用的網站

jQuery https://jquery.com/

layui https://www.layui.com/doc/

layer https://layer.layui.com/

element https://element.eleme.cn/#/zh-CN

jQuery中文檔案 https://jquery.cuishifeng.cn/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275804.html

標籤：其他

上一篇：Web技術模擬面試題A參考答案

下一篇：藍橋杯Java組近兩年真題練習總結（持續更新中）

JavaScript基礎入門 續

6、操作BOM物件(重點)

7、操作DOM物件 (重點)

8、操作表單(驗證)

9、jQuery

JavaScript基礎入門續