码迷,mamicode.com
首页 > Web开发 > 详细

jQuery特性效果与链式调用

时间:2019-01-07 23:33:52      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:詹姆斯   jquer   over   效果   body   image   pad   func   color   

1.显示效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>特殊效果</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$(function(){
    $(‘#btn‘).click(function(){
        /*fadeOut(时间,函数)*/
        /*$(‘.div1‘).fadeOut(1000);*/

        /*fadeToggle淡出淡入*/
        /*$(‘.div1‘).fadeToggle(1000);*/

        /*toggle()切换元素可视状态*/
        /*$(‘.div1‘).toggle(1000);*/

        /*hide()隐藏*/
        /*$(‘.div1‘).hide(1000);*/

        /*show()显示元素*/
        /*$(‘.div1‘).show(1000);*/

        /*slideDown()向下展开*/
        /*$(‘.div1‘).slideDown(1000);*/

        /*slideUp()向上卷起*/
        /*$(‘.div1‘).slideUp(1000);*/

        /*slideToggle()向下向上反复*/
        $(‘.div1‘).slideToggle(1000);
    })
})
</script>

<style type="text/css">

.div1{
    width: 300px;
    height: 300px;
    background-color: antiquewhite;
}
</style>

</head>

<body>

<input type="button" value="效果" id="btn">
<div class="div1"></div>

</body>
</html>

技术分享图片

2.链式调用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>层级菜单</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$(function(){

    $(‘.level1‘).click(function(){
        /*点击a,next()就是ul,stop()修正反复点击,向上向下伸展,父级li,siblings()其他同级li,ul子元素,升起*/
        $(this).next().stop().slideToggle().parent().siblings().children(‘ul‘).slideUp();
    })
})
</script>

<style type="text/css">

.menu{
    width: 100px;
    background-color: aqua;
    list-style: none;
    padding: 0;
    margin: 50px auto 0;

}
.menu li{
    border-bottom: 1px solid #fff;

}
.menu li a{
    text-decoration: none;
    color: #8820AF;

}
.menu li ul{
    background-color: #DDD4D5;
    list-style: none;
    padding: 0;
    text-align: center;
}
.menu li ul li:hover{
    background-color: antiquewhite;
}
</style>

</head>

<body>

<ul class="menu">
    <li>
        <a href="#" class="level1">勇士</a>
        <ul class="first">
            <li><a href="">杜兰特</a></li>
            <li><a href="">库里</a></li>
            <li><a href="">汤普森</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">火箭</a>
        <ul>
            <li><a href="">哈登</a></li>
            <li><a href="">保罗</a></li>
            <li><a href="">饼皇</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">湖人</a>
        <ul>
            <li><a href="">詹姆斯</a></li>
            <li><a href="">球哥</a></li>
            <li><a href="">莺歌</a></li>
        </ul>
    </li>
</ul>

</body>
</html>

技术分享图片

jQuery特性效果与链式调用

标签:詹姆斯   jquer   over   效果   body   image   pad   func   color   

原文地址:http://blog.51cto.com/13742773/2339942

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!