前端的第二十四天（jQuery入门、常用API）

最新推荐文章于 2024-06-17 23:49:16 发布

纸黑墨白

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量549

点赞数

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

本文链接：https://blog.csdn.net/m0_56901161/article/details/121673449

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

前端的第二十四天（jQuery入门、常用API）

一、jQuery入门

在这里插入图片描述

1.jQuery 概述

在这里插入图片描述

2.jQuery 的基本使用

在这里插入图片描述
官网地址：点我跳转

各个版本的下载：点我跳转

在这里插入图片描述

二、jQuery常用API

在这里插入图片描述

1.jQuery 选择器

在这里插入图片描述

    <script>
        $(function(){
            $('#left li').mouseover(function(){
                var index = $(this).index();
                // $('#content div').eq(index).show();
                // $('#content div').eq(index).siblings('div').hide();

                //链式编程完成前面两条语句
                $('#content div').eq(index).show().siblings('div').hide();
            })
        })
    </script>

2.jQuery 样式操作

在这里插入图片描述

3.jQuery 效果

在这里插入图片描述

    <script type="text/javascript">
        $(function() {
            // 鼠标经过某个小li 有两步操作：
            $(".king li").mouseenter(function() {
                // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        });
    </script>

4.jQuery 属性操作

在这里插入图片描述

5.jQuery 文本属性值

在这里插入图片描述

6.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.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>5</div>
    <div>9</div>
    <div>11</div>
    <span>总和：</span>
    <script>
        var sum = 0;
        var arr = ["red","blue","pink"]
        $('div').each(function(i,domEle){
            $(this).css("color",arr[i]);
            sum += parseInt($(domEle).text());
        });
        $("span").text(sum);
    </script>
</body>
</html>

在这里插入图片描述

7.jQuery 尺寸、位置操作

在这里插入图片描述

8.案例：带有动画的返回顶部

核心原理：使用animate动画返回顶部。
animate动画函数里面有个scrollTop 属性，可以设置位置
但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0})

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="jquery.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function(){
            var boxTop = $('.container').offset().top;
            $(window).scroll(function(){
                if($(document).scrollTop() >= boxTop){
                    $('.back').fadeIn();
                }else{
                    $('.back').fadeOut();
                }
            })
        })

        $('.back').click(function(){
            $('body,html').stop().animate({
                scrollTop : 0
            })
        });
    </script>
</body>

</html>