JavaScript基础知识点总结
//逗比小憨憨
/*第一章
*HTML引用js方法：
*1,外部引用：HTML外部引用js：<script src='js/day1.js'></script>
*2,内部引用：<script> alert('逗比小憨憨');</script>
*3,元素事件引用：<input type='button' value='button' onclick='alert('welcome')' />
*/
/*第二章
* 变量定义：
* 1，变量由数字，字母，下划线，$组成，且不能以数字开头
* 2，变量不能使用系统关键词
* 3变量定义语法：var 变量1=变量值,变量2=变量值,...;
*/
//举例：
var a = 10;
document.write(a);//在页面输出一个内容
/*
* 数据类型：
* 1，基本数据类型：数字，字符串，布尔值，未定义值(undefined)，空值(null)
* 2，引用数据类型：数组，对象
* 其中：数字不区分整型和浮点型
*/
/*
* 运算符：
* 1，算术运算符: - * / % --
* 加法运算规则：数字 数字=数字； 数字 字符串=字符串； 字符串 字符串=字符串
* 2，
*/
//举例：
var a = 10;
var str = '逗比小憨憨';
document.write(str a, typeof(str a));
/*
* 赋值运算符：= = -= *= /=
* 比较运算符：> < >= <= == !=
* 逻辑运算符：&& || !
* 条件运算符：var b=条件?表达式1:表达式2;//相当于C语言中三目运算符
*/
/*
* 表达式语句：一个分号对应一条语句
* 类型转换：
* 1，隐式类型转换（js自动完成的）
* 2，显式类型转换
* (1)字符串转数字：Number(),parseInt(),parseFloat()（字符串必须是数字字符串）
* (2)数字转字符串：toString
* (3)转义字符：\' \' \n等
* 3，注释： 单行注释 和 多行注释 用法：与C语言注释一样
*/
//举例：
document.write('Number(\'123\'):' Number('123') '<br/>');
document.write(parseInt(' 123.456px'));//第一个字符为 或-也进行转换，从左往右取整数
document.write(parseFloat('123.456px'));
var num = 123;
document.write(num.toString());
/*第三章
* 流程控制：
* 1，顺序结构：程序代码从上到下，从左到右依次执行
* 2，选择结构：
* (1)if语句:（单重if）
* <1>:if(条件){语句块}
* <2>:if(条件){语句块} else{语句块}
* <3>:if(条件){语句块} else if(条件){语句块} else{语句块}
* (2)switch语句：
* switch(判断值){ case 取值1:语句块1;break;
* case 取值2:语句块2;break;
* ...
* default:语句块n;break;}
* 3,循环结构：
* (1)while循环：
* while(条件){语句块}
* (2)do...while循环：
* do{语句块}while(条件);
* (3)for循环：
* for(初始化表达式;条件表达式;循环后操作表达式){语句块}
*/
//举例：计算1 2 3 ... 100
var n = 1, sum = 0;
while(n <= 100)
{
sum = n;
n ;
}
document.write(sum);
//找出100-1000中的水仙花数
var str1 = '';
for(var i = 100; i < 1000; i )
{
var a = i / 100; //取百位上的数字
a = parseInt(a);
var b = i % 100 / 10; //取十位上的数字
b = parseInt(b);
var c = i % 10; //取个位上的数字
c = parseInt(c);
if(i == (a * a * a b * b * b c*c*c))
{
str1 = str1 i '、';
}
}
document.write('水仙花数有：' str1);
//判断一个数是不是整数
window.onload = function()
{
var n = 3.14159;
if(parseInt(n) == parseFloat(n))
{
document.write(n '是整数');
}
else
{
document.write(n '不是整数');
}
}
/*第四章
* 函数：
* 1，函数的定义:函数名命名规则遵循变量命名规则
* (1)没有返回值的函数定义：function(参数1，参数2，...){语句块}
* (2)有返回值的函数定义：function(参数1，参数2，...){语句块; return 返回值}
* 2，变量的作用域：全局变量，局部变量
* 3，函数的调用：
* (1)直接调用：函数名(实参1,实参2,...);
* (2)在表达式中调用:例如：var sum = 函数名(实参1,...)
* (3)在超链接中调用：<a href='javascript:函数名'> </a>
* (4)在事件中调用
* 4，函数嵌套
* 5，内置函数：比如：parseInt()
*/
//举例：
function add_sum(e, f){
var sum = e f;
document.write(sum);
}
add_sum(10, 20);
function test(){alert('doubi');}//供超链接调用测试的函数
/*第五章
* 1，js中对象分为：自定义对象和内置对象
* 2，常用的内置对象：字符串对象，数组对象，日期对象，数值对象
* 3，字符串对象相关知识点：
* 3.1 获取字符串长度：语法： 字符串名.length
* 3.2大小写转换： 字符串名.toLowerCase(),字符串名.toUpperCase()
* 3.3获取一个字符：字符串名.charAt(n)
* 3.4获取字符串： 字符串名.substring(start, end)
* 3.5替换字符串： 字符串.replace(原字符串或正则表达式, 替换字符串)
* 3.6分割字符串： 字符串.split('分隔符')
* 3.7检索字符串的位置： 字符串.indexOf(指定字符串),字符串.lastIndexOf(指定字符串)
* indexOf：返回首次出现的位置 lastIndexOf：返回最后一次出现的位置 没找到返回-1
* 3.8删除字符串中的一个字符：
*/
//举例
var str = 'This is doubixiaohanhan';
document.write('字符串长度为：' str.length);//空格也计算在内
document.write('转为大写字母:' str.toUpperCase());
document.write('转为小写字母:' str.toLowerCase());
document.write('获取第3个字符: ' str.charAt(3));//字符串下标从0开始计算
document.write(str.substring(8, 23));
document.write(str.replace('doubixiaohanhan', 'hahahahahaha'));
var str1 = str.split(' ');//以空格作为分隔符
for(var i = 0; i < 3; i )
document.write(str1[i]);
document.write(str.indexOf('bi'));
document.write(str.lastIndexOf('han'));
//找出字符串中所有字符b,不区分大小写
var n = 0,str1 = 'doubixiaohanhan';
document.write('源字符串:' str1);
for(var j = 0; j < str1.length; j )
{
var char = str1.charAt(j);
if('h' == char.toLowerCase())
{
document.write(char);
n = n 1;
}
}
document.write('字符串中有' n '个字符h');
//统计字符串中数字的个数
function get_number(str){
var num = 0, i = 0;
while(i < str.length){
var char = str.charAt(i);
if((char != ' ') && (!isNaN(char))){//isNaN:不是数字则返回true
num ;
}
i ;
}
alert('执行完毕');
return num;
}
var ret = get_number('dou120k53KDDD6656');
document.write(ret);
/*第六章：数组对象
* 1，数组的创建：（数组 中可以存储不同类型的数据）
* (1)完整形式：var 数组名=new Array(元素1,元素2,..)
* (2)简写形式：var 数组名=[元素1,元素2,...]
* 2，数组的获取：使用下标获取，下标从0开始
* 3，数组的赋值：arr[i]=值;
* 4，获取数组的长度： 数组名.length
* 5，截取数组： 数组名.slice(start, end)
* 6，为数组添加元素：
* (1)在数组开头添加元素： 数组名.unshift(元素1,元素2,...)
* (2)在数组末尾添加元素： 数组名.push(元素1,元素2,...)
* (3)在数组首部删除元素： 数组名.shift()
* (4)在数组末尾删除元素： 数组名.pop()
* (5)数组排序： 升序：数组名.sort(up) 降序：数组名.sort(down)
* 其中：function up(a,b){return a-b;} function down(a,b){return b-a;}
* (6)数组颠倒顺序： 数组名.reverse()
* (7)将数组元素连接成字符串： 数组名.join('连接符')
* (8)
*/
//举例
var arr = ['js','jquery'];
document.write(arr '\n');
arr.unshift('db');
arr.push('ab');
document.write(arr);
arr.shift();
arr.pop();
document.write(arr);
var arr1 = [3, 6, 2, 5, 8, 1];
document.write(arr1);
function up(a,b){return a-b;}
arr1.sort(up);
document.write(arr1);
function down(a,b){return b-a}
arr1.sort(down);
document.write(arr1);
var arr = ['js','jquery','abcd'];
var re = arr.join('');
document.write(re);
document.write(typeof(re));
//例题：将字符串所有字符颠倒顺序
function test(str){
var arr = str.split('');
document.write(typeof(arr));
arr.reverse();
var re = arr.join('');
document.write(typeof(re));
return re;
}
document.write('javascript颠倒后： ' test('javascript'));
/*第七章：时间对象
* 创建一个日期对象必续使用new关键字：语法： var 日期对象名 = new Date();
* Date对象的方法有很多，主要分为两大类：获取时间：getXxx() 和 设置时间：setXxx()
*
* getFullYear() 获取年份：取值4位数字
* getMonth() 获取月份：取值0（一月）-11（十二月）整数
* getDate() 获取日数：取值0-31整数
* getHours() 获取小时：取值0-23整数
* getMinutes() 获取分钟：取值0-59整数
* getSeconds() 获取秒数：取值0-59整数
* getMilliseconds() 获取毫秒
* getDay() 获取星期几：0表示星期天
* setFullYear(year,month,day) 设置年月日
* setMonth(month,day) 设置月日
* setDate(day) 设置日 : 1-31整数
* setHours(hour,min,sec,millsec) 设置时分秒毫秒
* setMinutes(min,sec,millsec) 设置分秒毫秒
* setSeconds(sec,millsec) 设置秒毫秒
*/
//举例
var d = new Date();
var myyear = d.getFullYear();
var mymonth = d.getMonth();
var myday = d.getDate();
var myday1 = d.getDay();
var weekend = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
document.write(myyear '年' (mymonth 1) '月' myday '日' weekend[myday1]);
/*第八章：数学对象
* 数学对象不需要使用new关键字来创造，而是直接使用它的属性和方法
* 语法： Math.属性 Math.方法
* 注：属性往往都是常量，比如：圆周率：PI （常用格式：度数*Math.PI/180）
* Math中方法常用有：
* max min sin cos tan asin acos atan floor ceil random atan2
* Math中方法不常用有：
* abs sqrt log pow exp
* random():用于生成0-1之间的随机数，即： [0,1)
* 随机生成某个范围的任意数：
* 1，Math.random()*m:生成0~m之间的随机数
* 2，Math.random()*m n:生成n~m n之间的随机数
* 3，Math.random()*m-n:生成-n~m-n之间的随机数
* 4，Math.random()*m-m:生成-m~0之间的随机数
*/
//举例
var a = Math.max(3,9,10,2,4,6,12,67,9);
document.write(a);
var b = 0.6;
document.write(Math.floor(b));//floor向下取整
document.write(Math.ceil(b)); //ceil向上取整
document.write(Math.random()*10);
//例题：生成随机验证码
function random_validate(str){
var arr = str.split('');
var result = '';
for(var i = 0;i < 4; i ){
var n = Math.floor(Math.random()*arr.length);
result = arr[n];
}
return result;
}
document.write(random_validate('asjcbakavbavakvhakjbvkvJASSDKABKAVAVJ24123435'));
/*第九章：DOM基础
* DOM：document object model文档对象模型（W3C定义的一个标准）
* DOM操作：理解：元素操作；DOM采用树形结构
* 重点：每一个元素就是一个节点，每个节点就是一个对象。操作元素时其实就是把这个元素看成一个对象，
* 然后使用其对象的属性和方法进行操作。节点包括元素，二者实际不是同一概念
* DOM节点有12种类型，其中常用的三种：元素节点，属性节点，文本节点
* 不同节点的nodeType属性值：
* 元素节点：1
* 属性节点：2
* 文本节点：3
*
* 一，获取元素（实际获取元素节点），js种有以下方式：
* 1，getElemnetById()
* 2，getElemnetByTagName():返回一个类数组（伪数组）：只能使用length属性和下标形式
* 3，getElemnetByClassName()
* 4，getElemnetByName():只用于表单元素，一般用于单选按钮和复选框
* 5，querySelector()和querySelectorAll()
* 6，document.title()和document.body()
* 二，创建元素：（动态DOM操作）
* 创建元素节点：createElement()
* 创建文本节点：createTextNode()
* 总结：创建一个元素的步骤：
* (1)创建元素节点：createElement()
* (2)创建文本节点：createTextNode()
* (3)把文本节点插入元素节点：appendChild()
* (4)把组装好的元素插入到已有的元素中：appendChild()
* 三，插入元素
* 1，appenChild() :把一个元素插到父元素的内部子元素的末尾
* 2，insertBefore():把一个元素插到父元素的内部某个子元素的之前
*
* 四，删除元素：removeChild()
* 五，赋值元素：obj.cloneNode(bool)
* obj:被复制的对象
* bool:参数 true：复制元素本身及其子元素 false：仅仅复制本身
* 六，替换元素：replaceChild(new,old)
*/
//创建简单元素
window.onload =function(){
var oDiv = document.getElementById('content');
var oStrong = document.createElement('strong');
var oTxt = document.createTextNode('逗比小憨憨');
oStrong.appendChild(oTxt);
oDiv.appendChild(oStrong);
}
//创建带属性的元素
window.onload =function(){
var oInput = document.createElement('input');
oInput.id = 'sumit';
oInput.type = 'button';
oInput.value = '提交';
document.body.appendChild(oInput);
}
//创建动态图片
window.onload =function(){
var oImg = document.createElement('img');
oImg.className = 'doubi';
oImg.src = 'img/doubi.jpg';
oImg.style.border = '1px solid silver';
document.body.appendChild(oImg);
}
//创建多个元素
window.onload =function(){
var oTable = document.createElement('table');
for(var i = 0; i < 3;i ){
var oTr = document.createElement('tr');
for(var j = 0; j < 3; j ){
var oTd = document.createElement('td');
oTr.appendChild(oTd);
}
oTable.appendChild(oTr);
}
document.body.appendChild(oTable);
}
//子元素插到末尾
window.onload =function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var oU1 = document.getElementById('list');
var oTxt = document.getElementById('txt');
var textNode = document.createTextNode(oTxt.value);
var oLi = document.createElement('li');
oLi.appendChild(textNode);
oU1.appendChild(oLi);
}
}
//子元素插到某个子元素之前
window.onload =function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var oU1 = document.getElementById('list');
var oTxt = document.getElementById('txt');
var textNode = document.createTextNode(oTxt.value);
var oLi = document.createElement('li');
oLi.appendChild(textNode);
oU1.insertBefore(oLi, oU1.firstElementChild);
}
}
//删除子元素
window.onload =function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var oU1 = document.getElementById('list');
oU1.removeChild(oU1.lastElementChild);
}
}
//复制元素
window.onload =function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var oU1 = document.getElementById('list');
document.body.appendChild(oU1.cloneNode(1));
}
}
//替换元素
window.onload =function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var oFirst = document.querySelector('body *:first-child');
var oTag = document.getElementById('tag');
var oTxt = document.getElementById('txt');
var oNewTag = document.createElement(oTag.value);
var oNewTxt = document.createTextNode(oTxt.value);
oNewTag.appendChild(oNewTxt);
document.body.replaceChild(oNewTag, oFirst);
}
}
/*第十章：DOM进阶
* 操作HTML元素属性的方式：对象属性和对象方法
* 不管是用那种方式，都需要涉及两个操作：获取HTML属性值，设置HTML属性值
* 一，获取HTML属性值：
* 语法： obj.attr (obj是元素名，是一个DOM对象，指的是getElementById()
* 等方法获取到的元素节点)
* 二，设置HTML属性值： obj.attr = '值';
* 三，HTML属性操作(对象方法)
* 1，getAttribute()：获取元素的某个属性值
* 2，setAttribute()：设置元素的某个属性值,参数1：属性名 参数2：属性值
* 3，removeAttribute()：删除某个属性
* 4，hasAttribute()：判断元素是否含有某个属性
* 四，总结：
* 1，“对象属性方式”和“对象方法方式”都可以操作静态HTML的属性和动态DOM属性
* 2，只有“对象方法方式”才可以操作自定义属性
*
* 五，CSS属性操作：是指js操作一个元素的CSS样式
* 1，获取CSS属性值：getComputeStyle(obj).attr <==> getComputeStyle(obj)['attr']
* obj：DOM对象 attr：CSS属性名
* 2，设置CSS属性值
* (1)style对象：行内样式 语法：obj.style.attr='值'
* (2)cssText方法
* 六，DOM遍历
* 1，查找父元素：obj.parentNode obj:DOM对象
* 2，查找子元素：
* (1)childNodes,firstChild,lastChild
* (2)children,firstElementChild,lastElementChild
* 注：childNodes：获取所有节点包括文本节点 children：获取所有元素节点，不包括文本节点
* 3，查找兄弟元素:
* (1)previousSibling：查找前一个兄弟节点
* (2)nextSibling：查找后一个兄弟节点
* (3)previousElementSibling：查找前一个兄弟元素节点
* (4)nextElementSibling：查找后一个元素节点
* 七，innerHTML与innerText
*/
//获取静态HTML中的属性值
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
alert(oBtn.id);
}
}
//获取动态HTML中的属性值
window.onload = function(){
var oInput = document.createElement('input');
oInput.id = 'submit';
oInput.type = 'button';
oInput.value = '提交';
document.body.appendChild(oInput);
oInput.onclick = function(){
alert(oInput.id);
}
}
//获取单行文本框的值
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var oTxt = document.getElementById('txt');
alert(oTxt.value);
//document.write(oTxt.value);
}
}
//获取单选框的值
window.onload = function(){
var oBtn = document.getElementById('btn');
var oFruit = document.getElementsByName('fruit');
oBtn.onclick = function(){
for(var i = 0; i < oFruit.length; i ){
if(oFruit[i].checked){
alert(oFruit[i].value);
}
}
}
}
//获取复选框的值
window.onload = function(){
var oBtn = document.getElementById('btn');
var oFruit = document.getElementsByName('fruit');
var str = '';
oBtn.onclick = function(){
for(var i = 0; i < oFruit.length; i ){
if(oFruit[i].checked){
str =oFruit[i].value;
}
}
alert(str);
}
}
//获取下拉列表的值
window.onload = function(){
var oBtn = document.getElementById('btn');
var oSelect = document.getElementById('select');
oBtn.onclick = function(){
alert(oSelect.value);
}
}
//设置属性值
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
oBtn.value = 'button';
document.write(oBtn.value);
}
}
//获取固有属性值
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
alert(oBtn.getAttribute('id'));
}
}
//获取自定义属性值
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
//alert(oBtn.data);//oBtn.data是不能获取自定义属性值
alert(oBtn.getAttribute('data'));
}
}
//获取自定义属性值
window.onload = function(){
var oTd = document.getElementsByTagName('td');
for(var i = 0;i < oTd.length; i ){
oTd[i].onclick = function(){
var oParent = this.parentNode;
oParent.style.color = 'white';
oParent.style.backgroundColor = 'red';
};
}
}
//childNodes与children的比较
window.onload = function(){
var oU1 = document.getElementById('list');
var childNodes = oU1.childNodes.length;
var children = oU1.children.length;
alert('childNodes的长度：' childNodes '\n' 'children的长度：' children);
}
/*第十一章：事件基础
* 一，在js中一个事件分为三部分：
* 1，事件主角：是按钮还是div元素或是其它？
* 2，事件类型：是点击还是移动或其它？
* 3，事件过程：这个事件都发生了些什么？
* 二，js中常用的事件：
* 1，鼠标事件
* 2，键盘事件
* 3，表单事件
* 4，编辑事件
* 5，页面事件
* 三，js中事件调用方式：
* 1，在script标签中调用：指的是在<script><script/>标签内调用事件
* 语法： obj.事件名 = function(){};
* 2，在元素中调用：指的是直接HTML属性中调用事件
* 四，鼠标事件
* onclick 鼠标单击事件
* onmouseover 鼠标移入事件
* onmouseout 鼠标移出事件
* onmousedown 鼠标按下事件
* onmouseup 鼠标松开事件
* onmousemove 鼠标移动事件
* 五，键盘事件
* 1，键盘按下：onkeydown
* 2，键盘松开：onkeyup
* 注：指按下或松开的一瞬间，先有按下后有松开
* 键盘事件一般用途：表单操作和动画控制
* 六，表单事件
* 1，onfocus：获取焦点时触发的事件 onblur：获取失去焦点时触发的事件
* 注：只有超链接和表单元素（单选框，多选框，单行文本框，多行文本框，下拉列表）才有上述功能
* 备注：判断一个元素是否有焦点的方法：
* 打开一个页面后按tab键，能够选中的就是具有焦点特性的元素
* 焦点事件（onfocus，onblur）一般用于单行文本框和多行文本框
* 2，onselect：当我们选中单行/多行文本框中内容时就会触发该事件
* 3，onchange：常用于具有多个选项的表单元素：
* (1)单选框选择某一项时触发
* (2)多选框选择某一项时触发
* (3)下拉列表选择某一项时触发
* 4，submit（一般结合后端技术使用，此处暂时不管）
* 七，编辑事件(一般用于保护版权)
* 1，oncopy：可以用于页面内容被复制
* 2，onselectstart：可以用于防止页面内容被选取：本质上是防止页面内容被复制
* 3，oncontexmenu
* 八，页面事件
* 1，onload：表示文档加载完成后再执行的一个事件
* window.onload：一般用于在想要获取页面中某一个元素的时候才会用到
* 2，onbeforeunload：表示离开页面之前触发的一个事件
*/
//鼠标移入移出
window.onload = function(){
var oP = document.getElementById('content');
oP.onmouseover = function(){
this.style.color = 'red';
}
oP.onmouseout = function(){
this.style.color = 'yellow';
}
}
//鼠标按下松开
window.onload = function(){
var oDiv = document.getElementById('title');
var oBtn = document.getElementById('btn');
oBtn.onmousedown = function(){
oDiv.style.color = 'red';
}
oBtn.onmouseup = function(){
oDiv.style.color = 'blue';
}
oBtn.onmousemove = function(){
oDiv.style.color = 'green';
}
}
//统计输入字符的长度（键盘按下松开实验）
window.onload = function(){
var oTxt = document.getElementById('txt');
var oNum = document.getElementById('num');
oTxt.onkeyup = function(){
var str = oTxt.value;
oNum.innerHTML = str.length;
}
}
//统计输入字符的长度（键盘按下松开实验）
window.onload = function(){
var oTxt = document.getElementById('txt');
var oDiv = document.getElementById('content');
var myregex = /^[0-9]*$/;
oTxt.onkeyup = function(){
if(myregex.test(oTxt.value)){
oDiv.innerHTML = '输入正确';
}
else{
oDiv.innerHTML = '必续输入数字';
}
}
}
//搜索框（焦点的应用）
window.onload = function(){
var oSearch = document.getElementById('search');
oSearch.onfocus = function(){
if(this.value == '逗比小憨憨'){
this.value = '';
}
};
oSearch.onblur = function(){
if(this.value == ''){
this.value = '逗比小憨憨';
}
};
}
//focus方法:onfocus是一个属性
window.onload = function(){
var oTxt = document.getElementById('txt');
oTxt.focus();
}
//onselect事件
window.onload = function(){
var oTxt1 = document.getElementById('txt1');
var oTxt2 = document.getElementById('txt2');
oTxt1.onselect = function(){
alert('你选中了单行文本框中的内容');
}
oTxt2.onselect = function(){
alert('你选中了多行文本框中的内容');
}
}
//select方法：当使用搜索框时，每次点击搜索框，它就会帮我们自动选中文本框中的所有内容
window.onload = function(){
var oSearch = document.getElementById('search');
oSearch.onclick = function(){
this.select();
};
}
//onchange事件用于单选框
window.onload = function(){
var oFruit = document.getElementsByName('fruit');
var oP = document.getElementById('content');
for(var i = 0;i < oFruit.length; i ){
oFruit[i].onchange = function(){
if(this.checked){
oP.innerHTML = '你选择的是: ' this.value;
}
}
};
}
//onchange事件用于复选框
window.onload = function(){
var oFruit = document.getElementsByName('fruit');
var oSel = document.getElementById('sel');
for(var i = 0; i < oFruit.length; i )
alert(oFruit[i].value);
oSel.onchange = function(){
if(this.checked){
for(var i = 0; i < oFruit.length; i ){
oFruit[i].checked = true;
}
}
else{
for(var i = 0; i < oFruit.length; i ){
oFruit[i].checked = false;
}
}
};
}
//onchange事件用于下拉列表
//选择下拉列表的某一选项时，触发的是onchange事件，而不是onselect事件；
onselect事件仅仅当选择文本框中内容时才会触发
window.onload = function(){
var oList = document.getElementById('list');
oList.onchange = function(){
var link = this.options[this.selectedIndex].value;
window.open(link);
};
}
//oncopy事件的应用
window.onload = function(){
document.body.oncopy =function(){
return false;
}
}
//onselectstart事件的应用
window.onload = function(){
document.body.onselectstart =function(){
return false;
}
}
//oncontexmenu事件的应用
window.onload = function(){
document.body.oncontextmenu =function(){
return false;
}
}
//onload,onbeforeunload事件的应用
window.onload = function(){
alert('doubi');
}
window.onbeforeunload = function(e){
e.returnValue = '你准备离开页面';
}
/*第十二章:事件进阶
* 在js中想要给元素添加一个事件，有两种方式：
* 1，事件处理器：缺点：无法为一个元素添加多个相同事件
* 2，事件监听器：优点：事件处理器的缺点；(可以添加多个相同事件)
* 指定是使用addEventListener()方法为一个元素加事件（又称绑定事件）
* 语法：obj.addEventListener(type,fn,false)
* obj:DOM对象 type:是一个字符串，指的是事件类型，不需要加上on前缀
* fn:是一个函数名或一个匿名函数 false:表示事件冒泡阶段调用
* 3，解绑事件:obj.removeEventListener(type,fn,false)
* 4，event对象：当一个事件发生的时候，这个事件有关信息都会临时保存到一个指定的地方，这个
* 地方就是event对象。对于每一个事件，都有一个对应的event对象。
* event对象的常用属性：
* type: 事件类型
* keyCode: 键码值
* shiftKey: 是否按下shift键
* ctrlKey: 是否按下ctrl键
* altKey: 是否按下alt键
*
* keyCode：获取按下的哪个键；语法：event.keyCode
* 返回一个数值，常用的键值对照表：
* W（上） 87
* S（上） 83
* A（上） 65
* D（上） 68
* 上箭头 38
* 下箭头 40
* 左箭头 37
* 右箭头 39
*
* this:
* this是极其复杂，在事件操作中，可以理解：哪个DOM对象（元素节点）调用了
* this所在函数，那么this指向的就是哪个DOM对象
*/
//例题
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click', alterMes, false);
function alterMes(){
alert('javascript');
}
}
//上述等价于下面程序
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click', function(){
alert('javascript');}, false);
}
//获取事件的类型
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(e){//e是一个变量名存储一个event对象
//实际上每次调用一个事件的时候，js都会默认给这个事件函数加上一个隐藏的参数
//这个参数就是event对象，一般来说，event事件是作为事件函数的第一个参数传入
alert(e.type);
}
}
//禁止shift，alt,ctrl键
window.onload = function(){
document.onkeydown = function(e){
if(e.shiftKey || e.altKey || e.ctrlKey){
alert('禁止使用shift，alt,ctrl键')
}
}
}
//获取上下左右方向键
window.onload = function(){
var oSpan = document.getElementsByTagName('span')[0];
window.addEventListener('keydown',doubi,false);
function doubi(e){
switch(e.keyCode)
{
case 38:
case 87:oSpan.innerHTML = '上';break;
case 39:
case 68:oSpan.innerHTML = '右';break;
case 40:
case 83:oSpan.innerHTML = '下';break;
case 65:
case 37:oSpan.innerHTML = '左';break;
default:oSpan.innerHTML = '';break;
}
}
}
/*第十三章：window对象
* 在js中一个浏览器的窗口就是一个window对象。实际上每次打开一个页面时，浏览器都会自动为这个页面
* 创建一个window对象。window对象存放了这个页面的所有信息。
* window对象下的子对象：
* document 文档对象，用于操作页面元素
* title
* body
* forms
* images
* links
* location 地址对象，用于操作URL地址
* navigator 浏览器对象，用于获取浏览器版本信息
* history 历史对象，用于操作浏览历史
* screen 屏幕对象，用于操作屏幕宽度高度
* 注：location等对象又称为BOM（browser object module浏览器对象模型）
* 上述子对象可以看成window对象的属性
*
* window对象常用的方法：
* alert() 提示对话框
* confirm() 判断对话框
* prompt() 输入对话框
* open() 打开窗口
* close() 关闭窗口
* setTimeout() 开启一次性定时器
* clearTimeout() 关闭一次性定时器
* setInterval() 开启重复性定时器
* clearInterval() 关闭重复性定时器
* 注：对于window对象来说，不管它的属性还是方法，都可以省略window前缀
*
* 相关操作：
* 1，窗口操作
* (1)打开窗口：语法：window.open(url,target)
* (2)关闭窗口：语法：window.close()
* 2，对话框：
* (1)alert('提示文字')：一般仅仅用于提示文字，在其换行使用：'\n';无返回值
* (2)confirm('提示文字')：用于不仅提示文字，还供确认;返回布尔值
* (3)prompt('提示文字')：不仅提示文字，还能返回一个字符串
* 3，定时器
* (1)setTimeout(code,time)
* 其中code：一段代码或一个函数或一个函数名 time：时间，单位ms，表示要过多长时间才执行code中的代码
* (2)clearTimeout()
* (3)setInterval(code,time)
* (4)clearInterval()
* 4，location对象
* location对象的属性
* href 当前页面地址 作用：获取或设置当前页面的地址
* search 当前页面地址？后面的内容 作用：获取或设置当前页面的地址？后面的内容
* 地址？后面的内容也叫做查询字符串(querystring)，一般用于数据库查询用的，而且大量用到
* hash 当前页面地址#后面的内容 作用：获取或设置当前页面的地址#后面的内容
* #一般用于锚点链接
* 5，navigator对象：用于获取浏览器的类型
* 语法：window.navigator.userAgent
*/
//举例
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
window.open('http://www.baidu.com','_blank');//在新窗口打开
window.open('http://www.baidu.com','_self');//在当前窗口打开
}
}
//操作空白窗口中的元素
window.onload = function(){
var oBtn = document.getElementsByTagName('input');
var opener = null;
oBtn[0].onclick = function(){
opener = window.open();
var strHtml = '<!DOCTYPE html>\
<html>\
<head>\
<title></title>\
</head>\
<body>\
<div>逗比小憨憨</div>\
</body>\
</html>';
opener.document.write(strHtml);
};
oBtn[1].onclick = function(){
var oDiv = opener.document.getElementsByTagName('div')[0];
oDiv.style.fontWeight = 'bold';
oDiv.style.color = 'hotpink';
};
}
//confirm对话框的使用
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
if(confirm('确定要跳转到首页吗?')){
window.location.href = 'http://www.baidu.com';
}else{
document.write('取消');
}
};
}
//prompt对话框的使用
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
var name = window.prompt('请输入您的名字:');
document.write('欢迎来到<strong>' name '</strong>');
};
}
//setTimeout()的使用
window.onload = function(){
setTimeout('alert('doubi')', 2000);
}
//setTimeout()的使用,其中code是一个函数
window.onload = function(){
setTimeout('alert('doubi')', 2000);
}
////setTimeout()的使用,其中code是一个函数名
window.onload = function(){
setTimeout(alertMes, 2000);
function alertMes(){
alert('doubixiaohanhan');
}
}
//clearTimeout()的使用
window.onload = function(){
var oBtn = document.getElementsByTagName('input');
var timer = null;
oBtn[0].onclick = function(){
//alert('你已点击开始定时按钮');
timer = setTimeout(alertMes, 5000);
function alertMes(){
alert('doubixiaohanhan');
}
};
oBtn[1].onclick = function(){
clearTimeout(timer);
}
}
//setInterval()的使用
var n = 10;
window.onload = function(){
var t = setInterval(countdown,1000);
};
function countdown(){
if(n > 0){
n--;
document.getElementById('num').innerHTML = n;
}
}
//setInterval()的使用,在图片轮播开发中特别有用
window.onload = function(){
var oBtn = document.getElementsByTagName('input');
var oDiv = document.getElementsByTagName('div')[0];
var colors = ['red','yellow','blue','green','purple','orange'];
var time = null;
var i = 0;
oBtn[0].onclick = function(){
clearTimeout(time);
time = setInterval(function(){
oDiv.style.backgroundColor = colors[i];
i ;
i = i%colors.length;
},1000);
};
oBtn[1].onclick = function(){
clearInterval(time);
};
}
//href的使用
window.onload = function(){
var url = window.location.href;
document.write('当前页面地址：' url);
window.setTimeout(code,3000);
function code(){
url = window.location.href = 'http://www.baidu.com';
window.open(url);
};
}
//navigator的使用
window.onload = function(){
//indexOf(用于查找某个字符串在字符串中首次出现的位置，如果找不到返回-1)
if(window.navigator.userAgent.indexOf('MSIE') != -1){
alert('这是IE浏览器');
}
else if(window.navigator.userAgent.indexOf('Chrome') != -1){
alert('这是谷歌浏览器');
}
else if(window.navigator.userAgent.indexOf('Firefox') != -1){
alert('这是火狐浏览器');
}
else;
}
/*第十四章：document对象
* 浏览器会为每个窗口内的HTML页面自动创建一个document对象
* 一，document对象常用的属性
* document.title 获取文档的title
* document.body 获取文档的body
* document.forms 获取文档的forms
* document.images 获取文档的images
* document.links 获取文档的links
* document.cookie 获取文档的cookie
* document.URL 获取文档的URL
* document.referrer 获取文档的referrer:获取用户在访问当前页面
* 之前所在的页面地址，可以统计用户都是通过什么方式来访问页面的
* 其中：使用document.getElementByTagName('forms/img/a')操作
* forms、images、links
* 二，document对象常用的方法
* document.getElementById() 通过id获取元素
* document.getElementByTagName() 通过标签名获取元素
* document.getElementByClassName() 通过class获取元素
* document.getElementByName() 通过name获取元素
* document.querySelector() 通过选择器获取元素，只获取第一个
* document.querySelectorAll() 通过选择器获取元素，获取所有
* document.createElement() 创建元素节点
* document.createTextNode() 创建文本节点
* document.write() 输出内容
* document.writeln() 输出内容并换行
*/
//获取url
window.onload = function(){
var url = document.URL;
document.write(url);
}
//输出内容并换行
window.onload = function(){
var url = document.URL;
document.writeln(url);
document.writeln('doubixiaohanhan');
}