jQuery 学习模块一

最新推荐文章于 2022-11-13 21:13:13 发布

web修理工

最新推荐文章于 2022-11-13 21:13:13 发布

阅读量191

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/qq_42374676/article/details/119776901

版权

jQuery基本选择器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-jQuery基本选择器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $(function () {
        //...........
        //基本选择器:ID选择器 | 类选择器 | 标签选择器 | 并集选择器 | 通配符

        //ID选择器 -->#ID
        $("button:eq(0)").click(function () {
            $("#demoID").css("background","red");
        })

        //类选择器 -->.类名
        $("button:eq(1)").click(function () {
            $(".class1").css("background","yellow");
        })

        $("button:eq(2)").click(function () {
            $(".class2").css("background","green");
        })

        //标签选择器 -->标签名
        $("button:eq(3)").click(function () {
            $("div").css("background","red");
        })

        //并集选择器--> #demoID,p
        $("button:eq(4)").click(function () {
            $("#demoID,p").css("background","blue");
        })

        //通配符选择器-->* 获取页面中所有的标签
        $("button:eq(5)").click(function () {
            $("*").css("background","green");
        })
    })
</script>

<div id="demoID">ID</div>
<div class="class1">class1</div>
<div class="class1">class1</div>
<div class="class1 class2">class2 class1</div>
<div class="class2">class2</div>
<span>我是span</span>
<p>我是p</p>

<button>获取id为demoID的标签</button>
<button>获取class为class1的标签</button>
<button>获取class为class2的标签</button>
<button>获取所有的div标签</button>
<button>获取id为demoID以及所有的p标签</button>
<button>获取所有的标签设置样式</button>
</body>
</html>

层级选择器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-jQuery层级选择器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $(function () {
        //...........
        //层级选择器
        //(1) 获取指定标签的所有后代
        $("button").eq(0).click(function () {
            $(".box div").css("background","red")
        })

        //(2) 获取指定标签的所有直接后代
        $("button").eq(1).click(function () {
            $(".box >div").css("background","green")
        })

        //(3) 获取后面的第一个兄弟节点
        $("button").eq(2).click(function () {
            $("#demoID +div").css("background","green")
        })

        //(4) 获取后面所有的兄弟节点
        $("button").eq(3).click(function () {
            $("#demoID ~div").css("background","green")
        })
    })
</script>
<button>获取指定标签的所有后代</button>
<button>获取指定标签的所有直接后代</button>
<button>获取后面的第一个兄弟节点</button>
<button>获取后面所有的兄弟节点</button>
<div class="box">
    <div>div1</div>
    <div id="demoID">div2
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    <div>div3</div>
    <div>div4</div>
</div>
</body>
</html>

jQuery属性选择器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-jQuery属性选择器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<!--要求-->
<!--01 匹配单个属性的情况-->
<!--01 匹配多个属性的情况-->
<script>
    $(function () {
        //...........
        //属性选择器:根据标签属性值来选择
        $("button").click(function () {
            //(1) 获取所有拥有href属性的标签
            //$("a[href]").css("background","yellow");

            //(2) 获取href值为www.520it.com的标签
            //$("a[href='www.520it.com']").css("background","yellow");

            //(3) 获取href值不等于www.520it.com的标签
            //$("a[href!='www.520it.com']").css("background","yellow");

            //(4) 获取href值以bbs开头的
            //$("a[href^='bbs']").css("background","yellow");

            //(5) 获取href值以开头的
            //$("a[href$='cn']").css("background","yellow");

            //(6) 获取href值等于www.520it.com并且拥有title属性
            //$("a[href='www.520it.com'][title]").css("background","yellow");

            //(7) 获取href值中包含某个特定值的
            $("a[href*='520it']").css("background","yellow");

        })
    })
</script>

<a href="www.baidu.com">www.baidu.com</a>
<a href="www.jd.com">www.jd.com</a>
<a href="www.taobao.com">www.taobao.com</a>
<a href="www.520it.com">www.520it.com</a>
<a href="bbs.520it.com">bbs.520it.com</a>
<a href="www.520it.cn">www.520it.cn</a><br>
<a href="www.520it.com" title="这是标题">www.520it.coms且有标题</a><br>
<a>我啥也没有</a>

<button>选择</button>
</body>
</html>

jQuery筛选选择器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-jQuery筛选选择器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!--总结-->
<!--
    第一个和最后一个  :first last
    索引为奇数和偶数  :odd   even
    索引大(小)于指定值:gt    lt
    索引等于指定值    :eq()
    排除             :not()
-->
<script>
    $(function () {
        //...........

        $("button").click(function () {
            //(1) 获取所有li标签中的第一个|最后一个
            //$("li:first").css("background","blue");
            //$("li:last").css("background","blue");

            //(2) 获取所有li标签中的除了第一个之外的标签
            //$("li:not(:first)").css("background","red");

            //(3) 获取所有li标签中的除了最后之外的标签
            //$("li:not(:last)").css("background","red");

            //(4) 获取所有li标签中的除了第二个之外的标签
            //$("li:not(:eq(1))").css("background","red");

            //(5) 获取所有li标签中第五个li标签(索引为4)
            //$("li:eq(4)").css("background","red");

            //(6) 获取所有li标签中索引为奇数的标签
            //$("li:odd").css("background","red");

            //(7) 获取所有li标签中索引为偶数的标签
            //$("li:even").css("background","green");

            //(8) 获取所有li标签中索引小于5的标签
            //$("li:lt(5)").css("background","green");

            //(9) 获取所有li标签中索引大于5的标签
            $("li:gt(5)").css("background","green");
        })
    })
</script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
<button>选择</button>
</body>
</html>

jQuery父子选择器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-jQuery父子选择器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $(function () {
        //...........
        //父子选择器
        $("button").click(function () {
            //(1) 获取id为demoID标签的父节点 parent()
            //$("#demoID").parent().css("background","red")

            //(2) 获取id为demoID标签的所有祖先节点 parents()
            //$("#demoID").parents(".box").css("background","red")

            //(3) 获取祖先节点,直到某个节点
            //$("#demoID").parentsUntil("html").css("background","red")

            //(4) 获取某个标签的子标签
            //$("#demoID").children().css("background","red")

            //(5) 获取指定标签的所有兄弟节点
            $("#demoID").siblings().css("background","red")
        })
    })
</script>
<div>
    <div class="box">
        <div>div1</div>
        <div id="demoID">div2
            <div>divA</div>
            <div>divB</div>
        </div>
        <div>div3</div>
        <div>div4</div>
    </div>
</div>


<button>按钮</button>
</body>
</html>

jQuery属性操作


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery属性操作</title>
</head>
<style>
    .class1 {
        font-size: 19px;

    }

    .class2 {
        border-radius: 50%;

    }

    #box1 {
        width: 200px;
        height: 200px;
        background: red;
        position: relative;
    }

    #box2 {
        width: 50px;
        height: 50px;
        background: yellowgreen;
        position: absolute;
        left: 40px;
        top: 15px;
    }
</style>

<body>
    <div id="one">one 对象</div>
    <div id="two">two css</div>
    <button>one</button>
    <button>two</button>
    <div id="box1">
        <div id="box2"></div>
    </div>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        // 释放  var jQ = jQuery.noConflict();
        // js 加载完成后 在处理
        // window.onload = function () {

        // }
        // // jQuery 加载完成后 在处理
        // $(document).ready(function () {

        // })
        // //不传递参数,默认就是document
        // $().ready(function () {

        // })
        // 简写
        $(function () {
            let one = document.getElementById('one');
            // js 对象转化 jq 对象
            console.log($(one))
            // jq 对象转化 js 对象
            console.log($(one).get(0))

            // $('#two').css("background", "#f00");
            // ---------------------------------
            // $('#two').css('color', '#ff0')
            // ---------------------------------
            // $('#two').css("background", "#f00").css('color', '#ff0');
            $("#two").css({
                "width": "400px",
                "height": "50px",
                "border": "1px solid #ccc",
                "background": "red"
            })

            // css
            // $('#two').addClass();
            // $('#two').addClass()
            // ---------------------
            // $("div").addClass("class1").addClass("class2")
            // ---------------------
            $("div").addClass("class1 class2")

            $("button").eq(0).click(function () {
                //var str = "天王盖地虎";
                var str = "<h1>天王盖地虎</h1>";
                $("div").html(str);
                console.log($("div").html());
            })
            //2.给第二个按钮添加点击事件,演示text方法
            $("button").eq(1).click(function () {

                //var str = "宝塔镇河妖";
                var str = "<h1>宝塔镇河</h1>";
                $("div").text(str);
                console.log($("div").text());
            })

            console.log($("#box2").position()); //{top: 15, left: 40}
            console.log($("#box2").position().top);
            console.log($("#box2").position().left);
            console.log($("#box2").offset());   //{top: 23, left: 48}

            //2.宽高相关方法
            //width() 设置选中标签的宽度
            //传递参数:表示设置
            //没有参数:读取第一个标签的宽度数据
            console.log($("#box2").width());

            //height() 设置选中标签的高度
            //传递参数:表示设置
            //没有参数:读取第一个标签的高度数据
            console.log($("#box2").height(150));

        })



    </script>
</body>

</html>

jQuery处理鼠标移入和移出操作


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-jQuery处理鼠标移入和移出操作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1{
            width: 100px;
            height: 200px;
            background: red;
        }


        .box2{
            width: 50px;
            height: 50px;
            background: yellowgreen;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>

<!--要求-->
<!--1.掌握mouseenter|mouseleave和mouseover|mouseout的使用和区别-->
<!--2.清楚hover方法的使用和注意点-->

<script>
    $(function () {
        //...........
        //1 监听鼠标事件
        //mouseenter | mouseleave  子标签没有影响
        //mouseover  | mouseout    子标签有影响

        $(".box1").mouseenter(function () {
            console.log("鼠标移入");
        })

        $(".box1").mouseleave(function () {
            console.log("鼠标离开");
        })

        /**********************/
        //$(".box1").mouseover(function () {
        //    console.log("鼠标移入");
        //})
        //$(".box1").mouseout(function () {
        //    console.log("鼠标离开");
        //})

        //2 hover方法的使用
        //当鼠标移入的时候.执行第一个回调函数,移除的时候执行第二个回调函数
        $(".box2").hover(function () {
            console.log("in");
        },function () {
            console.log("out");
        });

        //注意:如果只有一个回调函数,那么移入和移除事件都会监听
        //$(".box2").hover(function () {
        //    console.log("in--out");
        //});

    })
</script>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

jQuery获取元素的角标


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-jQuery获取元素的角标</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //需求:当我点击li标签的时候,弹出当前标签的索引
        $("li").click(function () {

            //错误的演示(不可行)
            //alert(this.innerText - 1)

            //this当前的标签 (DOM对象),如果要访问jQ中的方法需要包装成jQ对象
            alert($(this).index())
        })
    })
</script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>sdfsfdsf</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
    <li>36</li>
    <li>37</li>
    <li>38</li>
    <li>39</li>
    <li>40</li>
    <li>41</li>
    <li>42</li>
    <li>43</li>
    <li>44</li>
    <li>45</li>
    <li>46</li>
    <li>47</li>
    <li>48</li>
    <li>49</li>
    <li>50</li>
</ul>
</body>
</html>

jQuery实现tab标签小案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-jQuery实现tab标签小案例(页面搭建)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box{
            width: 1000px;
            margin: 50px auto;
            /*background: red;*/
            height: 500px;
        }

        .nav{
            width: 500px;
            height: 44px;
            border: 1px solid #ccc;
            border-bottom: none;
            position: relative;
            top: 1px;
            background: #fff;
        }

        .content
        {
            width: 1000px;
            height: 475px;
            border: 1px solid #ccc;
        }
        li{
            float: left;
            width: 110px;
            line-height:44px;
            text-align: center;
        }

        .content img{
            width: 1000px;
            height: 475px;
        }

        .content div{
            display: none;
        }

        .content .current
        {
            display: block;
        }

        .action{
            color: red;
            font-size: 20px;
        }

    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //(1) 监听li标签的鼠标移入事件
        //(2) 当事件发生后
        //    001 设置当前的li标签为选中的状态
        //    002 设置让对应的图片显示出来

        $("li").mouseenter(function () {
            //001 设置当前的li标签为选中的状态(排他)
            $(this).addClass("action").siblings().removeClass("action");

            //002 设置让对应的图片显示出来
            var index = $(this).index();
            $(".content div").eq(index).addClass("current").siblings().removeClass("current");
        })
    })

</script>
<div class="box">
    <div class="nav">
        <ul>
            <li class="action">HTML学院</li>
            <li>iOS学院</li>
            <li>java学院</li>
            <li>网页UI学院</li>
        </ul>
    </div>
    <div class="content">
        <div class="current"><img src="src/01.png"></div>
        <div><img src="src/02.png"></div>
        <div><img src="src/03.png"></div>
        <div><img src="src/04.png"></div>
    </div>
</div>
</body>
</html>

过滤器方法filter和has


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-过滤器方法filter和has</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        /*(1) filter
        *
        * 作用:在已有的jQ实例对象的基础上再次筛选获得过滤后的jQ对象
        * 语法:
        * [1] jQ.filter(selector)
        * [2] jQ.filter(fn)
        * */
        $("button").click(function () {
            //$(".class1").css("background","red")
            //$(".box").children(".class1").css("background","red")
            //console.log($("div").filter(".class1"));

            //语法形式(1)
            //需求:把所有的div背景颜色都设置为红色,并且把class==box的div设置边框
            //$("div").css("background","red").filter(".box").css("border","3px solid #000")

            //语法形式(2)
            //需求:获取id为demoID的标签中拥有1个span标签的div子标签
            $("#demoID").children().filter(function () {

                //$("#demoID").children() 获取三个div子标签
                //分析:filter方法做了什么
                //(1) 遍历拿到的三个子标签
                //(2) 先拿到第一个div来进行判断
                //this 当前的这个div标签
                //$("span",this)  获取this这个标签中的span标签,返回jQ对象
                //$("span",this).length ==> 获取jQ对象中标签的个数
                //根据返回值来进行处理
                //如果返回值是true,那么表示当前的标签满足条件,加入到jQ中
                //如果返回值是false,那么不满足就排除
                return $("span",this).length ===2;
            }).css("background","red")

            //缩小筛选的范围
            //$(".class1",document) //在整个页面中筛选拥有class1样式的标签
            //var oDiv = document.getElementsByClassName("box");
            //在oDiv中筛选拥有class1样式的标签
            //console.log($(".class1", document));;

        })


         /*(2) has方法
         * 作用:在已有的jQ实例对象的基础上再次筛选,保留拥有指定子标签的标签
         * */
        //获取所有样式为box的标签后,再次筛选(如果该标签的子标签中拥有span|p标签那么就加入到jQ)
        console.log($(".box").has("p"));

    })
</script>
<!--1.讲解filter方法的使用-->
<!--<div class="box">-->
    <!--div-->
    <!--&lt;!&ndash;<div class="class1">div1</div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div>div2</div>&ndash;&gt;-->
    <!--<div class="class1">测试</div>-->
<!--</div>-->
<!--<div class="class1">div3</div>-->
<!--<div class="class1">div3</div>-->
<!--<p class="class1">我是p</p>-->
<!--<button>按钮</button>-->

<!--&lt;!&ndash;&ndash;&gt;-->
<!--<div id="demoID">-->
    <!--<div>div1-->
        <!--<span>我是span1</span>-->
    <!--</div>-->
    <!--<div>div2-->
        <!--<span>我是span2-A</span>-->
        <!--<span>我是span2-B</span>-->
    <!--</div>-->
    <!--<div>div3-->
        <!--<span>我是span3</span>-->
    <!--</div>-->
<!--</div>-->


<!--2.讲解has方法的使用-->
<div class="box">
    <span>我是span</span>
</div>
<div class="box">
    <p>我是p</p>
</div>
</body>
</html>

查找相关方法


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-查找相关方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <span>我是span</span>
    <div id="demo">div1</div>
    <div>div2</div>
    <div>div3</div>
    <div class="class1">div4</div>
    <div>div5</div>
    <span>我是span1</span>
    <span>我是span2</span>
    <span class="Test">我是span3</span>
</div>
<span>span</span>

<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //查找相关的方法
        /*
        * prev:获取上一个兄弟节点
        * prevAll:获取前面的所有兄弟节点
        * prevUntil:获取前面的所有兄弟节点,直到....(不包含)
        * */
        //(1) prev | prevAll
        //$(".class1").prev().css("background","red");
        //$(".class1").prevAll().css("background","red");
        //$(".class1").prevUntil("#demo").css("background","red");

        /*
         * next:获取后面的兄弟节点
         * nextAll:获取后面的所有兄弟节点
         * nextUntil:获取后面的所有兄弟节点,直到....(不包含)
         * */
        //(2) next | nextAll | nextUntil
        //$(".class1").next().css("background","red");
        //$(".class1").nextAll().css("background","red");
        //$(".class1").nextUntil(".Test").css("background","red");


        //(3) find
        //作用:在已有jQ实例对象的基础上,查找里面满足条件的标签
        console.log($(".box").find("span"));

    })
</script>
</body>
</html>

add方法和end方法


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-add方法和end方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        /*
        * add方法
        * 作用:把满足条件的标签加入到jQ中并且和前面的jQ对象合并
        *
        * end方法
        * 作用:返回上一个实例对象
        * */
        //$(".box").find("p").add(".demoClass").css("background","yellow")

        //拿到指定的两个p标签设置背景,再设置第一个p标签的边框
        console.log($(".box").find("p").add(".demoClass").css("background", "yellow").end().end().css("border", "1px solid red"));;


    })
</script>
<div class="box">div1
    <p>我是p标签</p>
</div>
<div>div1
    <p>我是p标签</p>
</div>
<p class="demoClass">我是p标签</p>
</body>
</html>

侧边栏广告效果实现


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-侧边栏广告效果实现</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        span
        {
            width: 150px;
            height: 300px;
            display: inline-block;
            background: url("images/ad.png");
            position: fixed;
            top: 50%;
            margin-top: -150px;
        }

        .left
        {
            left:0;
        }

        .right{
            right:0;
        }

        .close
        {
            width: 20px;
            height: 20px;
            float: right;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //分析:当我们点击关闭标签的时候,应该让广告消失
        $(".close").click(function () {
            //设置让广告消失(span)
            //$(this).parent().css("display","none")
            $(this).parent().hide(1000);
        })
    })
</script>
<span class="left"><img src="images/close.png" class="close"></span>
<span class="right"><img src="images/close.png" class="close"></span>
<div>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
</div>
</body>
</html>

jQuery显示和隐藏的动画效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-jQuery显示和隐藏的动画效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //jQuery中的动画方法
        //[1] 隐藏和显示  控制的是样式(宽度&&高度&&透明度)
        //[2] 展开和收起
        //[3] 淡入和淡出
        //[4] 自定义动画

        //隐藏和显示涉及的方法
        //(1) jQ.hide(speed,fn)隐藏
        //(2) jQ.show(speed,fn)显示
        //(3) jQ.toggle(speed,fn) 切换
        //第一个参数:动画执行的速度,单位是毫秒
        //第二个参数:动画执行完毕后执行的回调代码
        $("button:eq(0)").click(function () {
            $(".box").show(1000,function () {
                console.log("动画执行完毕");
            })
        })

        $("button:eq(1)").click(function () {
            $(".box").hide(2000,function () {
                console.log("动画执行完毕");
            })
        })

        $("button:eq(2)").click(function () {
            $(".box").toggle("slow",function () {
                console.log("动画执行完毕");
            })
        })

    })
</script>
<div class="box">div</div>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
</body>
</html>

jQuery展开和收起动画


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-jQuery展开和收起动画</title>
    <style>
        * {
            margin: 0;
            padding:0;
        }

        .box{
            width: 100px;
            height: 300px;
            background: yellowgreen;
        }

        .demo
        {
            margin-top: 10px;
            background: yellowgreen;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //展开和收起动画相关方法  控制的标签的样式(高度)
        //展开:jQ.slideDown()
        //收起:jQ.slideUp()
        //切换:jQ.slideToggle()
        $("button").eq(0).click(function () {
            $(".box").slideDown(2000,function () {
                console.log("动画执行完毕");
            })
        })

        $("button").eq(1).click(function () {
            $(".box").slideUp(2000,function () {
                console.log("动画执行完毕");
            })
        })

        $("button").eq(2).click(function () {
            $(".box").slideToggle(2000,function () {
                console.log("动画执行完毕");
            })
        })
    })
</script>
<div class="box">div1</div>
<div class="box demo">div2</div>
<button>展开</button>
<button>收起</button>
<button>切换</button>
</body>
</html>

jQuery实现下拉菜单(界面搭建)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-jQuery实现下拉菜单(界面搭建)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body
        {
            background: yellowgreen;
        }

        .box{
            width: 1000px;
            height: 44px;
            margin: 50px auto;
            border: 1px solid #000;
        }

        .first >li{
            width: 120px;
            height: 44px;
            float: left;
            line-height: 44px;
            text-align: center;
            background: #fff;
        }

        .first >li:hover
        {
            background: #F22E2C;
        }

        .second
        {
            display: none;
            background: #fff;
        }


    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //(1) 监听一级菜单的鼠标移入事件,展开二级菜单
        //(2) 监听一级菜单的鼠标移出事件,收起二级菜单
        /*
        $(".first >li").mouseenter(function () {
            $(this).find(".second").slideDown();
        })

        $(".first >li").mouseleave(function () {
            $(this).find(".second").slideUp();
        })*/

        /*
        $(".first >li").hover(function () {
            $(this).find(".second").slideDown();
        },function () {
            $(this).find(".second").slideUp();
        })*/

        //如果有很多个动画等待执行,这些动画会被放到一个动画队列中,等待执行
        $(".first >li").hover(function () {
            $(this).find(".second").stop().slideToggle();
        })
    })
</script>
<div class="box">
    <ul class="first">
        <li>我是一级菜单1
            <ul class="second">
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ul>
        </li>
        <li>我是一级菜单2
            <ul class="second">
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ul>
        </li>
        <li>我是一级菜单3
            <ul class="second">
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ul>
        </li>
        <li>我是一级菜单4
            <ul class="second">
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ul>
        </li>
        <li>我是一级菜单5
            <ul class="second">
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ul>
        </li>
        <li>我是一级菜单6
            <ul class="second">
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ul>
        </li>
        <li>我是一级菜单7
            <ul class="second">
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ul>
        </li>
        <li>我是一级菜单8
            <ul class="second">
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
                <li>我是二级菜单</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

jQuery实现商品展示


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-jQuery实现商品展示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box{
            width: 400px;
            height: 300px;
            margin: 50px auto;
            border: 1px solid #000;
        }

        ul{
            margin-top: 20px;
            overflow: hidden;
        }
        li{
            float: left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        p{
            width: 60%;
            height: 30px;
            line-height: 30px;
            border: 1px solid #000;
            margin: 10px auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>佳能</li>
        <li>索尼</li>
        <li>三星</li>
        <li>尼康</li>
        <li>松下</li>
        <li>卡西欧</li>
        <li>富士</li>
        <li>可达</li>
        <li>宾得</li>
        <li>理光</li>
        <li>奥林巴斯</li>
        <li>明基</li>
        <li>其它品牌</li>
    </ul>
    <p>显示所有品牌</p>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
    $(function () {
        //...........
        //设置默认让中间两行隐藏
        var temp = $("li:gt(3):not(:last)").css("display","none");
        //给p标签添加点击事件
        $("p").click(function () {
            //(1) 设置展开中间两排标签的展开和收起
            temp.slideToggle(1000);

            //(2) 切换标签显示的文字
            if($(this).text() == "显示所有品牌")
            {
                $(this).text("隐藏")
            }else {
                $(this).text("显示所有品牌")
            }
        })
    })
</script>
</body>
</html>

折叠菜单(页面搭建)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-折叠菜单(页面搭建)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box
        {
            width: 320px;
            /*height: 216px;*/
            border: 1px solid #ccc;
            margin: 50px auto;
            border-radius: 8px;
        }

        .first >li{
            /*height: 35px;*/
            line-height: 35px;
            text-indent: 10px;
            border-bottom: 1px solid #ccc;
        }

        .first >li:last-child
        {
            border-bottom: none;
        }
        span
        {
            width: 16px;
            height: 16px;
            display: inline-block;
            background: url("images/arrow_right.png");
            float: right;
            position: relative;
            top:10px;
            right: 10px;
            transition: 0.5s;
        }

        .second
        {
            display: none;
            background: #2d2c41;
            color: #fff;
        }

        .second >li{
            border-bottom: 1px solid #ccc;
        }

        .second >li:last-child
        {
            border-bottom: none;
        }

        .second >li:hover
        {
            background: #992E2C;
        }

        .current span
        {
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //分析:
        //(1) 切入点:点击一级菜单的时候会发生一些变化 ==> 监听li标签的点击
        //(2) 具体有什么交互?
        //      [1] 当前li标签的子标签被展开
        //      [2] 当前li标签对应的箭头发生了旋转
        //(3) 排他处理
        $(".first >li").click(function () {

            //[1] 当前li标签的子标签被展开
            $(this).children(".second").slideToggle();

            $(this).siblings().find(".second").slideUp();
            //$(this).siblings().children(".second").slideUp();


            //[2] 当前li标签对应的箭头发生了旋转
            $(this).toggleClass("current");
            $(this).siblings().removeClass("current");

            //不建议(代码应该考虑可读性)
            //$(this).children(".second").slideToggle().end().siblings().children(".second").slideUp();
            //$(this).toggleClass("current").siblings().removeClass("current");

            //$(this).children(".second").slideToggle().end().siblings().children(".second").slideUp().end().end().toggleClass("current").siblings().removeClass("current");
        })
    })
</script>
<div class="box">
    <ul class="first">
        <li><span></span>一级菜单1<ul class="second">
            <li>二级菜单1</li>
            <li>二级菜单2</li>
            <li>二级菜单3</li>
            <li>二级菜单4</li>
            <li>二级菜单5</li></ul></li>
        <li><span></span>一级菜单2<ul class="second">
            <li>二级菜单1</li>
            <li>二级菜单2</li>
            <li>二级菜单3</li>
            <li>二级菜单4</li>
            <li>二级菜单5</li></ul></li>
        <li><span></span>一级菜单3<ul class="second">
            <li>二级菜单1</li>
            <li>二级菜单2</li>
            <li>二级菜单3</li>
            <li>二级菜单4</li>
            <li>二级菜单5</li></ul></li>
        <li><span></span>一级菜单4<ul class="second">
            <li>二级菜单1</li>
            <li>二级菜单2</li>
            <li>二级菜单3</li>
            <li>二级菜单4</li>
            <li>二级菜单5</li></ul></li>
        <li><span></span>一级菜单5<ul class="second">
            <li>二级菜单1</li>
            <li>二级菜单2</li>
            <li>二级菜单3</li>
            <li>二级菜单4</li>
            <li>二级菜单5</li></ul></li>
        <li><span></span>一级菜单6<ul class="second">
            <li>二级菜单1</li>
            <li>二级菜单2</li>
            <li>二级菜单3</li>
            <li>二级菜单4</li>
            <li>二级菜单5</li></ul></li>
    </ul>
</div>
</body>
</html>

淡入淡出动画


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-淡入淡出动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box
        {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //淡入和淡出动画  设置标签的样式(透明度)
        //(1) fadeIn(speed,fn)
        //(2) fadeOut(speed,fn)
        //(3) fadeToggle(speed,fn)
        //(4) fadeTo(speed,target,fn)
        $("button").first().click(function () {
            $(".box").fadeIn(1000,function () {
                console.log("动画执行完毕");
            })
        })

        $("button").eq(1).click(function () {
            $(".box").fadeOut(2000,function () {
                console.log("动画执行完毕");
            })
        })

        $("button").eq(2).click(function () {
            $(".box").fadeToggle(1000,function () {
                console.log("动画执行完毕");
            })
        })

        $("button").last().click(function () {
            $(".box").fadeTo(2000,0.5,function () {
                console.log("动画执行完毕");
            })
        })
    })
</script>
<div class="box"></div>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>淡入淡出到...</button>
</body>
</html>

右下角弹出广告


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-右下角弹出广告</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .ad{
            width: 300px;
            height: 195px;
            background: url("images/ad-pic.png");
            position: fixed;
            bottom: 0;
            right: 0;
            display: none;
        }
        .close
        {
            background: red;
            width: 10px;
            height: 10px;
            display: inline-block;
            float: right;
            position: relative;
            top:5px;
            right: 5px;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //从页面的右下角弹出广告,闪一闪,三秒钟之后自动隐藏
        $(".ad").slideDown().fadeOut().fadeIn().delay(3000).slideUp();

        //给关闭标签添加点击事件,关闭广告
        $(".close").click(function () {
            //console.log("+++");
            $(this).parent().stop().slideUp();
        })
    })
</script>
<div class="ad"><span class="close"></span></div>
<div>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
    <p>
        01-jQuery基础
        001 jQuery是js的第三方库
        002 最新版本:3.2.1 |2.0.0(兼容性IE)
        003 冲突的处理: var jq = $.noConfilct()  位置($被定义之前)
        004 对象的转换
        jQ: jQ->DOM  jQ.get(index)|jQ[index]
        JS: DOM->jQ  $(DOM)
        005 加载方式
        (1) window.onload = function(){}
        001 调用的时间:所有的资源加载完毕(css|js|img)
        002 调用N次:执行1次
        (2) $(document).ready(function(){})
        001 调用的时间:DOM加载完毕
        002 调用N次:执行N次
        003 简写:
        $().ready(function(){})
        $(function(){//....})

        02-jQuery基本操作
        (1)操作css
        001 $("selecter").css("属性","值");
        002 $("selecter").css("属性","值").css("属性","值");
        003 $("selecter").css({"属性":"值","属性":"值"});
        (2)操作class
        001 检查class hasClass()  返回值:true|false
        002 添加class addClass()  $("selecter").addClass("类")
        $("selecter").addClass("类1").addClass("类2")
        $("selecter").addClass("类1 类2")
        003 删除class removeClass()
        004 切换class toggleClass()   如果该类存在,那么就删除,否则就添加

        (3)操作内容
        001 html()     ==>innerHTML
        002 text()     ==>innerText
        总结:传递参数表示替换,没有传参获取
        (4)操作位置
        001 width() | height()
        002 offset(距离窗口的位置)|position(距离父标签的位置)

        03-选择器
        01 基本选择器
        (1) id选择器  $("#demo")
        (2) 类选择器  $(".box")
        (3) 标签选择器 $("div")
        (4) 并集选择器 $("div,.box")
        (5) 通配符选择器 $("*')

        02 层级选择器
        (1) 后代选择器 $(".box div")
        (2) 直接后代   $(".box > div")
        (3) 后面的第一个兄弟节点  $(".box + div")
        (4) 后面所有的兄弟节点    $(".box ~ div")

        03 属性选择器
        (1) 检查拥有指定属性的标签 $("selector[属性]")
        (2) 匹配属性的值
        001 相等 $("selector[属性='值']")
        002 不等 $("selector[属性!='值']")
        003 以特定字符开头 $("selector[属性^='值']")
        004 以特定字符结尾 $("selector[属性$='值']")
        005 特定的子串 $("selector[属性*='值']")
        (3) 多个属性  $("selector[属性='值'][属性]")

        04 筛选选择器
        (1) 第一个|最后一个:first | last
        (2) 相等  eq
        (3) 排除  not
        (4) 奇数和偶数 odd | even
        (5) 大于和小于  gt|lt

        05 父子选择器
        (1) 获取父节点  parent()
        (2) 获取祖先节点 parents()
        (3) 获取祖先节点..直到 parentsUntil()
        (4) 获取子标签  children()
        (5) 获取兄弟节点 siblings

        04-鼠标事件
        (1)mouseenter|mouseleva 移入和移出
        (2)mouseover | mouseout
        (3)hover(fn1,fn2)
        (4)角标  index()
    </p>
</div>
</body>
</html>

自定义动画


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-自定义动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box{
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //自定义动画的执行:animate()
        $("button").click(function () {
            //参数:
            //第一个参数:对象(设置的动画的属性)
            //第二个参数:动画速度  单位是毫秒(1000)
            //第三个参数:省略
            //第四个参数:回调函数
            /*
            $(".box").animate({
                width:"800px",
                height:"50px"
            },2000,function () {
                alert("动画执行完毕")
            })*/


            //第二种用法:在当前样式的基础上执行动画
            /*$(".box").animate({
                width:"-=50px",
                height:"+=50px"
            },2000,function () {
                alert("动画执行完毕")
            })*/


            //第三种用法:toggle
            $(".box").animate({
                width:"toggle",
                height:"+=50px"
            },2000,function () {
                alert("动画执行完毕")
            })

        })


    })

//    var obj = {"name":"zs"};
//    var obj2 = {name:"zs"};

</script>
<div class="box"></div>
<button>执行动画</button>
</body>
</html>

自定义动画二


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-自定义动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box{
            width: 100px;
            height: 100px;
            background: #F28F2D;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //自定义动画的执行:animate()
        $("button").click(function () {
            //第三种用法:toggle
            $(".box").animate({
                width:"50"
            }).animate({
                width:"200px"
            }).animate({
                height:"200px"
            })

        })

    })

</script>
<div class="box"></div>
<button>执行动画</button>
</body>
</html>

其他常用工具方法


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-其他常用工具方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //常用的工具方法:
        //(1)grep 过滤数组
        //语法:$.grep(数组,fn(元素过滤条件})
        //说明:该方法会遍历数组,把数组中满足过滤条件的所有元素都存放到一个新的数组中返回
        var arrM = [10,1,2,3,4,5,6,7];
        var arr = $.grep(arrM,function (value,index) {
            return value >5;
        })
        console.log(arr);

        /*
        function f() {

        }
        f.add = function () {
            console.log("add");
        }
        f.add();


        var obj = {name:"zs"};
        obj.showName = function () {
            console.log(this.name);
        }
        obj.showName();*/
        //(2)makeArray
        //作用:把伪(类似数组的结构)数组转换为数组返回
        //语法:$.makeArray(要转换的伪数组结构)
        var oDivs = document.getElementsByTagName("div");
        console.log(Array.isArray(oDivs));
        console.log(Array.isArray(arr));
        console.log(oDivs);
        console.log($.makeArray(oDivs));


        //(3) toArray
        //作用:把jQ实例对象转换为数组返回
        //语法:$().toArray()
        console.log($("div"));
        console.log($("div").toArray());

        //(4) trim方法
        //作用:清除字符串中前面和后面的一个或者是多个空格
        var str = "abc";
        var str1 = " abc";
        var str2 = "abc ";
        var str3 = "  abc  ";
        console.log(str3);
        console.log($.trim(str1));
        console.log($.trim(str2));
        console.log($.trim(str3));

        //(5) 源代码:merge: function( first, second )
        //会把第二个数组中的所有元素都拼接到第一个数组中
        //第一个数组:合并后的数组
        //第二个数组:没有变化
        var arr1 = [1,2,3,4,5];
        var arr2 = ["demo1","demo2","demo3"];
        $.merge(arr2,arr1);
        console.log(arr1);
        console.log(arr2);
    })
</script>
<div>div1</div>
<div>div2</div>
</body>
</html>

each方法的使用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-each方法的使用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //each方法的作用:遍历数组|对象|伪数组|jQ实例对象
        //语法:
        //(1) $.each(要遍历的数组|对象,fn(key,value){//.....})
        //(2) $().each(fn(key,value){//.....})

        //第一部分 $.each基本使用
        //01 遍历对象
        //遍历obj这个对象,每循环一次就把当前的键值对作为参数传递给回调函数,回调函数接受两个参数(第一个参数是key,第二个参数是value)
        var obj = {name:"zs",age:"99"};
        $.each(obj,function (key,value) {
            console.log(key, value);
            console.log(this);
        })

        //02 遍历数组
        //数据类型:基本类型 | 复杂类型
        //基本类型:string | number | null | undefined | boolean
        //复杂类型:object(对象) | Array(数组) | function(函数) ...| String |Number |Boolean
        var arrM = [1,2,3,"demoA","XXX"];
        $.each(arrM,function (index,ele) {
            console.log(index, ele);
            if(ele === 3)
            {
                console.log("找到了该数组中的3,它对应的索引是" + index);
                return false;
            }
        })

//        $.each(arrM,function () {
//            console.log(this);
//        })

        //03 遍历jQ实例对象
        $.each($("div"),function (key,value) {
            console.log(key, value);
        })

        //第二部分:each方法使用注意
        //[1] this
        //(1) this 函数中有两个隐藏的参数:一个是this,一个是arguments
        //    this 总是指向一个对象,至于指向的是哪个对象由函数的调用方式决定
        //          a 如果f() 普通函数调用,this在非严格模式下指向的是window
        //          b 如果是obj.f() 对象方法的形式调用,this指向obj这个对象
        //          c 如果是上下文调用 call | apply   this指向call|apply方法第一个参数
        //(2) each方法中this的指向
        //    each回调函数是通过call方法来调用的-->上下文调用
        //    this --> 当前键值对中的value值
        //(3) 思考:为什么要让this指向value
        //    因为在遍历的场景中,大部分情况下我们都操作的是value的值,让this指向value可以省掉两个形参
        //[2] 退出
        //    在回调函数中通过返回false退出整个循环

        var o = {
            name:"zs",
            f:function () {
                console.log(this.name);
                console.log(this);
            }
        }
        o.f();

        function f() {
            console.log(this);
        };
        f();

        //console.log("wendingding");
        //console.log(new String("wendingding"));

        //$().each()
        $("div").each(function (key,value) {
            console.log(key, value);
        })

    })
</script>
<div>divT1</div>
<div>divT2</div>
<div>divT3</div>
<div>divT4</div>
</body>
</html>

工具方法map的使用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-工具方法map的使用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        /*
        * map方法的使用
        * [1] 和each类似,jQ中拥有两个map方法
        * (1) $.map(arr,fn(){//..})
        * (2) $().map(fn(){//...})
        *
        * [2] 基本使用
        * 作用:数组映射方法,主要操作数组,可以对既定的数组做更精细的处理\
        *
        * [3] 和each方法对比
        * (1) 回调函数中参数顺序相反  mapCallBack(ele,index) | eachCallBack(key,value)
        * (2) each方法可以退出循环,map方法没有相关的操作
        * (3) 回调函数中的this
        *       each == this -->当前的value
        *       map  == this -->window
        * */
        var arrM = [1,2,3,4,5,7,33,12,9];
        //需求:把数组中所有元素都放大2倍
        //说明:遍历arrM这个数组,每遍历一次就把当前的索引和元素传递给回调函数处理
        //     在回调函数中我们拿到当前的元素,并且放大2倍,然后返回
        //     map没循环一次就会收集回调函数中的返回值,把他们保存到一个新数组中返回
        var arr1 = $.map(arrM,function (ele,index) {
            return ele * 2;
        })
        console.log(arr1);

        //需求:获取数组中大于5的所有元素保存到新数组中返回
        var arr2 = $.map(arrM,function (ele) {

            if(ele > 5)
             {
                 return ele;
             }
        })
        console.log(arr2);

        var arrM2 = [" abc ","1234","哈哈哈"," 嘿嘿  "];
        var arr3 = $.map(arrM2,function (ele) {
            return $.trim(ele);
        })
        console.log(arr3);
    })
</script>
</body>
</html>

导航效果小案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-导航效果小案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box{
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
        }

        .box ul{
            padding-top: 100px;
        }

        li{
            width: 100px;
            /*height: 40px;*/
            float: left;
            text-align: center;
            line-height: 40px;
            overflow: hidden;
        }

        span{
            width: 20px;
            height: 20px;
            /*background: url("images/bg.png") 0-48px no-repeat;*/
            display: inline-block;
            position: relative;
        }

    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //[1] 设置让对应的图标显示出来
        $("span").each(function (index,ele) {
            var bgurl = 'url("images/bg.png") 0-'+(index * 24)+'px no-repeat';
            $(this).css("background",bgurl);
        })
        
        //[2] 实现动画效果
        //(1) 监听li标签的鼠标移入事件.
        //(2) 分析动画效果:先向上冒泡 + 从底部钻出
        $("li").mouseenter(function () {
            $(this).children("span").animate({
                "top":"-60px"
            },function () {
                  //等动画执行完,先设置让图标的位置在底部
                  $(this)
                    .css({"top":60,"opacity":"0"})
                    .animate({"top":"0", "opacity":"1"})

            })
        })

    })
</script>
<div class="box">
    <ul>
        <li><span></span><p>百度</p></li>
        <li><span></span><p>淘宝</p></li>
        <li><span></span><p>新浪</p></li>
        <li><span></span><p>网易</p></li>
        <li><span></span><p>搜狐</p></li>
        <li><span></span><p>腾讯</p></li>
        <li><span></span><p>优酷</p></li>
        <li><span></span><p>京东</p></li>
    </ul>
</div>
</body>
</html>

渐变焦点图案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-渐变焦点图案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box
        {
            width: 600px;
            height: 265px;
            margin: 50px auto;
            border: 1px solid #ccc;
            position: relative;
        }

        ul{
            z-index: 1;
        }
        ul >li{
            position: absolute;
            display: none;
        }
        img{
            width: 600px;
            height: 265px;
        }

        ol{
            position: absolute;
            z-index: 2;
            /*color: #fff;*/
            /*background: #00ff00;*/
            bottom: 5px;
            right: 5px;
        }

        ol >li{
            float: left;
            margin: 5px;
            background: #ccc;
            width: 20px;
            height: 20px;
            text-align: center;
        }

        .action{
            background: #ff0456;
            color: #fff;
        }

        .current
        {
            display: block;
        }
    </style>
</head>
<body>
<div class="box">
    <ol>
        <li class="action">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
    <ul>
        <li class="current"><img src="images/01.png"></li>
        <li><img src="images/02.png"></li>
        <li><img src="images/03.png"></li>
        <li><img src="images/04.png"></li>
    </ul>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        $("ul >li").first().css("z-index",1);

        //(1) 监听鼠标的移入事件
        //(2) 设置当前li标签的选中状态
        //(3) 设置让图片切换
        $('ol >li').mouseenter(function () {

            $(this).addClass('action').siblings().removeClass('action');

            var index = $(this).index();
//
//            $('ul > li').eq(index).css({
//                'z-index':1
//            }).siblings().css({
//                'z-index':0
//            });
            $("ul >li").eq(index).addClass("current").siblings().removeClass("current");
        })
    })
</script>
</body>
</html>

滚动焦点图案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-滚动焦点图案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body
        {
            background: #2d2c41;
        }

        .box
        {
            width: 600px;
            height: 200px;
            border: 1px solid red;
            margin: 20px auto;
            overflow: hidden;
        }

        ul{
            width: 9999px;
            background: rebeccapurple;
            position: relative;
        }
        li{
            float: left;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li><img src="fengtu/01.jpg"></li>
        <li><img src="fengtu/02.jpg"></li>
        <li><img src="fengtu/03.jpg"></li>
        <li><img src="fengtu/04.jpg"></li>
        <li><img src="fengtu/01.jpg"></li>
        <li><img src="fengtu/02.jpg"></li>
    </ul>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //动态效果[1]:整体向左边循环滚动
        //分析:通过ul标签的left属性值让标签滚动,<--- left越来越小
        //     通过定时器来设置持续滚动
        //     注意:需要判断边界条件(调整)
        var leftX = 0;
        var timer;
        function autoPlay() {
            timer = setInterval(function () {
                leftX += 3;
                if(leftX >= 1200) leftX = 0;
                $("ul").css("left",-leftX);
            },50);
        }
        autoPlay();

        //交互效果[2]:鼠标移入和移出
        //(1) 鼠标移入 停止滚动 + 显示当前图片高亮
        //(2) 鼠标移出 继续滚动 + 恢复
        $("li").hover(function () {
            clearInterval(timer);
            $(this).fadeTo(200,1).siblings().fadeTo(200,0.2);
        },function () {
            $("li").fadeTo(200,1);
            autoPlay();
        })

    })
</script>
</body>
</html>

大屏焦点图(界面搭建)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-大屏焦点图(界面搭建)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box{
            width: 100%;
            height: 365px;
            overflow: hidden;
        }
        ul{
            width:500%;
            height: 365px;
            background: rebeccapurple;
            position: relative;
            z-index: 1;
        }

        ul >li{
            width: 20%;
            height: 365px;
            float: left;

        }

        li img
        {
            width: 100%;
            height: 365px;
        }

        p{
            width: 80%;
            height: 100px;
            /*background: red;*/
            position: absolute;
            margin-top: 200px;
            left: 50%;
            margin-left: -40%;
            z-index: 2;
        }

        p span
        {
            height: 80px;
            line-height: 80px;
            font-size: 50px;
            color: #fff;

        }

        .right
        {
            float: right;
        }
    </style>
</head>
<body>
<div class="box">
    <p>
        <span class="left"><</span>
        <span class="right">></span>
    </p>
    <ul>
        <li><img src="images/01.png"></li>
        <li><img src="images/02.png"></li>
        <li><img src="images/03.png"></li>
        <li><img src="images/04.png"></li>
        <li><img src="images/01.png"></li>
    </ul>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //[1] 自动播放(每隔2秒切换到下一张图片)
        var index = 0;
//        setInterval(function () {
//            index ++;
//            //console.log(index);
//            if(index === 5)
//            {
//                $("ul").css("left",0);
//                index = 1;
//            }
//            $("ul").animate({"left":-(index * 100) +"%"});
//        },2000)

        //[2] 实现点击切换的功能
        $(".right").click(function () {
            index ++;
            //console.log(index);
            if(index === 5)
            {
                $("ul").css("left",0);
                index = 1;
            }
            $("ul").animate({"left":-(index * 100) +"%"});
            console.log($("ul").css("left"));
        })
        
        $(".left").click(function () {
            index --;
            console.log(index);
            if(index === -1)
            {
                $("ul").css("left",-400+"%");
                index = 3;
            }
            $("ul").animate({"left":-(index * 100) +"%"});
            console.log($("ul").css("left"));
        })

    })
</script>
</body>
</html>

大屏焦点图(界面搭建) 优化


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-大屏焦点图(界面搭建)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box{
            width: 100%;
            height: 365px;
            overflow: hidden;
        }
        ul{
            width:500%;
            height: 365px;
            background: rebeccapurple;
            position: relative;
            z-index: 1;
        }

        ul >li{
            width: 20%;
            height: 365px;
            float: left;

        }

        li img
        {
            width: 100%;
            height: 365px;
        }

        p{
            width: 80%;
            height: 100px;
            /*background: red;*/
            position: absolute;
            margin-top: 200px;
            left: 50%;
            margin-left: -40%;
            z-index: 2;
        }

        p span
        {
            height: 80px;
            line-height: 80px;
            font-size: 50px;
            color: #fff;

        }

        .right
        {
            float: right;
        }
    </style>
</head>
<body>
<div class="box">
    <p>
        <span class="left"><</span>
        <span class="right">></span>
    </p>
    <ul>
        <li><img src="images/01.png"></li>
        <li><img src="images/02.png"></li>
        <li><img src="images/03.png"></li>
        <li><img src="images/04.png"></li>
        <li><img src="images/01.png"></li>
    </ul>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //[1] 自动播放(每隔2秒切换到下一张图片)
        var index = 0;
        var timer;
        autoPlay();

        //[2] 实现点击切换的功能
        $(".right").click(function () {
            next();
        })
        $(".left").click(function () {
           prev();
        })

        //[3]当鼠标移入的时候停止自动播放,否则开启
        $(".box").hover(function () {
            clearInterval(timer);
        },function () {
            autoPlay();
        })

        function next() {
            index ++;
            //console.log(index);
            if(index === 5)
            {
                $("ul").css("left",0);
                index = 1;
            }
            $("ul").stop().animate({"left":-(index * 100) +"%"});
            console.log($("ul").css("left"));
        }
        function prev() {
            index --;
            console.log(index);
            if(index === -1)
            {
                $("ul").css("left",-400+"%");
                index = 3;
            }
            $("ul").stop().animate({"left":-(index * 100) +"%"});
            console.log($("ul").css("left"));
        }
        function autoPlay() {
            timer = setInterval(function () {
                next();
            },2000)
        }

    })
</script>
</body>
</html>