目录：
1：全选/反选
2：tab 切换
3：下拉菜单
4：图片轮播
5：吸顶效果
6：回到顶部
7：弹出框
1：全选/反选
如果你有JS性能洁癖的话，显然prop的性能更高，因为attr需要访问DOM属性节点，访问DOM是最耗时的。这种情况适用于多选项全选和反选的情况。
大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled ="disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined
jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么，什么时候使用attr，什么时候使用prop？？
1.添加属性名称该属性就会生效应该使用prop.
2.是有true,false两个属性使用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" />读书</li>
<li><input type="checkbox" />读书</li>
<li><input type="checkbox" />读书</li>
<li><input type="checkbox" />读书</li>
</ul>
</body>
2：tab 切换
要设置display 另外要找关系，精确的找到要切换的子元素
否则可能会串位
.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：下拉菜单
要用到绝对定位和相对定位
父级元素相对定位，现有元素绝对定位才会脱离DOM层，产生效果
注释掉的那种方法容易产生动画时延，所以用了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：图片轮播
图片.png
写这个的时候，出了一点小问题，就是下拉菜单被图片轮播遮挡，用
z-index来控制绝对定位的优先级。
//图片轮播
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;
}
// 进行图片切换
$(".top-img>ul>li").eq(index).show().siblings().hide()
//对小点进行颜色变换
//方式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()
//按左右点击时需要先清除掉轮播效果，变换图片，然后重新轮播效果
function remake(){
clearInterval(time)
change()
make()
}
//左右点击切换
$(".top-img .left").click(function(){
index++;
change()
remake()
})
$(".top-img .right").click(function(){
index--;
change()
remake()
})
//点击小点进行切换
$(".top-img ol li").click(function(){
index = $(this).index()
remake()
})
});
5：吸顶效果
$(function() {
// offset().top获取当前标签距离父级的顶部的距离
var height = $(".target").offset().top;
console.info(height)
$(window).scroll(function() {
// 获取滚动条的高度
// 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>
这个是一个弹出框
</div>
<div id="model">
</div>
</body>
网友评论