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(),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”);
}
上一篇: 微信小程序实现顶部导航特效