国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript的使用你知道幾種？(上)

enda / 3341人閱讀

摘要：如果只是這個問題的話，好像也沒什么嘛，不就是加個嘛部分同學是不是表示，完全可以接受吖。當然不僅僅只是這樣，我們來看下第二個問題。

往期回顧
在上一期的《JavaScript的組成 | DOM/BOM》?里，我們有對文檔對象模型-DOM、瀏覽器對象模型-BOM
這兩大部分進行了解學習，如果有還不是很明白的小伙伴們，可以在上篇文章的下方留言給我哦，我會為大家解答的哦

很快我們就進入了紅寶書的第二章了！這章我們來討論下在HTML中使用JavaScript的幾種方法～（別著急走，我知道這是入門知識，但是你真的掌握了嘛？）來看看吧～

在開發JavaScript的時候，Netscape公司要解決的第一個問題就是：“如何讓JavaScript既能與HTML頁面共存，又不影響頁面在其他瀏覽器的呈現效果？”最終的解決方案是為Web增加統一的腳本支持，也就是我們現在看到的script標簽

當然我們今天要討論的不是這個標簽的誕生史，也不是長得好不好看這些問題～而是


如果你熟悉怎么在HTML內添加CSS，那么悄悄告訴你一個訣竅～基本和CSS類似，不過也有不一樣的地方，我們來對比看一下

第一種：頁面內部直接嵌入

添加頁面內部直接嵌入的CSS代碼，通過以下方式（好巧都是s開頭，千萬不要弄錯哦）

添加JS的代碼也是類似，我們來看一下





這里我們可以很明顯看到，開始產生了差異，那我們來總結下有哪些～


●差異



style引入外部文件的時候是通過 “href”屬性 ，js文件引入通過 “src”（像是img標簽引入圖片也是src）


link是一個單標簽，但是script是一個雙標簽（有沒有不知道單標簽和雙標簽的吖～在評論下方留言～小姐姐給你解答喲）



除了以上兩點很明顯的差別以外，其實JS標簽可以添加的位置與CSS也有不同，我們可以看到以上的案例中，我都是在標簽中添加的，這并沒有什么問題，但是在實際工作中，我們更推薦另一種做法，接下來我們就來看一下～




●script標簽的位置


除了最常規的在head中我們可以使用，其實在body內部的任何地方我們都可以使用，那么這么多地方，我們到底怎么選擇呢？就讓我們來看一下日常工作中我們推薦的做法：



   
隨便給個文字，表明script的立場要在body的“結束”標簽前

   




我們會選擇把script標簽放在之前，
那為什么這么做的？有什么好處？


添加在head標簽中缺點分析


獲取元素時，因為頁面未加在完成，會獲取失敗




    
    


   

 



在上面的這段代碼中，我希望可以打印oDiv這個元素，但是我們通過控制臺可以看到返回的是“null”，這是因為什么呢？


瀏覽器在遇到標簽時，才開始呈現內容，計算機雖然運行很快，但是也需要一行一行去讀取的，在我們執行console.log打印元素的時候，這個元素還沒有生成，自然就獲取不到，想解決這個問題，我們就需要借助onload事件，將代碼修改為如下：



   


   





onload這個事件可以幫助我們等待頁面中元素加載完成之后再執行后續操作，這樣的話，頁面中已經有了這個元素的存在，我們的獲取操作就有效果啦。
如果只是這個問題的話，好像也沒什么嘛，不就是加個onload嘛～部分同學是不是表示，完全可以接受吖。當然不僅僅只是這樣，我們來看下第二個問題。


●瀏覽器窗口長時間空白


正如我們上面看到的，代碼的執行是有順序的，我們在引入一個外部JS文件的時候，需要等待全部的JS代碼都被下載、解析和執行完成以后，才開始呈現頁面的內容，對于需要很多JS文件的頁面來說，下載文件和解析的過程將會導致頁面無法呈現。這種空白的時間對于用戶來說，是非常不好的用戶體驗，雖然很多用戶的第一反應可能是：“今天網速這么差的么？？”，卻沒想到是頁面本身就存在問題。
為了避免這樣的問題，所以在實際的工作中，我們推薦寫在標簽前面，這樣可以有更好的用戶體驗哦～不要再甩鍋給網絡啦！


●注意事項


如果同時需要使用內部嵌入式的引用和外部文件的引用，正確做法如下：



！！！！千萬不要合并到一起！！！！如下錯誤示范：


如果你是初學者的話，一定一定不要這樣操作，這樣的載入方式會導致你內部嵌入的代碼被忽略，也就是無效。


第三種：行間添加


其實這種的用途并不多，甚至可能沒有行間的樣式的使用來的頻繁，不過我們可以了解一下～


CSS添加行間樣式




添加行間的JS


  //點擊這個div會彈出一個1



當然，關于script標簽的使用方式不僅僅只有這些~


請大家期待下篇吧，我將帶著大家了解一下type屬性的用途等等等等的知識……

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99496.html

相關文章

  • 聊一聊Vue組件模版，你知道它有幾種定義方式嗎？

    摘要：活動結束單文件組件使用構建工具創建項目，綜合來看單文件組件應該是最好的定義組件的方式，而且不會帶來額外的模版語法的學習成本。 前端組件化開發已經是一個老生常談的話題了，組件化讓我們的開發效率以及維護成本帶來了質的提升。 當然因為現在的系統越來越復雜龐大，所以開發與維護成本就變得必須要考慮的問題，因此滋生出了目前的三大前端框架 Vue、Angular、React。 那今天我們就來看看 V...

    instein 評論0 收藏0

  • javascript的幾種常見遍歷數據結構的語法

    摘要：接觸這么多年，第一次總結一下它的遍歷語法。而且你必須借助特定的結構才能遍歷數據結構。它的作用是遍歷對象的鍵名。建議僅在遍歷數組的時候使用。另一個優點是，它可以遍歷任何部署了接口的數據結構，甚至是非的數據類型，即自己定義的數據結構。 接觸JavaScript這么多年，第一次總結一下它的遍歷語法。以前我大部分時間都在老版本的JavaScript下寫代碼，所以大部分時間都是用for...in...

    kohoh_ 評論0 收藏0

  • Q.js中的幾種創建promise對象的方法對比

    摘要：的意思是，從字面意思來看是用了的方法，繼承原有的方法類，然后又添加了自己的某些私有方法。用來實現代碼如下的意思是，從字面意思來看是用了的方法。 世界上最遠的距離不是生與死的距離，而是文檔就在你面前，你依然不知道這個庫怎么用。 鄙人IQ不高，已經被Q.js虐了幾天。查看了github上kriskowal/q的文檔，現在把幾種看明白了的使用方法整理記錄下來，以下幾種方法可以把nodejs中...

    fsmStudy 評論0 收藏0

  • JavaScript精編干貨

    摘要：老姚淺談怎么學鑒于時不時，有同學私信問我老姚，下同怎么學前端的問題。擼碼聽歌，全局控制。 淺析用 js 解析 xml 的方法 由于項目上需要解析 xml，于是各種百度，然后自己總結了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。 裝 X - 建立自己的斗圖網站庫 之前加過一個斗圖群，看到很多經典的表情，然后就收藏到了 QQ， 迫于本屌絲開不起...

    Fourierr 評論0 收藏0

  • 好棒的前端文章 - 收藏集 - 掘金

    摘要：你應該知道的種設計模式前端掘金每位開發者都努力寫出可維護的易讀的可復用的代碼。繼承關系本前端書籍整理，高清前端掘金發現了一個下載前端書籍的地方，分享給大家。 你應該知道的 4 種 JavaScript 設計模式 - 前端 - 掘金每位開發者都努力寫出可維護的、易讀的、可復用的代碼。隨著應用變得越來越大，代碼的結構也越來越重要。設計模式驗證了解決這個挑戰的重點——在特定環境中，對同類事物...

    Maxiye 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<