Jquery作业

作者: 蘑菇plus | 来源:发表于2018-08-28 19:55 被阅读0次

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>

Jquery作业

1.实现全选，全不选，反选

2.爱奇艺轮播

3.播放选项卡

4.汽车轮转

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读