關於js、jq零碎知識點

OBKoro1發表於2017-04-17
JS

寫在前面：

本文都是我目前學到的一些比較零碎的知識點，也是相對偏一點的知識，這是第二篇。前後可能沒有太大的相關性，需要的朋友可以過來參考下，喜歡的可以點個贊，希望對大家有所幫助。本文的受眾是剛學前端，大手子可以跳過。

1.頁面載入完成之後，才開始執行函式。

$(function() { 
// 需要執行的js函式內容 
});複製程式碼

背景：碰到一個JQ很複雜的函式，上面簡化了的整體格式，這跟自執行函式又不太一樣，之前沒見過這種寫法，查了蠻久之後才找到這方面的內容，在這裡分享一波。

jQuery 事件 -ready() 方法

定義和用法

當 DOM（文件物件模型） 已經載入，並且頁面（包括影像）已經完全呈現時，會發生 ready 事件。
ready() 函式規定當 ready 事件發生時執行的程式碼。
ready() 函式僅能用於當前文件，因此無需選擇器。

意思就是：當頁面載入完畢之後就開始執行函式程式碼。

允許使用以下三種語法：

語法 1

$(document).ready(function)複製程式碼

語法 2

$().ready(function)複製程式碼

語法 3

$(function)複製程式碼

js貌似也有一個這型別的方法，js方法如下：

window.onload = function() {
$("table tr:nth-child(even)").addClass("even"); //這個是jquery程式碼
};

js方法和jq方法的區別：

當使用js方法的時候，會在整個頁面的document全部載入完成以後執行。不幸的這種方式不僅要求頁面的DOM tree全部載入完成，而且要求所有的外部圖片和資源全部載入完成。更不幸的是，如果外部資源載入時間過長，例如圖片需要很長時間來載入，那麼這個js效果就會讓使用者感覺失效了，所以當這個情景下，使用這種方法的使用者體驗是非常差的。

使用jquery方法：就僅僅只需要載入所有的DOM結構，在瀏覽器把所有的HTML放入DOM tree之前就執行js效果，包括在載入外部圖片和資源之前。

2.獲取class和tag型別的dom節點，獲取到的是一個物件陣列

背景：寫程式碼的時候，因為之前做css習慣性的用class來命名，然後直接獲取了class，tagname類名節點，賦值的時候一直出錯，查了好久最後，知道了class和tag型別的節點，因為不唯一性，所以獲取節點的時候，返回的是一個物件陣列。

ps：賦值出錯是因為，陣列物件賦值時不能直接a=b，要a[index]=b，因為這裡獲取class，tagName的dom節點，瀏覽器不知道class和tag在html裡面有多少個（class、tag可以有多個），所以預設生成的是一個物件陣列，所以當賦值的時候，要有相應的下標，否則就會出錯。

getElementsByClassName()w3c定義：

getElementsByClassName() 方法返回文件中所有指定類名的元素集合，作為 NodeList 物件。
NodeList 物件代表一個有順序的節點列表。
我們可通過節點列表中的節點索引號來訪問列表中的節點(索引號由0開始)。

解決方式：

因為id的唯一性質（同一個html裡面只能取一個相同的id），沒特殊情況最好用id命名，並且用id獲取dom，這樣不容易出錯，就算寫css習慣性的採用class，也可以再標籤裡面再加一段id="名字"。

3.變數作用域，引數傳遞不進去。

背景：

關於js、jq零碎知識點

這種情況是作用域的問題，上面定義的變數是全域性變數，在雖然是一個閉包，但是應該可以使用全域性的變數，回一級一級往上找這個變數。這裡不太清楚為什麼會沒有找到？

然而，雖然不太清楚中間發生了什麼，但是最後問題還是成功的解決了。

全域性的window物件

JavaScript中的任何一個全域性函式或變數都是window的屬性，可以是使用如下方法獲取dom，並且操作dom。

栗子1：

<script type="text/javascript">
    var name="這裡是測試";
    document.write(window.name);//輸出name的內容
</script>複製程式碼

實際應用如下：

關於js、jq零碎知識點
上圖中變數作用域的問題

應用場景：

當你層次巢狀多層之後，取不到變數或物件的時候，就可以使用window全域性物件的方法，來傳遞引數，使其成功連線。

找不到關於這方面的比較詳細的資料，大夥兒就記住這個方法就好了。

換行符和佔位符在字串裡面正常生效

效果如圖：

關於js、jq零碎知識點

如圖，佔位符和換行符在字串中正常生效，不會變成字串。其他的我不知道，反正這兩個親測可行，個人覺得蠻神奇，一直以為會變成字串。

評論區還有一種說法，意思是說在字串中使用特殊符號，在輸出的時候可以起效果，然而將特殊符號作為一個值來計算，或者是當做一個變數來使用的話，這種情況下就會出錯！so，我們還是不要用特殊符號亂搞事情，輸出的時候使用即可，而且好像應用場景也就輸出的時候，應該沒有什麼其他場景應用的到了吧？

大家可以看看：

關於js、jq零碎知識點

後話：

先記這些，以後學到了新的東西，累積起來，再發一些，這些都是我目前學到的一些比較零碎的知識點，也是相對偏一點的知識，再次強調一下是寫給小白看的，讓他們以後少踩些坑，小白們也多點參考資料。

最後：希望看完的朋友點個喜歡，也可以關注一下我，現在這階段基本上每個月都不會少於十五篇文章（看到乾貨我也會進行分享）。寫的不好之處，歡迎指點。碼字不易，感謝支援！
ps：目前待業，座標北京，求推薦工作。然後希望我寫哪方面的文章可以在底下評論，或者是私信我，雖然寫的不好，但我就當這是記錄自己成長的一種方式咯。（前提是我會了，如果不會我也會記下來，等會了的時候再更出來。）
掘金個人主頁 ，簡書主頁連結，csdn部落格主頁連結 ，github 。

以上。

相關文章