JQuery

发布时间 : 2021-04-29 09:02

阅读 :

jQuery
注意
1. 导入CDN
事件绑定
1. 格式
2. 实例
入口函数
1. 格式
2. 实例

jQuery

关于jQuery的介绍可以查看菜鸟教程了解->https://www.runoob.com/jquery/jquery-intro.html

注意

导入CDN

1
2
3

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>

事件绑定

绑定事件的函数编写在< body >中

格式

以id选择器为例

<body>
 <script>
        $("#id选择器名").click(function (){
         //操作内容
        })
  </script>
</body>

实例

效果：当点击按钮时页面会变成红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <!--导入CDN-->
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>
<body id ="main">

    <input id="bianSe" type="button" value="变色">

    <script>
        $("#bianSe").click(function (){
            $("#main").css("backgroundColor","red")
        })
    </script>

</body>
</html>

入口函数

入口函数编写在 < head > 标签里

格式

<head>
    <script>
        $(function (){
            $("#id选择器名").click(function (){
            //操作内容
            })
        })
    </script>
<head>

效果：当点击按钮时页面会变成红色

实例

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

    <meta charset="UTF-8">
    <title>入口函数</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

    <script>
        $(function (){
            $("#bianSe").click(function (){
                $("#main").css("backgroundColor","red")
            })
        })
    </script>

</head>
<body id="main">

    <input id="bianSe" type="button" value="变色">

</body>
</html>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com