JavaScript语言

文章目录

  • JavaScript语言
    • JavaScript介绍
    • JavaScript引入
    • 数据类型
    • 节点
    • document方法
    • Element属性
    • 事件

JavaScript语言

JavaScript介绍

JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”,指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序的“脚本”。

JavaScript 是一种嵌入式(embedded)语言。它本身提供的核心语法不算很多

为什么学习 JavaScript:

  • 操控浏览器的能力
  • 广泛的使用领域
  • 易学性

JavaScript与ECMAScript的关系:

ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。在日常场合,这两个词是可以互换的。

变量提升:

JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。

JavaScript引入

嵌入到HTML文件中:

<body><script>var age = 20</script>
</body>

引入本地独立JS文件:

<body><script type="text/javascript" src="./it.js">   		</script>
</body>

引入网络来源文件:

<body><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">	</script>
</body>

数据类型

JavaScript 语言的每一个值,都属于某一种数据类型。JavaScript 的数据类型,共有六种。(ES6 又新增了第七种 Symbol 类型的值和第八种 BigInt类型)

原始类型:

var age = 20;
var name = "it";
var learn = true;

合成类型:

对象:因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器

var user = {name:"it",age:20,learn:true
}

undefined和null,一般将它们看成两个特殊值。

节点

DOM 的最小组成单位叫做节点(node)。

文档的树形结构(DOM 树),就是由各种不同类型的节点组成。

每个节点可以看作是文档树的一片叶子。

节点的类型有七种:

  1. Document:整个文档树的顶层节点
  2. DocumentType:doctype标签
  3. Element:网页的各种HTML标签
  4. Attribute:网页元素的属性(比如class=“right”)
  5. Text:标签之间或标签包含的文本
  6. Comment:注释
  7. DocumentFragment:文档的片段

浏览器原生提供document节点,代表整个文档

document方法

document.getElementsByTagName方法搜索 HTML 标签名,返回符合条件的元素。

它的返回值是一个类似数组对象(HTMLCollection实例),可以实时反映 HTML 文档的变化。

如果没有任何匹配的元素,就返回一个空集。

var paras = document.getElementsByTagName('p');

如果传入*,就可以返回文档中所有 HTML 元素

var allElements = document.getElementsByTagName('*');

document.getElementsByClassName方法返回一个类似数组的对象(HTMLCollection实例),包括了所有class名字符合指定条件的元素,元素的变化实时反映在返回结果中

document.getElementsByName方法用于选择拥有name属性的 HTML 元素(比如<form><radio><img>等),返回一个类似数组的的对象(NodeList实例),因为name属性相同的元素可能不止一个

document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点,则返回null

document.createElement方法用来生成元素节点,并返回该节点

document.createTextNode方法用来生成文本节点(Text实例),并返回该节点。它的参数是文本节点的内容

Element属性

Element对象对应网页的 HTML 元素。

每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点)

Element.id属性返回指定元素的id属性,该属性可读写

// HTML 代码为 <p id="foo">
var p = document.querySelector('p');
p.id // "foo"

className属性用来读写当前元素节点的class属性。它的值是一个字符串,每个class之间用空格分割

// HTML 代码 <div class="one two three" id="myDiv"></div>
var div = document.getElementById('myDiv');
div.className

classList对象有下列方法

  • add():增加一个 class。
  • remove():移除一个 class。
  • contains():检查当前元素是否包含某个 class。
  • toggle():将某个 class 移入或移出当前元素。
var div = document.getElementById('myDiv');div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.toggle('myCssClass'); // 如果 myCssClass 不存在就加入,否则移除
div.classList.contains('myCssClass'); // 返回 true 或者 false

Element.innerHTML属性返回一个字符串,等同于该元素包含的所有 HTML 代码。该属性可读写,常用来设置某个节点的内容。它能改写所有元素节点的内容,包括<HTML><body>元素

el.innerHTML = '';

Element.innerText

innerTextinnerHTML类似,不同的是innerText无法识别元素,会直接渲染成字符串

事件

鼠标事件指与鼠标相关的事件,具体的事件主要有以下一些

  1. click:按下鼠标时触发
  2. dblclick:在同一个元素上双击鼠标时触发
  3. mousedown:按下鼠标键时触发
  4. mouseup:释放按下的鼠标键时触发
  5. mousemove:当鼠标在节点内部移动时触发。当鼠标持续移动时,该事件会连触发。
  6. mouseenter:鼠标进入一个节点时触发,进入子节点不会触发这个事件
  7. mouseleave:鼠标离开一个节点时触发,离开父节点不会触发这个事件
  8. mouseover:鼠标进入一个节点时触发,进入子节点会再一次触发这个事件
  9. mouseout:鼠标离开一个节点时触发,离开父节点也会触发这个事件
  10. wheel:滚动鼠标的滚轮时触发

键盘事件由用户击打键盘触发,主要有keydown、keypress、keyup三个事件

  1. keydown:按下键盘时触发。
  2. keypress:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发。对于有值的键,按下时先触发keydown事件,再触发这个事件。
  3. keyup:松开键盘时触发该事件
username.onkeypress = function(e){console.log("keypress事件");
}

表单事件是在使用表单元素及输入框元素可以监听的一系列事件

  1. input事件
  2. select事件
  3. Change事件
  4. reset事件
  5. submit事件

input事件:

input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框(<input type=checkbox>)或单选框(<input type=radio>),用户改变选项时,也会触发这个事件

input事件的一个特点,就是会连续触发,比如用户每按下一次按键,就会触发一次input事件。

var username = document.getElementById("username");
username.oninput = function(e){console.log(e.target.value);
}

select事件:

select事件当在<input>、<textarea>里面选中文本时触发

// HTML 代码如下
// <input id="test" type="text" value="Select me!" />var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {console.log(e.type); // "select"
}, false);

Change事件:

Change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发

var email = document.getElementById("email");
email.onchange = function(e){console.log(e.target.value);
}

reset 事件/submit 事件:

这两个事件发生在表单对象<form>上,而不是发生在表单的成员上。

reset事件当表单重置(所有表单成员变回默认值)时触发。

submit事件当表单数据向服务器提交时触发。注意,submit事件的发生对象是<form>元素,而不是<button>元素,因为提交的是表单,而不是按钮

<form id="myForm" onsubmit="submitHandle"><button onclick="resetHandle">重置数据</button><button>提交</button>
</form>
var myForm = document.getElementById("myForm")
function resetHandle(){myForm.reset();
}
function submitHandle(){console.log("提交");
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CLIP:万物分类(视觉语言大模型)

本文来着公众号“AI大道理” ​ 论文地址&#xff1a;https://arxiv.org/abs/2103.00020 传统的分类模型需要先验的定义固定的类别&#xff0c;然后经过CNN提取特征&#xff0c;经过softmax进行分类。然而这种模式有个致命的缺点&#xff0c;那就是想加入新的一类就得重新定义…

零基础快速上手STM32开发(手把手保姆级教程)

零基础快速上手STM32开发&#xff08;手把手保姆级教程&#xff09; 1. 前言 作为一名嵌入式工程师&#xff0c;STM32 是必须要学习的一款单片机&#xff0c;同时这款单片机资料足够多&#xff0c;而且比较简单&#xff0c;非常适合初学者入门。 STM32 是一款由 STMicroelec…

双H桥直流马达步进电机驱动芯片SS8833E

由工采网代理的率能SS8833E是一款适用于有刷直流或双极步进电机的集成电机驱动芯片&#xff1b;采用eTSSOP16封装&#xff1b;该器件集成了两个PNMOS H桥和电流调节电路&#xff1b;电机输出电流可以由外部脉宽调制器&#xff08;PWM&#xff09;或内部PWM电流控制器控制。 工…

【Unity】LayoutGroup自动缩放子对象大小

需求&#xff1a; 如果LayoutGroup的子物体太多&#xff0c;超出layoutGroup的范围&#xff0c;则对子物体进行缩小。确保子物体都在LayoutGroup的范围内 代码&#xff1a; [ExecuteInEditMode] [RequireComponent(typeof(HorizontalOrVerticalLayoutGroup))] public class Lay…

【Java 进阶篇】JQuery DOM操作:通用属性操作的绝妙魔法

在前端的舞台上&#xff0c;JQuery犹如一位魔法师&#xff0c;为我们展现了操纵HTML元素的奇妙技巧。而在这个技巧的精妙组成中&#xff0c;通用属性操作是一门绝妙的魔法。在本篇博客中&#xff0c;我们将深入研究JQuery DOM操作中的通用属性操作&#xff0c;揭示这段魔法的神…

11.13 牛客刷题8/10

11.13 信号完整性 指针地址 的加减&#xff0c;注意 最后转为16进制

前端食堂技术周刊第 104 期:Angular v17、GPTs、Vue vapor mode、Svelte Flow、Bundler 的设计取舍

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;金奖乳鸽 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来看下…

leetCode 25.K 个一组翻转链表

给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。k 是一个正整数&#xff0c;它的值小于 或 等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。你不能只是单纯的改变节点内部的值&a…

【PIE-Engine 数据资源】全球250米LAI产品

文章目录 一、 简介二、描述三、波段四、示例代码参考资料 一、 简介 数据名称全球250米LAI产品时间范围2015年空间范围全球数据来源北京师范大学肖志强教授团队代码片段var images pie.ImageCollection(“BNU/LAI/GLOBAL-250”) 二、描述 全球 250 米叶面指数产品由北京师范…

本地PHP搭建简单Imagewheel私人云图床,在外远程访问——“cpolar内网穿透”

文章目录 1.前言2. Imagewheel网站搭建2.1. Imagewheel下载和安装2.2. Imagewheel网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar临时数据隧道3.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测…

产品化的GPT,能否为“百模大战”照亮未来?

这两天&#xff0c;AI圈都处在一种莫名的震撼感当中。 北京时间 11月7日&#xff0c;OpenAI 举办了首次DevDay开发者日活动。活动现场发布了非常多内容&#xff0c;其中有一些按部就班的&#xff0c;比如技术上更新了最新版本的GPT-4 Turbo。也有一些让从业者目瞪口呆&#xff…

大数据之LibrA数据库系统告警处理(ALM-12035 恢复任务失败后数据状态未知)

告警解释 执行恢复任务失败后&#xff0c;系统会自动回滚&#xff0c;如果回滚失败&#xff0c;可能会导致数据丢失等问题&#xff0c;如果该情况出现&#xff0c;则上报告警&#xff0c;如果下一次该任务恢复成功&#xff0c;则恢复告警。 告警属性 告警ID 告警级别 可自动…

Excel表列名称

题意&#xff1a; 给你一个整数 columnNumber &#xff0c;返回它在 Excel 表中相对应的列名称。 例如&#xff1a; A -> 1 B -> 2 C -> 3 … Z -> 26 AA -> 27 AB -> 28 … 示例 1&#xff1a; 输入&#xff1a; columnNumber 1 输出&#xff1a; “A”…

高速高精运动控制,富唯智能AI边缘控制器助力自动化行业变革

随着工业大数据时代的到来&#xff0c;传统控制与决策方式无法满足现代数字化工厂对工业大数据分析与决策的需求&#xff0c;AI边缘控制器赋能现代化智慧工厂&#xff0c;实现工业智造与行业变革。 富唯智能AI边缘控制器&#xff0c;基于x86架构的IPC形态产品&#xff0c;通过…

如何进行前后端交互

引言 在 Web 开发中&#xff0c;前端与后端的交互是至关重要的。前端负责页面展示和用户交互&#xff0c;后端处理业务逻辑和数据存储。为了实现前后端的交互&#xff0c;我们需要使用合适的方式来进行数据传输和通信。本文将介绍如何进行前后端交互&#xff0c;并提供代码示例…

python爬虫hook定位技巧、反调试技巧、常用辅助工具

一、浏览器调试面板介绍 二、hook定位、反调试 Hook 是一种钩子技术&#xff0c;在系统没有调用函数之前&#xff0c;钩子程序就先得到控制权&#xff0c;这时钩子函数既可以加工处理&#xff08;改变&#xff09;该函数的执行行为&#xff0c;也可以强制结束消息的传递。简单…

视觉大模型DINOv2:自我监督学习的新领域

1 DINOv2 1.1 DINOv2特点 前段时间&#xff0c;Meta AI 高调发布了 Segment Anything&#xff08;SAM&#xff09;&#xff0c;SAM 以交互式方式快速生成 Mask&#xff0c;并可以对从未训练过的图片进行精准分割&#xff0c;可以根据文字提示或使用者点击进而圈出图像中的特定…

AISchedule(3):基础生成表格

<!DOCTYPE html> <html> <head><meta charset"utf-8"><title>事件列表</title><!-- 加载样式表 --><style>/* 基础样式 */body {background: linear-gradient(to bottom, #f2f2f2, #e0e0e0);font-family: Helvetica…

C++ 字符串学习资料

C 字符串学习资料 目录 什么是字符串&#xff1f;字符串的声明和初始化字符串的常见操作字符串的输入和输出字符串的比较和连接字符串的搜索和替换字符串的转换和子串提取 什么是字符串&#xff1f; 在 C 中&#xff0c;字符串是由字符组成的序列&#xff0c;用于表示文本数…

【Git】第四篇:基本操作(理解工作区、暂存区、版本库)

Git 工作区、暂存区和版本库 工作区&#xff1a;就是我们创建的本地仓库所在的目录暂存区&#xff1a; stage或index&#xff0c;一般放在.git(可隐藏文件)目录下的index文件&#xff08;.git/index&#xff09;中&#xff0c;所以我们把暂存区有时候也叫做索引&#xff08;in…