谁看谁会简单易懂的jQuery(一)

最新推荐文章于 2024-09-22 11:17:00 发布

dimingda

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量458

点赞数

分类专栏： js 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/dimingda/article/details/121962171

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

图片代码等相关资源请访问：https://gitee.com/di-mingda/java-script_learning

1.1JavaScript库

jQuery实际上就是库，封装了一些我们经常使用的以下函数，方法等代码。可以调用。想使用jQuery，就是去学习如何调用这些封装好的函数。

1.2使用jQuery

可以去官网下载，分为生产环境和开发环境。生产环境是压缩后的，可能看不懂。然后把内容放在我们新建的js文件中。
使用之前先在我们的文件引入，就可以使用了。

1.3jQuery对象和DOM对象的区别

DOM对象,只能使用原生js的方法和属性
jQuery对象，只能使用jQuery的方法
两者可以进行相互转换

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

        // 互相转换
        $(mydiv);
        
        $('div')[0];
        $('div'),get(0);
    </script

jQuery的选择器就是$()

    <script>
        // jQuery选择器和css一样
        // 外面的函数相当于DOMContentLoad，先加载DOM元素
        $(function() {
            $('.nav')
            // jquery设置样式,两个都会设置，隐式迭代操作，进行内部遍历
            $('div').css("background", "pink");
        }) 
    </script>

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>Document</title>
    <script src="./jquery_min.js"></script>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>哈哈</li>
        <li>嘎嘎</li>
        <li>啪啪</li>
    </ul>
    <script>
        $(function() {
            // 注意，jQuery对象设置样式，就不能采取DOM对象的方式
            // 此操作把四个li都设置了颜色，为什么不需要循环设置了呢？
            // 因为会隐式的进行遍历操作，都设置了相同操作
            $("li").css('color', 'red');
        })
    </script>
</body>
</html>

1.4jQuery筛选选择器

在这里插入图片描述

<!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>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>筛选选择器钱钱钱钱钱钱</li>
        <li>筛选选择器钱钱钱钱钱钱</li>
        <li>筛选选择器钱钱钱钱钱钱</li>
        <li>筛选选择器钱钱钱钱钱钱</li>
    </ul>
    <ol>
        <li>筛选选择器钱钱钱钱钱钱</li>
        <li>筛选选择器钱钱钱钱钱钱</li>
        <li>筛选选择器钱钱钱钱钱钱</li>
        <li>筛选选择器钱钱钱钱钱钱</li>
    </ol>
    <script>
        $(function() {
            // 第一个
            $("ul li:first").css('color', 'red');
            // 最后一个
            $("ul li:last").css('color', 'blue');
            // 任意
            $("ul li:eq(2)").css('color', 'pink');
            // 奇数或偶数odd even
            $("ol li:odd").css('color', 'skyblue');
        })
    </script>
</body>
</html>

还有一些jQuery的方法来获取元素
在这里插入图片描述淘宝案例（练习jQuery选择器）

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }
        
        #left,
        #content {
            float: left;
        }
        
        #left li {
            background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        
        #left li a:hover {
            background-image: url(images/abg.gif);
        }
        
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // 1. 鼠标经过左侧的小li 
            $("#left li").mouseover(function() {
                // 2. 得到当前小li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
                // $("#content div").eq(index).show();
                // 4. 让其余的图片（就是其他的兄弟）隐藏起来
                // $("#content div").eq(index).siblings().hide();
                // 链式编程
                $("#content div").eq(index).show().siblings().hide();

            })
        })
    </script>
</head>

<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
            </div>

        </div>


    </div>
</body>

</html>

2.1jQuery操作CSS

利用css()方法实现。

<!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>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 150px;
            background-color: pink;
        }
        .current {
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function() {
            // $("div").css('width');//获得宽度
            // $("div").css('width', 300);//修改宽度
            // // 修改多个
            // $("div").css({
            //     width: 500,
            //     height: 500,
            //     backgroundColor: "blue"
            // });
            // 通过添加类名
            $("div").click(function() {
                // 切换类名，有的话就删除，没有就加
                // $(this).toggleClass("current");
                // 移除类名
                // $(this).removeClass("current");
                $(this).addClass("current");   
            })
      
        })
    </script>
</body>
</html>

3.1jQuery效果

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

        // 显示show(速度，切换效果，函数)参数可以省略
        $("div").show("slow", "linear", function() {
            console.log(1);
        })
        // 隐藏hide(速度，切换效果，函数)参数可以省略
        $("div").hide("fast", "linear", function() {
            console.log(2);
        })
        // 切换toggle(速度，切换效果，函数)参数可以省略
        $("div").toggle(1000, "linear", function() {
            console.log(3);
        })

滑动效果：slideDown()，slideUp()，slideToggle()

<!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>Document</title>
    <style>
        div {
            display: none;
            width: 200px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <button>come</button>
    <button>go</button>
    <button>come-go</button>
    <div></div>
    <script>
        // 向上滑动slideDown()参数和显示隐藏一样
        $(function() {
            $("button").eq(0).click(function() {
                $("div").slideDown();
            })
        })
        // 向上滑动slideUp()参数和显示隐藏一样
        $(function() {
            $("button").eq(1).click(function() {
                $("div").slideUp();
            })
        })
        // 向上滑动slideDown()参数和显示隐藏一样
        $(function() {
            $("button").eq(2).click(function() {
                $("div").slideToggle();
            })
        })
        
    </script>
</body>
</html>

事件切换
// 事件切换hover(鼠标经过函数，鼠标离开函数)
// 如果hover只写一个函数，离开经过都会触发$("div").hover(fuction() {}, fuction() {})
如果多次触发动画效果，那么jQuery会将动画队列都执行完毕，所以我们可以停止让他排队，用stop（）方法。

淡入淡出效果

        //淡入淡出效果
        $(function() {
            $("button").eq(0).click(function() {
                $("div").fadeIn();
            })
        })
        $(function() {
            $("button").eq(1).click(function() {
                $("div").fadeOut();
            })
        })
        // $(function() {
        //     $("button").eq(2).click(function() {
        //         $("div").stop().fadeToggle();
        //     })
        // })
        // 去到哪个透明度，必须写时间哥透明度
        $(function() {
            $("button").eq(2).click(function() {
                $("div").fadeTo(1000, 0.5);
            })
        })

淡入淡出案例

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        body {
            background: #000;
        }
        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            border: 1px solid #fff;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
        }
        .wrap ul li {
            float: left;
            margin: 0 10px 10px 0;
        }
        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="../jQuery/jquery.min.js"></script>
    <script>
        $(function() {
            $(".wrap li").hover(function() {
                $(this).siblings("li").stop().fadeTo(500, 0.4);
            }, function() {
                $(this).siblings("li").stop().fadeTo(500, 1);
            })
        })
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#"><img src="../image/01.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../image/02.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../image/03.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../image/04.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../image/05.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../image/06.jpg" alt="" /></a>
            </li>
        </ul>
    </div>
    
</body>
</html>

自定义动画
animate(对象，速度，样式，回调函数)

<!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>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <button>点击</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 200,
                    top: 200,
                    width: 500
                });
            })
        })
    </script>
</body>
</html>

动画案例，王者荣耀手风琴

<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        img {
            display: block;
        }
        .king {
            width: 852px;
            margin: 100px auto;
            overflow: hidden;
            background: url(../image/bg.png) no-repeat;
            padding: 10px;
        }
        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        .king ul {
            overflow: hidden;
        }
        .king li.current {
            width: 224px;
        }
        .king li.current .big {
            display: block;
        }
        .king li.current .small {
            display: none;
        }
        .big {
            width: 224px;
            display: none;
        }
        
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>
    <script src="../Jquery/jquery.min.js"></script>
</head>
<body>
    <script>
        $(function() {
            // 无动画效果
            // $(".king li").hover(function() {
            //     $(this).addClass("current").siblings().removeClass("current");
            // })
            $(".king li").mouseenter(function() {
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            });
        });
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="../image/m1.jpg" alt="" class="small">
                    <img src="../image/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../image/l1.jpg" alt="" class="small">
                    <img src="../image/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../image/c1.jpg" alt="" class="small">
                    <img src="../image/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../image/w1.jpg" alt="" class="small">
                    <img src="../image/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../image/z1.jpg" alt="" class="small">
                    <img src="../image/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../image/h1.jpg" alt="" class="small">
                    <img src="../image/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../image/t1.jpg" alt="" class="small">
                    <img src="../image/t.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>
</body>

</html>

4.1jQuery属性操作

prop()方法

<!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>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <a href="www.baidu.com"></a>
    <script>
        // 获得固有属性值
        $("a").prop("href");
        // 设置属性值
        $("a").prop("title", "good");
        // 获取自定义属性,不能通过prop()获取
        $("a").attr("title");
        // 数据缓存。DOM看不到
        $("a").data("name", "dada");
        
    </script>
</body>
</html>

5.1jQuery内容文本值

html()方法

<!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>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div>hello</div>
    <input type="text" value="ss">
    <script>
        // 获取标签及内容
        console.log($("div").text()); 
        // 修改内容
        $("div").html("<strong>kakakaka</strong>");
        // 获取内容
        $("div").text();
        // 获取值
        $("input").val();
        // 修改值
        $("input").val("eee");
    </script>
</body>
</html>

6.1jQuery遍历

each(function(index, domEle){})方法,index是自动生成的索引，domEle是DOM对象

<!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>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        arr = ["red", "pink", "skyblue"];
        $(function() {
            console.log($("div").html());
            // each方法内要有回调函数，index是索引，代表第几个元素，domEle代表这个元素的DOM对象
            $("div").each(function(index, domEle) {
                $(domEle).css("color", arr[index]);
            })
        })
    </script>
</body>
</html>