jQuery（三）

最新推荐文章于 2022-12-22 23:23:59 发布

MING—li

最新推荐文章于 2022-12-22 23:23:59 发布

阅读量368

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_62313265/article/details/123154753

版权

1.页面事件操作

jQuery：$( function () {} );
JavaScript：window.onload = function () {}

区别：
1.执行顺序：jQuery页面加载完成之后先执行
原生js页面加载完成之后后执行
2.触发条件：jQuery的页面加载完成之后是在浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。
3.执行次数：“jQuery的页面加载完成之后”是把全部注册的function函数，依次全部执行。
“原生js的页面加载完成之后”，只会执行最后一次。

由下图可知1.jpg图片正在加载，而jQuery已经执行完毕

js则在图片加载后出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.7.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            alert("原生js的页面加载完成---1");
        };
        window.onload = function(){
            alert("原生js的页面加载完成---2");
        };
        window.onload = function(){
            alert("原生js的页面加载完成---3");
        };
        $(function () {
            alert("jQuery的页面加载完成---1");
        });
        $(function () {
            alert("jQuery的页面加载完成---2");
        });
        $(function () {
            alert("jQuery的页面加载完成---3");
        });
    </script>
</head>
<body>
    <button>按钮</button>
    <iframe src="http://localhost:8080"></iframe>
    <img src="http://localhost:8080/1.jpg" alt=""/>
</body>
</html>

2.事件处理方法

click() 它可以绑定单击事件，以及触发单击事件，仅第一个标签有效
mouseover()   鼠标移入事件
mouseout()                鼠标移出事件
格式：（以上一致）
$(" 标签名 ").事件名( function () {
                                          });
bind() 给元素一次性绑定一个或多个事件
one() 与bind()事件一样，但每个事件只会相应一次
unbind() 跟bing()方法相反的事件
live() 绑定事件，可以用来绑定选择器匹配的所有元素的事件，多个标签均有效
格式：（以上一致）
$(" 标签名 ").事件名( "click,mouseover,mouseout ",function () {
                                          });

3.事件的冒泡

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的同时，同一个事件也被传递到了父元素的事件里去响应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-1.7.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn01").click(function () {
                alert("div标签");
            });
            $("span").click(function () {
                alert("span标签");
            });
        });
    </script>
</head>
<body>
    <div id="btn01">
        div标签
        <br/>
        <span>
            span标签<br/>
        </span>
        div标签
    </div>
</body>
</html>

如何阻止事件冒泡
在事件函数体内return false；可以阻止事件的冒泡传递

$("span").click(function () {
                alert("span标签");
                return false;
            });

MING—li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery（三）

1.页面事件操作jQuery：$( function () {} );JavaScript：window.onload = function () {}区别：1.执行顺序：jQuery页面加载完成之后先执行原生js页面加载完成之后后执行2.触发条件：jQuery的页面加载完成之后是在浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。原生js的页面...
复制链接

扫一扫