第二章 JavaScript

2024-01-08 23:22:20

第二章 JavaScript

1.JavaScript介绍

在这里插入图片描述

2.JavaScript与HTML结合使用的第一种方式

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

3.JavaScript与HTML结合使用的第二种方式

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

再写一个就可以使用了
在这里插入图片描述

4.JavaScript的变量和数据类型介绍

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

5.JavaScript的关系运算

其他的< ,> ,<= ,>=,!=与Java中的用法一样
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.JavaScript中的逻辑运算

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

有一个空格就不算是空串了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.JavaScript的数组

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这里本应该是数组越界，但没有报错，且长度变为1
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们也可以在一开始就定义好数组，对后面的遍历也没有影响
在这里插入图片描述

8.函数的第一种定义方式

在这里插入图片描述

函数一定要调用才会执行
在这里插入图片描述
有参函数下面两种写法都是错误的，写明个数即可
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9.函数的第二种定义方式

在这里插入图片描述

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

10.JS中的函数不运行重载

在这里插入图片描述

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

11.隐形参数arguments

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
他类似于数组，所以也可以对它进行遍历操作
在这里插入图片描述
一般我们要传多个参数时，我们就写两个参数，后面再传多个参数也没有影响。
在这里插入图片描述
在这里插入图片描述
假如其中有一个字符串类型
在这里插入图片描述
为了防止这种情况，我们可以做一个判断
在这里插入图片描述

12.Object形式的自定义对象

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

13.花括号形式的自定义对象

在这里插入图片描述

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

14.事件介绍

在这里插入图片描述

15.两种事件注册的介绍

在这里插入图片描述

16.onload事件

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

如果要触发很多事件，一般就往后面写
在这里插入图片描述
如果很多的话，可读性就很差。
所以我们一般将我们要干的事情在外面定义好。
在这里插入图片描述
在这里插入图片描述

上面的是静态的写法，下面我们看看动态的写法。
在这里插入图片描述
在这里插入图片描述

17.onclick事件

在这里插入图片描述
在这里插入图片描述
上面是静态注册，下面是动态注册
在这里插入图片描述
在这里插入图片描述
document表示整个界面
在这里插入图片描述
在这里插入图片描述

18.onblur事件

在这里插入图片描述
我们现在点的这个框子就是一个焦点。
失去焦点，就是我们点击其他地方的时候。
在这里插入图片描述
静态注册
在这里插入图片描述
我们在控制台观察失去焦点事件。
控制台在这里，快捷键是Ctrl+shift+i。
在这里插入图片描述
在这里插入图片描述

动态注册
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

19.onchange事件

静态注册
在这里插入图片描述
在这里插入图片描述
动态注册
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

20.onsubmit事件

静态注册
在这里插入图片描述
在这里插入图片描述
下面我们考虑如果发现不合法，如何阻止提交。
return false可以阻止提交。
在这里插入图片描述
此时发现错误就提交不了了
在这里插入图片描述

动态注册
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
不合法阻止成功
在这里插入图片描述
如果我们不想阻止
改成true即可
在这里插入图片描述

21.document对象概念介绍

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

22.验证用户名是否有效

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

23.正则表达式对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面我们直接alert这个正则表达式,看看它到底什么样子
在这里插入图片描述
下面我们换一个写法,功能是一模一样的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
包含小写字母
在这里插入图片描述
包含大写字母
在这里插入图片描述
包含数字
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

a{3}必须的 连续的 3个a
在这里插入图片描述
多余3个也是true
在这里插入图片描述
在这里插入图片描述
我们发现这里多余5个的时候也还是true
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面我们来解决上面那个问题
在这里插入图片描述
在这里插入图片描述

24.两种常见的验证提示效果

上面这个验证的提示效果很不合理
在这里插入图片描述

一般我们都是用下面这个方法提醒错误的
在这里插入图片描述
innerHTML可以获得起始标签和结束标签之间的内容
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面是另一种验证方法。
合法的话就打钩，不合法的话就打叉。
我们先传入两张图片。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
\是一个转义字符
在这里插入图片描述
在这里插入图片描述

25.getElementsByName方法

ById只会返回一个，第一个。
ByName返回多个。
在这里插入图片描述
我们现在有需求，实现全选或者全不选以及反选
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们用checked表示被选中，一个被选中，显示为true
在这里插入图片描述
在这里插入图片描述

第二没有被选，显示为false
在这里插入图片描述
我们也可以直接改变它的选中状态
在这里插入图片描述
在这里插入图片描述
如果要满足需求，实现全选，遍历即可
在这里插入图片描述
在这里插入图片描述
下面是全不选，改为false即可
在这里插入图片描述

下面为反选
在这里插入图片描述

26.getElementsByTagName方法

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

27.document对象三个查询方法的注意事项

在这里插入图片描述
我下面这种情况就查询不到，因为在执行这个页面的时候，代码是由上往下执行的，
读到alert（…）这句的时候会马上执行，但下面的内容还没有读到。所以不知道btn01是什么。
在这里插入图片描述
如果想要查询到，必须在页面加载完之后，比如我们在页面加载完之后会执行window.onload事件。此时就能查询到。
在这里插入图片描述
下面这种情况，也是可以查询到的
在这里插入图片描述

28.dom对象查询练习

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
1.查找id为bj的节点
2.查找所有li节点
在这里插入图片描述
3.查找name=gender的所有节点
4.查找id为city下的所有节点
在这里插入图片描述
5.返回id为city的所有子节点（获取其长度时会返回9，输入只有4个，
原因是将空白字符也算入其中了）
6.返回id为iPhone的第一个子节点
在这里插入图片描述
7.返回id为bj的父节点
8.返回id为android的前一个兄弟节点
在这里插入图片描述
9.返回id为username的value属性值
10.设置id为username的value属性值
11.返回id为北京的文本值
在这里插入图片描述

下面这种方式也可以去id为bj的文本值
在这里插入图片描述
下面我们观察它有什么区别
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

29.document对象补充说明

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
我们发现上面的运行不会成功
因为语句读到document.body的时候就会立刻执行，但下面的内容< body>却还没有读到
下面做一个调整
在这里插入图片描述
在这里插入图片描述
下面这种方法也行，将文字作为一个节点对象
在这里插入图片描述

文章来源:https://blog.csdn.net/m0_72232218/article/details/135393442
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。