jQuery：节点操作、事件操作

文章目录

  • 1. 添加节点
    • 1.1 内部添加
    • 1.2 外部添加
  • 2. 删除结点&清空节点内容
  • 3. 替换&复制结点
  • 4.事件详解
    • 4.1 常用事件
    • 4.2 事件监听方法(了解)
    • 4.3 事件常用属性
    • 4.4 图示
  • 5. 事件冒泡
  • 6. 阻止事件默认行为
  • 7. 自动触发事件
  • 8. 事件委托
    • 一般事件委托产生在
    • 原理
    • 场景
  • 9. 自定义事件,命名空间,取消事件
    • 自定义事件
    • 命名空间
    • 取消事件

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');
})

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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平