目錄：
1：全選/反選
2：tab 切換
3：下拉菜單
4：圖片輪播
5：吸頂效果
6：回到頂部
7：彈出框
1：全選/反選
如果你有JS性能潔癖的話，顯然prop的性能更高，因?yàn)閍ttr需要訪問(wèn)DOM屬性節(jié)點(diǎn)，訪問(wèn)DOM是最耗時(shí)的。這種情況適用于多選項(xiàng)全選和反選的情況。
大家都知道有的瀏覽器只要寫(xiě)disabled落萎，checked就可以了，而有的要寫(xiě)成disabled ="disabled"炭剪，checked="checked"练链，比如用attr("checked")獲取checkbox的checked屬性時(shí)選中的時(shí)候可以取到值,值為"checked"但沒(méi)選中獲取值就是undefined
jq提供新的方法“prop”來(lái)獲取這些屬性，就是來(lái)解決這個(gè)問(wèn)題的奴拦，以前我們使用attr獲取checked屬性時(shí)返回"checked"和"",現(xiàn)在使用prop方法獲取屬性則統(tǒng)一返回true和false媒鼓。
那么，什么時(shí)候使用attr错妖，什么時(shí)候使用prop绿鸣？？
1.添加屬性名稱該屬性就會(huì)生效應(yīng)該使用prop.
2.是有true,false兩個(gè)屬性使用prop.
3.其他則使用attr
$(function() {
$("#all").click(function() {
if ($("#all").prop("checked")) {
$(".list li input").prop("checked",true);
$("#content").html("反選")
} else {
$(".list li input").prop("checked",false);
$("#content").html("全選")
}
});
// $("input").each(function(index,item) {
// console.info(index)
// console.info(item)
// })
});
</script>
</head>
<body>
<input type="checkbox" name="" id="all" value="" checked="true" /><span id="content">全選</span>
<ul class="list">
<li><input type="checkbox" />讀書(shū)</li>
<li><input type="checkbox" />讀書(shū)</li>
<li><input type="checkbox" />讀書(shū)</li>
<li><input type="checkbox" />讀書(shū)</li>
</ul>
</body>
2：tab 切換
要設(shè)置display 另外要找關(guān)系暂氯，精確的找到要切換的子元素
否則可能會(huì)串位
.main-list-content>ul{
display: none;
}
.main-list-content>ul:nth-child(1){
display: block;
}
$(".main-list>ul>li").mouseenter(function(){
$(this).css("background","#558183").siblings().css("background","#91BEDC")
$(this).parent().children().eq(4).css("background","white")
$(this).parent().parent().siblings().children().eq($(this).index()).show().siblings().hide();
})
3：下拉菜單
要用到絕對(duì)定位和相對(duì)定位
父級(jí)元素相對(duì)定位潮模，現(xiàn)有元素絕對(duì)定位才會(huì)脫離DOM層，產(chǎn)生效果
注釋掉的那種方法容易產(chǎn)生動(dòng)畫(huà)時(shí)延痴施，所以用了hover效果
$(function() {
// $("#menu_bar>dl.menu").mouseenter(function() {
// $(this).children("dd").show();
// });
//
// $("#menu_bar>dl.menu").mouseleave(function() {
// $(this).children("dd").hide();
// })
// $("#menu_bar>dl.menu").mouseenter(function() {
// $(this).children("dd").show();
// }).mouseleave(function() {
// $(this).children("dd").hide();
// })
$("#menu_bar>dl.menu").hover(function() {
$(this).children("dd").show();
},function() {
$(this).children("dd").hide();
})
// $("#menu_bar>dl.menu").hover(function() {
// $(this).children("dd").stop().slideToggle(200);
// });
});
4：圖片輪播
寫(xiě)這個(gè)的時(shí)候擎厢，出了一點(diǎn)小問(wèn)題，就是下拉菜單被圖片輪播遮擋辣吃，用
z-index來(lái)控制絕對(duì)定位的優(yōu)先級(jí)动遭。
//圖片輪播
var index = 0;
var time;
//邊界控制，顯示隱藏
function change(){
if(index >= $(".top-img>ul>li").length){
index = 0;
}
if(index < 0){
index = $(".top-img>ul>li").length-1;
}
// 進(jìn)行圖片切換
$(".top-img>ul>li").eq(index).show().siblings().hide()
//對(duì)小點(diǎn)進(jìn)行顏色變換
//方式1
// $(".top-img>ol>li").eq(index).css("background","#008B8B").siblings().css("background","white")
//方式2
$(".top-img>ol>li").eq(index).addClass("active").siblings().removeClass("active")
}
//切換
function make(){
time = setInterval(function(){
index++
change()
},2000)
}
make()
//按左右點(diǎn)擊時(shí)需要先清除掉輪播效果神得，變換圖片厘惦，然后重新輪播效果
function remake(){
clearInterval(time)
change()
make()
}
//左右點(diǎn)擊切換
$(".top-img .left").click(function(){
index++;
change()
remake()
})
$(".top-img .right").click(function(){
index--;
change()
remake()
})
//點(diǎn)擊小點(diǎn)進(jìn)行切換
$(".top-img ol li").click(function(){
index = $(this).index()
remake()
})
});
5：吸頂效果
$(function() {
// offset().top獲取當(dāng)前標(biāo)簽距離父級(jí)的頂部的距離
var height = $(".target").offset().top;
console.info(height)
$(window).scroll(function() {
// 獲取滾動(dòng)條的高度
// console.log($(window).scrollTop()
if ($(window).scrollTop()>= height) {
$(".target").css({
"position":"fixed",
"top": 0
})
} else {
$(".target").css("position","static")
}
})
});
7：彈出框
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$(function() {
$("#closed").on("click",function() {
$("#model").hide();
$("#box").hide();
});
$("#model").click(function() {
$("#model").hide();
$("#box").hide();
})
})
function openWindow() {
$("#model").show();
$("#box").show();
}
</script>
</head>
<body>
<button onclick="openWindow()">彈出框</button>
阿士大夫撒旦
<div id="box">
<span id="closed">
X
</span>
這個(gè)是一個(gè)彈出框
</div>
<div id="model">
</div>
</body>
