js添加节点的方法（js创建节点时同时添加属性）

//逗比小憨憨

/*第一章

*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(),parint(),parfloat()（字符串必须是数字字符串）

* (2)数字转字符串：tostring

* (3)转义字符：\’ \” \n等

* 3，注释： 单行注释 和 多行注释 用法：与c语言注释一样

*/

//举例：

document.write(“number(\”123\”):” +number(“123”) + “<br/>”);

document.write(parint(“+123.456px”));//第一个字符为+或-也进行转换，从左往右取整数

document.write(parfloat(“123.456px”));

var num = 123;

document.write(num.tostring());

/*第三章

* 流程控制：

* 1，顺序结构：程序代码从上到下，从左到右依次执行

* 2，选择结构：

* (1)if语句:（单重if）

* <1>:if(条件){语句块}

* <2>:if(条件){语句块} el{语句块}

* <3>:if(条件){语句块} el if(条件){语句块} el{语句块}

* (2)switch语句：

* switch(判断值){ ca 取值1:语句块1;break;

* ca 取值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 = parint(a);

var b = i % 100 / 10; //取十位上的数字

b = parint(b);

var c = i % 10; //取个位上的数字

c = parint(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(parint(n) == parfloat(n))

{

document.write(n + “是整数”);

}

el

{

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，内置函数：比如：parint()

*/

//举例：

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大小写转换： 字符串名.tolowerca(),字符串名.toupperca()

* 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.toupperca());

document.write(“转为小写字母:” + str.tolowerca());

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.tolowerca())

{

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)数组颠倒顺序： 数组名.rever()

* (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.rever();

var re = arr.join(“”);

document.write(typeof(re));

return re;

}

document.write(“javascript颠倒后： ” + test(“javascript”));

/*第七章：时间对象

* 创建一个日期对象必续使用new关键字：语法： var 日期对象名 = new date();

* date对象的方法有很多，主要分为两大类：获取时间：getxxx() 和 设置时间：txxx()

*

* getfullyear() 获取年份：取值4位数字

* getmonth() 获取月份：取值0（一月）-11（十二月）整数

* getdate() 获取日数：取值0-31整数

* gethours() 获取小时：取值0-23整数

* getminutes() 获取分钟：取值0-59整数

* getconds() 获取秒数：取值0-59整数

* getmilliconds() 获取毫秒

* getday() 获取星期几：0表示星期天

* tfullyear(year,month,day) 设置年月日

* tmonth(month,day) 设置月日

* tdate(day) 设置日 : 1-31整数

* thours(hour,min,c,millc) 设置时分秒毫秒

* tminutes(min,c,millc) 设置分秒毫秒

* tconds(c,millc) 设置秒毫秒

*/

//举例

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，querylector()和querylectorall()

* 6，document.title()和document.body()

* 二，创建元素：（动态dom操作）

* 创建元素节点：createelement()

* 创建文本节点：createtextnode()

* 总结：创建一个元素的步骤：

* (1)创建元素节点：createelement()

* (2)创建文本节点：createtextnode()

* (3)把文本节点插入元素节点：appendchild()

* (4)把组装好的元素插入到已有的元素中：appendchild()

* 三，插入元素

* 1，appenchild() :把一个元素插到父元素的内部子元素的末尾

* 2，inrtbefore():把一个元素插到父元素的内部某个子元素的之前

*

* 四，删除元素：removechild()

* 五，赋值元素：obj.clonenode(bool)

* obj:被复制的对象

* bool:参数 true：复制元素本身及其子元素 fal：仅仅复制本身

* 六，替换元素：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.inrtbefore(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.querylector(“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，tattribute()：设置元素的某个属性值,参数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)previoulementsibling：查找前一个兄弟元素节点

* (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 olect = document.getelementbyid(“lect”);

obtn.onclick = function(){

alert(olect.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 鼠标单击事件

* onmouover 鼠标移入事件

* onmouout 鼠标移出事件

* onmoudown 鼠标按下事件

* onmouup 鼠标松开事件

* onmoumove 鼠标移动事件

* 五，键盘事件

* 1，键盘按下：onkeydown

* 2，键盘松开：onkeyup

* 注：指按下或松开的一瞬间，先有按下后有松开

* 键盘事件一般用途：表单操作和动画控制

* 六，表单事件

* 1，onfocus：获取焦点时触发的事件 onblur：获取失去焦点时触发的事件

* 注：只有超链接和表单元素（单选框，多选框，单行文本框，多行文本框，下拉列表）才有上述功能

* 备注：判断一个元素是否有焦点的方法：

* 打开一个页面后按tab键，能够选中的就是具有焦点特性的元素

* 焦点事件（onfocus，onblur）一般用于单行文本框和多行文本框

* 2，onlect：当我们选中单行/多行文本框中内容时就会触发该事件

* 3，onchange：常用于具有多个选项的表单元素：

* (1)单选框选择某一项时触发

* (2)多选框选择某一项时触发

* (3)下拉列表选择某一项时触发

* 4，submit（一般结合后端技术使用，此处暂时不管）

* 七，编辑事件(一般用于保护版权)

* 1，oncopy：可以用于页面内容被复制

* 2，onlectstart：可以用于防止页面内容被选取：本质上是防止页面内容被复制

* 3，oncontexmenu

* 八，页面事件

* 1，onload：表示文档加载完成后再执行的一个事件

* window.onload：一般用于在想要获取页面中某一个元素的时候才会用到

* 2，onbeforeunload：表示离开页面之前触发的一个事件

*/

//鼠标移入移出

window.onload = function(){

var op = document.getelementbyid(“content”);

op.onmouover = function(){

this.style.color = “red”;

}

op.onmouout = function(){

this.style.color = “yellow”;

}

}

//鼠标按下松开

window.onload = function(){

var odiv = document.getelementbyid(“title”);

var obtn = document.getelementbyid(“btn”);

obtn.onmoudown = function(){

odiv.style.color = “red”;

}

obtn.onmouup = function(){

odiv.style.color = “blue”;

}

obtn.onmoumove = 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 = “输入正确”;

}

el{

odiv.innerhtml = “必续输入数字”;

}

}

}

//搜索框（焦点的应用）

window.onload = function(){

var oarch = document.getelementbyid(“arch”);

oarch.onfocus = function(){

if(this.value == “逗比小憨憨”){

this.value = “”;

}

};

oarch.onblur = function(){

if(this.value == “”){

this.value = “逗比小憨憨”;

}

};

}

//focus方法:onfocus是一个属性

window.onload = function(){

var otxt = document.getelementbyid(“txt”);

otxt.focus();

}

//onlect事件

window.onload = function(){

var otxt1 = document.getelementbyid(“txt1”);

var otxt2 = document.getelementbyid(“txt2”);

otxt1.onlect = function(){

alert(“你选中了单行文本框中的内容”);

}

otxt2.onlect = function(){

alert(“你选中了多行文本框中的内容”);

}

}

//lect方法：当使用搜索框时，每次点击搜索框，它就会帮我们自动选中文本框中的所有内容

window.onload = function(){

var oarch = document.getelementbyid(“arch”);

oarch.onclick = function(){

this.lect();

};

}

//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 ol = document.getelementbyid(“l”);

for(var i = 0; i < ofruit.length; i++)

alert(ofruit[i].value);

ol.onchange = function(){

if(this.checked){

for(var i = 0; i < ofruit.length; i++){

ofruit[i].checked = true;

}

}

el{

for(var i = 0; i < ofruit.length; i++){

ofruit[i].checked = fal;

}

}

};

}

//onchange事件用于下拉列表

//选择下拉列表的某一选项时，触发的是onchange事件，而不是onlect事件；

onlect事件仅仅当选择文本框中内容时才会触发

window.onload = function(){

var olist = document.getelementbyid(“list”);

olist.onchange = function(){

var link = this.options[this.lectedindex].value;

window.open(link);

};

}

//oncopy事件的应用

window.onload = function(){

document.body.oncopy =function(){

return fal;

}

}

//onlectstart事件的应用

window.onload = function(){

document.body.onlectstart =function(){

return fal;

}

}

//oncontexmenu事件的应用

window.onload = function(){

document.body.oncontextmenu =function(){

return fal;

}

}

//onload,onbeforeunload事件的应用

window.onload = function(){

alert(“doubi”);

}

window.onbeforeunload = function(e){

e.returnvalue = “你准备离开页面”;

}

/*第十二章:事件进阶

* 在js中想要给元素添加一个事件，有两种方式：

* 1，事件处理器：缺点：无法为一个元素添加多个相同事件

* 2，事件监听器：优点：事件处理器的缺点；(可以添加多个相同事件)

* 指定是使用addeventlistener()方法为一个元素加事件（又称绑定事件）

* 语法：obj.addeventlistener(type,fn,fal)

* obj:dom对象 type:是一个字符串，指的是事件类型，不需要加上on前缀

* fn:是一个函数名或一个匿名函数 fal:表示事件冒泡阶段调用

* 3，解绑事件:obj.removeeventlistener(type,fn,fal)

* 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, fal);

function altermes(){

alert(“javascript”);

}

}

//上述等价于下面程序

window.onload = function(){

var obtn = document.getelementbyid(“btn”);

obtn.addeventlistener(“click”, function(){

alert(“javascript”);}, fal);

}

//获取事件的类型

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,fal);

function doubi(e){

switch(e.keycode)

{

ca 38:

ca 87:ospan.innerhtml = “上”;break;

ca 39:

ca 68:ospan.innerhtml = “右”;break;

ca 40:

ca 83:ospan.innerhtml = “下”;break;

ca 65:

ca 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（browr object module浏览器对象模型）

* 上述子对象可以看成window对象的属性

*

* window对象常用的方法：

* alert() 提示对话框

* confirm() 判断对话框

* p无人机驾驶证rompt() 输入对话框

* open() 打开窗口

* clo() 关闭窗口

* ttimeout() 开启一次性定时器

* cleartimeout() 关闭一次性定时器

* tinterval() 开启重复性定时器

* clearinterval() 关闭重复性定时器

* 注：对于window对象来说，不管它的属性还是方法，都可以省略window前缀

*

* 相关操作：

* 1，窗口操作

* (1)打开窗口：语法：window.open(url,target)

* (2)关闭窗口：语法：window.clo()

* 2，对话框：

* (1)alert(“提示文字”)：一般仅仅用于提示文字，在其换行使用：”\n”;无返回值

* (2)confirm(“提示文字”)：用于不仅提示文字，还供确认;返回布尔值

* (3)prompt(“提示文字”)：不仅提示文字，还能返回一个字符串

* 3，定时器

* (1)ttimeout(code,time)

* 其中code：一段代码或一个函数或一个函数名 time：时间，单位ms，表示要过多长时间才执行code中的代码

* (2)cleartimeout()

* (3)tinterval(code,time)

* (4)clea二氧化碳是酸性氧化物吗rinterval()

* 4，location对象

* location对象的属性

* href 当前页面地址 作用：获取或设置当前页面的地址

* arch 当前页面地址？后面的内容 作用：获取或设置当前页面的地址？后面的内容

* 地址？后面的内容也叫做查询字符串(querystring)，一般用于数据库查询用的，而且大量用到

* hash 当前页面地址#后面的内容 作用：获取或设置当前页面的地址#后面的内容

* #一般用于锚点链接

* 5，navigator对象：用于获取浏览器的类型

* 语法：window.navigator.uragent

*/

//举例

window.onload = function(){

var obtn = document.getelementbyid(“btn”);

obtn.onclick = function(){

window.open(“http://www.baidu.com”,”_blank”);//在新窗口打开

window.open(“http://www.baidu.com”,”_lf”);//在当前窗口打开

}

}

//操作空白窗口中的元素

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”;

}el{

document.write(“取消”);

}

};

}

//prompt对话框的使用

window.onload = function(){

var obtn = document.getelementbyid(“btn1”);

obtn.onclick = function(){

var name = window.prompt(“请输入您的名字:”);

document.write(“欢迎来到<strong>”+name+”</strong>”);

};

}

//ttimeout()的使用

window.onload = function(){

ttimeout(‘alert(“doubi”)’, 2000);

}

//ttimeout()的使用,其中code是一个函数

window.onload = function(){

ttimeout(‘alert(“doubi”)’, 2000);

}

////ttimeout()的使用,其中code是一个函数名

window.onload = function(){

ttimeout(alertmes, 2000);

function alertmes(){

alert(“doubixiaohanhan”);

}

}

//cleartimeout()的使用

window.onload = function(){

var obtn = document.getelementsbytagname(“input”);

var timer = null;

obtn[0].onclick = function(){

//alert(“你已点击开始定时按钮”);

timer = ttimeout(alertmes, 5000);

function alertmes(){

alert(“doubixiaohanhan”);

}

};

obtn[1].onclick = function(){

cleartimeout(timer);

}

}

//tinterval()的使用

var n = 10;

window.onload = function(){

var t = tinterval(countdown,1000);

};

function countdown(){

if(n > 0){

n–;

document.getelementbyid(“num”).innerhtml = n;

}

}

//tinterval()的使用,在图片轮播开发中特别有用

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 = tinterval(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.ttimeout(code,3000);

function code(){

url = window.location.href = “http://www.baidu.com”;

window.open(url);

};

}

//navigator的使用

window.onload = function(){

//indexof(用于查找某个字符串在字符串中首次出现的位置，如果找不到返回-1)

if(window.navigator.uragent.indexof(“msie”) != -1){

alert(“这是ie浏览器”);

}

el if(window.navigator.uragent.indexof(“chrome”) != -1){

alert(“这是谷歌浏览器”);

}

el if(window.navigator.uragent.indexof(“firefox”) != -1){

alert(“这是火狐浏览器”);

}

el;

}

/*第十四章：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.querylector() 通过选择器获取元素，只获取第一个

* document.querylectorall() 通过选择器获取元素，获取所有

* document.cr高二英语单词eateelement() 创建元素节点

* 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”);

}