網(wǎng)頁(yè)中總是不出特效
最近真是被這個(gè)問(wèn)題整的頭大， 最后終于是找到了牺汤，記錄一下問(wèn)題
最近發(fā)現(xiàn)寫個(gè)jQuery放在其它里面就是沒(méi)有反應(yīng),必須放在$(function(){}):里面才會(huì)起作用,或者其他地方的jQuery必須被$(function(){}):調(diào)用
HTML中的代碼是同步執(zhí)行的：按照從上到下的順序解釋執(zhí)行的
為了保證頁(yè)面中的標(biāo)簽加載完成之后執(zhí)行JQuery代碼
使用$(function() { ...代碼：就是頁(yè)面標(biāo)簽加載完成執(zhí)行的代碼.. })
$(function(){
//TODO:這里的內(nèi)容表示js只有在DOM元素全部加載結(jié)束后才會(huì)執(zhí)行
});
如上面注釋中說(shuō)明的，js在瀏覽器渲染頁(yè)面時(shí)是按照在文檔中出現(xiàn)的順序來(lái)順序執(zhí)行的。因此如果js文件在<header>部分引入，那么文件中的js代碼會(huì)在dom元素渲染完畢前就執(zhí)行揪惦。假設(shè)js代碼中有類似$('#elementId').click(function(){...});這樣的語(yǔ)句，那么就會(huì)因?yàn)?a target="_blank" rel="nofollow">dom沒(méi)有渲染完罗侯，導(dǎo)致根本找不到elementId這個(gè)對(duì)象器腋，從而導(dǎo)致事件綁定失敗。
但是钩杰，如果我們把js的內(nèi)容放到$(function(){...});里面纫塌，這里面的代碼會(huì)等到文檔內(nèi)容全部渲染完畢才執(zhí)行。事件就能夠成功綁定了讲弄。
所以我們一般在寫代碼時(shí)措左，通常會(huì)注意兩點(diǎn)
1、借用$(function(){});包括js內(nèi)容
2避除、將需要引入的js文件放在dom的底部引入
<html>
<head>
....
</head>
<body>
<div>...</div>
<div>...</div>
<script src="/script/test.js">
</body>
</html>
$(function(){})它是代表頁(yè)面加載完的時(shí)間...就相當(dāng)于你在body定義onload事件....寫在其他地方是可以的....只是我們習(xí)慣在加載后注冊(cè)jQuery事件....你寫的外面就要考慮它的加載順序了..如果寫在里面是不需要的...因?yàn)樗鼤?huì)等到頁(yè)面加載完畢才去運(yùn)行的....
<script type="text/javascript">
window.onload = function() {
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical',
loop: true,
// 如果需要分頁(yè)器
pagination: '.swiper-pagination',
// 如果需要前進(jìn)后退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 自動(dòng)播放間隔事件
autoplay:3000,
})
}
</script>
下面記錄一下jQuery中強(qiáng)大的選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="js/jquery-1.12.4.js"></script>
<script>
/*
HTML中的代碼是同步執(zhí)行的：按照從上到下的順序解釋執(zhí)行的
為了保證頁(yè)面中的標(biāo)簽加載完成之后執(zhí)行JQuery代碼
使用$(function() { ...代碼：就是頁(yè)面標(biāo)簽加載完成執(zhí)行的代碼.. })
*/
$(function() {
// 這里寫的代碼怎披，就是當(dāng)頁(yè)面中的標(biāo)簽全部加載完成執(zhí)行的代碼；類似于window.onload
// 標(biāo)簽選擇器:$("標(biāo)簽名稱")
$("#btn_tag_selector").click(function() {
// 標(biāo)簽選擇器：選擇所有的div標(biāo)簽驹饺，添加邊框
$("div").css({
"border":"solid 1px orange"
})
});
$("#btn_id_selector").click(function() {
// ID選擇器：語(yǔ)法$("#id值")
$("#box").css({
"border":"solid 1px red"
})
});
$("#btn_class_selector").click(function() {
// class選擇器：語(yǔ)法：$(".class名稱")
$(".item").css({
"border":"solid 1px blue",
"background":"#ccc"
})
});
$("#btn_child_selector").click(function() {
// 層級(jí)選擇器钳枕，可以類似css語(yǔ)法一樣缴渊，使用樣式嵌套
// 子元素選擇器
$("#container > li").css({
"border":"solid 2px pink",
"background":"#dfdfdf"
})
});
$("#btn_contain_selector").click(function() {
// 層級(jí)選擇器：包含選擇器
$("#container li").css({
"border":"solid 2px pink",
"background":"#006699",
"color":"#fff"
})
});
$("#test").click(function() {
$("#container a").css({
"color":"red",
"text-decoration":"none"
})
});
$("#btn_odd_selector").click(function() {
$("li:odd").css({
"background":"orange"
})
})
})
</script>
</head>
<body>
<button id="btn_tag_selector">標(biāo)簽選擇器</button>
<button id="btn_id_selector">id選擇器</button>
<button id="btn_class_selector">class選擇器</button>
<button id="btn_child_selector">層級(jí)選擇器：子元素選擇器</button>
<button id="btn_contain_selector">層級(jí)選擇器：包含選擇器</button>
<button id="test">測(cè)試獲取標(biāo)簽中包含的一個(gè)深層標(biāo)簽超鏈接</button>
<button id="btn_odd_selector">:odd</button>
<hr>
<div>這是一個(gè)單純的div標(biāo)簽赏壹，沒(méi)有id和class屬性</div>
<div id="box">這是一個(gè)div標(biāo)簽，id屬性值為box</div>
<div class="item">這是一個(gè)div標(biāo)簽1衔沼，class屬性值為item</div>
<div class="item">這是一個(gè)div標(biāo)簽2蝌借，class屬性值為item</div>
<ul id="container">
<li>這是一個(gè)ul中的li標(biāo)簽</li>
<li>這是一個(gè)ul中的li標(biāo)簽</li>
<li>這是一個(gè)ul中的li標(biāo)簽</li>
<li>這是一個(gè)ul中的li標(biāo)簽</li>
<ul>
<li>這是ul中的ul里面的li標(biāo)簽</li>
<li>這是ul中的ul里面的li標(biāo)簽</li>
<li>這是ul中的ul里面的li標(biāo)簽<span>這是span標(biāo)簽</span></li>
<li>這是ul中的ul里面的li標(biāo)簽<a href="#">超鏈接</a></li>
</ul>
</ul>
</body>
</html>
