目录
onmousedown,onmouseup和onclick事件
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
类型转换
将一种数据类型转换为其他类型(主要是字符串,数值,布尔值)
-
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)