文章目录

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 内部添加

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

1.2 外部添加

after() 把指定结点添加到指定元素之后,(属于兄弟关系)
```
$('ul').after(tag);
```
before() 把指定结点添加到指定元素之前,(属于兄弟关系)
```
$('ul').before(tag);
```
insertBefore(tag) 把指定元素添加到指定元素之后
```
$('li:last').insertBefore($('li:first'));
```
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>

把指定的节点删除
```
$(tag).remove()
```
清空选择元素当中的所有内容,内部有标签连标签一起清空.没有标签,直接清空文字
```
$(tag).empty()
```
借助.html()实现清空标签内部内容
```
$('.red>li:first').html('');
```

3. 替换&复制结点

tag1.replaceWith(tag2)
把tag1标签替换成tag2标签
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 常用事件

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

4.2 事件监听方法(了解)

方式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：live()
向当前或未来的匹配元素添加一个或多个事件处理器
用法如上
方式3
delegate()
最新方案
① on()
1. 绑定单个事件
```
$tag.on(event,data,function)
```
1. 绑定多个事件->同一回调函数
```
$(selector).on("click dbclick mouseout",data,function);
```
利用空格分隔多事件
1. 绑定多个事件->多个回调函数
```
$(selector).on({event1:function, event2:function, ...})
```
利用花括号进行指定事件->函数对
② off()：解绑事件
解绑单个
解绑所有
一次事件：one(type,fun)

4.3 事件常用属性

target：获取事件触发者DOM对象
type：事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click
data：事件调用时传入额外参数.

result：上一个事件处理函数返回的值

$("p").click(function(event) { return "hey" }); $("p").click(function(event) { alert( event.result ); });

注意:
设置多个函数, 不会被覆盖

pageX：鼠标事件中, 事件相对于页面原点的水平/垂直坐标.
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. 事件冒泡

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

6. 阻止事件默认行为

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

7. 自动触发事件

trigger
```
$(':submit').trigger('click');
```
注意
1. 会触发事件的默认行为.
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');
})

运行结果：

jQuery：节点操作、事件操作相关推荐

jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器表 ...
jQuery中的事件机制与DOM操作
jQuery事件机制 jQuery的事件机制,指的是jQuery对JavaScript操作DOM事件的封装,包括了:事件绑定.事件解绑.事件触发. 下面我们先来回顾一下事件的几种类型. 事件描述 c ...
jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数方法描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...
jQuery节点操作创建节点元素删除节点替换节点复制节点等基本本操作
节点操作 jQuery中节点操作查找节点(前面章节已讲) 创建节点插入节点删除节点替换节点复制节点创建节点元素工厂函数$()用于获取或创建节点 $(selector):通过选择器获取节点 ...
Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
JQuery 对控件的事件操作
JQuery是非常棒的js类库,有丰富的UI库和插件,不过我钟爱他的是他的选择器,感觉其他功能有时跟后台人员距离很远,所以一般我也只使用一下他的选择器. 今天突然对他的事件产生了兴趣,先前也碰到过,也 ...
[jQuery学习系列四 ]4-Jquery学习四-事件操作
[jQuery学习系列四 ]4-Jquery学习四-事件操作前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席云集听道推酷 ...
JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
[jQuery原理] jQuery事件操作相关方法
事件操作相关方法 on(type, callback) 注册事件 1.注册多个相同类型事件, 后注册的不会覆盖先注册的 2.注册多个不同类型事件, 后注册的不会覆盖先注册的 on: function ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...

jQuery：节点操作、事件操作