DOM知识点大盘点（一）

DOM 事件基础

DOM 事件基础

1、概述：
JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。

诞生于1995年，当时的主要目的是验证表单的数据是否合法。

JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。

js组成部分：

（1）核心（ECMAScript）：这一部分主要是js的基本语法。

（2）BOM：Brower Object Model（浏览器对象模型），主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

（3）DOM：Document Object Model（文档对象模型），此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（增删改查）

2、特点：
交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）
3、和Java区别：

4、作用
avaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比如： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

在目前学习阶段只要记住最常用的二个：（1）运态修改html及css代码（2）验证表单

5、书写位置
5.1、内嵌式：

理论上js可以书写在页面的任意位置。

5.2、外链式：

首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。

5.3、行内式：

直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。 onclick单击事件

点我呀! 6、注释：单行注释： // 注释语句快捷键ctrl+/ 多行注释： /* 注释语句 */ 快捷键ctrl+shift+/ 注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！ 7、数据类型： Js中的数据类型：

数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefined
对比java中的数据类型：

整数：byte short int long
小数：float double
字符：char
布尔：boolean
字符串：String
8、变量：
8.1、定义：就是存放数据的、内疗可以存储任意数据

8.2、声明变量：

var 变量名称 = 存储的数据; (variable 变量)
8.3、变量命名规范：

只能由字母、数字、_（下划线）、$（美元符号）组成。
不能以数字开头。
命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。
js是弱类型语言，不重视类型的定义，但js会根据为变量赋值的情况自定判断该变量是何种类型：

数值型：var i = 1; var d = 2.35;
字符串：var str = “用心学习”;
布尔型：var b = true;
对比Java:java是强类型的语言，注重类型的定义，Java定义类型如下：

整型：int i = 1;
浮点型：double d = 2.35;
字符串：String str = “用心学习”;
布尔型：boolean b = true;
总结：js中变量的定义。只要加一个var就行。java则使用什么类型的变量就要定义什么类型的。

9、检测数据类型：
typeof(value); 或者typeof value; 返回这个变量的类型.
说明 : 同一个变量, 可以进行不同类型的数据赋值.

10、算术运算符

/ % ++ –
注意：

由于js中的小数和整数都是number类型，不存在类似整数除以整数还是整数的结论。
字符串和其他的数据使用+号运算，会连接成一个新的字符串。
字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算
，否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number

11、关系（比较）运算符

  >=        <        <=      !=

== 等于（只比较内容） === 恒等于（比较内容的同时还要比较数据类型）
注意：关系运算符返回的结果只有两个：true / false

12、逻辑运算符
&& 与 true&&false ====>false
|| 或 true||false ====>true
！非 !true ====>false
false（理解）：false, 0, null, undefined
true（理解）：true, 非0, 非null, 非undefined

针对 && 顺口溜: 找第一个出现的假值. (一假即假)
针对 || 顺口溜: 找第一个出现的真值. (一真即真)
演示一：

演示二:

13、三元运算符：
条件？表达式1：表达式2
如果条件为true，返回表达式1的结果
如果条件为false，返回表达式2的结果
演示：

14、if条件语句
这个和Java中if语句一样。

演示：

15、switch分支结构
这个和java中switch结构一样。只是Java中表达式为：常量整型（去long）、字符、字符串

演示：

16、循环结构 while、do-while. for;
while(循环条件){循环体;}
do{循环体;}while(循环条件);
for(循环变量赋初值；循环条件；循环变量增值){循环语句;}
console.log（…）; 以日志的形式在控制台输出结果！
演示：

18、自定义函数
函数是命名的独立的语句段，这个语句段可以被当作一个整体来引用和执行：

格式：

function 函数名(形式参数){函数体}
调用函数：函数名(实际参数);
18.1、函数只有被调用后才会执行

18.2、如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型

18.3、如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可

18.4、js中出现二个重名的函数名、后者会把前面的覆盖掉

对比java、java有重载（同名不同参）、重写（同名同参同返回值类型、方法体不一样）

演示：

会显示二次下面的图片：

19、匿名函数
匿名函数是没有名字的函数

function(形式参数){函数体}
调用方式：将匿名函数赋值给一个变量，通过变量名调用函数
定义函数并赋值给变量：var fn = function(形式参数){函数体}
调用函数：fn(实际参数);
演示：

20、案例-轮播图
说明1 : script 标签需要放在 body 标签之后.

说明2 : window.setInterval(“字符串函数名称()”, 时间毫秒数);

说明3 : window.setInterval(函数名称, 时间毫秒数);

说明4 : window.setInterval(匿名函数, 时间毫秒数); 推荐使用

轮播图

<style>div {width: 80%;margin: 50px auto;}img {width: 100%;}</style>

实现一：

实现二：

21、js事件
21.1、事件概述：

事件三要素：

事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签
事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
执行指令：事件触发后需要执行的代码，一般使用函数进行封装
语法格式：事件源.事件类型=执行指令
21.2、常用的事件：

案例：

事件

<script>// 窗口 : window 对象提供了一个事件类型  onload 页面加载完成事件.// 事件源 : window    事件类型 : 页面加载完成事件 (onload)  执行指令: 就是赋值的 function 函数.window.onload = function () {// 获取页面的 btn 按钮var btn = document.getElementById("btn");// alert(btn);// 给 btn 按钮绑定一个事件 (单击事件 onclick)// 事件源 : btn按钮    事件类型 : 单击事件 (onclick)  执行指令: 就是赋值的 function 函数.btn.onclick = function () {alert("恭喜你, 中了 500 万!");}}</script>

按钮

==============

普歌：DOM知识点大盘点（一）相关推荐

品质管理与java_质量管理知识点大盘点
一.内容提要: 1.5W3H 2.8D/5C报告 3.QC 旧七大手法 4.QC 新七大手法 5.ISO/TS16949 五大核心手册 6.10S/五常法 7.7M1E 8.SPC八大判异准则/三大判 ...
质量管理知识点大盘点（之一）
一.内容提要: 1.5W3H 2.8D/5C报告 3.QC 旧七大手法 4.QC 新七大手法 5.ISO/TS16949 五大核心手册 6.10S/五常法 7.7M1E 8.SPC八大判异准则/三大判 ...
质量管理知识点大盘点（之二）
(2)五常法五常法是用来维持质量环境的一种技术,西方国家称5S.香港人称为五常法,由于语文需要,故翻译了五个英文字,即Structurise, Systematise, Sanitise, Stan ...
数据加密技术知识点大盘点
一. 什么是数据加密? 信息化时代,信息化本身就是一把双刃剑,一方面它为我们的生产.生活带来好处,另一方面,信息泄露也会给我们带来极大的威胁.所以,客观上,必须有强有力的安全措施,防止机密数据被窃取或 ...
java赵云主角兵器谱游戏_完美武将：赵云兵器大盘点
完美武将:赵云兵器大盘点赵云的枪曾有三个名字正史中并没有明确记载赵云所用兵器的种类,但我们可以从<云别传>中对汉水之战的描写推断一番. 建安二十四年(219年)三月,曹操为夏侯渊报仇, ...
大盘点|基于RGB图像下的机器人抓取
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达前言近期读取了一些最新基于RGB图像下的机器人抓取论文,在这里分享下思路. 1.Optimizing ...
ECCV 2020 论文大盘点-视频理解与分类篇
继上文盘点的动作检测与识别篇论文,今日继续盘点与之息息相关的论文:视频分类(Video Classification)与视频理解(Video Understanding)类. 下载包含这些论文的 EC ...
ECCV 2020 论文大盘点-图像与视频分割篇
分割是ECCV 2020 中的热门关键词,前文已经总结了: ECCV 2020 论文大盘点-语义分割篇 ECCV 2020 论文大盘点-实例分割篇但"分割"本身的内涵很丰富,还包 ...
ECCV 2020 论文大盘点-3D人体姿态估计篇
本文盘点ECCV 2020 中所有与3D姿态估计(3D Human Pose Estimation)相关的论文,总计 14 篇,其中一篇Oral 论文,7 篇已经或者将开源代码. 下载包含这些论文的 ...

普歌：DOM知识点大盘点（一）

DOM知识点大盘点（一）

DOM 事件基础

普歌：DOM知识点大盘点（一）相关推荐

最新文章

热门文章