jQuery特性效果与链式调用-白红宇

jQuery特性效果与链式调用

阅读量：5968 次

发布时间：2019-06-19

本文共 2123 字，大约阅读时间需要 7 分钟。

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);    })})

<style type="text/css">

.div1{    width: 300px;    height: 300px;    background-color: antiquewhite;}

</head>

<body>

</body>
</html>

jQuery特性效果与链式调用

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();    })})

<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;}

</head>

<body>