JQuery : 事件绑定&入口函数&样式控制

最新推荐文章于 2023-11-12 22:57:42 发布

原创最新推荐文章于 2023-11-12 22:57:42 发布 · 615 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery

javaWeb 专栏收录该内容

94 篇文章

订阅专栏

这篇博客介绍了如何使用JQuery进行事件绑定，展示了将点击事件添加到按钮上的两种方法：一种是直接在<script>标签内，另一种是在window.onload函数中。此外，还演示了如何利用JQuery改变元素的样式，例如将指定div的背景色改为红色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件绑定


<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="./js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" value="点我" id="b1">
<script>
    //给b1按钮添加单机事件
    //1.获取b1按钮
    $("#b1").click(function () {
        alert("abc");
    });
</script>
</body>
</html>

在这里插入图片描述

入口函数

如果把 <script> 包含的代码放到前面,需要放到 window.onload=function () {}里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="./js/jquery-3.3.1.js"></script>

    <script>

        window.onload=function () {
            //给b1按钮添加单机事件
            //1.获取b1按钮
            $("#b1").click(function () {
                alert("abc");
            });
        }

    </script>
</head>
<body>

<input type="button" value="点我" id="b1">

</body>
</html>

采用JQuery的入口函数方法改造

	<script>        
        $(function () {
            $("#b1").click(function () {
                alert("abc");
            });
        })
    </script>

样式控制

把背景色改成红颜色

	 $(function () {
            $("#div1").css("background-color","red");
        })

在这里插入图片描述