不知道第几周的周记

目录

类型转换

字符串

数值

布尔值

转换

正则表达式

字符

定时器

DOM操作元素

查找HTML元素：

改变HTML输出流：

改变HTML内容：

改变HTML属性：

改变HTML样式：

对事件做出反应：

HTML事件属性：

用HTML DOM 分配事件：

onload和onunload事件

onchange事件

onmouseover和onmouseout事件

onmousedown，onmouseup和onclick事件

补充：

addEventListener()方法

向原元素添加事件句柄

向window对象添加事件句柄

事件冒泡/捕获

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

创建新的HTML元素（节点）-appendChild()

insertBefore() 将新元素添加到开始位置

知识点：

getElementById

getElementsByTagName

getElementByClassName

---

类型转换

将一种数据类型转换为其他类型（主要是字符串，数值，布尔值）

• 6 种不同的数据类型：

string number boolean object function symbol

• 3 种对象类型：

Object Date Array

• 2 个不包含任何值的数据类型：

null undefined

字符串

数值

布尔值

转换

• Boolean() 转为布尔类型

• String() 将数字转换为字符串（可用于任何类型的数字，字母，变量，表达式）toString() 也有同样的效果

  String(100+23) //字符串123 (100+23).toString() //字符串123

  String(false) // 返回 "false" true.toString() // 返回 "true"

  String(new Date()) obj = new Date()；obj.toString()

• Number() 将字符串转换为数字

  Number(false) // 返回 0 d = new Date();Number(d) // 返回 1404568027739 d = new Date();d.getTime() // 返回 1404568027739

  关于number方法

  toExponential() 把对象的值转换为指数计数法 toFixed() 把数字转换为字符串，结果的小数点后有指定位数的数字 toPrecision() 把数字格式化为指定的长度

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

• 关于Date方法

  getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getFullYear() 从 Date 对象以四位数字返回年份。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

• Operator+ 一元运算符+，将变量转换为数字

  var y = "5"; // y 是一个字符串 var x = + y; // x 是一个数字

  var y = "John"; // y 是一个字符串 var x = + y; // x 是一个数字 (NaN)

• 自动转换类型

  自动转换为字符串

正则表达式

var patt = /runoob/i

/runoob/i 是一个正则表达式。

runoob 是一个正则表达式主体 (用于检索)。

i 是一个修饰符 (搜索不区分大小写)。

search() 检索字符串中指定的子字符串（或检索与正则表达式相匹配的子字符串，并返回子串的起始位置）

replace() 在字符串中用一些字符串替换另一些字符串（或替换一个与正则表达式匹配的子串）

eg： 显示匹配的起始位置

var str = "Visit Runoob!"; ​ var n = str.search(/Runoob/i); //结果为6

字符串：str.search("Runoob");

eg： 将字符串中的 Microsoft 替换为 Runoob

var str = document.getElementById("demo").innerHTML;

var txt = str.replace(/microsoft/i,"Runoob");

字符串：str.search("Microsoft","Runoob");

字符

i 执行对大小写不敏感的匹配。 g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m 执行多行匹配。

[abc] 查找方括号之间的任何字符。 [0-9] 查找任何从 0 至 9 的数字。 (x|y) 查找任何以 | 分隔的选项。

\d 查找数字。 \s 查找空白字符。 \b 匹配单词边界。 \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

n+ 匹配任何包含至少一个 n 的字符串。 n* 匹配任何包含零个或多个 n 的字符串。 n? 匹配任何包含零个或一个 n 的字符串。

test() 检测一个字符串是否含有某文本（返回 true/false）

//输出true

exec() 检索字符串的匹配（该函数返回一个数组，存放匹配的结果。未找到匹配则返回null）

//输出e

定时器

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。

• setInterval()

  语法 setInterval(code,millisec,lang)

  code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。 lang 可选。 JScript | VBScript | JavaScript

• setTimeout()

  语法 setTimeout(code,millisec,lang)

  code 必需。要调用的函数后要执行的 JavaScript 代码串。 millisec 必需。在执行代码前需等待的毫秒数。 lang 可选。脚本语言可以是：JScript | VBScript | JavaScript

DOM操作元素

查找HTML元素：

id 标签名 类名

• 查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

var x=document.getElementById("main"); var y=x.getElementsByTagName("p");

• 查找 class="intro" 的元素：

var x=document.getElementsByClassName("intro");

改变HTML输出流：

document.write() 可用于直接向 HTML 输出流写内容

改变HTML内容：

改变<p>元素的内容

改变<h1>元素的内容

改变HTML属性：

改变<img>元素的src属性

改变HTML样式：

改变<p>元素的样式

改变id="a1"的HTML元素的样式

对事件做出反应：

从时间处理器调用一个函数，使点击文本时内容变成"Ooops！"

HTML事件属性：

用HTML DOM 分配事件：

将名为hhh的函数分配给id="a1"的HTML元素

onload和onunload事件

onload / onunload 用户进入/离开页面时被触发 onload 检测访问者的浏览器类型和版本，并基于这些信息来加载网页的正确版本 onload 和 onunload 事件可用于处理 cookie

onchange事件

当用户输入内容时，会调用upperCase()函数

onmouseover和onmouseout事件

onmousedown，onmouseup和onclick事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。

当点击鼠标按钮时，触发 onmousedown 事件

当释放鼠标按钮时，会触发 onmouseup 事件

当完成鼠标点击时，会触发 onclick 事件

eg：

鼠标点击时图片改变

页面完成加载时执行此函数：显示一个提示框

点击输入框，输入框背景变色

鼠标移到文本上，文本变色，移出时也变色

补充：

addEventListener是指为某个元素添加事件监听器。

addEventListener可以为一个元素添加多个不同类型的事件监听器，从而实现对多个事件的监听和响应。通过addEventListener添加的事件监听器，可以通过removeEventListener方法进行移除，从而取消对事件的监听。

addEventListener()方法

语法 element.addEventListener(event, function, useCapture);

向原元素添加事件句柄

引用外部函数

向window对象添加事件句柄

在 window 对象中使用 addEventListener() 方法

当浏览器窗口大小发生变化时，触发“resize”事件句柄

事件冒泡/捕获

eg： addEventListener("click", myfunction, false); 默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

创建新的HTML元素（节点）-appendChild()

var para = document.createElement("p"); var x = document.createTextNode("这是一个新的段落。");

para.appendChild(x); 是JavaScript中DOM操作的一个常见方法。

这里，para 和 x 都是DOM（Document Object Model）节点。

• para 是一个父节点（或者叫做容器节点）。

• x 是你想添加到 para 下的子节点。

appendChild 方法的作用是将一个节点添加到指定父节点的子节点列表的末尾。

insertBefore() 将新元素添加到开始位置

---

---

---

---

知识点：

getElementById

这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。只有一个参数：元素的id值，id值必须写在单引号或双引号里。

document. getElementById(id)

getElementsByTagName

这个方法返回一个对象数组，每个对象分别对应着文档的标签元素。参数是标签名。

element.getElementsByTagName(tag)

getElementByClassName

通过class属性中的类名来访问元素，返回值是一个数组

document. getElementsByClassName(class)