javascript - jquery 事件執(zhí)行問(wèn)題
問(wèn)題描述
function tableColor() { alert(0) //這里執(zhí)行 $('.table tr:odd').css('background', '#f8f8f8');} 第一種寫(xiě)法：tableColor();//執(zhí)行alert(0),彈出“0”，表格顏色**沒(méi)有變化**。第二種寫(xiě)法：$(function() { tableColor();請(qǐng)輸入代碼})//彈出“0”,表格顏色變化了。
為什么不同寫(xiě)法造成不同的結(jié)果，道理來(lái)說(shuō)同一個(gè)函數(shù)不會(huì)只執(zhí)行一半吧。
問(wèn)題解答
回答1：$(function(){//這邊是頁(yè)面加載完后才執(zhí)行的代碼})你的第一種寫(xiě)法是頁(yè)面還沒(méi)加載完就執(zhí)行了,所以沒(méi)檢測(cè)到DOM就不會(huì)改變顏色了
回答2：第二種是.ready()的簡(jiǎn)寫(xiě)。具體的去查文檔吧。
回答3：一般引用js都是放在<head></head>里面，第一種寫(xiě)法執(zhí)行的時(shí)候，頁(yè)面還沒(méi)加載完，所以找不到$('.table tr:odd')這個(gè)選擇器；第二種是在頁(yè)面加載完成后執(zhí)行的，所以能改變選擇器的顏色。
要么采用第二種方法，要么把js引用加在頁(yè)面最后。
回答4：第一種寫(xiě)法，在執(zhí)行你的代碼的時(shí)候，頁(yè)面上可能還沒(méi)有加載出來(lái)表格table 這個(gè)元素，所以就可能會(huì)出現(xiàn)沒(méi)有找到元素的情況，所以就沒(méi)有顏色變化。第二種寫(xiě)法是等頁(yè)面元素加載完成之后再執(zhí)行你的代碼，這樣就保證了頁(yè)面中已經(jīng)加載出來(lái)所有的元素了，代碼就能找到需要的元素，所以就會(huì)做出相應(yīng)的變化了
回答5：$(function() { // DOM加載完畢});
你兩次的區(qū)別在于，第一次在DOM沒(méi)有加載完畢調(diào)用 $('.table tr:odd') 可能沒(méi)有獲取到對(duì)應(yīng)元素，你可以打印出來(lái)看看，而第二次肯定獲取到了。
建議把 JS 代碼或引入的 JS 文件放在頁(yè)面底部，<BODY> 之前即可.
回答6：跟一樓回答的類(lèi)似，第一種寫(xiě)法，如果是放在.table標(biāo)簽之前，在dom還沒(méi)加載之前就執(zhí)行的話(huà)，可能$選擇器都找不到dom，也就改不了顏色了。
而第二種，建議查看jquery文檔描述，我這邊打不開(kāi)jquery官網(wǎng)，翻一篇?jiǎng)e的其他地方的http://www.css88.com/jqapi-1....
1.你第一種中寫(xiě)法是在document標(biāo)籤未加載完成的情況下執(zhí)行。換句話(huà)你html沒(méi)有加載完，你就對(duì)其裡面.table tr:odd 添加樣式，js腳本就不知道這個(gè)對(duì)象是哪個(gè)，所以會(huì)系undefine。元素沒(méi)有加載完成。但是function的語(yǔ)法沒(méi)有錯(cuò)誤，所以還是會(huì)alert 02.$(function(){})執(zhí)行，即等待html加載完成時(shí)候，才執(zhí)行裡面的方法，這個(gè)時(shí)候，html加載完了，js就補(bǔ)抓到該對(duì)象是哪個(gè)元素，所以可以設(shè)置樣式。具體參考：http://www.w3school.com.cn/h.asp
回答8：此題終結(jié)
回答9：第一種寫(xiě)法：tableColor();//執(zhí)行alert(0),彈出“0”，但是dom沒(méi)有選中，代碼是逐行執(zhí)行的
第二種寫(xiě)法：是文檔加載完成之后執(zhí)行$(function() {
tableColor();
})
結(jié)論，js的引入放在文檔底部，html內(nèi)部js除了自定義函數(shù)，統(tǒng)一寫(xiě)在$(function() {})里面，確保文檔執(zhí)行完畢js代碼執(zhí)行
相關(guān)文章：
1. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問(wèn)題2. css3 - 圖片等比例縮放3. html - css3中多列高度 統(tǒng)一4. javascript - 使用angular 的ui-sref 中出現(xiàn)了中文參數(shù)，點(diǎn)擊跳轉(zhuǎn)后瀏覽器的地址欄里出現(xiàn)轉(zhuǎn)義后的%AE....%a%45. css3 - 如何將網(wǎng)頁(yè)CSS背景圖高斯模糊且全屏顯示6. html5 - 這個(gè)代碼顯示功能如何實(shí)現(xiàn)？7. css3 - animation屬性，safari瀏覽器不支持相關(guān)效果8. javascript - 求賜教：網(wǎng)易郵箱Web端模擬登錄看信的加密參數(shù)_ntes_nnid、_ntes_nuid9. css - jq有無(wú)現(xiàn)成函數(shù)改變r(jià)otateX/Y的deg10. javascript - QWebEngineView 如何爬 angular 的動(dòng)態(tài)數(shù)據(jù)？
網(wǎng)公網(wǎng)安備