JS--jQuery(简单易懂版)

最新推荐文章于 2024-07-26 20:46:33 发布

肆·意

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量657

点赞数 16

文章标签： javascript jquery 开发语言学习

本文链接：https://blog.csdn.net/2301_79659699/article/details/136157851

版权

使用js方法：

法一：不用下载安装版

通过 CDN（内容分发网络）引用它

Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

法二：

网络上下载一个js,复制并保存到本地，每次使用时引用

<script src="jQuery.js"></script>

我们的js可以通过上方cdn里边的网址链接直接下载

引用后我们需要再写一个script,并在里边进行js编写

js的使用例子：

文档就绪函数:作用是为了让下边代码都执行完之后再执行jQuery，否则代码会按照先后顺序进行


        $(document).ready(function() {
            $('.box').hide()
        })
简化版
            $(function() {
            $('.box').hide()
        })

为窗口对象绑定滚动事件

 $(window).on("scroll", function() {
            
        })

滚动事件与消失和出现结合

 $(window).on("scroll", function() {
            // 当滚动高度超过200， 让button元素显示
            // 当滚动高度小于200， 让button元素消失
            if ($(window).scrollTop() > 200) {
                $("button").show()
            } else {
                $("button").hide()
            }
        })

事件绑定的几种方式：

 //事件绑定方式一
   $(function() {
            $('.btn').click(function() {
                $('.box').hide()
            })
        })
//事件绑定方式二（可以让想变的东西灵活化）
 $(function() {
            $('.btn').on("click", function() {
                $('.box').hide()
            })
        })
//事件绑定方式三(通过祖先元素，可以绑定未来元素（后来添加的），让其可以有绑定事件)
 $(function() {
            $('body').on('click', '.btn', function() {
                    $('.box').hide()
                })
       })

让button元素消失

 $("button").hide()

让button出现

 $("button").show()

点击按钮，文本框消失，再点击一下，文本框出现

web页面代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.js">
    </script>
    <script>
        $(function() {
            var flag = 0
            $('body').on('click', '.btn', function() {
                if (flag == 0) {
                    $('.box').show()
                    flag = 1
                } else {
                    $('.box').hide()
                    flag = 0
                }
            })
        })
    </script>
</head>

<body>
    <input type="text" class="a">
    <input type="button" value="按钮" class="btn">
</body>

</html>

还有一种更简单的方式，使用toggle(),如下所示:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.js">
    </script>
    <script>
        $(function() {
            $('body').on('click', '.btn', function() {
                $('.a').toggle()
            })
        })
    </script>
</head>

<body>
    <input type="text" class="a">
    <input type="button" value="按钮" class="btn">
</body>

</html>

淡入淡出

// 淡入
$('.box').fadeIn()
// 淡出
$('.box').fadeOut()
// 点一下淡入然后淡出
$('.box').fadeToggle()
//允许渐变为给定的不透明度（值介于 0 与 1 之间）
$('.box').fadeTo()

滑动

//用于向下滑动元素
$(".box").slideDown()
//用于向上滑动元素
$(".box").slideUp()
//二者结合
$(".box").slideToggle();

实现动画效果(通过两种写法以及动画结果，我们可以清晰的看见二者的不同)

写法一：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.js">
    </script>
    <script>
        $(function() {
            $('body').on('click', '.btn', function() {
                $('.box').animate({
                    "width": "300px",
                    "height": "300px",
                    "font-size": "100px",
                    "border-radius": "50px",
                }, 3000)
            })
        })
    </script>
</head>

<body>
    <div class="box" style="background-color: aqua;width: 100px;">nihao</div>

    <input type="text" class="a">
    <input type="button" value="按钮" class="btn">
</body>

</html>

动画展示：（同时进行）

写法二：

$(function() {
            $('body').on('click', '.btn', function() {
                $('.box').animate({
                    "width": "300px",
                    "height": "300px"
                }, 3000)
                $('.box').animate({
                    "font-size": "100px",
                }, 3000)
                $('.box').animate({
                    "border-radius": "50px",
                }, 3000)
            })
        })
    </script>
</head>

<body>
    <div class="box" style="background-color: aqua;width: 100px;">nihao</div>

    <input type="text" class="a">
    <input type="button" value="按钮" class="btn">
</body>

</html>

动画展示（按照代码顺序执行）

方法二的js也可以化简(同一个元素可以把查找元素省略掉)

$(function() {
            $('body').on('click', '.btn', function() {
                $('.box').animate({
                    "width": "300px",
                    "height": "300px"
                }, 3000)
                .animate({
                    "font-size": "100px",
                }, 3000)
               .animate({
                    "border-radius": "50px",
                }, 3000)
            })
        })

stop()在动画或效果完成前对它们进行停止

会停止当前活动的动画，但允许已排队的动画向前执行。
            $("#btn").click(function() {
                $("div").stop();
            });
停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。
            $("#btn").click(function() {
                $("div").stop(true);
            });
会立即完成当前活动的动画，然后停下来。
            $("#btn").click(function() {
                $("div").stop(true, true);
            });

肆·意

关注

16
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS--jQuery(简单易懂版)

实现动画效果(通过两种写法以及动画结果，我们可以清晰的看见二者的不同)方法二的js也可以化简(同一个元素可以把查找元素省略掉)引用后我们需要再写一个script,并在里边进行js编写。网络上下载一个js,复制并保存到本地，每次使用时引用。我们的js可以通过上方cdn里边的网址链接直接下载。通过 CDN（内容分发网络）引用它。动画展示（按照代码顺序执行）还有一种更简单的方式，使用。法一：不用下载安装版。
复制链接

扫一扫