什么是JavaScript?
-
JavaScript是运行在客户端的解释性脚本语言
客户端是浏览器(IE、Firefox、Chrome、Safari、Opera)
编译型：
将程序的源代码编译成二进制机器语言，
形成编译文件(.dll或.exe)
以后在执行时可以直接调用编译的结果
.dll—>Dynamic Link Library优点：一次编译，多次执行
解释型：
在每次执行时都需要进行编译，执行的过程；
而且需要编译器进行编译、执行的操作
解释性脚本是指程序语言的一种执行方式； -
JavaScript与java之间不存在任何关系
-
JavaScript最早由网景公司在其Netscape浏览器中推出
Microsoft在其IE浏览器推出JScript与其抗衡.
欧洲计算机制造商协会(ECMA)在借鉴JavaScript1.5的基础上推出ECMAScript,
从而成为所有脚本语言的标准.ECMAScript(ES)最新的版本为ECMAScript-6(简称ES6)
JavaScript的语法结构
<script></sctipt>
第一步：创建js文件并且写入相关的代码
第二步：在网页文件内调用相关的js文件
说明：
- JS严格区分大小写
- 每行JS代码必须以分号结尾
- JavaScript文件的扩展名为.js
- 为什么要采用css文件合并/js文件合并：
减少HTTP请求次数，减轻服务器请求压力 - 如何实现css文件/js文件合并：
前端框架(如天猫的kissy)
JavaScript变量(Varaible)
-
变量
变量是指存储在计算机内存中有名称的信息，
其值在程序运行期间可以发生变化 -
声明变量
var 变量名称;
var 变量名称=值;
-
变量名称的命名规则：
- 变量名称必须以字母或下划线开头，包含字母、数字、下划线
- 变量名称禁止与系统关键字相同
- 变量名称必须遵守“驼峰标记法”
- 变量名称“必须”含义明确
-
系统关键字：
var、if、else、switch、case、break、
default、for、while、function -
ECMAScript关键字：
class、float、boolean、object、extends、
public、protected、private
- 数据类型
-
字符型(string)
后面必须用双引号或单引号括起来
转义符：
\n换行 \r回车 \t水平制表符 \v垂直制表符 \f换页(走纸)
----以上成为非打印字符(打印机打印不出来的)----
\反斜线 '单引号 ""双引号 -
数值/字型(number)
包括整形和浮点型，可以带有符号位
可以存储八进制、十进制、十六进制的数字八进制的表示方法为0[0-7]+
十六进制的表示方法为0[x|X][0-9a-fA-F]+
(以0开头,正则表达式的写法,+至少一个) -
布尔类型(boolean)
只能存储true或false -
未定义(underfined)
以下变量的值为underfined- 声明但没有赋值的变量
var n;
console.log(typeof(n));
// 值为 undefined(空), 类型是undefined - 声明但赋值为undefined的变量
var p = undefined;
console.log(p );//值是undefined
console.log(typeof( p));//数据类型是undefined - 引用对象不存在的属性
var obj={};
console.log(typeof(obj.username));
//username不存在
在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。 - 声明但没有赋值的变量
-
对象(obj)
属性与方法的集合体
格式：
{
“属性名称”:值，
…
方法名称:function([参数]){
…
}
}
示例：
var obj={
'id':1,
'username':'王五',
say:function(sth){
return '他说:'+sth;
}
};
console.log('用户ID:'+obj.id);
console.log('用户名:'+obj.username);
console.log(obj.say('大家好，我是xxx'));
- null(空对象)
其作用是为了断开继承链(原型链)
示例：
var n = null;
console.log(n);//值是null
console.log(typeof(n));//数据类型是object
// 值为 null(空), 但类型为对象
- function(自定义的函数)
可以重复执行的代码段
示例：
<script src='common.js'></script>
<script>
//调用自定义函数
console.log(add(3,7));
console.log(add(5,12));
console.log(typeof(add));//数据类型是function
注意:typeof里的add不能加引号，不然成了字符串
add后面不能加括号add(),这样是错的!!!
</script>
// 在common.js文件里面声明这个函数
//声明自定义函数
function add(x,y)
{
return x+y;
}
注意：
通常在外部的js文件里写函数，这样可以多次调用
运算符
-
运算符：+(字符串的拼接)
-
数学运算符：+(正号) -(负号) * / %(取模取余) + -
-
比较运算符：>、>=、==(相等) !=(不等)、===(全等)、!==(不全等)、<=、<
全等：1.值相等、2.数据类型相同
注意：
console.log(2=='2');//true值相同
console.log(2==='2');//false值相同但数据类型不同`
console.log(undefined==null);//true
console.log(undefined===null);//false数据类型不同
null 和 undefined 的值相等，但类型不等：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
- 逻辑运算符：！、&&、||
短路现象：
在进行&&或||运算符时，只有第一个表达式的值可以
确定整个表达式结果时，后续表达式将忽略执行
示例：
var i = 2;
var m = 1;
console.log(i>2 || ++m);// true
console.log(i);// 2
console.log(m);// 1 因为i>2或运算发生了短路现象，后面的++m忽略执行
-
自增/自减运算符
i++、i–后缀形式：先使用，后加减
++i、–i前缀形式：先加减，后使用 -
赋值运算符：
=、+=、-=、*=、/=、%= -
其他划分：
按参加运算的操作数的数量来划分：
单目运算符：只有一个操作数，如负数(-),逻辑非(!)
双目运算符：有两个操作数，如加号(+),大于(>)等等
三目/元运算符：expression?value1:value2
表达式为真返回1,表达式为假返回2
如：var p=m>2?5:3
<script>
var m = 7;
if(m>=2){
var p = 5;
}
else{
var p = 3;
}
console.log(p);
//简化成
var m = 7;
var p = m>=2 ? 5 : 3;
console.log(p);
</script>
运算符的优先级
一、二、三、赋值(123指单目/双目/三目运算符)
算数、比较、逻辑
- if语句
示例：
//true为女,false为男
var sex=false;
if(sex){
console.log('男');
}else{
console.log('女');
}
- switch语句
示例：
switch(expression){
case 值1:
...
break;
case 值2:
...
break;
case N:
...
break;
default:
...
break;
}
说明：
-
if语句的条件表达式只能为布尔类型(可能存在数据类型的自动转换)
switch语句的表达式可以为任意数据类型(布尔除外) -
if语句每次执行时都将对变量进行取值操作；
而switch只进行一次取值操作 -
switch语句进行的是全等运算!!!
循环语句
-
for语句
for(expr1;expr2;expr3){
…;(语句块后面注意加分号)
}说明：
expr1，在循环之前无条件执行一次，一般用于变量初始化；
expr2，在循环前执行一次，以判断能否进入循环体；
expr3，在循环后执行一次，一般用于步长的计算；
for语句的表达式可以省略其中任何一个或全部 -
while语句
while(条件表达式){
…
…(语句块后面记得加分号)
}
说明：
1.死循环：指条件永远为真的循环语句
2.for语句和while语句同属“当型循环(先判断，后执行)”，所以可以互换 -
do…while循环
do{
…
…
}while(条件表达式);
说明：
1.do…while语句是先执行,后判断
2.do…while语句至少执行一次；而当型循环(for,while)至少执行0次 -
for…in语句
for(key in array){
…
}
示例：
var arr = [];
arr[0] = '孙悟空';
arr[2] = '猪八戒';
arr[3] = '白骨精';
arr[9] = '唐僧';
for(key in arr){
console.log(arr[key]);
}
打印出：孙，猪，白，唐
5.break语句
跳出(结束)本次的switch及循环语句
6.continue语句
跳过当前的循环而进行下一次的循环
补充
-
HTML实体(HTML Entity)：
>:>
<:<
&:&
&39:’
&apos:"
 :空格
其他的去网上查 -
UUID，通用唯一识别码，其形态为8-4-4-4-12，
其作用是为保证文件名称的唯一性 -
webp格式是Google推出的一种图像格式，其仅被Google
Chrome浏览器支持，其特点是相比jpeg文件来说，字节数更小 -
京东(jd.com)的商品展示图片采用动态缩放实现Lua
内置对象
- String对象
-
构建String对象：
直接量方式
'string’或"string"构造函数方式
new String(‘string’) -
属性：
length
描述：返回字符串的长度
语法：int object.length -
方法：
toLowerCase()
描述：将字符转换小写字母
语法：string object.toLowerCase(void)
toUpperCase()
描述：将字符转换大写字母
语法：string object.toUpperCase(void)
示例：
var str=‘javascript’;
console.log(str.toUpperCase());
substr()
描述：截取字符串，从起始索引号提取字符串中指定数目的字符
语法：string object.substr(int start[,int length])
说明；
1.字符串从0开始编号
2.如果省略length参数，则返回到字符串结尾之间的字符
3.如果start为负数，则倒数示例： console.log(str.substr(0,4).toUpperCase()); 截取从0位开始后的4位数,注意，这里4是长度 //截取從字符結束位置倒數的字符 console.log(str.substr(-3)); //將字符串实现反转 var str='javascript'; var temp=''; for(var n=str.length-1;n>=0;n--){ temp+=str.substr(n,1); } console.log(temp);substring
描述：截取字符串，提取字符串中两个指定的索引号之间的字符
语法：string object.substring(int start[,int end])
说明：
包含起始位，不包含结束位
如果省略end参数，则返回到字符串结尾之间的字符;indexOf()
描述：返回字符串中检索指定字符第一次出现的位置
语法：int object.indexOf(string)
注意：indexOf() 方法对大小写敏感！
如果要检索的字符串值没有出现，则该方法返回 -1。lastIndexOf()
描述：返回字符串中检索指定字符最后一次出现的位置
如果没有，则返回-1
语法：int object.lastIndexOf(string)
注意：lastIndexOf() 方法对大小写敏感！
如果要检索的字符串值没有出现，则该方法返回 -1。replace()方法
描述：字符串替换
语法：
string obejct.replace(string search,string replacement)
示例：
//惰性替换,只替换一个
var str=‘javascript’;
console.log(str.replace(‘a’,‘w’));//jwvascript
或
string obejct.replace(object RegExp,string replacement)split()
描述：使用分隔符拆分字符串
语法：
array object.split(delimiter)
或
array object.split(RegExp)
用正则表达式拆 -
ES6新增方法
trim()
描述：删除第一个之前及最后一个字符之后的空白
移除字符串首尾空白
语法：string object.trim(void)startsWith()
描述：检测字符是否以指定字符开头
语法：bool object.startsWith(string)
返回true/false
示例：console.log(‘java’.startsWith(‘ja’));//trueendsWith()
描述：检测字符是否以指定字符结尾
语法：bool object.endsWith(string)
示例： console.log(‘java’.endsWith(‘w’));//false
- Math对象
Math对象是一个静态对象
-
属性：
Math.PI ，圆周率
Math.SQRT2 ，2的平方根 -
方法：
Math.ceil()
描述：进一取整
语法：number Math.ceil(number)
Math.floor()
描述：舍一取整
语法：number Math.floor(number)
Math.pow()
描述：幂运算
语法：number Math.pow(base,exp)
Math.sqrt()
描述：平方根
语法：number Math.sqrt(number)
Math.min()
描述：最小值
语法：number Math.min(num1,num2,…)
Math.max()
描述：最大值
语法：number Math.max(num1,num2,…)
Math.random()
描述：产生介于0~1之间的随机数(0<=X<1)
语法：number Math.random(void)
示例：console.log(Math.random());
Math.round()
描述：四舍五入(仅保留到整数位)
语法：number Math.round(number)
示例：
console.log(Math.round(7.25));//7
console.log(Math.round(7.58));//8
- Date对象
- 构建Date对象：
new Date() - 方法：
getYear()
描述：获取年份(从公元1900年到现在经历的年份)
语法：int object.getYear(void)
getFullYear()
描述：获取年份
语法：int object.getFullYear(void)
示例：
//构建Data对象
var date=new Date();
//获取年份
var year = date.getYear();
console.log(year)//118
var fullyear=date.getFullYear()
console.log(fullyear);//2018
getMonth()
描述：获取月份(取值范围为0~11)
比如7月，输出为6
要想获取真正的月份，在后面加1
语法：int object.getMonth(void)
getDate()
描述：获取日期(xx号)
语法：int object.getDate(void)
getDay()
描述：获取星期的第几天(0为星期日，依次类推)
语法：int object.getDay(void)
getHours()
描述:获取小时数
语法：int object.getHours(void)
getMinutes()
描述:获取分钟
语法：int object.getMinutes(void)
getSeconds()
描述：获取秒数
语法：int object.getSeconds(void)
getMilliseconds()
描述：获取毫秒数
语法：int object.getMilliseconds(void)
getTime()
描述:返回从1970年到现在的毫秒数
语法：int object.getTime(void)
toUTCString()/toGMTString()
描述：将日期转换成UTC/GMT格式
语法：
string object.toUTCString(void)
string object.toGMTString(void)
ES6新增方法
Date.now()静态方法
描述：返回从公元1970年到现在的毫秒数
语法：int Date.now(void)
说明：该方法为静态方法
- Array对象
-
构建Array对象:
直接量方式
[value,…];
构造函数方式
new Array(length)
new Array(value,…) -
属性：
length
描述:获取数组成员的数量
语法:int object.length -
方法：
unshift()
描述：在数组的开头添加一个或多个成员，并返回数组的新长度
语法：int object.unshift(value,…)
示例：
var arr = ['C','D','E','F'];
var count = arr.unshift('A','B');
console.log('数组包含'+count+'个成员，他们是:'+arr);
//数组包含6个成员，他们是:A,B,C,D,E,F
push()
描述：在数组的末尾添加一个或多个成员，并返回数组的新长度
语法：int object.push(value,…)
shift()
描述：删除数组的第一个成员，并且返回该成员
语法：mixed object.shift(void)
示例：
var first = arr.shift();
console.log('数组包含'+arr.length+'个成员，
他们是:'+arr+'成员'+first+'被删除');
pop()
描述：删除数组的最后一个成员，并且返回该成员
语法：mixed object.pop(void)
join()
描述：将数组成员使用指定的分隔符连接成字符串
语法：string object.join(delimiter)
delimiter是分隔符
isArray()
描述：判断是否为数组(静态方法)(ES6新增的)
语法：bool Array.isArray(obj)
map()
描述：数组成员依次调用回调函数，并且返回一个新数组
语法：
array object.map(function(value[,index]){
…
})
示例：
var data=[1,2,3,4,5];
var arr = data.map(function(val){
return Math.pow(val,3);
});
console.log(arr);
- 数组遍历(ES6新增)：
forEach()语句
语法：
object.forEach(function(value[,index]){
…
…
});
示例：
//forEach遍历
var arr = [];
arr[0] = '孙悟空';
arr[2] = '猪八戒';
arr[3] = '白骨精';
arr[9] = '唐僧';
arr.forEach(function(val,key){
console.log(val + ',' + key);
});
在控制台打印出：
孙悟空,0
猪八戒,2
白骨精,3
唐僧,9
- Regular Expression对象(正则表达式对象)
- 构建正则表达式对象
直接量方式
/正则表达式/修正符
构造函数方式
new RegExp(‘正则表达式’,‘修正符’) - 正则表达式
-
元字符：
\d 匹配数字,等价于[0-9]
\D 匹配非数字，等价于[^0-9]
\s 匹配任意的空白字符，等价于[\n\r\t\v\f]
\S 匹配任意非空白字符，等价于[^\n\r\t\v\f]
\w 匹配任意的字母，数字及下划线,等价于[0-9a-zA-Z_]
\W 匹配任意的非字母、数字及下划线,等价于[^0-9a-zA-ZA_]
. 匹配除换行外的任意字符 -
量词：
? 出现0次或1次，等价于{0,1}
* 至少出现零次，等价于{0,}
+ 至少出现1次，等价于{1,}
{m} 出现m次
{m,} 至少出现m次
{m,n} 至少出现m次，至多n次 -
其他：
| 或者
^ 以指定字符开头
$ 以指定字符结尾
[…] 表示在范围之内，如[0-9]
[^…] 表示不在范围之内，如[^3-5] -
转义符：
\n \r \t \v \f换行、回车、水平制表符、垂直制表符、换页(走纸)
\ 反斜线
. 点
| 竖线
* 星号
? 问号 -
捕获组与非捕获组：
捕获组
(…)
(((a)(b))©)
从左往右数左括号为5
从左往右匹配的
非捕获组
(?:…)
示例：
-
//将以下时间格式用一行语句写成2018-12-25
var date = '12/25/2018';
date = date.replace(/(\d{1,})\/(\d{1,})\/(\d{4})/,'$3-$1-$2');
document.write(date);
注意：
$1匹配第一个捕获组
$2匹配第二个捕获组
…
- 修正符：
g(global) 全局
i(ignore) 忽略大小写
方法：
test()
描述：检测字符串是否符合正则表达式规范
语法：bool object.test(string)
示例：
//检测数字是否为正整数
var n = 'a123';
var bool = /^[1-9]\d*$/.test(n)
console.log(bool);
//false
DOM编程
JavaScript的组成
JavaScript由ECMAScript(简称ES)、DOM和BOM组成;
-
ECMAScript：关键字、保留关键字、流程控制语句、数据类型、内置对象；
-
DOM:提供操作HTML/XML文档相关的API;
DOM:由DOM Core、HTML DOM和XML DOM组成;
DOM Core:提供处理HTML和XML文档的API
HTML DOM:提供处理HTML文档的API
XML DOM:提供处理XML文档的API -
浏览器对象模型（BOM）对浏览器窗口进行访问和操作
节点
在DOM中一切皆节点
Node--->Element元素节点
Attr属性节点
Document文档节点
CharacterData字符数据-->(Text,Comment)
注意：文本存在文本节点内
- 节点的类型：
- 代表元素节点(HTML标记)
- 代表属性节点(指HTML标记的属性)
- 代表文本节点(指纯文本)
- 代表注释节点(指HTML的注释)
- 代表文档节点(指整个HTML文档)
- 节点的关系：
- 子节点：一个节点是另一个节点的直接下一级节点
如…b就是i的子节点 - 父节点：一个节点是另一个节点的直接上一级节点
- 兄弟节点：同一个父节点的所有子节点
-
节点的属性：
nodeName
描述：获取节点的名称
语法：string node.nodeNamenodeValue
描述：获取节点值
语法：string node.nodeValuenodeType
描述：获取节点的类型(上面有编号)
语法：int node.nodeType
示例：console.log(document.nodeType); //9 (代表文档节点) console.log(document.documentElement.nodeName); //HTML console.log(document.documentElement.nodeType); //1 注意： document返回Document对象 而Document对象的documentElement属性返回Element对象 而Element对象又是从Node对象来继承的 所以此时使用的nodeName,nodeType属性都要是Node对象的childNodes
描述：返回节点内所有的子节点形成的集合(数组)
语法：NodeList node.childNodes节点的方法：
appendChild()
描述：追加子节点
语法：Node node.appendChild(Node)
说明：返回的是新插入的子节点
removeChild()
描述：删除子节点
语法：Node node.removeChild(node)
如a.removeChild(b) -
document对象(继承自Node)
-
属性：
documentElement
描述：返回文档的跟元素
语法：Element document.documentElement -
方法：
getElementById()
描述：根据对象ID来获取元素(查)
语法：Element document.getElementById(string id)createElement()
描述：创建元素节点
语法：Element document.createElement(string tag)getElementsByTagName()
描述：获取文档中中指定标记名称所形成的集合(数组)
语法：NodeList document.getElementsByTagName(tagName)
如：document.getElementsByTaName(‘p’)
获取整个文档中所有的p标签createTextNode()
描述：创建文本节点
语法：TextNode document.createTextNode(string)
返回的是文本节点
- Element对象(继承自Node)
-
方法：
getAttribute()
描述：获取属性值
语法：string Element.getAttribute(string name)setAttribute()
描述：设置属性
语法：void Element.setAttribute(string name,string value)removeAttribute()
描述：删除属性
语法：void Element.removeAttribute(string name)hasAttribute()
描述：返回是否存在指定属性
语法：bool Element.hasAttribute(string name)getElementsByTagName()
描述：获取指定元素中包含指定标记名称所形成的集合(数组)
语法：NodeList Element.getElementsByTagName(tagName)//如获取div内的所有p标签段落数量 //获取div对象 var divEle = document.getElementById('div'); //获取div内所有的p var pEles = divEle.getElementsByTagName('p'); console.log(pEles.length)
- Node对象
-
属性(接上节点的属性)
firstChild
描述：返回指定节点的第一个子节点
语法：node node.firstChildlastChild
描述：返回指定节点的最后一个子节点
语法：node node.lastChildparentNode
描述：返回当前节点的父节点
语法：node node.parentNodenextSibling
描述：返回当前节点的下一个兄弟节点(弟弟)
语法：node node.nextSiblingpreviousSibling
描述：返回当前节点的上一个兄弟节点(哥哥)
语法：node node.previousSibling<script> function changeAttr(){ var pEle1 = document.getElementById('p'); var pEle2 = pEle1.nextSibling.nextSibling; pEle2.setAttribute('align','center'); } </script> <p id='p'>段落1</p> <p>段落2</p> <input type="button" value="单击我，让第二个段落居中" onclick="changeAttr()"> //注意： //段落1和段落2之间有个空格，空的文本节点。千万注意！！！ -
方法：
replaceChild
描述：节点替换
语法：node node.replaceChild(newChild,oldChild)
HTML DOM
HTML DOM提供针对处理HTML文档的API
- 套路：
- 选定对象 selector
- 控制->属性、内容、节点的增、删
-
选取对象
Element document.getElementById(string id)
说明：根据ID获取文档中唯一的HTML元素NodeList document.getElementsByTagName(string tagName)
说明：获取文档中由指定的标记组成的集合(数组)NodeList Element.getElementsByTagName(string tagName)
说明：获取元素中由指定的标记组成的集合(数组)getElementsByName()方法
描述：获取文档中name属性相同的对象组成的集合(数组)
说明：针对表单元素使用
语法：NodeList document.getElementsByName(string name) -
属性控制
-
对于单个单词的HTML标记属性即HTML DOM对象属性(class属性除外)
-
对于合成词的HTML标记属性(如table标记的cellpading、cellspacing属性)
在HTML DOM编程时，采用"驼峰标记法"命名
(如cellPadding、cellSpacing)
示例：//获取对象 var tableEle = document.getElementById('table'); //设置属性 tableEle.width = '500'; tableEle.border = '3'; //注意:cellSpacing、cellPadding的写法 tableEle.cellSpacing='0'; tableEle.cellPadding='20'; -
对于HTML标记的class属性，在HTML DOM编程中时使用className取代
(因为class是ECMAScript中的关键字)//获取对象 var pEle = document.getElementById('p'); //设置属性(注意className的写法) pEle.className='f1'; -
对于HTML标记的布尔属性(如单/复选框的checked、列表项的selected属性)
在HTML DOM编程时采用boolean类型表示
示例：//获取对象 var checkboxEle = document.getElementById('checkbox'); //设置属性(布尔类型的的属性采用布尔来表示) //选中 checkboxEle.checked = true; //禁用 checkboxEle.disabled = true; -
在HTML DOM编程时，某些HTML DOM对象有自己特有的属性/方法
-
form对象：
submit(void)提交表单
reset(void)重置表单 -
input对象:
focus(void)获取焦点
blur(void)失去焦点 -
select对象：
value属性
获取当前被选定的列表项的值
option对象
创建option对象:new Option()
add(object option)方法
在select对象内添加option对象
remove(integer index)
删除select对象的option(不用,用length属性就可以解决)
length属性
获取/设置select对象内的option数量列表框–onchange事件
-
-
HTML标记的style属性在HTML DOM编程时形成
CSSStyleDeclaration/CSS2Properties对象控制HTMLDOM对象的行内样式的语法是：
object.style.属性名称-
如果CSS样式属性为单个单词，则直接书写
//获取DIV对象 var divEle = document.getElementById('wrapper'); //设置div行内样式 divEle.style.width = '300px'; divEle.style.height = '200px'; -
如果CSS样式属性为合成词，则先将短横线去掉后再采用"驼峰标记法"命名
(如font-size,改为fontSize)//设置div对象的行内样式 divEle.style.fontSize = '24px'; divEle.style.textAlign = 'center'; divEle.style.fontFamily = 'Microsoft Yahei';
-
-
控制对象(内容)
1. innerText 不能解析HTML标记
2. innerHTML 可以解析HTML标记
示例：var pEle = document.getElementById('p'); pEle.innerText='<b>你们</b>'; //单击后显示：<b>你们</b> var pEle = document.getElementById('p'); pEle.innerHTML='<b><i>我们</i></b>'; //单击后显示：我们 -
控制对象(元素的增删改)
在HTML DOM编程时除极少数对象有自己的创建/删除方法外,
其他的都需要使用DOM Core的方法进行增加/删除操作极少数对象:
1. select/option对象(见上)
2. Images对象:
创建对象:new Image([width,height])
示例：//创建图像对象 var imageEle = new Image();//相当于<img> //设置属性 imageEle.src='images/a45a56a.jpg';//<img src='...'> //将新建的图像添加到文档 document.body.appendChid(imageEle);
- table对象(不用管)
节点的层次关系只能通过DOM Core的相关方法来实现
document对象
-
属性：
title
描述：获取/设置标题栏信息
语法：document.title = value 获取
或
var 变量名称 = document.title 设置head
描述：获取文档的head对象
语法：Element document.headbody
描述：获取文档的body对象
语法：Element document.bodyimages(了解)
描述：返回文档中所有的图像组成的集合(数组)
语法：NodeList document.images
forms(了解)
描述：返回文档中所有的表单组成的集合(数组)
语法：NodeList document.formslinks(了解)
描述：返回文档中所有的标记组成的集合(数组)
语法：NodeList document.linksanchors(了解)
描述：返回文档中所有的< a>标记组成的集合(数组)
语法：NodeList document.anchors -
方法：
querySelectorAll()
描述：返回由使用指定的CSS选择器组成的集合(数组)
语法：NodeList document.querySelectorAll(selector)
说明：该方法支持所有CSS3选择器querySelector()
描述：返回由使用指定的CSS选择器对象的第一个元素
语法：Element document.querySelector(selector)
Element对象
-
属性:
tagName
描述：获取元素的标记名称
语法：string Element.tagName -
方法：
querySelector()
描述：返回由使用指定的CSS选择器对象的第一个元素
语法：Element Element.querySelector(selector)querySelectorAll()
描述：返回由使用指定的CSS选择器组成的集合(数组)
语法：NodeList Element.querySelectorAll(selector)注意：
< p title=“我是一个说明文本”>中华人民共和国< /p>
这里的title的不是网页标题，而是说明文本
BOM
-
BOM(Browser Object Model)
浏览器对象模型，提供与浏览器相关的API
window对象是BOM的顶级对象，代表浏览器窗口或iframe或frame -
属性(window对象)：
document
描述：返回HTMLDocument对象
history
描述：返回History对象
screen
描述：返回Screen对象
navigator
描述：返回Navigator对象
location
描述：返回Location对象
Math
描述：返回Math对象 -
方法(window对象)
1、alert()
描述：弹出警示对话框(只有一个确定按钮)
语法：window.alert(string)2、confirm()
描述：弹出询问对话框(有确定和取消两个按钮)
语法：bool window.confirm(string)3、setInterval()
描述：每间隔指定的时间执行相关的代码
语法：int window.setInterval(function,milliseconds)
注意：milliseconds是毫秒，2000就是2秒4、clearInterval()
描述：清除由setInterval()设置的timeId
语法：window.clearInterval(int timeId)5、setTimeout()
描述：间隔指定的时间后执行相关的代码(执行一次)
语法：int window.setTimeout(function,milliseconds)6、clearTimeout()
描述：清除由setTimeout()设置的timeId
语法：window.clearTimeout(int timeId)注意：
56基本不用(比如注册许可协议的“我同意(5)”都是循环的)var timeId = window.setInterval(function(){ document.getElementById('agree').value = '我同意('+i+')'; if(i==0){ window.clearInterval(timeId); document.getElementById('agree').value = '我同意'; //禁用设置为假就是启用 document.getElementById('agree').disabled = false; } i--; },1000);7、parseInt()
描述：转换成整数
语法：int parseInt(value)console.log(parseInt(3.7999)); //3 console.log(parseInt('379')); //379合法的数字字符串开头 console.log(parseInt('3e7')); //3合法的数字字符串开头 console.log(parseInt('e37')); //NaN(Not a Number)非法的数字字符串开头8、parseFloat()
描述：转换成浮点数
语法：float parseFloat(value)console.log(parseFloat(3.7999)); //3.7999 console.log(parseFloat('379')); //379合法的数字字符串开头 console.log(parseFloat('3e7')); //3000000合法的数字字符串开头 console.log(parseFloat('e37')); //NaN(Not a Number)非法的数字字符串开头9、isNaN
描述：检测值是否为NaN(Not a Number)
语法：bool isNaN(value)console.log(isNaN('e2e'));//true说明：
如果在当前窗口内控制当前窗口内的对象时，window对象可以省略 -
Location对象
属性：- href
描述：获取/设置地址栏中的地址信息
语法：location.href = string
var 变量名称 = location.href - search
描述：获取地址栏"?"以后所有的参数
语法：string location.search
方法：
reload()
描述：重新加载文档
语法：location.reload(void) - href
<body>
<h1 id='random'></h1>
<input type="button" value="单击我，刷新页面" onclick="refresh()">
</body>
<script>
document.getElementById('random').innerHTML = Math.random();
function refresh(){
//刷新页面
location.reload();
}
</script>
-
Screen对象
width属性
描述：获取显示分辨率宽度
语法：number screen.widthheight属性
描述：获取显示分辨率高度
语法：number screen.height -
History对象
back()方法
描述：后退一步
语法：history.back(void)forward()方法
描述：前进一步
语法：history.forward(void)go()方法
描述：前进/后退
语法：history.go(number)
说明：如果为负数，则后退;否则前进注意：
history.back()等价于history.go(-1)
history.forword()等价于history.go(1) -
Navigator对象
userAgent属性(简称UA)
描述：返回代理器信息
语法：string navigator.userAgent
JavaScript事件
-
鼠标事件
onclick
onmouseover
onmouseut -
键盘事件
onkeydown 键盘的按键按下
onkeyup 释放键盘按键
onkeypress 按下并释放键盘按键 -
表单对象
onsubmit 提交表单
onreset 取消表单 -
列表框对象
onchange -
body对象
onload
onunload
JSON
-
JSON基础
JSON(JavaScript Object Notation)
是一种轻量级的数据交换格式JSON的官网 http://www.json.org
-
JSON支持的数据格式
数组：[value,…]
对象：{property:value,…} -
JSON的数据类型
string
number
object(对象)
boolean
array(数组)
null -
JSON对象
JSON.stringfy(array|object)
object
2122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
