39、重新复习js之三
来源：互联网 发布：软件实施有前途吗 编辑：程序博客网 时间：2024/06/05 17:04
1、盒子模型典型标签
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"> div { display: none; } span { /* display : 调整标签类型 block inline none 不显示,而不留位置 display: none; */ visibility: hidden; }</style></head><body> itcast传智播客<div>itcast传智播客</div>itcast传智播客 <br> itcast传智播客<span>itcast传智播客</span>itcast传智播客</body></html>
上边结果是下边这样的
2、二级联动
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><select id="province" > <option>--请选择省份--</option></select ><select id="city"> <option>--请选择城市--</option></select></body><script type="text/javascript">/* //json 对象 //java 中的 map key:value //创建json对象 var json = {"name":"tom","age":18}; //拿到json中的所有键 for(var key in json){ //根据键取得对应的值 alert(key+"==>"+json[key]); }*/var json = {"河北省":["廊坊市","保定市","石家庄"],"山东省":["济南","青岛","烟台"],"河南省":["郑州市","洛阳市","开封"]}; //遍历json中的所有key,把key封装到option对象中,将option对象添加到省的select中//0 获得省的select对象var province = document.getElementById("province");var city = document.getElementById("city");//1 遍历json中的所有keyfor(var key in json){//2 key封装到option对象中 var option = document.createElement("option"); option.innerHTML = key;//3 添加 province.appendChild(option); }//为province添加onchange事件province.onchange=function(){ //0 每次添加市之前,清空市的下拉选 city.length=1; //1. 获得用户选择的省 var pronvinceKey = this.options[this.selectedIndex].innerHTML; //2. 根据选择的省去json中取得对应 市数组 var cities = json[pronvinceKey]; //3. 遍历数组中的所有市,封装到option对象中 for(var i = 0 ; i < cities.length ; i++){ var option = document.createElement("option"); option.innerHTML = cities[i]; //4. 将option添加到city中 city.appendChild(option); } }</script></html>
上边结果是下边这样的
3、check的反选等等功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> </head> <body> <form method="post" action=""> 请选择您的爱好! <br><input type="checkbox" id="checkedAll_2"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="游泳"/>游泳 <input type="checkbox" name="items" value="唱歌"/>唱歌 <br/> <input type="button" id="CheckedAll" value="全 选"/> <input type="button" id="CheckedNo" value="全不选"/> <input type="button" id="CheckedRev" value="反 选"/> </form> </body> <script language="JavaScript"> //反选 //1 获得反选按钮,添加点击事件 document.getElementById("CheckedRev").onclick=function(){ //2 获得到要操作4个input 对象 var items = document.getElementsByName("items"); //3 遍历 for(var i = 0 ; i < items.length ; i++){ //判断 ,当前遍历的input的选中状态 //alert(items[i].checked); /* if(items[i].checked){ //选中 ==> 没选中 items[i].checked=false; }else{ //没选中==> 选中 items[i].checked=true; } */ items[i].checked = !items[i].checked; } } </script></html>
4、左侧菜单
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>好友列表</title><style type="text/css">table { border:#0099FF 1px solid; width:100px; border-collapse:collapse; } table td{ border:#0066FF 1px solid; background-color:#FF9900; text-align:center; } table td div { background-color:#FFFF99; text-align:left; } table td a:link, table td a:visited { color:#00ffFF; text-decoration:none; } table td a:hover { color:#00CC00; }/*使用display属性:如果取值为none就是隐藏标签。*/table td div { display:none; }.open { display:block; } .close { display:none; } </style><script type="text/javascript"> function openDiv(a){ //1.通过a元素得到 下面的div var targetDiv = a.parentNode.getElementsByTagName("div")[0]; //2.取得页面中所有div var divs = document.getElementsByTagName("div"); //3.遍历所有div for(var i= 0; i < divs.length ; i ++){ //判断当前遍历的div是不是第一步获得的div if(divs[i] == targetDiv){ //是 ==> 设置该div属性为block //divs[i].style.display="block"; divs[i].className="open"; }else{ //不是 ==> 设置div属性为none //divs[i].style.display="none"; divs[i].className="close"; } } } </script></head><body><table> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a> <div> 秦始皇<br /> 刘邦<br /> 李世民<br /> 康熙<br /> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a> <div> 刘备<br /> 关羽<br /> 张飞<br /> 赵云<br /> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a> <div> 西施<br /> 貂蝉<br /> 杨贵妃<br /> 王昭君<br /> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a> <div> 马云<br /> 李开复<br /> 俞敏洪<br /> 冯威<br /> </div> </td> </tr></table></body></html>
5、左侧选中蹦到右边
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"></style></head><body><div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;"><table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;"> <tr> <td width="126"> <!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度--> <select name="first" size="10" multiple="multiple" class="td3" id="first"> <option value="选项1">选项1</option> <option value="选项2">选项2</option> <option value="选项3">选项3</option> <option value="选项4">选项4</option> <option value="选项5">选项5</option> <option value="选项6">选项6</option> <option value="选项7">选项7</option> <option value="选项8">选项8</option> </select> </td> <td width="69" valign="middle"> <input name="add" id="add" type="button" class="button" value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" /> <input name="remove" id="remove" type="button" class="button" value="<--" /> <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> </td> <td width="127" align="left"> <select name="second" size="10" multiple="multiple" class="td3" id="second"> <option value="选项9">选项9</option> </select> </td> </tr></table></div></body><script type="text/javascript"> //1 为id为add元素添加事件 document.getElementById("add").onclick=function(){ //2 获得左侧select元素下所有option var first = document.getElementById("first"); var second = document.getElementById("second"); var options = first.options; //3 遍历并判断当前遍历的option是否被选中 for(var i = 0; i< options.length ; i++){ if(options[i].selected){ //选中 ==> 添加到右侧select second.appendChild(options[i]); i--; } } }</script></html>
6、Node的CURD
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>节点的增删改查</title><!--加入样式表--><style type="text/css">div { border:#0099FF 1px solid; height:60px; width:120px; margin:20px 0px 20px 20px; padding:10px 0px 0px 20px; } #div_1{ background-color:#00FFFF; } #div_2{ background-color:#FF3399; } #div_3{ background-color:#0000FF; } #div_4{ background-color:#FFFF66; }</style></head><body> <div id="div_1"> </div> <div id="div_2"> div区域2 </div> <div id="div_3"> div区域3 </div> <div id="div_4"> div区域4 </div> <hr /> <input type="button" value="创建并添加节点" onclick="addNode()" /> <input type="button" value="删除节点" onclick="deleteNode()" /> <input type="button" value="替换节点" onclick="updateNode()" /> <input type="button" value="克隆节点" onclick="copyNode()" /></body><script type="text/javascript">//动态为div增加一个a元素,点击之后跳转到传智首页function addNode(){ //1.创建a元素 <a></a> var aEle = document.createElement("a"); //2.为a元素添加属性 aEle.setAttribute("href", "http://www.itcast.cn"); //3.为a元素添加文本 aEle.innerHTML = "传智播客"; //4.获得目标div var div_1 = document.getElementById("div_1"); //5.添加 div_1.appendChild(aEle);}//把div_2删除function deleteNode(){ //1 获得要删除的元素 var div_2 = document.getElementById("div_2"); //2 找到该元素的父亲 var parent= div_2.parentNode; //3 删除 parent.removeChild(div_2);}//将div_3替换成一张图片function updateNode(){ //1 找到要替换的div var div_3 = document.getElementById("div_3"); //2 找到div的父亲 var parent = div_3.parentNode; //3 创建一个img元素对象 var imgEle = document.createElement("img"); //4 添加属性(src) imgEle.setAttribute("src", "001.jpg"); //5 替换 parent.replaceChild(imgEle, div_3);}//将div_4 复制,并加入到页面末尾function copyNode(){ //1 获得要复制的div var div_4 = document.getElementById("div_4"); //2 复制 cloneNode=> 参数 如果是false.那么只复制本身不复制子节点. //true==> 复制本身和所有子节点 var div_copy = div_4.cloneNode(true); //3 获得父亲 //4 添加 div_4.parentNode.appendChild(div_copy);}</script></html>
7、table动态添加数据
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加用户</title> </head> <body> <center> <br><br> 添加用户:<br><br> 姓名: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> 电话: <input type="text" name="tel" id="tel" /><br><br> <input type="button" id="addUser" value="添加" /> <br><br> <hr> <br><br> <table id="usertable" border="1" cellpadding="5" cellspacing=0> <tr> <th>姓名</th> <th>email</th> <th>电话</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="javascript:void(0)" onclick="del(this)" >Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="javascript:void(0)" onclick="del(this)" >Delete</a></td> </tr> </table> </center> </body> <script type="text/javascript"> //DHTML ==> Dynamic HTML ==> 动态HTML ==> 整合了HTML CSS JAVAScript DOM // 对页面中的DOM对象的增强. // 对页面中的DOM对象增加了一些属性和方法. //1 获得添加按钮 , 添加点击事件 document.getElementById("addUser").onclick=function(){ //2.获得表单中,用户名,邮箱,电话的值 var name = document.getElementById("name").value; var email = document.getElementById("email").value; var tel = document.getElementById("tel").value; //3.创建一个tr对象 var tr = document.createElement("tr"); //4.直接在tr中添加4个td tr.innerHTML="<td>"+name+"</td><td>"+email+"</td><td>"+tel+"</td><td><a href='javascript:void(0)' onclick='del(this)' >Delete</a></td>"; /* //4.创建4个td,分别放入 用户名,邮箱,电话 //5.将4个td 添加到tr中 */ //6.tr添加到table中 document.getElementById("usertable").appendChild(tr); } //删除一行 function del(a){ //要删除一行,已知条件就是a标签. a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode); } </script></html>
结果就是下边这样
8、猜数字
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript"> //1 生成1~100之间的随机数 var num1 = randomNumber(); alert(num1); function guess(){ //2 使用propmt 让用户输入数字,并比较 var num2 = prompt("请输入1~100之间的数字!","0"); if(isNaN(+num2)){ //输入了无效数字,提示,并重复执行2步 alert("请输入有效数字!"); guess(); } else if(num2 > num1){ //大了==> 提示用户大了,并重复执行第2步 alert("大了"); guess(); }else if(num2 < num1){ //小了==> 提示用户小了,并重复执行第2步 alert("小了"); guess(); }else{ //猜对了==> 提示用户猜对了,询问是否继续游戏, var result = confirm("恭喜您答对了!是否要继续游戏?") if(result){ //是 ==> 重复执行 1,2步 num1 = randomNumber(); guess(); }else{ //不继续 ==> window.close(); window.close(); } } } function randomNumber(){ return Math.round(Math.random()*100); } guess();</script></head><body></body></html>
9、window对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">//window对象代表一个html文档. //方法 // alert confirm prompt close // open => 打开一个新的窗口 //语法window.open(URL,name,features,replace) // 参数1.新打开窗口的地址 // 参数2.(没有用) 新打开窗口的名称. // 参数3. 新窗口的一些特征 // 参数4. (没有用) 需不需要用新打开的窗口记录来替换调用open方法页面的历史记录. // 返回值: 返回新打开窗口的window对象. var baiduWindow = open("http://www.baidu.com","","width=200,height=100"); alert(baiduWindow);//总结: window对象是由浏览器创建的,加载文档时,浏览器就自动创建出来了.我们直接使用方法和属性即可. //理论上window对象调用方法和属性时,不需要加前缀. 推荐加上"window.", </script></head><body></body></html>
10、window对象之定时器
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">//window对象代表一个html文档. //方法: // setInterval clearInterval // setTimeout clearTimeout // 定时器方法 ,设置定时器(setInterval), 清除定时器(clearInterval). //参数1: 接受一个字符串.这个字符串是js代码. //参数1: 还可以接受一个函数对象. //参数2:接受一个整数,单位是毫秒 //返回值: 打开的定时器的ID //每隔参数2毫秒数执行参数1代码或函数. //window.setInterval("alert('aaa');", 3000); var ID = window.setInterval(fun1, 3000); function fun1(){ alert('bbb'); } //clearInterval ==> 清除定时器 window.clearInterval(ID);//----------------------------------------------------------------------- </script></head><body> </body></html>
11、页面时钟
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <input type="text" size="30" id="one" /><br/> <input type="button" id ="two" value="开始" onclick="fun1();" /> <input type="button" id ="three" value="结束" onclick="fun2();" /></body></html><script type="text/javascript"> var id; //控制文本框中内容 //document.getElementById("one").value= "123"; function fun1(){ setTime(); //3.调用setInterval 每隔一秒调用一次setTime方法. if(!id){ id = window.setInterval(setTime, 1000); } } function setTime(){ //1.获得当前时间 var date = new Date(); //2.交给文本输入框显示 document.getElementById("one").value= date.toLocaleString(); }//停止时钟 function fun2(){ // clearInterval(id); id = undefined; }</script>
12、window对象03
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">//window对象代表一个html文档. //方法: // setTimeout clearTimeout // 定时器方法 ,设置定时器(setTimeout), 清除定时器(clearTimeout). //参数1: 接受一个字符串.这个字符串是js代码. //参数1: 还可以接受一个函数对象. //参数2:接受一个整数,单位是毫秒 //返回值: 打开的定时器的ID //参数2毫秒后执行参数1代码或函数.(只执行一次) //setTimeout("alert('aaa')",1000); //作业1:使用setTimeout方法完成页面时钟,需求跟刚才的例子一模一样. </script></head><body> </body></html>
13、window对象04
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">//window对象代表一个html文档. //属性 //self parent top //frames //opener </script></head><body> <iframe src="03-页面时钟.html" > </iframe></body></html>
14、history对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">//history对象代表当前页面的访问历史//获得: history对象是window对象的属性. var history = window.history;//属性 //length --> 当前标签页一共浏览过几个页面 //方法 //forward ==> 前进 //back ==> 后退 //go ==> 前进或后退 //前进 function fun1(){ //window.history.forward(); window.history.go(1); }</script></head><body> <a href="05-history对象02.html">05-history对象02.html</a> <input type="button" value="前进" onclick="fun1();" /></body></html>
14、Location对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">//Location对象代表了当页面的地址 //属性 //href ==> 用来改变当前页面的地址 //方法 //参数1,可以填一个url, 刷新到url指定页面. //reload() ==> 刷新当前页面function fun1(){ window.location.href = "http://www.baidu.com"; }function fun2(){ window.location.reload();} </script></head><body> <input type="button" value="百度" onclick="fun1();" /> <input type="button" value="刷新" onclick="fun2();" /></body></html>
15、dom中的五类对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <font id="one" color="red" >哈哈</font></body></html><script type="text/javascript">//一下这些对象全都不是我们自己创建 的. 浏览器创建的.加载html文档时就已经创建了.//获得文档对象 var doc = window.document; /* alert(doc.nodeName); //#document alert(doc.nodeValue); // null alert(doc.nodeType); // 9 *///获得元素对象 var font = document.getElementById("one"); /* alert(font.nodeName); //font alert(font.nodeValue); // null alert(font.nodeType); // 1 *///获得属性对象 var color = font.getAttributeNode("color"); /* alert(color.nodeName); // 属性名称 alert(color.nodeValue); // 属性值 alert(color.nodeType); // 2 *///获得文本对象 var text = font.firstChild; alert(text.nodeName); // #text alert(text.nodeValue); // 文本内容 alert(text.nodeType); // 3</script>
16、获得Element对象方式01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <font id="one" color="red" >哈哈</font></body></html><script type="text/javascript">//获得元素对象,方式01//获得元素对象 , 在整个文档范围内查找一个 id值为one的元素对象. var font = document.getElementById("one"); </script>
17、获得Element对象方式02
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <font color="red" >哈哈</font></body></html><script type="text/javascript">//获得元素对象,方式02//获得元素对象 , 在整个文档范围内查找一个元素名称为font的元素对象.//返回一个 元素数组(nodeList,在js中就当数组用) var font = document.getElementsByTagName("font")[0]; alert(font);</script>
18、获得Element对象方式03
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <font class="one" color="red" >哈哈</font></body></html><script type="text/javascript">//获得元素对象,方式03//获得元素对象 , 在整个文档范围内查找Class名称为one的元素对象数组.//返回一个 元素数组(nodeList,在js中就当数组用) var font = document.getElementsByClassName("one")[0]; alert(font);</script>
19、获得Element对象方式04
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <font name="one" color="red" >哈哈</font></body></html><script type="text/javascript">//获得元素对象,方式04//获得元素对象 , 在整个文档范围内查找Name名称为one的元素对象数组.//返回一个 元素数组(nodeList,在js中就当数组用) var font = document.getElementsByName("one")[0]; alert(font);</script>
20、在元素范围内获得元素方式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <div id="one" > <div id="two" class="two" name="two" ></div> </div></body></html><script type="text/javascript"> var one = document.getElementById("one"); //根据ID查找里面的div ==> 不支持 /* var two = one.getElementById("two"); alert(two); */ //根据 class查找 ==> 支持 /* var two = one.getElementsByClassName("two")[0]; alert(two); */ //根据name查找 ==> 不支持 /* var two = one.getElementsByName("two")[0]; alert(two); */ //根据标签名称查找==> 支持 var two = one.getElementsByTagName("div")[0]; alert(two);</script>
21、dom中的事件01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <div id="one" ondblclick="alert('bbb');" > 这是div </div> <input type="text" id="two" value="请输入用户名/邮箱/手机号" /></body></html><script type="text/javascript"> //事件: 给对应的元素对象,添加一个Function类型的属性. //这个function对象会在相应的实际被调用. // 调用的时机跟 属性的名称有关. /* //1.div获得到 var one = document.getElementById("one"); //2.为div新增一个属性( Function) one.onclick = function (){ alert('aaa'); } */ //以上是为元素对象附加事件属性的两种方式.//---------------------------------------------------------------- //被支持的常用事件有哪些? // onblur // onfocus var two = document.getElementById("two"); two.onfocus=function (){ alert("onfocus"); } two.onblur=function (){ alert("onblur"); }</script>
22、dom中的事件02
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <input type="text" id="two" /><br/> <select id="three" > <option>河北</option> <option>西藏</option> <option>新疆</option> </select></body></html><script type="text/javascript"> //被支持的常用事件有哪些? // onchange var two = document.getElementById("two"); two.onchange=function (){ alert("onchange"); } //---- var three = document.getElementById("three"); three.onchange=function (){ alert("onchange"); }</script>
23、dom中的事件03
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <input type="text" id="two" /><br/></body></html><script type="text/javascript"> //被支持的常用事件有哪些? // onkeydown var two = document.getElementById("two"); two.onkeydown=function (event){ if(event.keyCode == 13){ alert("表单提交啦!"); } } </script>
24、dom中的事件04
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript"> //被支持的常用事件有哪些? // onload function fun1(){ var two =document.getElementById("two"); alert(two); } </script></head><body onload="fun1();"> <input type="text" id="two" /><br/></body></html>
25、dom中的事件05
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">div { width:300px; height:300px; border: 1px solid red;}</style><script type="text/javascript"> //被支持的常用事件有哪些? /* onmousedown 鼠标按钮被按下。 4 1 9 Yes //onmouseup 鼠标按键被松开。 4 1 9 Yes onmouseover 鼠标移到某元素之上。 3 1 9 Yes onmouseout 鼠标从某元素移开。 4 1 9 Yes onmousemove 当鼠标悬停时,连续被触发.。 3 1 9 Yes */ function fun1(){ var two =document.getElementById("two"); two.onmousedown=function (event){ //鼠标按键按下时触发 //获得按下的是哪个键 alert(event.button); } /* two.onmouseup=function (){ alert("onmouseup"); } */ /* two.onmouseover=function (){ alert("onmouseover"); } two.onmouseout=function (){ alert("onmouseout"); } */ two.onmousemove=function (event){ //alert("onmousemove"); alert(event.clientX+"=="+event.clientY); } } </script></head><body onload="fun1();"> <div id="two"> </div></body></html>
25、dom中的事件06
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript"> //被支持的常用事件有哪些? /* onsubmit 当表单提交之前触发 */ function fun1(){ var two =document.getElementById("two"); two.onsubmit=function(event){ alert('onsubmit'); //做验证的话.如果验证失败,如何拦截表单提交? //拦截方式一: //该事件是众多事件中最特殊的一个. //该事件可以返回一个boolean型的值 // true==> 表单提交 // false ==> 拦截表单提交 //return false; //拦截方式二: //preventDefault() => event.preventDefault(); } } </script></head><body onload="fun1();"> <form id="two" > <input type="text" name="name" ><br/> <input type="submit" value="提交" /> </form></body></html>
26、dom中的事件07
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"> div { border: 1px solid red; } #one { width:300px; height:300px; } #two { width:100px; height:100px; }</style><script type="text/javascript"> /* stopPropagation() */ function fun1(){ var one =document.getElementById("one"); var two =document.getElementById("two"); one.onclick=function(){ alert("oneoneoneone"); } two.onclick=function(event){ alert("twotwotwotwo"); event.stopPropagation(); } } </script></head><body onload="fun1();"> <div id="one" > <div id="two"></div> </div></body></html>
阅读全文
0 0
- 39、重新复习js之三
- 38、重新复习javascript之三
- js复习之-函数
- js复习之数据类型转换
- 36、重新复习html和css之二
- 重新发现物理之美（三）
- 重新复习数据结构~
- 重新复习汇编语言
- VC++深入详解--之复习笔记(三)
- JavaSE复习之三 基础知识：常用API
- js复习之-Array对像
- js复习之--String对像
- js复习之--Date对像
- js复习之-面向对像
- js复习之-dom编程[常用代码]
- js之require.js三
- web复习(三):js实现公告栏效果,间歇性滚动展示
- 复习JS
- 35、重新复习html与css（1）
- 中国人工智能的崛起
- 3行Python代码完成人脸识别
- 36、重新复习html和css之二
- 38、重新复习javascript之三
- 39、重新复习js之三
- How to achieve Long click in Uiautomator
- 40、dom以xml结尾的文件
- Nginx 官方文档翻译
- 41、javaMail机制
- linux常用命令总结
- 《Spring 5 官方文档》20. CORS 支持
- 42、lucene和机器学习进行全文搜索，并排序
- 43、哈工大NLP自然语言处理，LTP4j的测试+还是测试
