jquery简单入门

最新推荐文章于 2024-04-25 07:00:00 发布

李_lym

最新推荐文章于 2024-04-25 07:00:00 发布

阅读量136

点赞数

分类专栏： jquery 文章标签： jQuery 十一的博客

本文链接：https://blog.csdn.net/sinat_40900884/article/details/80665949

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

创建一个html项目

用js写一个点击事件弹出对话框

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <div id="div_click">点击</div>
    <input id="Button1" type="button" value="button" />
</body>
</html>
<script type="text/javascript">
    function click()
    {
        alert("hello hello");
    }
    document.getElementById("div_click").onclick = click;
    document.getElementById("Button1").onclick = function () {
        alert("hello");
    }
</script>

注意：从上往下运行<script></script>要写在div下边；

用jquery写一个点击事件弹出对话框

添加一个script文件

单击右键hello文件，选择“”管理NUGET程序包“”点击“浏览”，选择“jquery”,下载”1.11.3“版本

文件如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="Scripts/jquery-1.11.3.js"></script>
</head>
<body>
    <div id="div_click">点击</div>
    <input id="Button1" type="button" value="button" />
</body>
</html>
<script type="text/javascript">
    $("#div_click").click(function () {
        alert("hello");
    });
    $("#Button1").click(function () {
        alert("hello");
    });
</script>

页面加载事件

两种方法：

第一种：window.onload

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="Scripts/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        //输出two。。window.onload运行的是最后一个加载事件
        window.onload = one;
     
        window.οnlοad= two; 
        function one() {
            $("#Button1").click(function () {
                alert("one");
            });
           
        }
        function two() {
            $("#Button1").click(function () {
                alert("two");
            });
        }
    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" />
</body>
</html>

第二种： $(document).ready(function () {});

简写： $(function () {});

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="Scripts/jquery-1.11.3.js"></script>
    <script type="text/javascript">
      
     //输出one,two。。运行的是每一个加载事件
        $(document).ready(function () {
            alert("one");
        });
        $(document).ready(function () {
            alert("two");
        });
    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" />
</body>
</html>

区别：

第一种：window.onload

1.一个页面中只能使用一个window.onload()方法。

2、在一个文档完全下载到浏览器时（包括所有关联的文件，例如图片、横幅等）就会响应window.onload()方法。

第二种： $(document).ready(function () {});

1.在一个页面上可以无限制地使用$(document).ready()方法，各个方法间并不冲突，会按照在代码中的顺序依次执行。

2、$(document).ready()方法是在所有的DOM元素完全就绪以后就可以调用，不包括关联的文件。例如在页面上还有图片没有加载完毕但是DOM元素已经完全就绪，这样就会执行$(document).ready()方法，在相同条件下window.onload()方法是不会执行的，它会继续等待图片加载，直到图片及其他的关联文件都下载完毕时才执行。

李_lym

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery简单入门

创建一个html项目用js写一个点击事件弹出对话框&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;&lt;/title&gt; &lt
复制链接

扫一扫

专栏目录