JavaScript经典教程(七)-- JavaScript初级

190:JavaScript初级内容 - DOM查询、插入内容、赋予样式等

1、DOM操作

DOM:节点,也就是html中的元素;
DOM操作:其实就是节点元素的方法;

(1)innerHTML - 返回元素内容

在这里插入图片描述
同时也可以赋予DOM新内容:
在这里插入图片描述

(2)outerHTML - 返回元素自己 + 内容

在这里插入图片描述
可以赋予新内容,连带自己本身一起替换:
在这里插入图片描述

(3)cssText - 赋予多个样式

在这里插入图片描述

(4)children - 子节点

获取DOM元素下的第一层子级/子节点,一数组形式返回,通过下标获取
在这里插入图片描述

(5)parendNode - 父节点

获取DOM元素的父级节点,每个子级只有一个父级
在这里插入图片描述

191:DOM添加、删除、替换、模拟QQ、事件绑定

1、新标签

(1)textarea - 文本域

可以拖动右下角进行拉伸
在这里插入图片描述

2、DOM操作

(6)createElement - 创建节点

写法:document.createElement('')
括号中写标签格式,div、p、input等

(7)appendChild - 添加节点

写法:父节点.appendChild(子节点);
将子节点添加到父节点中最后面
在这里插入图片描述

(8)insertBefore - 插入节点

写法:父节点.insertBefore (新子节点 , 节点a);
某父级下,将新的子节点插入到节点a的前面
参数1:新子节点,即要插入的新节点
参数2:节点a , 可以直接用id查找,或者用下标也可以
在这里插入图片描述

(9)removeChild - 删除节点

写法:父节点.insertBefore (子节点);
删除某父级下的子节点
在这里插入图片描述

(10)replaceChild - 替换节点

写法:父节点.insertBefore (新子节点 , 老节点);
参数1:新子节点,需要的新节点
参数2:老子节点,不需要的,马上要被换下的节点
在这里插入图片描述

(11)createTextNode - 新建文本节点

在这里插入图片描述

3、addEventListener - 事件监听

标准写法:

事件元素.addEventListener('' , function(){
	函数执行代码
} , false)

参数1:‘’ , 事件类型,即block,onmousedown等
参数2:function,函数,即要执行的操作
参数3:true/false,可以不写,默认为false。作用是解决火狐老版本的兼容问题

(1)事件的特性

1、绑定性
一旦事件绑定了元素,哪怕在函数中对元素的id等进行了修改,但是事件还在,这个元素上就一直存在这个元素

(2)事件绑定解除

1、事件绑定的解除
直接将事件内容设置为空
在这里插入图片描述
2、事件监听的解除
前提:函数要有名字,不能是匿名函数
写法:元素.removeEventListener('事件类型' , 名称);
在这里插入图片描述

192:属性、闭包原理、生命周期

1、隐式属性

js直接赋予的,可以拿到,但是看不到
在这里插入图片描述

2、显示属性

(1)setAttribute - 给予显示属性

写法:元素.setAttribute(属性名 , 属性值);
可以给元素设置显示属性,也可以对已有属性进行修改;
想要只给属性不给值时,属性值设为 ‘’ 即可;
在这里插入图片描述

(2)getAttribute - 得到/获取显示属性

写法:元素.setAttribute(属性名);
显示属性只能通过显示属性的获取方法得到,即getAttribute,不能通过隐式属性的方法获取;
在这里插入图片描述
注:
隐式属性只能拿到一些基础属性;
显示属性能拿到元素上所有的属性值;
显示属性无法拿到隐式属性的属性值;
部分特殊的显示属性,可以用隐式属性的方法拿到,如id、class

(3)hasAttribute(属性) - 检测属性

写法:元素.setAttribute(属性名);
判断元素上是否有该属性
返回布尔值,如果有该属性,返回true,没有则返回false
在这里插入图片描述

3、nodeName

返回节点的名称
在这里插入图片描述

4、闭包

子函数访问父函数的行为;
一个函数访问另一个函数的变量的行为;

(1)生命周期

回收机制:
当一个变量,在作用域中使用过了,后面没有对它的再使用,该变量死掉,即回收了。

window:
最大的全局,当变量设置在window下window.a=10;,这个变量就一直存在,不会回收,在任意地方都可以随意调用。

特性:
1、子函数能使用父函数变量;
2、子函数能延长父函数的变量的生命周期;
3、子函数可以扩充父函数的空间;

193:事件冒泡、事件对象原理

1、事件冒泡

原理:父级的事件,自己都会继承;
设置父级的点击事件,点击子级,依然触发。
在这里插入图片描述

阻止事件冒泡:

防止父级的事件贯穿到子级里面;

1、cancelBubble();
在这里插入图片描述
2、stopPropagation();
应用于高级浏览器,IE8+才支持,移动端支持
在这里插入图片描述

2、事件对象

div2.onclick = function(e){
	var ev = e || event;
}

解决兼容性问题:
IE浏览器不兼容e,火狐不兼容event,所以用 || (或) 这种方法使两边都兼容。

点击div2,e=PointerEvent,指针事件
在这里插入图片描述

194:中括号的使用方法

在js中[]可以代替 ‘ . ’ 的,括号中的内容可以当做变量。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/18505.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

关于maven

一、maven是什么 一个java项目构建工具 二、maven的作用 (1)依赖管理 不同框架整合,互相依赖jar包版本不同,版本不一样,程序跑起来就会报错。用maven管理jar包。 (2)跨平台构建项目 linux服…

数据结构学习记录——堆的建立(最大堆的建立、思路图解、代码实现、代码解释)

目录 最大堆的建立 方法1 方法2 思路图解 代码实现 代码解释 PercDown BuildHeap 最大堆的建立 建立最大堆:将已经存在的N个元素按最大堆的要求存放在一个一维数组中。 方法1 通过插入操作,将N个元素一个一个地插入到一个初始为空的堆中去。…

简述对象检测与图像分类与关键点检测区别

计算机视觉是人工智能的一个多元化领域,旨在检测和识别图像或视频的内容。大多数开始计算机视觉领域之旅的人的常见问题之一是:目标检测、图像分类和关键点检测之间有什么区别? 让我们先看看 什么是对象检测 对象检测是一种计算机视觉和图像…

excel中英文互译

在excel运行宏时弹出下面的提示: 无法运行“XXXXX”宏。可能是因为该宏在此工作薄中不可用,或者所有的宏都被禁用的错误提示 解决办法: 1、点击“文件”选项卡; 2、在选项卡界面窗口中选择“选项”按钮; 3、在“选项…

JavaScript实现在键盘输入按键,浏览器进行显示的代码

以下为实现在键盘输入按键,浏览器进行显示的代码和运行截图 目录 前言 一、在键盘输入按键,浏览器进行显示 1.1 运行流程及思想 1.2 代码段 1.3 JavaScript语句代码 1.4 运行截图 前言 1.若有选择,您可以在目录里进行快速查找&#xf…

智能汽车实验二(视觉传感器标定)

实验二 视觉传感器标定(实验报告) 【实验目的】 1、了解开源图像处理库OpenCV的结构,掌握OpenCV的基本使用方法。 2、了解开源图像处理库OpenCV的基本模块功能,掌握常用图像处理方法。 3、掌握摄像机标定算法,学会使用…

igraph的layout布局

做图论的社区检测,需要画图显示,用igraph可以进行可视化。 igraph有几个布局,分别如下: layout_with_dh : The Davidson-Harel layout algorithm Place vertices of a graph on the plane, according to the simulat…

113-Linux_安装c/c++开发库及连接mysql数据库

文章目录 一.安装c/c开发库二.连接mysql数据库三.用户的管理与授权 mysql数据库的安装 一.安装c/c开发库 安装开发c/c的库&#xff0c;命令&#xff1a;apt install libmysqlclient-dev 二.连接mysql数据库 #include<stdio.h> #include<mysql/mysql.h>void fun…

Python+Selenium4环境搭建

set集合 怎么把列表种相同的数据和不同的数据取出来 1.把列表转为set集合 2.按照集合的交集 selenium 自动化测试&#xff1a;自动化测试就是通过代码或者是工具模拟人的行为来进行对WEB&#xff08;APP&#xff09;来进行操作。 QTP (HP公司)&#xff1a;以录制回放的模式…

CSS进阶

01-复合选择器 定义&#xff1a;由两个或多个基础选择器&#xff0c;通过不同的方式组合而成。 作用&#xff1a;更准确、更高效的选择目标元素&#xff08;标签&#xff09;。 后代选择器 后代选择器&#xff1a;选中某元素的后代元素。 选择器写法&#xff1a;父选择器 …

学系统集成项目管理工程师(中项)系列19b_成本管理(下)

1. 成本估算 1.1. 编制完成项目活动所需资源的大致成本 1.2. 在设计阶段多做些额外的工作可能减少执行阶段和产品运行时的成本 1.3. 项目估算的准确性随着项目的进展而提高 1.3.1. 【19下选48】 1.4. 针对完成活动所需资源的可能成本进行的量化评估 1.5. 容易被忽视的主要…

华为pbr双出口外线,指定内网单个vlan绑定单个出口外线上网

公司两条外线&#xff0c;vlan 10用nat走上面转发出去上网&#xff0c;vlan 20 走下面那条外线出去nat上网 AR2&#xff1a; interface GigabitEthernet0/0/0 ip address 6.6.6.1 255.255.255.0 interface GigabitEthernet0/0/1 ip address 154.1.2.3 255.255.255.0 interface…

JavaScript通过js的方式来判断一个数奇偶性的代码

以下为通过js的方式来判断一个数奇偶性的程序代码和运行截图 目录 前言 一、通过js的方式来判断一个数奇偶性&#xff08;html部分&#xff09; 1.1 运行流程及思想 1.2 代码段 二、通过js的方式来判断一个数奇偶性&#xff08;js部分&#xff09; 2.1 运行流程及思想 2…

Linux操作系统如何查看CPU型号信息?一条命令搞定

Linux操作系统服务器如何查看CPU处理器信息&#xff1f;使用命令cat /proc/cpuinfo可以查看CPU详细信息&#xff0c;包括CPU核数、逻辑CPU、物理CPU个数、CPU是否启用超线程等&#xff0c;阿里云服务器网分享Linux服务器查看CPU信息命令&#xff1a; 目录 Linux服务器查看CPU…

2023年贵州省职业技能大赛“网络安全” 项目比赛任务书

2023年贵州省职业技能大赛“网络安全” 项目比赛任务书 三、竞赛任务书内容 &#xff08;一&#xff09;拓扑图 &#xff08;二&#xff09;A模块基础设施设置/安全加固&#xff08;200分&#xff09; 一、项目和任务描述&#xff1a; 假定你是某企业的网络安全工程师&…

【Linux】Linux安装Redis(图文解说详细版)

文章目录 前言第一步&#xff0c;下载安装包第二步&#xff0c;上传安装包到/opt下&#xff08;老规矩了&#xff0c;安装包在opt下&#xff09;第三步&#xff0c;解压安装包第四步&#xff0c;编译第五步&#xff0c;安装第六步&#xff0c;配置redis第七步&#xff0c;设置开…

迁移学习

迁移学习 什么是迁移学习 迁移学习【斯坦福21秋季&#xff1a;实用机器学习中文版】 迁移学习&#xff08;Transfer Learning&#xff09;是一种机器学习方法&#xff0c;它通过将一个领域中的知识和经验迁移到另一个相关领域中&#xff0c;来加速和改进新领域的学习和解决问…

“土狗”的季节,meme热潮回归

文/章鱼哥 出品/陀螺财经 meme代币的热度好像又回来了&#xff0c;两周前推出的PEPE创下了历史新高。尽管加密货币市场仍处于漫长熊市中&#xff0c;但人们似乎仍然对风险投资保有兴趣。 meme代币作为基于互联网模因的高波动数字资产&#xff0c;似乎没有太多实用性。它们的价格…

AI仿写软件-仿写文章生成器

AI仿写软件&#xff1a;高效出色的营销利器 作为互联网时代的营销人员&#xff0c;我们不仅需要品牌意识&#xff0c;还必须深谙营销技巧。万恶的时限压力使得我们不得不在有限的时间内输出更多的文本内容&#xff0c;以便吸引更多的关注。那么&#xff0c;如何解决这个问题呢…

基数树RadixTree

转自&#xff1a;基数树RadixTree - 知乎 1. 基数树概述 对于长整型数据的映射&#xff0c;如何解决Hash冲突和Hash表大小的设计是一个很头疼的问题。radix树就是针对这种稀疏的长整型数据查找&#xff0c;能快速且节省空间地完成映射。借助于Radix树&#xff0c;我们可以实现…