JQuery基础例题详解（上）

最新推荐文章于 2024-04-02 12:52:34 发布

素心如月桠

最新推荐文章于 2024-04-02 12:52:34 发布

阅读量286

点赞数 1

分类专栏： jQuery javaweb 文章标签： jquery

本文链接：https://blog.csdn.net/m0_47010003/article/details/124059932

版权

javaweb 同时被 2 个专栏收录

32 篇文章 11 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

引言

jQuery语法就是

$()

注意在EL表达式中是${},大括号

1.jQuery选择器

1.1 3种选择器

例题：点击button按钮，p标签的内容全部隐藏

<!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 type="text/css">
        p {
            width: 100px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <button id="btnid" class="btncss">点击隐藏</button>
    <p id="pid" class="pcss"></p>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        // 元素选择器
        $(document).ready(function () {
            $("button").click(
                function () {
                    $("p").hide();
                }
            )
        })
        //id选择器
        $(document).ready(function () {
            $("#btnid").click(function () {
                $("#pid").hide();
            })
        })
        //class选择器
        $(document).ready(function () {
            $(".btncss").click(function () {
                $(".pcss").hide();
            })
        })
    </script>
</body>
</html>

2. jQuery效果

2.1 显示和隐藏、显示隐藏交替

hide();show();toggle()

<!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 type="text/css">
       img {
            width: 150px;
            height: 230px;
            display: none;
        
        }
        p{
            position: relative;
            top: 10px;
            left: 20px;
            width: 150px;
            height: 230px;
            border: solid 10px beige;
        }
        #close-btn-id{
            position: absolute;
            top: -1px;
            right: -1px;
        }
    </style>
</head>

<body>
    <p>
        
        <!-- src第一个路径不用加/会报错 -->
        <img src="image/刘雨昕.jpg" alt="">
        <button id="close-btn-id" class="closebtncss">显示</button>
    </p>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#close-btn-id").click(function(){
                $("img").show();//点击显示
                $("img").hide();//点击关闭
                $("img").toggle();//点击关闭，再点击显示，再点击关闭....
            })
        })
    </script>
</body>
</html>

2.2 淡入淡出、淡入淡出交替

fadeIn() ; fadeOut(); fadeToggle(); fadeTo();
–>
1.方法里面可以取值(“slow” “fast” 或者毫秒)也可不取
如
fadeIn(“slow”)、fadeIn(“fast”)、fadeIn(3000)
fadeOut(“slow”)、fadeOut(“fast”)、fadeOut(3000)
fadeToggle(“slow”)、fadeToggle(“fast”)、fadeToggle(3000)
2.方法fadeTo(speed,opacity,callback),必需的参数speed规定效果的时长，取值（slow、fast、毫秒），opacity参数将淡入淡出效果设置为给定的不透明度，取值（0~1之间），callback参数是该函数完成后所执行的函数名称
如
$(“#div1”).fadeTo(“slow”,0.15);

2.3滑动

slideDown()、slideUp()、slideToggle();
如
$(“#pid”).slideDown();//向下滑动显示出来

2.4 动画

animate();

2.4.1例题1：点击按钮图片放大，一直点击一直放大，img的长和宽每次加大150px

<body>
    <p>
        
        <!-- src第一个路径不用加/会报错 -->
        <img src="image/刘雨昕.jpg" alt="">
        <button id="close-btn-id" class="closebtncss">放大</button>
    </p>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#close-btn-id").click(function(){
                $("img").animate({
                    height:'+=150px',
                    width:'+=150px'
                })
            })
        })
    </script>
</body>

2.4.2例题2，点击显示按钮图片从上到下并且从左到右慢慢的出来再隐藏回去

<!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 type="text/css">
        img {
            width: 150px;
            height: 230px;
            display: none;
        }

        p {
            position: relative;
            top: 10px;
            left: 20px;
            width: 150px;
            height: 230px;
            border: solid 10px beige;
        }

        #btn-id {
            position: absolute;
            top: -1px;
            right: -1px;
        }
    </style>
</head>

<body>
    <p>

        <!-- src第一个路径不用加/会报错 -->
        <img src="image/刘雨昕.jpg" alt="">
        <button id="btn-id" class="closebtncss">显示</button>
    </p>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn-id").click(function () {
                $("img").animate({
                    height: 'toggle',
                    width:'toggle'
                })
            })
        })
    </script>
</body>
</html>

可以把属性的动画值设置为”slow“、“hide”、“toggle”
这里只演示toggle
要给透明度直接再{}里面加
如

 <script type="text/javascript">
$(document).ready(function () {
    $("#btn-id").click(function () {
      $("img").animate({
       		 height: 'toggle',
  		     width:'toggle',
  			 opacity:'0.4'
})
})
})
</script>

2.4.3 例题3 点击按钮字号一次加大3em,效果为慢慢加大

div.animate({fontSize:'3em'},"show");

2.4.4 停止动画

${“#div”}.stop();

素心如月桠

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery基础例题详解（上）

引言jQuery语法就是$()注意在EL表达式中是${},大括号1.jQuery选择器1.1 3种选择器例题：点击button按钮，p标签的内容全部隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
复制链接

扫一扫