jQuery用$符號爲何得不到對應的ID組件

這個問題應該說很初級,但是我不得不提一下。

在做一個個人的練習項目,bootstrap好了,jQuery也引入了,檢查過了chrome的F12沒有任何錯誤。

那麼這就是開始吧,我嘗試性的加入一段代碼,想實現某一個頁面控件input button的onclick事件。

代碼是這樣的

<script type="text/javascript">
	 $("#conadd").click(function() {
		//alert("get");
	    window.location.href = "www.baidu.com";
	    return true;
	}); 
</script>

好了,問題來了,當我打開畫面,卻怎麼也獲取不到效果,不知道什麼情況。查遍了jQuery的API,發現都是對的。

那就神奇了,上次公司裏剛做完一個快速開發的項目,用的就是jQuery,當時怎麼都是好的呢?

於是不死心,繼續搜索,這還要感謝一下google和stackoverflow,這兩個網站相當好。

現在答案公佈一下,問題出在

<script type="text/javascript">
$(document).ready(function() {
	 $("#conadd").click(function() {
		//alert("get");
	    window.location.href = "www.baidu.com";
	    return true;
	}); 
});
</script>

這麼一加居然就好了。

好,那麼現在就要來挖掘一下,其中的問題和知識點了。

我整理了一下,大體是這樣的

There are only five reasons I know of that addressing an ID won't work:

That ID is not really in the page like you think it is.
The element with that ID hasn't been loaded yet.
That ID is in the page more than once.
Your aren't actually requesting the ID you think you are.
Your ID contains invalid characters.

大體意思是說: 有五種理由來定位ID不能用

1)ID在頁面上不是如你所想的那樣(可能有其他方式存在)

2)這個ID的元素還沒有被加載完畢

3)這個ID可能在當前頁存在了不止一次

4)你請求的ID並不是你真實希望的那個ID(估計你自己ID拼錯了)

5)你的ID含有非法字符

然後第二個知識點就是,document ready的問題了

翻閱了一些網上的文章後發現

document.ready於window.onload類似

大體可以總結如下

1.執行時間 

window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行。 

$(document).ready()是DOM結構繪製完畢後就執行,不必等到加載完畢。 

2.編寫個數不同 

window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個 

$(document).ready()可以同時編寫多個,並且都可以得到執行 

3.簡化寫法 

window.onload沒有簡化寫法 

$(document).ready(function(){})可以簡寫成$(function(){});


好了,今天要總結的知識點就都總結完了。

挖掘的好處就是能讓我們通過一個小的問題,掌握更多知識領域。並且記的更牢固。希望下次再能分享更好的。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章