jQuery节点操作、事件操作

其他 2020-03-06 15:19:31 阅读次数: 0

文章目录

1. 添加节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 300px;
            margin: 100px auto;
            border: 1px solid orangered;
        }

        .red{
            background-color: red;
        }

        .green{
            background-color: green;
        }
    </style>
</head>
<body>

<div class="box">
    <ul class="red">
        <li>red1</li>
        <li>red2</li>
        <li>red3</li>
        <li>red4</li>
        <li>red5</li>
        <li>red6</li>
        <li>red7</li>
        <li>red8</li>
    </ul>
    <ul class="green">
        <li>green1</li>
        <li>green2</li>
        <li>green3</li>
        <li>green4</li>
        <li>green5</li>
        <li>green6</li>
        <li>green7</li>
        <li>green8</li>
    </ul>
</div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        var $newTag = $('<li>新增的节点</li>');
        // 父子关系
        // $('.red').append($newTag);
        // $newTag.appendTo($('.red'));

        // $newTag.prependTo($('.red'));
        // $('.red').prepend($newTag);

        // 外部添加 --> 兄弟
        // $('.red').before($newTag);
        // $('.red').after($newTag);

        // $newTag.insertBefore($('.red'));
        $newTag.insertAfter($('.red'));
    });
</script>
</body>
</html>

1.1 内部添加

  1. append(): 添加节点->追加到最后 (属性父子关系)
    $('ul').append(tag);
  2. appendTo(): 把创建的结点添加到指定结点之后
     $(tag).appendTo('li');
  3. prepend() 添加结点->追加到最前面 (属性父子关系)
    $('ul').prepend(tag);
  4. prependTo() 把创建的结点添加到指定结点之前
    $(tag).prependTo('li');

1.2 外部添加

  1. after() 把指定结点添加到指定元素之后,(属于兄弟关系)
    $('ul').after(tag);
  2. before() 把指定结点添加到指定元素之前,(属于兄弟关系)
    $('ul').before(tag);
  3. insertBefore(tag) 把指定元素添加到指定元素之后
    $('li:last').insertBefore($('li:first'));
  4. insertAfter(tag) 把指定元素添加到指定元素之前
    $('li:first').insertAfter($('li:last'));

2. 删除结点&清空节点内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 300px;
            margin: 100px auto;
            border: 1px solid orangered;
        }

        .red{
            background-color: red;
        }

        .green{
            background-color: green;
        }
    </style>
</head>
<body>

<div class="box">
    <ul class="red">
        <li>red1<input type="date"><span>撩课学院</span></li>
        <li>red2</li>
        <li>red3</li>
        <li>red4</li>
        <li>red5</li>
        <li>red6</li>
        <li>red7</li>
        <li>red8</li>
    </ul>
    <ul class="green">
        <li>green1</li>
        <li>green2</li>
        <li>green3</li>
        <li>green4</li>
        <li>green5</li>
        <li>green6</li>
        <li>green7</li>
        <li>green8</li>
    </ul>
</div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
          $(document).click(function () {
              // $('.red>li:first').remove();
              // $('.red>li:first').empty();
              // $('.red>li:first').html('');
          });
    });
</script>
</body>
</html>
  1. 把指定的节点删除
    $(tag).remove()
  2. 清空选择元素当中的所有内容,内部有标签连标签一起清空.没有标签,直接清空文字
    $(tag).empty()
  3. 借助.html()实现清空标签内部内容
    $('.red>li:first').html('');

3. 替换&复制结点

  1. tag1.replaceWith(tag2)
    把tag1标签替换成tag2标签
  2. tag.clone(varBool)复制tag标签.
    参数说明:
    当参数为false时代表只复制标签,不包括标签绑定的事件.
    当参数为true时代表不仅复制标签,连同里面的事件一起复制
    如果没有传递参数,代表为false
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-替换&复制结点</title>
    <style>
        p{
            height: 40px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>
<body>

   <p>
       <input type="date">
       <span>撩课学院</span>
   </p>

    <script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('p').click(function (event) {
                // 阻止,冒泡
                event.stopPropagation();
                alert('哈哈哈哈或');
            });


             $(document).click(function () {
                 // 1. 替换节点
                /* var $newTag = $('<h1>0000000</h1>');
                 $('p').replaceWith($newTag);*/

                // 2. 复制节点
                /* var $newTag = $('p:first').clone(false);
                 console.log($newTag);
                 $('body').append($newTag);*/

                // 深复制 连同标签上的事件
                 var $newTag = $('p:first').clone(true);
                 $('body').append($newTag);
             });
        });
    </script>
</body>
</html>

4.事件详解

4.1 常用事件

  1. blur()当失去焦点时触发。包括鼠标点击离开和TAB键离开。
  2. change()当元素获取焦点后，值改变失去焦点事触发。
  3. click()当鼠标单击时触发。
  4. dblclick()当鼠标双击时触发。
  5. error()　当javascript出错或img的src属性无效时触发。
  6. focus()当元素获取焦点时触发。注意：某些对象不支持。
  7. focusin()　当元素或其子元素获取焦点时触发，与focus()区别在于能够检测其内部子元素获取焦点的情况。
  8. focusout()　当元素或者其子元素失去焦点时触发，与focusout()区别在于能够检测内部子元素失去焦点的情况。
  9. keydown()当键盘按下时触发。
  10. keyup()当按键松开时触发。
  11. mousedown()当鼠标在元素上点击后触发。
  12. mouseenter()当鼠标在元素上穿过时触发。mouseenter与mouseover的区别是，鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。
  13. mouseleave()当鼠标从元素上移出时触发。
  14. mousemove()　当鼠标在元素上移动时触发。.clientX和.clientY分别代表鼠标的X坐标与Y坐标。
  15. mouseout()当鼠标从元素上移开时触发。
  16. mouseover()当鼠标移入元素时触发。
  17. mouseup()当鼠标左键按下释放时触发。
  18. resize()当浏览器窗口大小改变时触发。$(window).resize();
  19. scroll()　当滚动条发生变化时触发。
  20. select()当input里的内容被选中时触发。
  21. submit()提交选中的表单。
  22. unload()当页面卸载时触发。

4.2 事件监听方法(了解)

  1. 方式1：bind
    ① 绑定单个事件

    $tag.bind(event,data,function)

    ② 绑定多个事件->同一回调函数

    $(selector).bind("click dbclick mouseout",data,function);

    利用空格分隔多事件
    ③ 绑定多个事件->多个回调函数

    $(selector).bind({event1:function, event2:function, ...})

    利用花括号进行指定事件->函数对
    ④ 适配版本
    根据官网解释，自从jquery1.7版本以后bind()函数推荐用on()来代替

  2. 方式2：live()
    向当前或未来的匹配元素添加一个或多个事件处理器
    用法如上

  3. 方式3
    delegate()

  4. 最新方案
    ① on()

    1. 绑定单个事件
    $tag.on(event,data,function)
    1. 绑定多个事件->同一回调函数
    $(selector).on("click dbclick mouseout",data,function);

    利用空格分隔多事件

    1. 绑定多个事件->多个回调函数
    $(selector).on({event1:function, event2:function, ...})

    利用花括号进行指定事件->函数对
    ② off()：解绑事件
    解绑单个
    解绑所有

  5. 一次事件：one(type,fun)

4.3 事件常用属性

  1. target：获取事件触发者DOM对象
  2. type：事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click
  3. data：事件调用时传入额外参数.
  4. result：上一个事件处理函数返回的值
    $("p").click(function(event) { 
		return "hey" 
		}); 
		$("p").click(function(event) { 
		alert( event.result ); 
		});
    注意:
    设置多个函数, 不会被覆盖
  5. pageX：鼠标事件中, 事件相对于页面原点的水平/垂直坐标.
  6. pageY：鼠标事件中, 事件相对于页面原点的水平/垂直坐标.

4.4 图示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
    <style>
        div{width: 200px;height: 200px;background: red;}
    </style>
</head>
<body>

<button>事件</button>
<div></div>
<input type="text">

<script src="lib/jquery-3.3.1.js"></script>
<script>

    $(function () {
        /*监听按钮事件的写法*/
        $('button').click(function (event) {
            /*打印事件的类型*/
            console.log(event.type);
            /*事件所在的标签*/
            console.log(event.target);
            /*传的数据*/
            console.log(event.data['name']);
        });


        /*完整写法
         * 其中event为事件对象
         * 通过该对象可以获取当前事件的类型,
         * 作用在那个标签上等
         */
        // $('div').on('click mouseenter',{'name':'撩课'},function (event) {
        //     /*打印事件的类型*/
        //     console.log(event.type);
        //     /*事件所在的标签*/
        //     console.log(event.target);
        //     /*传的数据*/
        //     console.log(event.data['name']);
        // });


        // 同时绑定多个事件
        $('div').on({
            "click": function (event) {
                console.log("---------------click事件触发了----------");
                /*打印事件的类型*/
                console.log(event.type);
                /*事件所在的标签*/
                console.log(event.target);
                /*传的数据*/
                console.log(event.data);
                console.log(event.pageX + "  " + event.pageY);
            },
            "mouseenter": function (event) {
                console.log("--------------mouseenter事件触发了---------");
                /*打印事件的类型*/
                console.log(event.type);
                /*事件所在的标签*/
                console.log(event.target);
                /*传的数据*/
                console.log(event.data);
                console.log(event.pageX + "  " + event.pageY);

            }
        },{'name':'huankai'})

        // 事件result属性
        /*
       $("div").click(function(event) {
           alert("第一个函数");
           return 'key';
       });
       $("div").click(function(event) {
           alert("第二个函数");
           alert( event.result );
       });
       */
    })
</script>
</body>
</html>

5. 事件冒泡

  1. 概念：如果层级之间绑定了同一个事件.当里面子控件触发时,父控件会同时触发
  2. 阻止事件冒泡
    event.stopPropagation();

6. 阻止事件默认行为

  1. 事件默认行为：在开发中有一些标签默认它已经有了一些事件处理
    比如:
    ① 当点击a标签时,它会自动跳转href指定的文件
    ② 点击submit时,会自动提交表单.这些都属性事件的默认行为
    有时候我们不想要这种行为,可以通过事件对象把它给阻止掉.
  2. 调用事件对象的preventDefault()方法
    event.preventDefault();

7. 自动触发事件

  1. trigger
    $(':submit').trigger('click');
    注意
    1. 会触发事件的默认行为.
    2. 触发事件时, 会造成事件冒泡
  2. triggerHandler：不会触发默认事件
    $(':submit').triggerHandler('click');
    注意
    1. 不会触发事件的默认行为.
    2. 触发事件时, 不会造成事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>触发事件</title>
    <script src="lib/jquery-3.3.1.js"></script>
    <script>
            $(function () {

                var $submit =  $(':submit');
                $submit.on('click',function () {
                    alert('提交');
                });

                /*
                 触发事件
                 * 程序一执行就开始执行对应的事件
                 * 1.使用trigger会解发事件的默认行为.
                 * 2.使用trigger触发事件时, 会造成事件冒泡
                 * */
                 // $(':submit').trigger('click');

                /*
                 触发事件
                 * 1.使用triggerHandler不会解发事件的默认行为.
                 * 2.使用triggerHandler触发事件时, 不会造成事件冒泡
                 * */
                $submit.triggerHandler('click');
            });
    </script>
</head>
<body>
<form action="http://www.itlike.com">
    <input type="submit">
</form>
</body>
</html>

8. 事件委托

一般事件委托产生在

点击了子控件, 将事件统一传递给父控件处理

原理

当子控件点击事件触发后, 借助事件冒泡的原理, 会传递给父控件
此时, 父控件只需要判断是否是指定的子控件即可

场景

新创建的DOM对象, 被添加到网页中后, 需要重新手动新增事件
如果只将点击事件绑定在li标签上，新增的li标签不会带有绑定事件。
解决方案：
① 在新增li标签时候，为其增加绑定事件。但代码较为冗余。
② 事件委托。将事件绑定在父级标签上。
语法：

父级标签.on(事件,事件源,触发函数)

例如：

$('.dataList>ul').on('click', 'li', function () {
    $(this).animate({
        'width': '0px'
    }, 1000, function () {
        $(this).remove();
    });
});

9. 自定义事件,命名空间,取消事件

自定义事件

事件的名称可以我们自己指定.但必须得要自己手动去触发.使用trigger()的方式

$(function () {
   var $box = $('.box');
    $box.on('abc',function () {
        alert(123);
    });
    $box.trigger('abc');
})

命名空间

在事件名称的后面可以加上"点"的符号,我们称为事件的命名空间
相当于给事件加了一个标识
作用,类似于css中的类

可以配合off取消事件使用

取消事件

我们可以使用off(事件名称)来去取消指定的事件

$(function () {
   var $box = $('.box');
   $box.on('click.one',function (event) {
       console.log(event.type);
       console.log(1);
   });
   $box.on('click.two',function (event) {
       console.log(event.type);
       console.log(2);
   });
   $box.off('.one');
})

运行结果：
在这里插入图片描述

KaiSarH
发布了270 篇原创文章 · 获赞 123 · 访问量 1万+
私信 关注

猜你喜欢

转载自blog.csdn.net/KaiSarH/article/details/104593174
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022