JavaScript

最新推荐文章于 2023-08-27 13:03:48 发布
最新推荐文章于 2023-08-27 13:03:48 发布
阅读量304 收藏 3
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Twilight___/article/details/113112670
版权

1.JavaScript概述

1.1 JavaScript是什么？有什么作用？

HTML：就是用来写网页的。
CSS：就是用来美化网页的。

JavaScript：JavaScript式WEB上强大的脚本语言。

脚本语言：无法独立执行。必须嵌入到其他语言中，结合使用。没有编译过程，直接被浏览器解析执行。

作用：控制页面特效展示。

例如：

  • JS可以对HTML元素进行动态控制
  • JS可以对表单项进行校验
  • JS可以控制CSS的样式；

1.2 JavaScript入门案例

1.3 JavaScript的语言特征及编程注意事项

特征：

  • JavaScript无需编译，直接被浏览器解释并执行
  • JavaScript无法单独运行，必须嵌入到HTML代码中运行
  • JavaScript的执行过程由上到下依次执行

注意：

  • JavaScript没有访问系统文件的权限（安全）
  • 由于JavaScript无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链式编程
  • JavaScript和java没有任何直接关系

1.4 JavaScript的组成

在这里插入图片描述

  • ECMAScript（核心）：规定了JS的语法和基本对象。
  • DOM 文档对象模型：处理网页内容的方法和接口
  • BOM 浏览器对象模型：与浏览器交互的方法和接口

1.5 JavaScript的引入方式

1.5.1 内部脚本

在当前页面内部写script标签，script内部即可书写JavaScript代码

格式：

	<script="text/javascript">
		JavaScript的代码
	</script>

示例：

	<script type="text/javascript">
		//JavaScript代码
	</script>

注：script标签理论上可以书写在HTML文件的任意位置

1.5.2 外部引入

在HTML文档中，通过<script src="">引入.js文件

格式：
<script type="text/javascript" src="javascript 文件路径"></script>

示例1：
<script type="text/javascript" src="demo.js"></script>

注：外部引用时script标签内不能有script代码，即使卸了也不会执行。

示例2：

<script type="text/javascript" src="demo.js">
	//这部分代码不会被执行，因为被引入的demo.js代码覆盖
</script>

1.5.3 script标签规范化的放置位置

开发规范规定，script标签的放置位置为：
Body结束标签之前

优点：

  • 保证html展示内容优先加载，最后加载脚本。增强用户体验性

2.JavaScript语法及规则

2.1 注释

  • 单行注释
    //
    Hbulider快捷键 ctrl+/
  • 多行注释
    /* */
    HBuilder快捷键 ctrl+shift+/

2.2 变量

2.2.1 变量简述

变量：标示内存中的一块空间，用于存储数据，且数据是可变的。

变量的声明：
var 变量名; //变量赋予默认值，默认值为undefined（未定义的）

变量的声明和赋值：
var 变量名=值; //变量赋予对应的值

在声明JavaScript变量时，需要遵循以下命名规范：

  • 必须以字母或下划线开头，中间可以是数字、字符或下划线
  • 变量名不能包含空格等符号
  • 不能使用JavaScript关键字作为变量名，如：function
  • JavaScript严格区分大小写

2.2.2 基本数据类型

类似于java中的基本数据类型

  • string 字符串类型。"" 和’'都是字符串。JavaScript中没有单个字符。
  • boolean 布尔类型。
  • number 数字类型。任意数字
  • null 空，一个占位符
  • undefined 未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值

注：因为undefined是从null中派生来的，所以undefined==null

JavaScript区别于java，是弱类型语言，变量的使用不用严格遵循规范，所以一个变量声明好之后，是可以赋予任意类型的值。

通过typeof运算符可以分辨变量值属于哪种基本数据类型
对变量或值调用typeof运算符将返回对应变量或值的类型。

  • 如果变量是一种引用类型或Null类型的，会返回object
    这是因为ECMAScript实现之初的一个bug，null属于基本数据类型，typeof(null) -> object

2.2.3 引用数据类型

引用类型通常叫做类(class)，但在JavaScript中，因为不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象。

标准创建方式：

	var str =new String();
	var str = new String;

2.3 运算符

JavaScript运算符和Java运算符基本一致。
这里我们来寻找不同点进行学习

2.3.1 比较运算符

大体与java中比较运算符相同
除了 == 与 ===

运算符描述
==逻辑等
===全等（值和类型）

== 逻辑等。仅仅对比值
===全等。对比值并且对比类型
如果值和类型都相同，则为true；值和类型有一个不同，则为false

2.3.2 逻辑运算符

JavaScript逻辑运算符没有 & 及 |

2.4 正则对象

2.4.1 RegExp对象的创建方式

  • var reg = RegExp(“表达式”); （开发中基本不用）
  • var reg = /^表达式$/; 直接量（开发中常用）
    直接量中存在边界，即%代表开始， $代表结束
    直接量方式的正则式对象，不是字符串，别用引号

2.4.2 text方法

正则对象.test(string);

用来检验字符串是否匹配正则。
全部字符匹配返回true，由字符不匹配返回false

2.4.3 正则对象使用注意事项

/^表达式$/
只要有无法成立正则的字符存在，即为false。
全部符合为true
检查严格，适用于表单检验

/表达式/
只要有成立正则的字符存在，即为true。
全部不符合为false
检查不严格，适用于字符串查找、替换

2.5 JS数组对象

2.5.1 JS数组的特性

JS数组可以看作Java中的ArrayList集合

  • 数组中的每一个成员没有类型限制，可以存放任意类型
  • 数组的长度可以自动修改

2.5.2 JS数组的四种创建方式

  1. var arr = [1,2,3,“a”,true]; 长度5。
  2. var arr = new Array(); 数组长度默认为0。
  3. var arr = new Array(4);
    数组长度是4，每个元素是undefined。
  4. var arr = new Array(1,2); 创建了一个数组，长度为2，数组元素是1，2

2.5.3 JS数组的常用方法

length设置或返回数组中元素的数目。
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()颠倒数组中元素的顺序。

2.6 全局函数（global）

2.6.1 执行

eval()
计算JavaScript字符串，并把它作为脚本代码来执行。

注：只可以传递原始数据类型string，传递String对象无作用。

2.6.2 编码和解码

URL编码：中文及特殊符号 -> %16进制
URL编码作用：保证数据传递的完整性

encodeURI把字符串编码为URI
decodeURI()解码某个编码的URI

2.6.3 URI和URL的区别

URI是统一资源标识符。标识资源详细名称
URL是统一资源定位器。定位资源的网络位置

资源：可以通过浏览器访问的信息统称为资源。（图片、文本、HTML、CSS等等）

URI标识资源的详细名称，包含资源名。
URL定位资源的网络位置。包含http://

例如：
http://www.baidu.com/ 是URL
/a.html 是URI
http://www.baidu.com/a.html 即时URI也是URL

2.6.4 字符串转数字

parseInt()解析一个字符串并返回一个整数
parseFloat()解析一个字符串并返回一个浮点数。

注：

  • 如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换，仅返回前面正确的转换值（例如：11.5a55，parseInt结果为11，parseFloat结果为11.5）
  • 如果字符串的第一个字符就无法从字面值上转为数字，那么停止转换，返回NaN
    NaN（Not A Number，一个数字类型的标识，表示不是一个正确的数字）

2.7 自定义函数/自定义方法

2.7.1 函数简述及作用

如果一段代码需要被重复编写使用，那么我们为了方便统一编写使用，可以将其封装进一个函数（方法）中。

作用：增强代码的复用性

2.7.2 函数格式

function 方法名(参数列表){
	函数体
}
  • JavaScript函数定义必须用小写的function
  • JavaScript函数无需定义返回值类型，直接在function后面书写方法名；
  • 参数的定义无需使用var关键字，否则报错；
  • JavaScript函数体中，return可以不写，也可以return具体值，或者仅仅写return；

2.7.3 函数使用的注意事项

JavaScript函数调用执行完毕一定由返回值，值及类型根据return决定，如果未return具体值，返回值未undefined；
JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义；
因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常使用；
如果形参未赋值，就使用默认值undefined

2.8 自定义对象

2.8.1 function构造函数

我们知道，JavaScript中的引用数据类型都是对象，而对象在JavaScript中可以用函数来表示。
相当于java中创建某个class类

  • 无形参格式：
    function 对象名(){
    函数体
    }
  • 带参数格式：
    function 对象名(参数列表){
    函数体
    }
  • 带属性的：
    function 对象名(){
    this.属性名1=属性值1;
    this.属性名2=属性值2;
    ……
    }
    this表示当前对象
  • function 对象名(name,age){
    this.name = name;
    this.age = age;
    }
  • 无需定义，自由为对象赋予属性及值
    function Pony(){
    }
    var p = new Pony();
    p.name = “Rarity”;
    p.age = 15;
    alert(p.name + “—” + p.age);

应用场景：适用于对象构建及代码复用

2.8.2 对象直接量

开发中可以用一种简单的方式直接创建自定义的JavaScript对象，这种方式称为“对象直接量”。

格式：
var 对象名 = {属性名1:"属性值1",属性名2:"属性值2"……};

该方式直接创建出实例对象，无需构建函数，无需再new创建实例对象，直接使用即可

应用场景：适用于快速创建实例对象及数据封装

3.BOM对象

3.1 BOM对象简述

3.1.1 BOM对象是什么？有什么作用？

BOM(Browser Object Model)浏览器对象模型
浏览器：IE、火狐、谷歌等
作用：用来执行浏览器的相关操作。（例如：浏览器的地址、弹出消息等）

一般情况下，window代表了BOM对象
window对象是JavaScript的内置对象，使用window对象调用方法时可以省略window不写。

3.2 消息框

3.2.1 alert()

警告框，用来弹出警告消息

注：不同浏览器显示的组件样式不同，这里我们无需关注组件样式。

3.2.2 confirm()

确认框，用于告知用户并收集用户的选择
有返回值，boolean类型
点击确定–> true
点击取消–> false
示例1：
confirm("确认 或者 取消");

3.3 定时器

3.3.1 循环定时器的设置和取消

3.3.1.1 启动循环定时器-setInterval()

循环定时器，调用一次就会创建并循环执行一个定时器。

返回该循环定时器的id

格式：
setInterval(调用方法,毫秒值);

示例：

function run1(){
	alert("我是run1");
}

setInterval("run1()",1000);

可以通过clearInterval(id);来停止循环

练习：两秒后输出一次 “我是run1”

var id;
function run1(){
	alert("我是run1");
	clearInterval(id);
}
id = setInterval("run1()",2000);
3.3.2.1 启动一次性定时器-setTimeout()

一次性定时器，调用一次就会创建并执行一个定时器一次。

返回该一次性定时器的id

格式：
set Timeout(调用方法，毫秒值);

示例：

function run1(){
	alert("我是run1");
}
setTimeout(run1(),1000);

3.4 location对象

location对象包含浏览器 地址栏 的信息。

常用属性：

href设置或返回完整的URL。

设置href属性，浏览器就会跳转到对应的路径。
location.href="https://www.baidu.com";

练习：两秒后跳转到www.baidu.com

function run1(){
	location.href = "http://www.baidu.com";
}
setTimeout(run1,2000)

4. DOM对象

4.1 DOM对象的简述

4.1.1 DOM对象是什么？有什么作用？

DOM(Document Object Model) 文档对象模型
文档：标记型文档（HTML等）

DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象，通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的。

4.1.2 DOM树介绍

<html>
	<head>
		<title>文档标题</title>
	</head>

	<body>
		<a href="">我的链接</a>
		<h1>我的标题</h1>
	</body>
</html>

上述HTML文档会被浏览器由上到下依次加载并解析。
加载到浏览器的内存
就形成了下面的树
在这里插入图片描述
其中：

  • 每个标签会被加载成DOM数上的一个元素节点对象
  • 每个标签的属性会被加载成DOM树上的一个属性节点对象
  • 每个标签的内容体会被加载成DOM树上的一个文本节点对象
  • 整个DOM树，是一个文档节点对象，即DOM对象
  • 一个HTML文档加载到内存中就会形成一个DOM对象

DOM树的特点：

  • 必定会有一个根节点
  • 每个节点都是节点对象
  • 常见的节点关系：父子节点关系
  • 文本节点对象没有子节点—叶子节点
  • 每个节点都有一个父节点，零到多个子节点
  • 只有根节点没有父节点

4.2 获取元素对象的四种方式

在JavaScript中，我们可以通过DOM对象的4种方式获取对应的元素对象：

  • getElementById(); --通过元素ID获取对应元素对象
    可以通过ID获取对应的元素对象，如果找不到，则返回null
  • getElementByName(); --通过元素的name属性获取符合要求的所有元素
    可以通过name属性，获取到元素节点对象数组。
    如果找不到，返回空数组
  • getElementByTagName(); --通过元素的元素名属性获取符合要求的所有元素
  • getElementByClassName(); --通过元素的class属性获取符合要求的所有元素

获取元素节点对象，必须保证元素节点对象被先加载到内存中。

4.3 元素对象常见属性

4.3.1 value

元素对象.value，获取元素对象的value属性值
元素对象.value=属性值 设置元素对象的value属性值。

4.3.2 className

元素对象.className，获取元素对象的class属性值
元素对象.className=属性值 设置元素对象的class属性值

修改元素样式

4.3.3 checked

元素对象.checked，获取元素对象的checked属性值。
元素对象.checkde=属性值 设置元素对象的checked属性值。

注：HTML中checked=“checked”，JavaScript中返回true

修改单选/复选的选中与否

4.3.4 innerHTML

元素对象.innerHTML，获取元素对象的内容提
元素对象.innerHTML=值，设置元素对象的内容体

操作元素的内容体

5.JS事件

5.1 JS事件是什么？有什么作用？

通常鼠标或热键的动作我们称之为事件(Event)
点击、表单提交、值发生改变、鼠标移入、鼠标移出
通过JS事件，我们可以完成页面的指定特效。

5.2 JS事件驱动机制简述

页面上的特效，我们可以理解在JS事件驱动机制下进行。
JS事件驱动机制：

  • 事件源
  • 事件
  • 监听器
  • 注册/绑定监听器

事件源：专门产生事件的组件。

事件：由事件原所产生的动作或者事情。

监听器：专门处理事件源所产生的事件。

注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则调用监听器处理。

5.3 常见JS事件

5.3.1 点击事件（onclick）

点击事件：由鼠标或热键点击元素组件时触发

示例：

		<input type="text" value="点击" onclick="click1()"/>
		<script>
			function click1(){
				alert("点击了");
			}
		</script>

5.3.2 焦点事件（onblur，onfocus）

5.3.2.1 获取焦点事件（onfocus）

焦点：即整个页面的注意力
默认一个正常页面最多仅有一个焦点。

例如：文本框中闪烁的小竖线。

通常焦点也能反映出用户目前的关注点，或者正在操作的组件。

获取焦点事件：当元素组件获取焦点时触发

5.3.2.2 失去焦点事件（onblur）

5.3.3 域内容改变事件（onchange）

域内容改变事件：元素组件的值发生改变时触发

5.3.4 加载完毕事件（onload）

加载完毕事件：元素组件加载完毕时触发。
在这里插入图片描述

5.3.5 表单提交事件（onsubmit）※※※

表单提交事件：表单的提交按钮被点击时触发

主要用于表单校验，如果数据正确即onsubmit取到true，就允许表单提交，如果不正确就阻止表单提交
在这里插入图片描述

5.3.6 键位弹起事件（onkeyup）

键位弹起事件：在组件中输入某些内容时，键盘键位弹起时触发该事件
在这里插入图片描述

5.3.7 常用鼠标事件

5.3.7.1 鼠标移入事件（onmouseover）

鼠标移入事件：鼠标移入某个元素组件时触发

5.3.7.2 鼠标移出事件（onmouse）

在这里插入图片描述

5.4 JS事件的两种绑定方式

5.4.1 元素事件句柄绑定

将事件以元素属性的方式写到标签内部，进而绑定对应函数
在这里插入图片描述
事件句柄绑定方式

  • 优点
    ①开发快捷
    ②传参方便
    ③ 可以绑定多个函数
  • 缺点
    JS和HTML代码高度糅合在一起，不利于多部门的项目开发维护

5.4.2 DOM绑定方式

  • 优点
    使得HTML代码和JS代码完全分离
  • 缺点
    ① 不能传递参数 （已解决：使用匿名函数）
    ② 一个事件只能绑定一个函数 （已解决：匿名函数内部是可以绑定多个函数）

在这里插入图片描述
在这里插入图片描述

RainyRarity
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
javaScript api
11-03
JavaScript API 是一种重要的编程资源，它为开发者提供了与JavaScript语言交互的接口和工具。这个离线版的JavaScript API 指南，以CHM（Compiled Help Manual）格式提供，是开发者学习和查阅JavaScript相关功能和...
JavaScript鼠标移动事件及案例
weixin_67224308的博客
10-17 1万+
于onmouseover相同但mouseenter事件只执行一次。鼠标移动都某个指点的HTML标签上时触发的事件。鼠标从HTML标签上移开时触发的事件。alert("按钮被点击")//被点击两次后弹出弹出框。alert("按钮被点击")//被点击后弹出弹出框。//找到按钮并设置双击击事件。//找到按钮并设置点击事件。鼠标双击时事件处理函数。
JS中的鼠标事件
m0_70185826的博客
07-01 1万+
通过鼠标触发事件，类似用户的行为：mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。 MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。 0代表左键 1代表中键 2代表右键 2. MouseEvent.clientX，MouseEvent.clientY MouseEvent.clientX属性返回鼠标位置相对于浏
前端第二周，Javascript--鼠标事件
Number_sun的博客
08-27 519
console.log('鼠标在元素上 单击（左键）了');console.log('鼠标在元素上 双击（左键）了');console.log('鼠标在元素上 单击（右键）了');console.log('鼠标在元素的范围内 移动');console.log('鼠标在元素上 按下 了');console.log('鼠标在元素上 抬起 了');console.log('鼠标移入了元素范围');console.log('鼠标移出了元素范围');
鼠标移入移出事件，mouseover、mouseenter区别
Programmer555的博客
11-26 7897
javascript鼠标移入移出事件
用js 实现鼠标移动，移入，移出事件
weixin_71439860的博客
08-08 8276
用js 实现鼠标移动，移入，移出事件
JavaScript JavaScript JavaScript
最新发布
06-26
JavaScript JavaScript JavaScript
JavaScript实例大全
12-19
这个压缩包“JavaScript实例大全”显然是一份集合了多种JavaScript相关资源的宝典，包括“JavaScript网页设计300例”、“javascript源码大全”以及“jquery 1.7 中文 api 修正版”。 首先，“JavaScript网页设计300...
JAVASCRIPT HashTable
10-31
JAVASCRIPT HashTable
JS事件之鼠标事件
qq_57215961的博客
05-25 2595
鼠标事件的类型 onclick：单击事件 ondblclick：双击 oncontextmenu：右键菜单 onmouseover：鼠标移入 onmouseout：鼠标移出 onmouseenter：鼠标移入 onmouseleave：鼠标移出 onmousedown：鼠标按下 onmouseup：鼠标抬起 onmousemove：鼠标移动 onmouseover、onmouseout与onmouseenter、onmouseleave 两者都有鼠标移入移出的作用，但是建议使用on
js 鼠标事件_移入移出
热门推荐
随风潜入夜，不白头
04-06 1万+
mouseover（移入） mouseout（移出） mouseover 此事件类型冒泡，可能引起很多头痛的问题。例如，当鼠标指针移出Inner元素，事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会触发绑定的mouseover处理函数。mouseout 此事件类型冒泡，可能引起很多头痛的问题。例如，当鼠标指针移出Inner元素，事件将被发送到Inner元素，然后冒泡到Outer元素 。这可能会触发绑定的mouseout处理函数。 $(".class").mouseover(funct
js鼠标移入移出事件
m0_61902288的博客
08-08 1937
js鼠标移入移出事件。
常见的鼠标事件
hongchen_lian的博客
01-09 2376
常见的鼠标事件 click：单击事件 dblclick：双击事件 mousedown：按下鼠标键时触发 mouseup：释放按下的鼠标键时触发 mousemove：鼠标移动事件 mouseover：移入事件 mouseout：移出事件 mouseenter：移入事件 mouseleave：移出事件 contextmenu：右键事件 mouseover事件和mouseenter事件，都是鼠标进入一个...
js 鼠标移入移出事件
Misnice的博客
03-03 6001
var oFlag = document.getElementById('flag'); var oDiv = document.getElementById('node'); //鼠标移入事件 oDiv.onmouseover = function() { oFlag.style.display = 'block'; } //鼠标移出事件 oDiv.onmouseout = function(...
JS实用总结（VIP典藏版）
慕白Lee的博客
07-21 777
JS简单总结（VIP典藏版） 一、概念 二、JS事件 三、JS 函数 四、JS的组成部分
2、简单的onclick点击事件
菜鸟技术员
01-09 3458
这篇文章讲的是简单的onclick点击事件，后面会有更详细与复杂的讲解与用法。 这个代码实现的效果就是一个简单的弹窗，点击一个按钮，弹出一个alert。看代码： <button onclick="alert('点击显示')">按钮名称</button> <!--按钮上有一个onclick，当按钮onclick时点击时操作的是alert，alert的内容为：点击显示。--> 完整的HTML代码： <!doctype html> <html.
jquery鼠标悬停获取标签的id或者class值
baidu_39586935的博客
08-02 3204
最近在做项目，发现了一个很好用的模块，记录下，希望有需要的人能用到 //鼠标悬浮显示form id $(function () { $("form").hover(function () { var id = $(this).attr("id"); console.log(id); }); }); <form id="${info.work...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值