day 8 Bom瀏覽器對象模型

来源:https://www.cnblogs.com/jxooooolxe/archive/2022/08/04/16548497.html
-Advertisement-
Play Games

BOM BOM的概述: bom 稱為瀏覽器對象模型(bowser object model),也就意味他可以獲取瀏覽器上的所有內容以及相關的操作。BOM缺乏規範的,存在共有對象來解決這個問題,但是共有對象也存在相容問題(ie10以後) BOM的結構 window 概述: window是頂層對象 屬於 ...


BOM

BOM的概述:

bom 稱為瀏覽器對象模型(bowser object model),也就意味他可以獲取瀏覽器上的所有內容以及相關的操作。BOM缺乏規範的,存在共有對象來解決這個問題,但是共有對象也存在相容問題(ie10以後)

BOM的結構

 

window

概述: window是頂層對象 屬於golbal對象。他是所有全局變數的父親。

相關方法
列印方法
// window //對象
console.log(window); //window 對象 Window的構造函數
//常用的彈窗方法及列印方法
window.console.log('hello') //console.log() window可以省略的
console.log('日誌') //控制台  log日誌 以日誌的形式列印
console.error('錯誤') //以錯誤的形式列印
console.warn('警告') //以錯誤的形式列印
console.debug('測試') //以錯誤的形式列印
console.info('信息提示') //以錯誤的形式列印

彈窗方法

//彈窗
window.alert('hello') //彈提示窗
var isTrue = confirm('你確認要刪除嗎') //交互框  true確認 false取消 返回
console.log(isTrue);
var str = prompt('請輸入你的手機號') //輸入框 他會有個輸入框讓你輸入返回對應的你輸入的內容 (string的內容)
console.log(str);

打開關閉方法

//打開 open 關閉 close
// 第一個參數是url地址 第二個參數為title target(打開方式 _blank _self _parent) 第三個參數為設置的參數(視窗的高度 寬度等等)
window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0')
//  height=100 窗⼝⾼度;
//   width=400 窗⼝寬度;
//   top=0 窗⼝距離屏幕上⽅的象素值;
//   left=0 窗⼝距離屏幕左側的象素值;
//   toolbar=no 是否顯⽰⼯具欄,yes為顯⽰;
//   menubar,scrollbars 表⽰菜單欄和滾動欄。
//   resizable=no 是否允許改變窗⼝⼤⼩,yes為允許;
//   location=no 是否顯⽰地址欄,yes為允許;
//   status=no 是否顯⽰狀態欄內的信息(通常是⽂件已經打開),yes為允許;
window.close() //關閉當前的視窗 (關閉瀏覽器只能有一個頁面)

改變位置的方法

//moveBy 一個是x軸的距離 y軸的距離
window.moveBy(100,100) //X+100 Y+100
//moveTo 一個x軸 一個y軸
window.moveTo(200,200) //X=200 Y=200

改變大小的方法

//改變對應的視窗大小
window.resizeBy(200,200) //width+200 height+200
//resizeTo 
window.resizeTo(200,200) //width=200 height=200

列印方法(打應當前的整個頁面)

//print列印方法
window.print()

聚焦和失焦的方法

//focus 聚焦  blur 失去焦點
window.focus()
window.blur()

查找方法

//find查找 ctrl+f
window.find()

滾動欄位置改變

//滾動欄位置改變  初始位置 x:0,y:0
window.scrollBy(100,100) //原本的位置 x+100,y+100
window.scrollTo(500,500) //到達位置 x=500 y=500 //回到頂部
相關屬性

innerHeight 和 innerWidth

parent

location對象 (*)

屬性
console.log(location.hash) //哈希 #後面帶的值 *
console.log(location.host) //主機 功能變數名稱 ip地址+埠號
console.log(location.hostname) //主機名 ip地址 (127.0.0.1表示本機地址和localhost是一樣的)
console.log(location.protocol) //協議 用於通信 (基於tcp/ip)http(明文傳輸) https(安全)(加密過)
console.log(location.port) //埠號  1--65525 (1-100的埠電腦占用了)http預設的埠80 https預設埠443
console.log(location.href) //鏈接的地址  也可以設置
console.log(location.search); //?後面帶的值 一般是get請求傳輸數據的時候 *
console.log(location.origin); //跨域
console.log(location.pathname); //路徑名 獲取的除了協議和ip地址加埠號後面的東西
方法

assign 跳轉頁面

    location.assign('http://www.baidu.com')

replace 替換頁面

location.replace('http://www.weibo.com')

reload 重新載入頁面

location.reload()
//參數 boolean類型的值 true(從伺服器載入 慢) false (從緩存中載入 快)

history對象 (*)

屬性
length 歷史頁面個數
state 狀態存儲的對象
scrollRestoration 滾動欄恢復
方法

forwad 前進

function fn(){
    history.forward() //前進
}

back 後退

function fn1(){
    history.back() //後退
}

go 去任意的歷史頁面

function fn2(){
    history.go(-1) //去任意頁面 0就是自己 小於0 後退 大於0前進
}

pushState

//spa 單頁應用
function fn3(){
    //添加state的值 數據  ""  地址(會產生跨域問題)
    history.pushState('hello','','./index.html') //會改地址 但是不會刷新 推一個歷史頁面到歷史區 state設置進去
}

replaceState

function fn4(){
    //替換state
    history.replaceState('world','','/location對象講解.html') //會改地址 但是不會刷新 在歷史區直接修改當前這個歷史頁面 state設置進去
}

screen 對象

屬性
avaliHeight 可占用的最大高度
avaliWidth 可占用的最大寬度
avaliLeft 離屏幕左側的距離
avaliTop 離屏幕上方的距離

navigator對象

屬性
userAgent 用戶瀏覽器設置信息

路由 (擴展)

對應的開發者來說 路由是一個很重要的東西。(前端路由)(後端路由)

後端路由

根據對應的介面地址來訪問不同的功能 (後端路由 restful風格(介面的風格))

前端路由

根據不同的訪問路徑 (path)來渲染不同的內容(組件)

前端的路由主要分三種
1.頁面路由 (跳轉頁面 刷新操作)
  • location.href

  • location.assign()

  • location.replace()

  • history.back()

  • history.forward()

  • 等這系列的操作都會導致頁面進行跳轉,重新載入頁面(刷新)

2.hash路由 (使用hash來實現 後面必須要帶上# 不會刷新頁面)
  • 通過hash的改變來改變的對應的渲染內容 (事件監聽 onhashchange)

    window.onhashchange = function(){
        console.log('hash值變了')
    }

     

    3.H5路由 (history裡面state進行監聽)(常用SPA (單頁應用程式))
    • history.pushState() 加一個歷史頁面(地址變了 不會刷新)

    • history.replaceState() 替換歷史頁面 (地址變數 不會刷新)

    • 也是通過事件進行監聽 (onpopstate)

      window.onpopstate = function(){
          console.log('路由改變了')
      }

      在對應的框架學習中 我們裡面的路由的寫法底層主要採用hash以及h5的方式(vue react)預設是路由模式為hash

      vue中路由有幾種模式 (面試題)

      倆種模式(hash模式和history模式)

 

  總結:

主要認識:location history  的用法

路由的基本原理  h5 與 hash!!!(為將來寫底層代碼做鋪墊)

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 社區於上個月發佈了 RadonDB MySQL Kubernetes v2.2.0,集群數據備份恢復的存儲類型除了 S3,新增 NFS 存儲。本文將為您演示如何進行 NFS 備份及恢復操作。 環境準備 Kubernetes 集群 RadonDB MySQL 集群 過程略,詳細請回顧《快速實現 MyS ...
  • 1. 數據操作類語句: SELECT:從資料庫表中檢索數據行和列 INSERT:把新的數據表記錄添加到資料庫中 DELETE:從資料庫中刪除數據記錄,針對數據進行操作 UPDATE:修改現有資料庫中的數據 2. 數據定義類語句: CREATE:創建新的資料庫或者表等結構 DROP:從資料庫中刪除表或 ...
  • 最近做了一個校園拍賣小程式,想在裡面添加一個類似校園圈功能,現在來一步一步實現。 一、設計所需要的表 1、文章表 文章表很簡單,就類似朋友圈,一個文字內容,一個圖片數組 2、評論表 3、點贊表 二、發佈動態 1、文本區 游標有點問題,回車換行時游標和文字被埋在下麵了 解決,給textarea設置一個 ...
  • 1 語聊房應用場景說明 七夕禮物準備好了嗎?程式猿七夕禮物標配,給女友搭建專屬語聊房,既浪漫又硬核! 語聊房在社交場景中使用比較廣泛,社交APP中的語聊房場景的實現,主要由業務系統和移動/Web 客戶端組成。其中業務系統需要實現語聊房的房間管理、麥位管理、音頻流和麥位關聯關係管理等功能,客戶端需要實 ...
  • 一.頁面導航 1.聲明式導航 通過navigator來跳轉 1.1 導航到tabBar頁面 比如跳轉到tabBar頁面就需要navigator來跳轉,要用到他的url和open-type屬性 1.2 導航到非tabBar頁面 非tabBar頁面只是沒有配置為tabBar的頁面,註意還是頁面 配置其他 ...
  • 七夕來咯!又到了給重要的人送驚喜的時刻。 今年,除了將心意融入花和禮物,作為程式員,用自己的代碼本事手搓一個技術感十足“七夕限定”驚喜,我覺得,這是不亞於車馬慢時代手寫信的古典主義浪漫。 那麼,應該怎樣創作出具有自我身份屬性的浪漫七夕驚喜呢? 玩法很多,今天給大家介紹一個不出錯的技術控浪漫實操方式— ...
  • 一.WXML模板語法 1.1 數據綁定 綁定內容 跟vue差不多,在頁面的js文件定義到data裡面 然後通過插值語法用在wxml中即可 綁定屬性 直接寫上插值語法,沒有: 三元運算 生成一個十以內的隨機數 算數運算 1.2 事件綁定 小程式常用事件 小程式事件對象常用屬性 target和curre ...
  • 變數提升題目: (function(){ a=5 console.log(window.a) var a=10 console.log(a) })() 答案如下(還請先思考哦) //編譯後 (function(){ var a; a=5; console.log(window.a) //undefi ...
一周排行
    -Advertisement-
    Play Games
  • 使用原因: 在我們服務端調用第三方介面時,如:支付寶,微信支付,我們服務端需要模擬http請求並加上一些自己的邏輯響應給前端最終達到我們想要的效果 1.使用WebClient 引用命名空間 using System.Net; using System.Collections.Specialized; ...
  • WPF 實現帶蒙版的 MessageBox 消息提示框 WPF 實現帶蒙版的 MessageBox 消息提示框 作者:WPFDevelopersOrg 原文鏈接: https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal 框架使用大於等於.N ...
  • 一、JSON(JavaScript Object Notation)的簡介: ① JSON和XML類似,主要用於存儲和傳輸文本信息,但是和XML相比,JSON更小、更快、更易解析、更易編寫與閱讀。 ② C、Python、C++、Java、PHP、Go等編程語言都支持JSON。 二、JSON語法規則: ...
  • 1.避免Scoped模式註冊的服務變成Singleton模式 當提供一個生命周期模式為Singleton的服務實例時,如果發現該服務中還依賴生命周期模式為Scoped的服務實例(Scoped服務實例將被一個Singleton服務實例所引用),那麼這個被依賴的Scoped服務實例最終會成為一個Sing ...
  • 索引時資料庫提高數據查詢處理性能的一個非常關鍵的技術,索引的使用可以對性能產生上百倍甚至上千倍的影響。接下來,會介紹索引的基本原理、概念,並深入學習資料庫中所使用的索引結構和存儲方式,以及如何管理、維護索引等。 1.索引的基本概念 索引時用來快速查詢表記錄的一種存儲結構,一般使用索引有一下兩個方面: ...
  • django2 路由控制器 Route路由,是一種映射關係。路由是把客戶端請求的url路徑和用戶請求的應用程式,這裡意指django裡面的視圖進行綁定映射的一種關係。 請求路徑和視圖函數不是一一對應的關係 在django中所有的路由最終都被保存到一個叫urlpatterns的文件里,並且該文件必須在 ...
  • 1、我們的目標是獲取微博某博主的全部圖片、視頻 2、拿到網址後 我們先觀察 打開F12 隨著下滑我們發現載入出來了一個叫mymblog的東西,展開響應發現需要的東西就在裡面 3、重點來了!!! 通過觀察發現第二頁比第一頁多了參數since_id 而第二頁的since_id參數剛好在上一頁中能獲取到, ...
  • 一、實現原理 在Servlet3協議規範中,包含在JAR文件/META-INFO/resources/路徑下的資源可以直接訪問。 二、舉例說明 如下圖所示,是我新建的一個Spring Boot Starter項目:zimug-minitor-threadpool,用於實現可配置、可觀測的線程池。其中 ...
  • 精華筆記: static final常量:應用率高 必須聲明同時初始化 由類名打點來訪問,不能被改變 建議:常量所有字母都大寫,多個單詞用_分隔 編譯器在編譯時會將常量直接替換為具體的數,效率高 何時用:數據永遠不變,並且經常使用 抽象方法: 由abstract修飾 只有方法的定義,沒有具體的實現( ...
  • Python有一個for...else語法,它的寫法如下 for i in range(0,100): if i == 3: break else: print("Not found") 該語句表示:若for迴圈遍歷完畢,則執行else部分的語句。也就是說上述代碼不會有任何輸出,而下述代碼會輸出“N ...