JS-window

EcMAScript5-內(nèi)置對象
Number（） String() Boollean（）
Object（） function（） Math（）正則（）

BOM是什么？
BOM：BrowserObject Model縮寫
中文意思：瀏覽器對象模型
瀏覽器對象模型：就是把瀏覽器的一切看成對象，把瀏覽器抽象成一個(gè)對象模型，具體的組成部分：

  • window API：如下
  • 1.document API =>核心 document對象
    -2. History API：把歷史記錄看成對象
  • 3.Screen API：把顯示窗口的屏幕看成是對象
  • 4.Location API：把地址欄看成對象
  • 5.Navigator APL：把瀏覽器的基本信息看成對象

Window VS window

  • 1.Window :大寫的Window表示構(gòu)造函數(shù)
  • 2.window：小寫的Window表示實(shí)例對象
  • 3.小寫的Window是一個(gè)全局變量，里面存儲了一個(gè)大寫的Window實(shí)例對象
  • 4.window:返回示例對象本身
  • 5.window:示例對象表示瀏覽器窗口
  • 6.瀏覽器窗口運(yùn)行document文檔的上下文
  • 7.每一個(gè)標(biāo)簽頁都是一個(gè)window實(shí)例對象
  • 8.同源頭
    1.協(xié)議相同
    2.域名相同
  • 示例：
http://www.baibu.com(錯(cuò))
-----
http://www.baidu.com/news/index.html(對)
----
http：//www.baidu.com/api

--------方法2個(gè)

1.window.open()

  • 定義：用于使用腳本打開一個(gè)指定窗口
  • 語法：
window.open(URL,name,features,replace)
window.open('地址',窗口名稱,窗口參數(shù))

  • open（）

  • open（地址，窗口名稱）

  • open（地址，窗口名稱,可選參數(shù)）
    可以沒有參數(shù)
    可設(shè)置寬高坐標(biāo)
    窗口：

  • "_self"：自身窗口打開

  • "_blank"：新窗口

  • "_parent":父級窗口

  • "_top":頂級窗口

  • 返回值：返回窗口對象的引用。

  • 演示：

window.open("https://www.baidu.com/","_blank",'width=400')
----// window.open("https://www.baidu.com/","_self",'width=400')
 win = window.open("https://www.baidu.com/", "_blank", "width=400, left=200, top=200")
            // console.log(win);
- "_self"：自身窗口打開

2.window.close()

  • 定義：使用于腳本關(guān)閉open窗口打開的窗口
  • 語法：
window.close()//關(guān)閉當(dāng)前窗口
window.open.close()//關(guān)閉對象示例窗口
  • 返回值：
  • 演示：
<body>
    <button>打開頁面</button>
    <button>關(guān)閉頁面</button>

    <script>
        // console.log(window);
        // console.log(Window);
        // console.log(Window.window);
        let win
        const btn1 = document.querySelectorAll('button')[0]
        btn1.onclick = function () {
            // window.open("https://www.baidu.com/","_self",'width=400')
            win = window.open("https://www.baidu.com/", "_blank", "width=400, left=200, top=200")
            // console.log(win);
        }
        const btn2 = document.querySelectorAll('button')[1]
        btn2.onclick = function () {
            win.close()
        }
    </script>

3.window.location

location：讀音：樓K什
意思：位置、場所、地點(diǎn)

  • 定義：window.location是一個(gè)屬性.
  • 返回值：window.location，返回一個(gè)Location對象，該對象表示一個(gè)文檔地址對象。
  • 語法：
let oldLocation = location;
location = newLocation;
Location=新的地址欄

1.Location對象是什么？

  • Location對象是一個(gè)接口。
  • 該接口定義了大量的屬性和方法用于管理文檔地址。
    --

2.Location對象是否可以直接賦值

  • 是可以直接賦值。語法：
Location = '新的文檔地址'
window

3.URL

url：Uniform Resource Location的縮寫。意思：統(tǒng)一資源定位符（俗稱：網(wǎng)址）
2.URL使用Location API 來管理
3.URL語法

http://www.jd.com:8080/news/sports/123.html?user = zhangsan&password=1234#sectionl
協(xié)議：//主機(jī)名：端口號/文檔路徑/文檔名？查詢字符串#hash

8個(gè)（9）

  • http:超文本傳輸協(xié)議
    ftp：文件傳輸協(xié)議
    SMTP：郵件傳輸協(xié)議
    bbs：電子公告牌
  • www：二級域名 表示萬維網(wǎng)
  • jd.com :主機(jī)名
  • 8080：進(jìn)入網(wǎng)站的端口 一般默認(rèn)80（可以省略端口）
  • /news/sports/:文檔存放的路徑
  • 123.html：網(wǎng)頁文檔
  • ？user=zhangsan：查詢字符串
    ?user = zhangsan&password=1234用戶名和密碼

  • section1：hash（片段）

index：首頁

4.Location.href

定義：用于讀取或修改文檔地址（地址欄中的地址）
語法:

location.href//讀
Window.location.href//讀
location.href = "新地址"
Window.location.href = "新地址"

返回值：返回一個(gè)完整的URL地址(字符串)
實(shí)例：

 <script>
        const href = location.href
        console.log(href);
    </script>

5.Location.protocol

定義：
Location.protocol:用于返回URL的協(xié)議

語法：

location.protocol

返回值：返回一個(gè)字符串，表示當(dāng)前URL的協(xié)議
實(shí)例

 const p = location.protocol
        console.log(p);//http:

6. Location.hostname

定義：Location.hostname:用于查詢當(dāng)前地址的主機(jī)名
語法：

string = object.hostname;
object.hostname = string;

返回值：返回一個(gè)字符串，表示當(dāng)前地址的主機(jī)名
個(gè)人電腦的本機(jī)地址都是127.0.0.1
實(shí)例

7.Location.port

定義：Location.port:用于查詢當(dāng)前文檔地址的端口號
語法：

window.location.port
location.port

返回值：返回一個(gè)字符串，表示當(dāng)前文檔地址的端口號
實(shí)例

 <script>
        const p = location.port
        console.log(p);//5500
    </script>

8.Location.host

定義：
查詢文檔地址的主機(jī)。
語法：

location.host

返回值：字符串，返回文檔地址和主機(jī)
實(shí)例：

 <script>
        const p = location.host
        console.log(p);//127.0.0.1:5500
    </script>

9.Location.pathname

定義：
查詢當(dāng)前文檔的路徑
語法：

window.location.pathname

返回值：返回一個(gè)字符串，表示當(dāng)前文檔的路徑
實(shí)例：

const p = location.pathname
console.log(p);///JAVAScript/

語法：

window.location.pathname

返回值：返回一個(gè)字符串，表示當(dāng)前文檔的路徑
實(shí)例：

const p = location.pathname
console.log(p);///JAVAScript/2023.2.28/name.html

10.Location.search

定義：
查詢當(dāng)前文檔的路徑的“查詢字符串”
語法：

window.location.search
location.search

返回值：返回一個(gè)字符串，表示當(dāng)前文檔的路徑的“查詢字符串”
實(shí)例：

location.search
返回值："?q=404%E9%A1%B5%E9%9D%A2"

10.Location.hash

定義：
查詢當(dāng)前文檔的hash值
語法：

window.location.hash
location.hash

返回值：返回一個(gè)字符串，表示當(dāng)前文檔的hash部分
實(shí)例：

https://huaban.com/search?q=404#ww
location.hash
返回："#ww"

input事件：*當(dāng)input、select、text area這三個(gè)元素的Value值發(fā)生變化

change事件：當(dāng)input、select和text area這三個(gè)元素的Value值發(fā)生變化+失去焦點(diǎn)時(shí)觸發(fā)

focus事件+blur事件=不會冒泡

composition start

  • 定義：
    當(dāng)
合成事件：composition事件：compositionstart合成開始(on = false)  compositionend合成結(jié)束(on = true)
        if (on) {
            統(tǒng)計(jì)字?jǐn)?shù)
        }

知識點(diǎn)：
一、BOM:
1.BOM是瀏覽器對象模型。
2.BOM把瀏覽器的一切內(nèi)容看成是對象。包括5大類：
1.window（窗口）2.History（歷史記錄）3.location（地址欄）4.Screen（屏幕）5.Navigator（瀏覽器信息）
3.window是BOM的核心對象。

二、
1.IOS平臺->swift語言
2.安卓平臺->Java
3.小程序->小程序框架（JS）
4.混合式開發(fā)
BOM和DOM的出現(xiàn)，讓一個(gè)靜態(tài)網(wǎng)頁變成真正的web APP。

頁面組件名稱
1.頁面：page
2.輪播圖：slider
3.輪播圖：seckill（second kill）
4.特價(jià)：special（special price）

  1. 新品：new product
    6.頻道：channel
    7.推薦：recoommend
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • window.location() location() 讀音：咯K神 、 意思：位置、場所、地點(diǎn)定義：1.win...
    爛好人_5b0f閱讀 330評論 0贊 1
  • window對象有以下方法： openclosealertconfirmpromptsetTimeoutclear...
    code武閱讀 769評論 0贊 1
  • 相關(guān)概念 BOM BOM(Browser Object Model) 是指瀏覽器對象模型，是用于描述這種對象與對象...
    苦瓜_6閱讀 2,772評論 0贊 2
  • 1. javascript的typeof返回哪些數(shù)據(jù)類型. 答案：string,boolean,number,un...
    townof1997閱讀 290評論 0贊 0
  • Javascript 客戶端腳本語言，用于用戶交互 特點(diǎn)： 弱類型 解釋型 基于對象 事件驅(qū)動(dòng) 單線程/異步(ca...
    一步丶丿麟閱讀 172評論 0贊 0

友情鏈接更多精彩內(nèi)容