javascript-jQuery(选择器、排他思想、样式操作、动画效果)

javascript库：一个封装好的特定的集合（方法和函数），比如动画animate、hide、show，比如获取元素等。

一个js文件，对原生js代码进行封装。

比如jQuery就是快速方便的操作DOM

常见js库： Jquery、YUI、移动端的zepto

这些库都是对原生js的封装

 

jQuery概述

一个快速的简洁的js库，封装了js常用的代码功能，优化DOM操作、事件处理、动画设计、ajax操作。

引入jQuery库

第一步：进入官网下载https://jquery.com/download/

第二步：复制production内容https://code.jquery.com/jquery-3.6.0.min.js

第三步：在vs中创建js文件粘贴复制内容

第四步：在所需html文件中引入jQuery文件即可。

 

测试njQuery是否引入成果

    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

    <script>
        // $('div').hide();
        //1.等着页面DOM加载完毕再去执行js代码。
        // $(document).ready(function () {
        //     $('div').hide();
        // })
        //2.等着页面DOM加载完毕再去执行js代码。
        $(function () {
            $('div').hide();
        })
    </script>
    <div></div>

jQuery顶级对象$

注：$是jQuery的别称

相当于原生代码中的window

 

jQuery对象和DOM对象

1，用原生js获取的就是DOM对象

2。用jQuery获取的就是jQuery对象

    <script>
        //1.DOM 对象
        var mydiv=document.querySelector('div');
        console.dir(mydiv)
        //2.jQuery对象
        $('div');
        console.dir($('div'));
        //3.jQuery对象只能使用jQuery方法，DOM对象只能使用原生的js属性和方法
    </script>

DOM对象与jQuery对象之间可以相互转换的。

   <video src="mov.mp4" muted></video>
    <script>
        //1.DOM对象转换为jQuery对象
        //（1）直接获取视频，得到就是jQuery对象
        $('video');
        //(2)已经使用原生js 获取过来DOM对象
        var myvideo=document.querySelector('video');
        // $(myvideo).play();jQuery里面没有play方法
        //2.jQuery对象转DOM对象
        // myvideo.play();
        $('video')[0].play();//方法一
        $('video').get(0).play();//方法二
    </script>

jQuery常用API

jQuery基础选择器

   <div>我是div</div>
    <div class="nav">我是nav</div>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
        <li>6</li>
        <li>7</li>
    </ul>
    <script>
        $(function () {
            console.log($(".nav"));
            console.log($("ul li"));获取ul里面的li
        })
    </script>

隐式迭代

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
    <script>
        //1.获取四个div元素
        console.log($("div"));
        //2.给四个div设置背景颜色
        // for (var i = 0; i < $("div").length; i++) {
        //     $("div")[i].style.backgroundColor = 'blue';
        // }
        $("div").css("background", "red");
        //3.隐式迭代就是把匹配所以元素内部进行遍历循环 给每一个元素添加CSS这个方法
        $("ul li").css("color", "pink");
    </script>

jQuery筛选选择器

<script>
        $("ul li:first").css("color", "red");//第一个
        $("ul li:last").css("color", "blue");//最后一个
        $("ul li:eq(3)").css("color", "yellow");//索引从0开始
        $("ol li:odd").css("color", "green");
    </script>

   <div class="father">
        <div class="son">儿子</div>
    </div>
    <div class="nav">
        <p>woshi</p>
        <div>
            <p>pppp</p>
        </div>
    </div>
    <script>
        //父
        $(function () {
            console.log($(".son").parent());
        })
        //子
        //(1)亲儿子
        $(".nav").children("p").css("color", "blue");
        //（2）选择所有的孩子，包括儿子和孙子 find（）类似于后代选择器
        $(".nav").find("p").css("color", "yellow”)
      //兄        
            $(function () {
            //1.兄弟元素siblings 除了自己元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            //2.第n个元素
            var index = 2;
            //（1）利用选择器
            $("ul li:eq(2)").css("color", "blue");
            //(2)利用选择方法 推荐
            $("ul li").eq(index).css("color", "yellow");
            //3.判断是否有某个类名
            console.log($("div:first").hasClass("current"));
        })

    </script>

新浪下拉菜单jQuery版

    <script src="jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li>a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>    
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function () {
            //鼠标经过
            $(".nav>li").mouseover(function () {
                //$(this) jQuery 当前元素显示出来
                $(this).children("ul").show();
            })
            //鼠标离开
            $(".nav>li").mouseout(function () {
                $(this).children("ul").hide();
            })
        })
    </script>

jQuery排他思想

    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <script>
        $(function () {
            //1.隐式迭代 给所有按钮绑定点击事件
            $("button").click(function () {
                //2.当前元素变化背景颜色
                $(this).css("background", "pink");
                //3.其余的兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            })
        })
    </script>

链式编程

<body>
    123
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>
    <button>1</button>

    <script>
        $(function () {
            //1.隐式迭代 给所有按钮绑定点击事件
            $("button").click(function () {
                //     //2.当前元素变化背景颜色
                //     $(this).css("background", "pink");
                //     //3.其余的兄弟去掉背景颜色 隐式迭代
                //     $(this).siblings("button").css("background", "");
                $(this).css("color", "red").siblings().css("color", "");
                $(this).siblings().parent().css("color", "red")
            })
        })
    </script>
</body>

jQuery样式操作

操作css方法

样式简单用css方法

1.只写属性名，返回属性值

2.参数是属性名，属性值，逗号分离，是设置同样一组属性，属性必须加引号，值如果是数字可以不用跟单位和引号

3.参数可以是对象形式做，可以修改多种样式

<div></div>
    <script>
        $(function () {
            console.log($("div").css("width"));
            // $("div").css("width", "300px");
            $("div").css({
                width: 400,
                height: 200,
                backgroundColor: "green"

            })
        })
    </script>

 设置类样式方法

 <div class="current">123</div>
    <script>
        $(function () {
            //1.添加类addClass（）
            // $("div").click(function () {
            //     $(this).addClass("current");
            // })
            //2.删除类removeClass（）
            // $("div").click(function () {
            //     $(this).removeClass("current");
            // })
            //3.切换类toggleClass（）
            $("div").click(function () {
                $(this).toggleClass("current");
            })
        })
    </script>

案例：Tab栏切换

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        $(function () {
            //点击上部的li。当前li添加current类，其余兄弟移除类
            $(".tab_list li").click(function () {
                $(this).addClass("current").siblings().removeClass("current");
                //2.点击的同时，得到当前li的索引号
                var index = $(this).index();
                //3.让下部分里面相应索引号的itme显示，其余的item隐藏。
                $(".tab_con .item").eq(index).show().siblings().hide();
            })
        })
    </script>

注：jQuery类操作不影响原先的类名，而js类操作会覆盖原先的类名。

 

jQuery效果

显示隐藏：show()\hide()\toggle()

Show([speed]):speed 三种预定速度之一字符串“slow” “normal”“fast”

    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(1).click(function () {
                $("div").hide(1000)
            });

            $("button").eq(0).click(function () {
                $("div").show(1000)
            });
            $("button").eq(2).click(function () {
                $("div").toggle(1000)
            });
            //一般情况下，不增加参数直接显示隐藏就可以了
        })
    </script>

滑动效果

slideDown

slideUp

slideToggle

<button>上拉滑动</button>
    <button>下拉滑动</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                $("div").slideDown(500);
            });
            $("button").eq(1).click(function () {
                $("div").slideUp(500)
            });
            $("button").eq(2).click(function () {
                $("div").slideToggle(1000)
            });
            //一般情况下，不增加参数直接显示隐藏就可以了
        })
    </script>

注：stop停止队列方法，必须写在动画前面。

 

淡入淡出效果

    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $("button").eq(0).click(function () {
            $("div").fadeIn(1000);
        })
        $("button").eq(1).click(function () {
            $("div").fadeOut(1000);
        })
        $("button").eq(2).click(function () {
            $("div").fadeToggle(1000);
        })
        $("button").eq(3).click(function () {
            $("div").fadeTo(1000, 0.5);
        })
    </script>

自定义动画animate

<button>动起来</button>
    <div></div>
    <script>
        $(function () {
            $("button").click(function () {
                $("div").animate({
                    left: 600,
                    top: 300,
                    opacity: 0.4
                })
            })
        })
    </script>