Jquery作业
2018-08-28 本文已影响0人
蘑菇plus
1.实现全选，全不选，反选
a<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
position: absolute;
padding-left:900px ;
}
</style>
<script src='js/jquery/jquery-1.11.3.min.js'></script>
</head>
<body>
<ul>
<li><input type="checkbox">梅西</li>
<li><input type="checkbox">c罗</li>
<li><input type="checkbox">内马尔</li>
<li><input type="checkbox">拉莫斯</li>
<li><input type="checkbox">詹姆斯</li>
<li><input type="checkbox">罗纳尔多</li>
<li><input type="checkbox">库里</li>
<li><input type="checkbox">乔治</li>
<li><input type="checkbox">维斯布鲁克</li>
<li><input type="checkbox">姚明</li>
<button>全选</button>
<button>全不选</button>
<button>反选</button>
</ul>
</body>
</html>
<script type="text/javascript">
$(function(){
// 全选
$('button').eq(0).click(function(){
$('input').prop('checked',true)
})
// 全不选
$('button').eq(1).click(function(){
$('input').prop('checked',false)
})
// 反选
$('button').eq(2).click(function(){
console.log('===')
for (var i=0;i<10;i++){
var value1=$('ul li input').eq(i).prop('checked')
if (value1==true){
$('ul li input').eq(i).prop('checked',false)
}
else{
$('ul li input').eq(i).prop('checked',true)
}
}
})
})
</script>
2.爱奇艺轮播
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>爱奇艺轮转</title>
<style>
*{ padding:0; margin:0; list-style:none;}
.piclist{ height:410px; width:100%; position:relative;}
.piclist li{height:410px; opacity:0; width:100%; position:absolute; top:0; left:0;}
.li1{ background:url(img/bg.jpg) center; }
.li2{ background:url(img/bg1.jpg) center; }
.li3{ background:url(img/bg2.jpg) center; }
.li4{ background:url(img/bg3.jpg) center; }
.li5{ background:url(img/bg4.jpg) center; }
.li6{ background:url(img/bg5.jpg) center; }
.li7{ background:url(img/bg6.jpg) center; }
.li8{ background:url(img/bg7.jpg) center; }
.li9{ background:url(img/bg8.jpg) center; }
.li10{ background:url(img/bg9.jpg) center; }
.btnlist{ width:200px; height:300px; padding:14px 18px 40px; background:url(img/site-focuslist_bg.png); position:absolute; top:0; right:30px;}
.btnlist li{ height:33px; line-height:33px; }
.btnlist a{ color:#FFF; font-size:12px; text-decoration:none; display:block; padding-left:10px;}
.active{ background:#396;}
.piclist .show{ opacity:1;}
</style>
<script src="js/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul class="piclist" id="pic">
<li class="li1 show"></li>
<li class="li2"></li>
<li class="li3"></li>
<li class="li4"></li>
<li class="li5"></li>
<li class="li6"></li>
<li class="li7"></li>
<li class="li8"></li>
<li class="li9"></li>
<li class="li10"></li>
</ul>
<ol class="btnlist" id="btn">
<li class="active"><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
<li><a href="#">超模：MISS亲授维密性感秘籍</a></li>
</ol>
</body>
</html>
<script type="text/javascript">
$(function(){
$('ol>li').click(function(){
// 移除所有a标签的active值
// 遍历所有标签
$('ol>li').each(function(){
$('li').removeClass("active")
console.log('===')
})
// $('ol li').attr('class', '')
console.log($('li').hasClass('active'))
// 在给点击的a标签赋值
// $('a').prop('class',"active")
// 获取ol的所有的子标签a标签
// console.log($('ol').children().children())
var index=$(this).index()
console.log(index)
$('ol li').eq(index).attr('class', 'active')
$('ul li').removeClass('show')
$('ul li').eq(index).addClass('show')
})
})
</script>
3.播放选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自动播放选项卡</title>
<style>
.box {
width: 1000px;
border: 1px solid gray;
margin: 0 auto;
}
button {
width: 170px;
height: 100px;
font-size: 20px;
background-color: pink;
margin-left: 55px;
display: inline-block;
}
.box > div {
width: 970px;
height: 600px;
font-size: 50px;
background-color: yellow;
margin-left: 15px;
margin-top: 50px;
display: none;
}
.box > .active {
font-size: 30px;
background-color: blue;
}
.box > .show {
display: block;
}
</style>
</head>
<body>
<div class="box">
<button class="active">国产电影</button>
<button>韩日电影</button>
<button>欧美电影</button>
<button>其他电影</button>
<div class="show">霸王别姬、卧虎藏龙、大话西游、东邪西毒、无间道、功夫</div>
<div>釜山行、汉江怪物、奥特曼、灌篮高手、热血高校、午夜凶铃</div>
<div>肖申克的救赎、阿甘正传、敢死队、泰坦尼克号、这个杀手不太冷、盗梦空间</div>
<div>三傻大闹宝莱坞、摔跤吧、小萝莉的猴神大叔、厕所英雄</div>
</div>
</body>
</html>
<script>
// 首先找到最外层的box
var obox = document.getElementsByClassName('box')[0]
// 找到所有的button
var abtns = obox.getElementsByTagName('button')
// 找到所有的div
var adivs = obox.getElementsByTagName('div')
// 记录要切换的div获取按钮的下标
var number = 0
// 循环给每一个button添加点击事件
for (var i = 0; i < abtns.length; i++) {
abtns[i].index = i
abtns[i].onclick = function () {
// 首先清空所有的class
for (var j = 0; j < abtns.length; j++) {
abtns[j].className = ''
adivs[j].className = ''
}
// 然后给指定的添加class
this.className = 'active'
adivs[this.index].className = 'show'
// 将number更新一下
number = this.index
}
}
</script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
// 清除所有的class属性
$('button').attr('class','')
var index=$('this').index()
$('button').eq(index).addClass('active')
$('.box div').attr('class','')
$('.box div').addClass('show')
})
})
</script>
4.汽车轮转
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>汽车轮播</title>
<style>
*{padding:0;margin:0;list-style:none;}
.clearfix:after{display:block;content:'';clear:both;}
.box{width:360px;height:212px;margin:0 auto;position:relative;overflow: hidden;}
.ul_list{position:absolute;bottom:20px;left:50%;margin-left:-65px;}
.ul_list li{float:left;width:20px;height:20px;background:#fff;border-radius:50%;margin-left:5px;border:2px solid red;}
.pic{width:1800px;}
.pic img{float:left;}
.ul_list .active{width:20px;height:20px;background:red;border-radius:50%;margin-left:5px;border:2px solid #fff;}
</style>
<script src="js/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="box">
<div class="pic clearfix" id='pic'>
<img src="img/1.jpg"/>
<img src="img/2.jpg" class="show"/>
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
</div>
<ul class="ul_list" id='ul_btn'>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
$('div ul li').mouseover(function(){
$('div ul li').attr('class','')
var index=$(this).index()
$('div ul li').eq(index).attr('class','active')
// $('div div img').attr('class','')
// $('div div img').eq(index).attr('class','show')
// $('div div img').each(function(){
// $('.show').css('display','block')
// $('.show').siblings().css('display','none')
// })
// $('div div img').removeClass('show')
// $('div div img').eq(index).addClass('show')
$('div div').animate({'margin-left':- index*360 },500)
})
})
</script>
