2020-11.11学习笔记

最新推荐文章于 2024-10-01 20:12:28 发布

尘尘丶

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量337

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Wo_Zach/article/details/109633419

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
今日份代码百度合集
- - Jquery 兼容写法
一、DOM 变动事件？
- 1.1DOM变动事件之删除节点事件
- 1.2DOM变动事件之插入节点事件
二、文本事件？
三、其他事件对象？
- 其他事件对象eg
四、组合式拖拽事件？

前言

第一次写博客，本次是学习笔记如有错误之处还请大佬指教我很热爱编程以后会更加细心的写博客写更优质的博客！

提示：以下是本篇文章正文内容，下面案例可供参考

今日份代码百度合集

1.定义和用法 node.replaceChild(newnode,oldnode) /node : 节点

replaceChild() 方法可将某个子节点替换为另一个。
新节点可以是文本中已存在的，或者是你新创建的。

参数
newnode Node 对象必须。你要插入的节点对象。
oldnode Node object 必须。你要移除的节点对象。

2.定义和用法 .element.childNodes

childNodes 属性返回节点的子节点集合，以 NodeList 对象。
提示：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。

参数
返回值： NodeList 对象，表示节点集合。
DOM 版本 Core Level 1

3.定义和用法 document.createTextNode(text)

createTextNode() 可创建文本节点。

参数
text String 必须。文本节点的文本。
文本节点对象创建文本节点

4.定义和用法 node.insertBefore(newnode,existingnode)

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
提示：如果您希望创建包含文本的新列表项，请记得创建文本节点形式的文本，以便追加到 LI 元素中，然后向列表插入这个 LI。
您也可以使用 insertBefore 方法插入/移动已有元素。
newnode Node 对象必需。需要插入的节点对象。

参数
existingnode Node object 可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。

返回值
Node 对象。您插入的节点。

5.定义和用法 element.setAttribute(attributename,attributevalue)

setAttribute(string name, string value)：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
如果这个指定的属性已存在，则仅设置/更改值。

参数
attributename String 必需。您希望添加的属性的名称。
attributevalue String 必需。您希望添加的属性值。

*/ / / / / / / / / / / / / / / / / / / /图片分割线/ / / / / / / / / / / / / / / / / / / / / / / *
在这里插入图片描述

在这里插入图片描述

Jquery 兼容写法

Jquery event 事件对象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等属性（firefox 浏览器中， offsetX 为 undefined）。firefox 获取 offsetX / offsetY 的值，需要通过 event 对象的属性 originalEvent。

<script>
$(function(){
	$("#box").mousedown(function(event){
		console.log(event.offsetX, event.offsetY);
		console.log(event.clientX, event.clientY);
		console.log(event.pageX, event.pageY);
		console.log(event.screenX, event.screenY);
 
		/* firefox */
		console.log(event.originalEvent.layerX, event.originalEvent.layerY);
	});
});
</script>