欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

2020-11.11学习笔记

程序员文章站 2022-06-15 15:50:06
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言今日份代码百度合集Jquery 兼容写法一、DOM 变动事件 ?1.1DOM变动事件之删除节点事件1.2DOM变动事件之插入节点事件二、文本事件?三、其他事件对象?其他事件对象eg四、组合式拖拽事件?前言第一次写博客,本次是学习笔记 如有错误之处 还请大佬指教 我很热爱编程 以后会更加细心的写博客 写更优质的博客!提示:以下是本篇文章正文内容,下面案例可供参考今日份代码百度合集1.定义和用法 node.re...

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


前言

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


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

今日份代码百度合集

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 必需。您希望添加的属性值。

*/ / / / / / / / / / / / / / / / / / / /图片分割线/ / / / / / / / / / / / / / / / / / / / / / / *
2020-11.11学习笔记

2020-11.11学习笔记
2020-11.11学习笔记
2020-11.11学习笔记

2020-11.11学习笔记

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>

一、DOM 变动事件 ?

1.1DOM变动事件之删除节点事件

在使用removeChild()或replaceChild()或remove()从DOM中删除某节点会触发删除节点事件

2020-11.11学习笔记
2020-11.11学习笔记
2020-11.11学习笔记

1.2DOM变动事件之插入节点事件

在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点时会触发插入事件

2020-11.11学习笔记
2020-11.11学习笔记
2020-11.11学习笔记

二、文本事件?

“DOM3 级事件”规范中引入了一个新事件,名叫textInput。
根据规范,当用户在可编辑区域(任意可输入区域)中输入字符时,就会触发这个事件。这个事件与keypress事件有所不同

区别之一就是任何可以获得焦点的元素都可以触发keypress 事件,但只有可编辑区域才能触发textInput事件。
区别之二是textInput 事件只会在用户按下能够输入实际字符的键时才会被触发,而keypress事件则在按下那些能够影响文本显示的键时也会触发。

由于textInput 事件主要考虑的是字符,因此它的event 对象中还包含一个data 属性,这个属性的值就是用户输入的字符(而非字符编码)。换句话说,用户在没有按上档键的情况下按下了S 键,data 的值就是"s",而如果在按住上档键时按下该键,data 的值就是"S"。

2020-11.11学习笔记

2020-11.11学习笔记

三、其他事件对象?

2020-11.11学习笔记
2020-11.11学习笔记
2020-11.11学习笔记

其他事件对象eg

preventDefault(), 阻止默认事件目标元素在该事件下默认执行的行为
2020-11.11学习笔记
浏览器的常见默认行为a标签可以进行跳转
  右键弹出菜单
  点击submit可以进行提交
… …
2020-11.11学习笔记

四、组合式拖拽事件?

核心概念模型。
2020-11.11学习笔记
2020-11.11学习笔记

本文地址:https://blog.csdn.net/Wo_Zach/article/details/109633419

相关标签: javascript