java Script复习总结
一：基础知识
1、javascript语言的历史
l 早期名称：livescript
l 开发公司：网景公司（netscape）
2、javascript语言的基本特点
l 基于对象
l 事件驱动
l 解释性语言
l 实时性
l 动态性
l 跨平台
l 开发使用简单
l 安全性
l 脚本语言
l 弱类型
3、javascript语言的组成
l ecmascript
l dom
l bom
4、javascript常用的输入输出语句
l alert() 警告对话框
l prompt() 提示对话框
l confirm() 消息对话框
l document.write() 向页面里输出内容
l console.log() 向控制台输出内容
l innerhtml 向标签里输出内容
5、javascript能做什么，使用什么环境，如何引用js文件
l 能做什么：
n 客户端表单验证
n 页面动态效果
n 动态改变页面内容
l 使用环境：
n 浏览器内执行
l 如何引用：
n <script src="index.js"></script>
n <script src="test.js" language="javascript"></script>
6、javascript的代码写在哪儿，放在网页的什么位置？
l 写在哪里：
n js文件中
n js标签中
l 放在哪里：
n 标准位置：head标签中或者body标签中
n 笼统说法：页面任意位置
7、javascript常见的数据类型及特点
n js数据类型的分类：
u 基本数据类型：（注意大小写，它们不一样）
l string （字符串类型）
l number （数值类型）
l boolean （布尔类型）
l null （空类型）
l object （对象类型）
l undefined （未定义类型）
u 引用数据类型：（注意大小写，它们不一样）
l array （数组类型）
l boolean （布尔类型）
l date （日期类型）
l math （数学运算）
l number （数值类型）
l string （字符串类型）
l regexp （正则类型）
l function （函数类型）
n js数据类型的特点：
u 一切变量都用var来定义
8、javascript中常用的类型转换函数
l parseint() 转换为数字
l parsefloat() 转换为小数
l number() 转换为数字
l boolean() 转换为布尔值
l string() 转化为字符串
l tostring() 转换为字符串
9、javascript中date对象的创建及其常用的属性和方法
l 如何创建：
var mydate=new date();
l 常用属性：
暂不常用
l 常用方法： 取值范围
getfullyear() 获取年份（四位数字）
getmonth() 获取月份（0 ~ 11）
getdate() 获取天数（1 ~ 31）
gethours() 获取小时（0 ~ 23）
getminutes() 获取分钟（0 ~ 59）
getseconds() 获取秒数（0 ~ 59）
getmilliseconds() 获取毫秒（0 ~ 999）
10、javascript中math对象的创建及其常用的属性和方法
l 如何使用：
var pi_value=math.pi;
var sqrt_value=math.sqrt(15);
l 常用属性：
pi 返回圆周率（约等于3.14159）
l 常用方法：
floor(数字) 对数进行下舍入
ceil(数字) 对数进行上舍入
max(数字1,数字2) 返回两个数字中的最大值
min(数字1,数字2) 返回两个数字中的最小值
random() 返回 0 ~ 1 之间的随机数
round(数字) 把数四舍五入为最接近的整数
11、javascript中string对象的创建及其常用的属性和方法
l 如何创建：
var str = new string(s);
l 常用属性：
length 返回字符串的长度
l 常用方法：
charat() 返回在指定位置的字符
indexof() 返回字符或字符串从前向后搜索第一次出现的下标位置
lastindexof() 返回字符或字符串从后向前搜索第一次出现的下标位置
替换字符串
分割字符串
tolowercase() 把字符串转换为小写
touppercase() 把字符串转换为大写
12、javascript中数组的概念，数组常用的属性方法
1) 数组的概念
l 数组对象是使用单独的变量名来存储一系列的值
2) 常用属性
|
设置或返回数组中元素的数目。 |
3) 常用方法
|
连接两个或更多的数组，并返回结果。 |
|
|
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
|
|
删除并返回数组的最后一个元素 |
|
|
向数组的末尾添加一个或更多元素，并返回新的长度。 |
|
|
颠倒数组中元素的顺序。 |
|
|
删除并返回数组的第一个元素 |
|
|
从某个已有的数组返回选定的元素 |
|
|
对数组的元素进行排序 |
|
|
删除元素，并向数组添加新元素。 |
|
|
返回该对象的源代码。 |
|
|
把数组转换为字符串，并返回结果。 |
|
|
把数组转换为本地数组，并返回结果。 |
|
|
向数组的开头添加一个或更多元素，并返回新的长度。 |
|
|
返回数组对象的原始值 |
13、javascript中创建节点，增加节点，删除节点，复制节点的方法
1) 创建节点
l document.createelement() 创建元素节点，参数为标签名
2) 增加节点
l m.appendchild(n) 为m元素在末尾添加n节点
l m.insertbefore(k,n) 在m元素的k节点前添加n节点
3) 删除节点
l m.removechild(n) 删除m元素中的n节点
l m.replacechild(k,n) 用n节点取代m元素中的k节点
4) 复制节点
l m.clonechild() 复制m节点并将复制出来的节点作为返回值
l 参数为true时，则将m元素的后代元素也一并复制。否则，仅复制m元素本身
14、javascript中常见的事件有哪些，什么时候、什么情况触发。
1) 鼠标事件
|
属性 |
描述 |
dom |
|
当用户点击某个对象时调用的事件句柄。 |
2 |
|
|
在用户点击鼠标右键打开上下文菜单时触发 |
|
|
|
当用户双击某个对象时调用的事件句柄。 |
2 |
|
|
鼠标按钮被按下。 |
2 |
|
|
当鼠标指针移动到元素上时触发。 |
2 |
|
|
当鼠标指针移出元素时触发 |
2 |
|
|
鼠标被移动。 |
2 |
|
|
鼠标移到某元素之上。 |
2 |
|
|
鼠标从某元素移开。 |
2 |
|
|
鼠标按键被松开。 |
2 |
2) 键盘事件
|
属性 |
描述 |
dom |
|
某个键盘按键被按下。 |
2 |
|
|
某个键盘按键被按下并松开。 |
2 |
|
|
某个键盘按键被松开。 |
2 |
3) 表单事件
|
属性 |
描述 |
dom |
|
元素失去焦点时触发 |
2 |
|
|
该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
2 |
|
|
元素获取焦点时触发 |
2 |
|
|
元素即将获取焦点时触发 |
2 |
|
|
元素即将失去焦点时触发 |
2 |
|
|
元素获取用户输入时触发 |
3 |
|
|
表单重置时触发 |
2 |
|
|
用户向搜索域输入文本时触发 ( <input="search">) |
|
|
|
用户选取文本时触发 ( <input> 和 <textarea>) |
2 |
|
|
表单提交时触发 |
2 |
15、浏览器对象（bom）的分层结构，window对象的属性，常用方法
1) bom和dom的分层结构
2) window对象的属性
|
属性 |
描述 |
|
返回窗口是否已被关闭。 |
|
|
设置或返回窗口状态栏中的默认文本。 |
|
|
对 document 对象的只读引用。请参阅 document 对象。 |
|
|
对 history 对象的只读引用。请参数 history 对象。 |
|
|
返回窗口的文档显示区的高度。 |
|
|
返回窗口的文档显示区的宽度。 |
|
|
length |
设置或返回窗口中的框架数量。 |
|
用于窗口或框架的 location 对象。请参阅 location 对象。 |
|
|
设置或返回窗口的名称。 |
|
|
对 navigator 对象的只读引用。请参数 navigator 对象。 |
|
|
返回对创建此窗口的窗口的引用。 |
|
|
返回窗口的外部高度。 |
|
|
返回窗口的外部宽度。 |
|
|
pagexoffset |
设置或返回当前页面相对于窗口显示区左上角的 x 位置。 |
|
pageyoffset |
设置或返回当前页面相对于窗口显示区左上角的 y 位置。 |
|
parent |
返回父窗口。 |
|
对 screen 对象的只读引用。请参数 screen 对象。 |
|
|
返回对当前窗口的引用。等价于 window 属性。 |
|
|
设置窗口状态栏的文本。 |
|
|
返回最顶层的先辈窗口。 |
|
|
window |
window 属性等价于 self 属性，它包含了对窗口自身的引用。 |
|
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。ie、safari 和 opera 支持 screenleft 和 screentop，而 firefox 和 safari 支持 screenx 和 screeny。 |
3) window对象的方法
|
方法 |
描述 |
|
显示带有一段消息和一个确认按钮的警告框。 |
|
|
把键盘焦点从顶层窗口移开。 |
|
|
取消由 setinterval() 设置的 timeout。 |
|
|
取消由 settimeout() 方法设置的 timeout。 |
|
|
关闭浏览器窗口。 |
|
|
显示带有一段消息以及确认按钮和取消按钮的对话框。 |
|
|
创建一个 pop-up 窗口。 |
|
|
把键盘焦点给予一个窗口。 |
|
|
可相对窗口的当前坐标把它移动指定的像素。 |
|
|
把窗口的左上角移动到一个指定的坐标。 |
|
|
打开一个新的浏览器窗口或查找一个已命名的窗口。 |
|
|
打印当前窗口的内容。 |
|
|
显示可提示用户输入的对话框。 |
|
|
按照指定的像素调整窗口的大小。 |
|
|
把窗口的大小调整到指定的宽度和高度。 |
|
|
按照指定的像素值来滚动内容。 |
|
|
把内容滚动到指定的坐标。 |
|
|
按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
|
|
在指定的毫秒数后调用函数或计算表达式。 |
16、文档对象模型dom里document的常用的查找访问节点的方法及含义（getelement系列）
l document.getelementbyid()
l document.getelementsbyclassname()
l document.getelementsbyname()
l document.getelementsbytagname()
l document.getelementsbytagnamens()
17、获取滚动条距离页面顶端的距离 scrolltop
18、隐式类型转换：如字符+数值 结果是字符
1) typeof运算符
l typeof "john" // 返回 string 字符型
l typeof 3.14 // 返回 number 数值型
l typeof nan // 返回 number
l typeof false // 返回 boolean布尔型
l typeof [1,2,3,4] // 返回 object
l typeof {name:'john', age:34} // 返回 object空值
l typeof new date() // 返回 object
l typeof function () {} // 返回 function
l typeof mycar // 返回 undefined (如果 mycar 没有声明)
l typeof null // 返回 object
2) 常考题型
l 转换1：字符串+数值=》数值，结果为nan（parseint(“abc”+10) == nan）
l 转换2：数值+字符串=》数值，结果为数值（parseint(10+”abc”) == 10）
19、变量的声明使用、js语法基础、js的注释
1) js的变量声明
|
第一种 |
var 变量名称; 变量名称 = 变量值; |
|
第二种 |
var 变量名称 = 变量值; |
2) js的注释
|
第一种（单行注释） |
// 注释内容 |
|
第二种（文档注释） |
/** * 注释内容 */ |
20、switch语句、for语句、if语句
1) switch语句格式或者实例
2) for语句格式或者实例
3) if语句格式或者实例
21、break 、continue的含义
l break：直接结束循环
l continue：跳过本次循环，进行下一次
22、typeof用法
（1）typeof运算符
l typeof "john" // 返回 string
l typeof 3.14 // 返回 number
l typeof nan // 返回 number
l typeof false // 返回 boolean
l typeof [1,2,3,4] // 返回 object
l typeof {name:'john', age:34} // 返回 object
l typeof new date() // 返回 object
l typeof function () {} // 返回 function
l typeof mycar // 返回 undefined (如果 mycar 没有声明)
l typeof null // 返回 object
23、isnan（）函数的用法意义
是否不是一个数字，如果真，则证明不是数字，如果假，则证明是数字
二：编程题目
1、动态显示当前时间
代码截图：（为了更好的演示，请用谷歌运行页面）
代码文本：
|
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> // 每隔1秒钟，获取一次当前时间，然后输出 setinterval(function() { // 创建日期对象 var nowdate = new date(); // 获取时间的值 var year = nowdate.getfullyear(); // 获取年份，例如（2018） var month = nowdate.getmonth(); // 获取月份，范围（0~11） var day = nowdate.getdate(); // 获取日份，范围（1~31） var hour = nowdate.gethours(); // 获取小时，范围（0~23） var minute = nowdate.getminutes(); // 获取分钟，范围（0~59） var second = nowdate.getseconds(); // 获取秒数，范围（0~59） // 控制台输出 console.log(year + "-" + (month + 1) + "-" + day + " " + hour + ":" + minute + ":" + second); }, 1000); </script> </body> </html> |
2、倒计时
代码截图：（为了更好的演示，请用谷歌运行页面）
代码文本：
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> // 定义时间变量，保存需要倒计时几秒 var time = 5; // 每隔1秒钟，执行一次，如果当前时间等于1，停止计时 var sid = setinterval(function() { // 判断是否停止计时器，如果时间为1，则直接清除计时器 if(time == 1) { clearinterval(sid); } // 输出当前时间 console.log("当前时间：" + time); // 时间减少1秒钟 time = time - 1; }, 1000); </script> </body> </html> |
3、开关灯
代码截图：（为了更好的演示，请用谷歌运行页面）
代码文本：
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 用来存放小灯泡的图片 --> <img src="img/dengpao_off.gif" id="dengpao" /> <!-- 用来控制小灯泡的开关 --> <button id="btn">开灯</button>
<!-- javascript代码 --> <script type="text/javascript"> var dengpao = document.getelementbyid("dengpao"); //获取图片框 var btn = document.getelementbyid("btn"); //获取按钮框
// 当按钮被单击的时候，触发事件 btn.onclick = function(){ // 判断当前是不是开灯 if(btn.innerhtml == '开灯') { dengpao.src = "img/dengpao_on.gif"; btn.innerhtml = "关灯"; } else { dengpao.src = "img/dengpao_off.gif"; btn.innerhtml = "开灯"; } }; </script> </body> </html> |
4、全选反选
代码截图：（为了更好的演示，请用谷歌运行页面）
代码文本：
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 选择框状态 --> <input type="checkbox" id="zhuangtai" /> <button id="qbxz">全部选中</button> <button id="qbbx">全部不选</button> <button id="fxcz">反选操作</button> <hr />
<!-- 选择框容器 --> <div id="box"> <input type="checkbox" /> 计算1701班 <br/> <input type="checkbox" /> 计算1702班 <br/> <input type="checkbox" /> 计算1703班 <br/> <input type="checkbox" /> 计算1801班 <br/> <input type="checkbox" /> 计算1802班 <br/> <input type="checkbox" /> 计算1803班 <br/> </div> </body>
<!-- javascript代码 --> <script type="text/javascript"> var zhuangtai = document.getelementbyid("zhuangtai"); // 获取状态框 var qbxz = document.getelementbyid("qbxz"); // 全部选中按钮 var qbbx = document.getelementbyid("qbbx"); // 全部不选按钮 var fxcz = document.getelementbyid("fxcz"); // 反选操作按钮 var inputs = document.getelementbyid("box").getelementsbytagname("input"); // 复选框的数组
/*功能介绍：全部选中*/ qbxz.onclick = function() { for(var i = 0; i < inputs.length; i++) { inputs[i].checked = true; } zhuangtai.checked = true; };
/*功能介绍：全部不选*/ qbbx.onclick = function() { for(var i = 0; i < inputs.length; i++) { inputs[i].checked = false; } zhuangtai.checked = false; };
/*功能介绍：反选操作*/ fxcz.onclick = function() { for(var i = 0; i < inputs.length; i++) { if(inputs[i].checked == true) { inputs[i].checked = false; } else { inputs[i].checked = true; } } // 更改状态框 zhuangtai.checked = checkallchoice(); };
/*功能介绍：复选框单击事件*/ for(var i = 0; i < inputs.length; i++) { inputs[i].onclick = function() { zhuangtai.checked = checkallchoice(); }; }
/*功能介绍：检查是否全部选中*/ function checkallchoice() { // 设置标记，记录是否全部选中，默认全部选中 var flag = true; // 循环判断是否全部选中，如果有一个没有选中，则标记位置就为false for(var i = 0; i < inputs.length; i++) { if(inputs[i].checked == false) { flag = false; } } // 返回结果（true或者false） return flag; } </script> </html> |
5、图片轮播
直接查看附件：图片轮播
6、选项卡
直接查看附件：选项卡
上一篇： B+树全面解析
下一篇： 浅谈js事件冒泡和事件捕获