這篇文章主要介紹“JavaScript入門代碼分析”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“JavaScript入門代碼分析”文章能幫助大家解決問(wèn)題。

創(chuàng)新互聯(lián)于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元茫崖做網(wǎng)站,已為上家服務(wù),為茫崖各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

來(lái)看看下面的這段代碼，它來(lái)自于谷歌“名猿”Addy Osmani在幾天前貼出的一段代碼，它的作用是用來(lái)調(diào)試你的CSS層。全部代碼只有三行，但是你絕對(duì)可以把它放在一行里面完成：

[].forEach.call($$("*"),function(a){
  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

現(xiàn)在，在你的Chrome瀏覽器的控制臺(tái)中輸入這段代碼，你會(huì)發(fā)現(xiàn)不同HTML層都被使用不同的顏色添加了一個(gè)高亮的邊框。是不是非?？?？但是，簡(jiǎn)單來(lái)說(shuō)，這段代碼只是首先獲取了所有的頁(yè)面元素，然后使用一個(gè)不同的顏色為它們添加了一個(gè)1ps的邊框。想法很簡(jiǎn)單，但是真要實(shí)現(xiàn)起來(lái)卻不是那么容易的一件事。在下面的內(nèi)容中，我們將一起一步一步學(xué)習(xí)如何理解上面的這段代碼。

選擇頁(yè)面中所有的元素

我們需要做的第一件事情是獲取頁(yè)面中所有的元素，在上面的代碼中，Addy使用了一個(gè)Chrome瀏覽器中特有的函數(shù)$$。你可以在你的Chrome瀏覽器控制臺(tái)中輸入$$('a')，然后你就能得到一個(gè)當(dāng)前頁(yè)面中所有錨元素的列表。

$$函數(shù)是許多現(xiàn)代瀏覽器命令行API中的一個(gè)部分，它等價(jià)于document.querySelectorAll,你可以將一個(gè)CSS選擇器作為這個(gè)函數(shù)的參數(shù)，然后你就能夠獲得當(dāng)前頁(yè)面中所有匹配這個(gè)CSS選擇器的元素列表。如果你在瀏覽器控制臺(tái)以外的地方，你可以使用document.querySelectorAll('*')來(lái)代替$$('*')。更多關(guān)于$$函數(shù)的詳細(xì)內(nèi)容可以查看Chrome開發(fā)者工具的文檔。

當(dāng)然，除了使用$$函數(shù)之外，我們還有一種更簡(jiǎn)單的方法，document.all，雖然這并不是一種很規(guī)范的使用方法，但是它幾乎在每一個(gè)瀏覽器中都能運(yùn)行成功。

迭代所有的元素

經(jīng)過(guò)第一步，我們已經(jīng)獲得了頁(yè)面內(nèi)所有的元素，現(xiàn)在我們想做的事情是遍歷每一個(gè)元素，然后為它們添加一個(gè)彩色邊邊框。但是上面的代碼究竟是怎么一回事呢？

[].forEach.call( $$('*'), function( element ) { /* 在這里修改顏色 */ });

首先，我們通過(guò)選擇器獲得的列表是一個(gè)NodeLists對(duì)象，它和JavaScript中的數(shù)組有點(diǎn)像，你可以使用方括號(hào)來(lái)獲取其中的節(jié)點(diǎn)，你也可以檢查它其中包含多少個(gè)元素，但是它并沒有實(shí)現(xiàn)數(shù)組包含的所有方法，因此我們并不能使用$$('*').forEach()來(lái)進(jìn)行迭代。在JavaScript中，有好幾個(gè)類似于數(shù)組但是并不是數(shù)組的對(duì)象，除了前面的NodeLists，還有函數(shù)的參數(shù)集合arguments，在這里我們可以使用call或apply函數(shù)將函數(shù)的方法運(yùn)用到這些對(duì)象上。例如下面的例子：

function say(name) {
 console.log( this + ' ' + name );
}

say.call( 'hola', 'Mike' ); // 打印 'hola Mike'

// 你也可以將這種方法有用在arguments對(duì)象上 function example( arg1, arg2, arg3 ) { return Array.prototype.slice.call(arguments, 1); // Returns [arg2, arg3] }

在Addy的代碼中，使用了[].forEach.call而不是Array.prototype.forEach.call，二者等價(jià)，但是前者可以節(jié)省幾個(gè)字節(jié)。

為元素添加顏色

為了讓元素都有一個(gè)漂亮的邊框，我們?cè)谏厦娴拇a中使用了CSS屬性outline。outline屬性位于CSS盒模型之外，因此它并不影響元素的屬性或者元素在布局中的位置，這對(duì)于我們來(lái)說(shuō)非常有用。這個(gè)屬性和修改border屬性非常類似，因此下面的代碼應(yīng)該不會(huì)很難理解：

a.style.outline="1px solid #" + color

真正有趣的地方在于定義顏色部分：

~~(Math.random()*(1<<24))).toString(16)

天吶，上面的代碼是什么意思？在JavaScript中，比特操作符并不是經(jīng)常被使用，因此這里可能會(huì)讓很多程序員感到很疑惑。

我們想達(dá)到的目的是活的一個(gè)十六進(jìn)制格式的顏色例如白色對(duì)應(yīng)的是FFFFFF，藍(lán)色對(duì)應(yīng)的是0000FF，或者隨便一個(gè)顏色37f9ac。雖然我們?nèi)祟愊矚g十進(jìn)制，但是我們的代碼常常會(huì)需要十六進(jìn)制的東西。

我們首先要學(xué)會(huì)如何使用toString函數(shù)將一個(gè)十進(jìn)制的數(shù)組轉(zhuǎn)換為一個(gè)十六進(jìn)制整數(shù)。這個(gè)函數(shù)可以接受一個(gè)參數(shù)，如果參數(shù)缺省，默認(rèn)為十進(jìn)制，但是你完全可以使用別的數(shù)組：

(30).toString(); // "30"
(30).toString(10); // "30"
(30).toString(16); // "1e" 十六進(jìn)制
(30).toString(2); // "11110" 二進(jìn)制
(30).toString(36); // "u" 36是允許的最大參數(shù)值

除此之外，你可以使用parseInt函數(shù)將十六進(jìn)制數(shù)字轉(zhuǎn)換為十進(jìn)制。

parseInt("30"); // "30"
parseInt("30", 10); // "30"
parseInt("1e", 16); // "30"
parseInt("11110", 2); // "30"
parseInt("u", 36); // "30"

因此，我們現(xiàn)在只需要一個(gè)位于0和ffffff之間的十六進(jìn)制數(shù)，由于:

parseInt("ffffff", 16) == 16777215

而這里的16777215實(shí)際上是2^24-1。

如果你對(duì)二進(jìn)制數(shù)學(xué)熟悉的話，你可能會(huì)知道1<<24 == 16777216。

再進(jìn)一步，你每在1后面添加一個(gè)0，你就相當(dāng)于多做了一次2的乘方：

1 // 1 == 2^0
100 // 4 == 2^2
10000 // 16 == 2^4
1000000000000000000000000 // 16777216 == 2^24

因此，在這里我們可以知道Math.random()*(1<<24)表示一個(gè)位于0和16777216之間的數(shù)。

但是這里并沒有結(jié)束，因?yàn)?code>Math.random返回的是一個(gè)浮點(diǎn)數(shù)，但是我們只想要整數(shù)部分。我們的代碼中使用波浪號(hào)操作符來(lái)完成這件事。波浪操作符在JavaScript中被用來(lái)對(duì)一個(gè)變量進(jìn)行取反。

但是我們?cè)谶@里并不關(guān)心取反，我們指向獲取整數(shù)部分。因此我們還可以知道兩次取反可以去掉一個(gè)浮點(diǎn)數(shù)的小數(shù)部分，因此~~的作用相當(dāng)于parseInt：

var a = 12.34, // ~~a = 12
    b = -1231.8754, // ~~b = -1231
    c = 3213.000001 // ~~c = 3213
;

~~a == parseInt(a, 10); // true
~~b == parseInt(b, 10); // true
~~c == parseInt(c, 10); // true

當(dāng)然，我們還有一種更加簡(jiǎn)潔的方法，使用OR操作符：

~~a == 0|a == parseInt(a, 10)
~~b == 0|b == parseInt(b, 10)
~~c == 0|c == parseInt(c, 10)

最終，我們獲得了一個(gè)位于0和16777216之間的隨機(jī)整數(shù)，也就是我們想要的隨機(jī)顏色。此時(shí)我們只需要使用toString(16)將它轉(zhuǎn)化為十六進(jìn)制數(shù)即可。

關(guān)于“JavaScript入門代碼分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

名稱欄目：JavaScript入門代碼分析
URL鏈接：http://jinyejixie.com/article14/gpiode.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、微信公眾號(hào)、品牌網(wǎng)站設(shè)計(jì)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)