-
变量：通过var来申明
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
Document 对象：每个载入浏览器的 HTML 文档都会成为 Document对象。（Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。）
*获取元素：
| 方法 | 获取内容 | 备注 |
|---|---|---|
| getElementById | id | 目标id |
| getElementsByTagName | 标签 | 数组 |
- js事件：
| 属性 | 当以下情况发生时，出现此事件 | FF | N | IE |
|---|---|---|---|---|
| onabort | 图像加载被中断 | 1 | 3 | 4 |
| onblur | 元素失去焦点 | 1 | 2 | 3 |
| onchange | 用户改变域的内容 | 1 | 2 | 3 |
| onclick | 鼠标点击某个对象 | 1 | 2 | 3 |
| ondblclick | 鼠标双击某个对象 | 1 | 4 | 4 |
| onerror | 当加载文档或图像时发生某个错误 | 1 | 3 | 4 |
| onfocus | 元素获得焦点 | 1 | 2 | 3 |
| onkeydown | 某个键盘的键被按下 | 1 | 4 | 3 |
| onkeypress | 某个键盘的键被按下或按住 | 1 | 4 | 3 |
| onkeyup | 某个键盘的键被松开 | 1 | 4 | 3 |
| onload | 某个页面或图像被完成加载 | 1 | 2 | 3 |
| onmousedown | 某个鼠标按键被按下 | 1 | 4 | 4 |
| onmousemove | 鼠标被移动 | 1 | 6 | 3 |
| onmouseout | 鼠标从某元素移开 | 1 | 4 | 4 |
| onmouseover | 鼠标被移到某元素之上 | 1 | 2 | 3 |
| onmouseup | 某个鼠标按键被松开 | 1 | 4 | 4 |
| onreset | 重置按钮被点击 | 1 | 3 | 4 |
| onresize | 窗口或框架被调整尺寸 | 1 | 4 | 4 |
| onselect | 文本被选定 | 1 | 2 | 3 |
| onsubmit | 提交按钮被点击 | 1 | 2 | 3 |
| onunload | 用户退出页面 | 1 | 2 | 3 |
事件例程：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#control{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: yellow;
}
</style>
</head>
<body>
<input type="button" value="100px" id="bt1">
<input type="button" value="200px" id="bt2">
<input type="button" value="300px" id="bt3">
<div id="control"></div>
</body>
</html>
<script>
//获取元素
var bt1 = document.getElementById("bt1");
var bt2 = document.getElementById("bt2");
var bt3 = document.getElementById("bt3");
var control = document.getElementById("control");
bt1.onclick = function () {
control.style.width ='100px';
control.style.height = "100px";
}
bt2.onclick = function () {
control.style.width ='200px';
control.style.height = "200px";
}
bt3.onclick = function () {
control.style.width ='300px';
control.style.height = "300px";
}
</script>
100px.png
200px.png
300px.png
- js I/O:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="text">
<input type="button" id="button" value="按钮">
</body>
</html>
<script>
var text = document.getElementById("text");
var button = document.getElementById("button");
button.onclick = function () {
alert(text.value);
}
</script>
js学习I/O操作
- innerHTML：
对象.innerHTML = "字符串"；
button.onclick = function () {
// alert(text.value);
div.innerHTML += '<div>'+text.value+'</div>';
}
className:要给HTML标签增加类属性，js中使用 className，因为在js中class关键字已被占用。
在js属性操作中，不允许出现“-”,使用驼峰式命名代替：background-color -> backgroundColor
匿名函数/命名函数：function（）｛｝/function fn(){}
无论从页面还是标签中获取到的内容全是字符串类型
this：
1.事件调用时，this指事件前的对象；
2.直接调用时，this指Window对象；-
js内置函数：
-
数值方法
数值对象仅包含了几个任何对象均定义的默认方法
方法 描述 constructor() 返回创建该对象实例的函数。默认是数值对象。 toExponential() 强制将数值以指数形式显示。 toFixed() 可把 Number 四舍五入为指定小数位数的数字。 toLocaleString() 以字符串的形式返回当前对象的值。该字符串适用于宿主环境的当前区域设置。 toPrecision() 定义显示一个数多少位数（包括位小数的左和右） toString() 返回该数值的字符串格式 valueOf() 返回数值 -
布尔方法
如下为相关方法及描述的列表：
方法 描述 toSource() 返回一个包含布尔对象的源字符串;可以使用这个字符串创建一个等价的对象。 toString() 按照布尔结果返回“true”或 “fales”。 valueOf() 返回布尔对象的原始值。 -
字符串方法
如下为相关方法及描述的列表：
方法 描述 charAt() 返回指定位置的字符。 charCodeAt() 返回指定位置字符的数值。 concat() 返回布尔对象的原始值。 indexOf() 返回匹配子字符串第一次出现的位置，如果不存在就返回-1。 lastIndexOf() 返回匹配子字符串最后一次出现的位置，如果不存在就返回-1。 localeCompare() 比较两个字符串,并返回以数字形式表示的比较结果。 length() 返回字符串的长度。 match() 用于匹配正则表达式。 replace() 通过与正则表达式找到子串位置，并替换为新指定的字符串。 search() 执行与一个正则表达式进行的搜索。 slice() 提取并返回一个子串。 split() 将字符串分割成多个子串，并存储进字符串数组。 substr() 返回字符串中指定位置，指定长度的子串。 toLocaleLowerCase() 大写字符转为小写，同时尊重当前语言环境。 toLocaleUpperCase() 小写字符转为大写，同时尊重当前语言环境。 toLowerCase() 大写字符转为小写。 toString() 返回表示该对象的一个字符串。 toUpperCase() 小写字符转为大写。 valueOf() 返回指定对象的原始数值。 -
-
HTML字符串格式化工具
方法 描述 anchor() 创建一个HTML锚作为一个超文本的目标。 big() 创建一个以“大”字体表示的字符串，好比置于标签中一样。 blink() 创建一个闪烁的字符串，好比置于标签中一样。 bold() 创建一个粗体显示的字符串，好比置于标签中一样。 fixed() 创建一个打字机字体显示的字符串，好比置于标签中一样。 fontcolor() 创建一个特定字体颜色显示的字符串，好比置于标签中一样。 fontsize() 创建一个特定字体大小显示的字符串，好比置于标签中一样。 italics() 创建一个斜体显示的字符串，好比置于标签中一样。 link() 创建HTML超级链接。 small() 创建一个小字体显示的字符串，好比置于标签中一样。 strike() 创建一个加了删除线显示的字符串，好比置于标签中一样。 sub() 以下标的方式显示，好比置于标签中一样。 sup() 以上标的方式显示，好比置于标签中一样。 -
数组方法
如下为相关方法及描述的列表：
方法 描述 concat() 返回两个数据经过联接后的数组。 every() 如何数组内的元素均满足某测试函数，那么就返回true。 filter() 原来的数组中能过通过过滤器的元素组成一个新的数组返回。 forEach() 调用一个函数来处理数组中的每个元素。 indexOf() 返回与指定元素相匹配的第一个位置，如果不存在就返回-1 join() 连接数组中所有的元素，返回一个字符串 lastIndexOf() 返回与指定元素相匹配的最后一个位置，如果不存在就返回-1。 map() 调用一个函数处理数组中的每一个元素，将生成的结果组成一个新的数组，并返回 pop() 返回数组中的最后一个元素，并删除。 push() 在数组的最后增加一个元素，并返回新数组的长度 reduce() 对数组中的所有元素（从左到右）调用指定的回调函数。 该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。 reduceRight() 对数组中的所有元素（从右到左）调用指定的回调函数。 该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。 reverse() 反转数组元素的顺序——第一个成为最后一个,最后成为第一。 shift() 删除数组的第一个元素并返回。 slice() 提取一段数组并返回一个新的数组 some() 如果存在一个元素满足所提供的测试函数，就返回true。 toSource() 代表一个对象的源代码。 sort() 对数组中的元素排序。 splice() 增删数组中的元素。 toString() 返回一个表示数组及其元素的字符串。 unshift() 在数组的首部添加新的元素，并且返回新数组的长度 -
时期方法
如下为相关方法及描述的列表：
方法 描述 Date() 返回今天的日期及时间。 getDate() 按照本地模式返回指定日期是哪日。 getDay() 按照本地模式返回指定日期是周几。 getFullYear() 按照本地模式返回指定日期是哪一年。 getMilliseconds() 按照本地模式返回指定日期是几毫秒。 getMinutes() 按照本地模式返回指定日期是几分。 getMonth() 按照本地模式返回指定日期的月份。 getSeconds() 按照本地模式返回指定日期是几秒。 getTime() 按照本地模式当前的格林威治时间。 getTimezoneOffset() 以分钟为单位返回时间偏差。 getUTCDate() 按照世界统一时间返回指定日期是几号。 getUTCDay() 按照世界统一时间返回指定日期是周几。 getUTCFullYear() 按照世界统一时间返回指定日的年份。 getUTCHours() 按照世界统一时间返回指定日期是几时。 getUTCMilliseconds() 按照世界统一时间返回指定日期的毫秒数。 getUTCMinutes() 按照世界统一时间返回指定日期的分钟数。 getUTCMonth() 按照世界统一时间返回指定日期的月份。 getUTCSeconds() 按照世界统一时间返回指定日期的秒数。 setDate() 按照本地模式设置日期。 setFullYear() 按照本地模式设置年份。 setHours() 按照本地模式设置小时。 setMilliseconds() 按照本地模式设置毫秒数。 setMinutes() 按照本地模式设置分钟数。 setMonth() 按照本地模式设置月份。 setSeconds() 按照本地模式设置秒数。 setTime() 按照格林威治格式设置毫秒数。 setUTCDate() 按照世界统一时间设置日期。 setUTCFullYear() 按照世界统一时间设置年份。 setUTCHours() 按照世界统一时间设置小时数。 setUTCMilliseconds() 按照世界统一时间设置毫秒数。 setUTCMinutes() 按照世界统一时间设置分钟数。 setUTCMonth() 按照世界统一时间设置月份。 setUTCSeconds() 按照世界统一时间设置秒数。 toDateString() 返回日期的字符串。 toLocaleDateString() 按照本地模式，返回日期的字符串。 toLocaleFormat() 使用格式字符串，将日期转换为一个字符串。 toLocaleString() 使用当前语言环境的约定将日期转换为一个字符串。 toLocaleTimeString() 返回日期的“时间”部分作为一个字符串,使用当前语言环境的约定。 toSource() 返回一个字符串代表一个等价的日期对象的来源,您可以使用这个值来创建一个新的对象。 toString() 返回一个字符串代表指定的日期对象。 toTimeString() 返回日期的“时间”部分以字符串形式。 toUTCString() 使用通用时间约定，将日期转换为一个字符串。 valueOf() 返回日期对象的原始值。 -
日期静态方法
如下为相关方法及描述的列表：
方法 描述 Date.parse( ) 解析并返回日期和时间的字符串表示的内部毫秒表示日期。 Date.UTC( ) 返回指定的毫秒表示UTC日期和时间。 -
数学方法
如下为相关方法及描述的列表：
方法 描述 abs() 返回数值的绝对值。 acos() 返回一个数值的arccos值。 asin() 返回一个数值的arcsin值。 atan() 返回一个数值的arctan值。 ceil() 返回大于或等于整数最小的一个数字。 cos() 返回一个数值的cos值。 exp() 返回指数。 floor() 返回小于等于一个数的最大数。 log() 返回一个数值以e为底的对数。 max() 返回最大值。 min() 返回最小值。 pow() 返回以e为底的幂。 random() 返回0和1之间的一个伪随机数。 round() 返回四舍五入后的值。 sin() 返回sin值。 sqrt() 返回一个整数的平方根。 tan() 返回一个数值的tan值。 toSource() 返回字符串“Manth”。 -
正则表达式方法
如下为相关方法及描述的列表：
方法 描述 exec() 执行一个字符串的搜索匹配。 test() 测试匹配的字符串参数。 toSource（） 返回一个对象文字代表指定的对象;您可以使用这个值来创建一个新的对象。 toString（） 返回一个字符串代表指定的对象。
