JS基础实战--day08
- DOM
- 事件
- 文档的加载
- DOM查询
- DOM查询的其他的方法
- DOM增删改
- 使用DOM操作CSS
- 读取元素的样式
- 其他样式操作的属性
DOM
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button id="btn">我是一个按钮</button><script type="text/javascript">/** 浏览器已经为我们提供 文档节点 对象这个对象是window属性* 可以在页面中直接使用，文档节点代表的是整个网页*///console.log(document);//获取到button对象var btn = document.getElementById("btn");//修改按钮的文字btn.innerHTML = "I'm Button";</script></body>
</html>事件
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行这种写法我们称为结构和行为耦合，不方便维护，不推荐使用 --><!--<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>--><button id="btn">我是一个按钮</button><script type="text/javascript">/** 事件，就是用户和浏览器之间的交互行为，* 比如：点击按钮，鼠标移动、关闭窗口。。。*///获取按钮对象var btn = document.getElementById("btn");/** 可以为按钮的对应事件绑定处理函数的形式来响应事件* 这样当事件被触发时，其对应的函数将会被调用*///绑定一个单击事件//像这种为单击事件绑定的函数，我们称为单击响应函数btn.onclick = function(){alert("你还点~~~");};</script></body>
</html>文档的加载
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** 浏览器在加载一个页面时，是按照自上向下的顺序加载的，* 读取到一行就运行一行,如果将script标签写到页面的上边，* 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载* 会导致无法获取到DOM对象*//** onload事件会在整个页面加载完成之后才触发* 为window绑定一个onload事件* 该事件对应的响应函数将会在页面加载完成之后执行，* 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了* */window.onload = function(){//获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function(){alert("hello");};};</script></head><body><button id="btn">点我一下</button><!--<script type="text/javascript">/** 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码*///获取id为btn的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function(){alert("hello");};</script>--></body>
</html>DOM查询
<!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><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function(){//为id为btn01的按钮绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){//查找#bj节点var bj = document.getElementById("bj");//打印bj//innerHTML 通过这个属性可以获取到元素内部的html代码alert(bj.innerHTML);};//为id为btn02的按钮绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){//查找所有li节点//getElementsByTagName()可以根据标签名来获取一组元素节点对象//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中//即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName("li");//打印lis//alert(lis.length);//变量lisfor(var i=0 ; i<lis.length ; i++){alert(lis[i].innerHTML);}};//为id为btn03的按钮绑定一个单击响应函数var btn03 = document.getElementById("btn03");btn03.onclick = function(){//查找name=gender的所有节点var inputs = document.getElementsByName("gender");//alert(inputs.length);for(var i=0 ; i<inputs.length ; i++){/** innerHTML用于获取元素内部的HTML代码的* 对于自结束标签，这个属性没有意义*///alert(inputs[i].innerHTML);/** 如果需要读取元素节点属性，* 直接使用 元素.属性名* 例子：元素.id 元素.name 元素.value* 注意：class属性不能采用这种方式，* 读取class属性时需要使用 元素.className*/alert(inputs[i].className);}};//查找#city下所有li节点//返回#city的所有子节点//返回#phone的第一个子节点//返回#bj的父节点//返回#android的前一个兄弟节点//读取#username的value属性值//设置#username的value属性值//返回#bj的文本值};</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male"/>Male<input class="hello" type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body>
</html>@CHARSET "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;
}button {width: 300px;margin-bottom: 10px;
}#btnList {float:left;
}#total{width: 450px;float:left;
}ul{list-style-type: none;margin: 0px;padding: 0px;
}.inner li{border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float:left;
}.inner{width:400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;
}<!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><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">/** 定义一个函数，专门用来为指定元素绑定单击响应函数* 参数：* idStr 要绑定单击响应函数的对象的id属性值* fun 事件的回调函数，当单击元素时，该函数将会被触发*/function myClick(idStr , fun){var btn = document.getElementById(idStr);btn.onclick = fun;}window.onload = function(){//为id为btn01的按钮绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){//查找#bj节点var bj = document.getElementById("bj");//打印bj//innerHTML 通过这个属性可以获取到元素内部的html代码alert(bj.innerHTML);};//为id为btn02的按钮绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){//查找所有li节点//getElementsByTagName()可以根据标签名来获取一组元素节点对象//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中//即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName("li");//打印lis//alert(lis.length);//变量lisfor(var i=0 ; i<lis.length ; i++){alert(lis[i].innerHTML);}};//为id为btn03的按钮绑定一个单击响应函数var btn03 = document.getElementById("btn03");btn03.onclick = function(){//查找name=gender的所有节点var inputs = document.getElementsByName("gender");//alert(inputs.length);for(var i=0 ; i<inputs.length ; i++){/** innerHTML用于获取元素内部的HTML代码的* 对于自结束标签，这个属性没有意义*///alert(inputs[i].innerHTML);/** 如果需要读取元素节点属性，* 直接使用 元素.属性名* 例子：元素.id 元素.name 元素.value* 注意：class属性不能采用这种方式，* 读取class属性时需要使用 元素.className*/alert(inputs[i].className);}};//为id为btn04的按钮绑定一个单击响应函数var btn04 = document.getElementById("btn04");btn04.onclick = function(){//获取id为city的元素var city = document.getElementById("city");//查找#city下所有li节点var lis = city.getElementsByTagName("li");for(var i=0 ; i<lis.length ; i++){alert(lis[i].innerHTML);}};//为id为btn05的按钮绑定一个单击响应函数var btn05 = document.getElementById("btn05");btn05.onclick = function(){//获取id为city的节点var city = document.getElementById("city");//返回#city的所有子节点/** childNodes属性会获取包括文本节点在呢的所有节点* 根据DOM标签标签间空白也会当成文本节点* 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，* 所以该属性在IE8中会返回4个子元素而其他浏览器是9个*/var cns = city.childNodes;//alert(cns.length);/*for(var i=0 ; i/** children属性可以获取当前元素的所有子元素*/var cns2 = city.children;alert(cns2.length);};//为id为btn06的按钮绑定一个单击响应函数var btn06 = document.getElementById("btn06");btn06.onclick = function(){//获取id为phone的元素var phone = document.getElementById("phone");//返回#phone的第一个子节点//phone.childNodes[0];//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）var fir = phone.firstChild;//firstElementChild获取当前元素的第一个子元素/** firstElementChild不支持IE8及以下的浏览器，* 如果需要兼容他们尽量不要使用*///fir = phone.firstElementChild;alert(fir);};//为id为btn07的按钮绑定一个单击响应函数myClick("btn07",function(){//获取id为bj的节点var bj = document.getElementById("bj");//返回#bj的父节点var pn = bj.parentNode;alert(pn.innerHTML);/** innerText* - 该属性可以获取到元素内部的文本内容* - 它和innerHTML类似，不同的是它会自动将html去除*///alert(pn.innerText);});//为id为btn08的按钮绑定一个单击响应函数myClick("btn08",function(){//获取id为android的元素var and = document.getElementById("android");//返回#android的前一个兄弟节点（也可能获取到空白的文本）var ps = and.previousSibling;//previousElementSibling获取前一个兄弟元素，IE8及以下不支持//var pe = and.previousElementSibling;alert(ps);});//读取#username的value属性值myClick("btn09",function(){//获取id为username的元素var um = document.getElementById("username");//读取um的value属性值//文本框的value属性值，就是文本框中填写的内容alert(um.value);});//设置#username的value属性值myClick("btn10",function(){//获取id为username的元素var um = document.getElementById("username");um.value = "今天天气真不错~~~";});//返回#bj的文本值myClick("btn11",function(){//获取id为bj的元素var bj = document.getElementById("bj");//alert(bj.innerHTML);//alert(bj.innerText);//获取bj中的文本节点/*var fc = bj.firstChild;alert(fc.nodeValue);*/alert(bj.firstChild.nodeValue);});};</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male"/>Male<input class="hello" type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body>
</html> 练习
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#outer{width: 500px;margin: 50px auto;padding: 10px;background-color: greenyellow;/*设置文本居中*/text-align: center;}</style><script type="text/javascript">window.onload = function(){/** 点击按钮切换图片*///获取两个按钮var prev = document.getElementById("prev");var next = document.getElementById("next");/** 要切换图片就是要修改img标签的src属性*///获取img标签var img = document.getElementsByTagName("img")[0];//创建一个数组，用来保存图片的路径var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];//创建一个变量，来保存当前正在显示的图片的索引var index = 0;//获取id为info的p元素var info = document.getElementById("info");//设置提示文字info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";//分别为两个按钮绑定单击响应函数prev.onclick = function(){/** 切换到上一张，索引自减*/index--;//判断index是否小于0if(index < 0){index = imgArr.length - 1;}img.src = imgArr[index];//当点击按钮以后，重新设置信息info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";};next.onclick = function(){/** 切换到下一张是index自增*/index++;if(index > imgArr.length - 1){index = 0;}//切换图片就是修改img的src属性//要修改一个元素的属性 元素.属性 = 属性值img.src = imgArr[index];//当点击按钮以后，重新设置信息info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";};};</script></head><body><div id="outer"><p id="info"></p><img src="img/1.jpg" alt="冰棍" /><button id="prev">上一张</button><button id="next">下一张</button></div></body>
</html>全选练习
<!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>全选练习</title>
<script type="text/javascript">window.onload = function(){//获取四个多选框itemsvar items = document.getElementsByName("items");//获取全选/全不选的多选框var checkedAllBox = document.getElementById("checkedAllBox");/** 全选按钮* - 点击按钮以后，四个多选框全都被选中*///1.#checkedAllBtn//为id为checkedAllBtn的按钮绑定一个单击响应函数var checkedAllBtn = document.getElementById("checkedAllBtn");checkedAllBtn.onclick = function(){//遍历itemsfor(var i=0 ; i<items.length ; i++){//通过多选框的checked属性可以来获取或设置多选框的选中状态//alert(items[i].checked);//设置四个多选框变成选中状态items[i].checked = true;}//将全选/全不选设置为选中checkedAllBox.checked = true;};/** 全不选按钮* - 点击按钮以后，四个多选框都变成没选中的状态*///2.#checkedNoBtn//为id为checkedNoBtn的按钮绑定一个单击响应函数var checkedNoBtn = document.getElementById("checkedNoBtn");checkedNoBtn.onclick = function(){for(var i=0; i<items.length ; i++){//将四个多选框设置为没选中的状态items[i].checked = false;}//将全选/全不选设置为不选中checkedAllBox.checked = false;};/** 反选按钮* - 点击按钮以后，选中的变成没选中，没选中的变成选中*///3.#checkedRevBtnvar checkedRevBtn = document.getElementById("checkedRevBtn");checkedRevBtn.onclick = function(){//将checkedAllBox设置为选中状态checkedAllBox.checked = true;for(var i=0; i<items.length ; i++){//判断多选框状态/*if(items[i].checked){//证明多选框已选中，则设置为没选中状态items[i].checked = false;}else{//证明多选框没选中，则设置为选中状态items[i].checked = true;}*/items[i].checked = !items[i].checked;//判断四个多选框是否全选//只要有一个没选中则就不是全选if(!items[i].checked){//一旦进入判断，则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;}}//在反选时也需要判断四个多选框是否全都选中};/** 提交按钮：* - 点击按钮以后，将所有选中的多选框的value属性值弹出*///4.#sendBtn//为sendBtn绑定单击响应函数var sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function(){//遍历itemsfor(var i=0 ; i<items.length ; i++){//判断多选框是否选中if(items[i].checked){alert(items[i].value);}}};//5.#checkedAllBox/** 全选/全不选 多选框* - 当它选中时，其余的也选中，当它取消时其余的也取消* * 在事件的响应函数中，响应函数是给谁绑定的this就是谁*///为checkedAllBox绑定单击响应函数checkedAllBox.onclick = function(){//alert(this === checkedAllBox);//设置多选框的选中状态for(var i=0; i <items.length ; i++){items[i].checked = this.checked;}};//6.items/** 如果四个多选框全都选中，则checkedAllBox也应该选中* 如果四个多选框没都选中，则checkedAllBox也不应该选中*///为四个多选框分别绑定点击响应函数for(var i=0 ; i<items.length ; i++){items[i].onclick = function(){//将checkedAllBox设置为选中状态checkedAllBox.checked = true;for(var j=0 ; j<items.length ; j++){//判断四个多选框是否全选//只要有一个没选中则就不是全选if(!items[j].checked){//一旦进入判断，则证明不是全选状态//将checkedAllBox设置为没选中状态checkedAllBox.checked = false;//一旦进入判断，则已经得出结果，不用再继续执行循环break;}}};}};</script>
</head>
<body><form method="post" action="">你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <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="checkedAllBtn" value="全 选" /><input type="button" id="checkedNoBtn" value="全不选" /><input type="button" id="checkedRevBtn" value="反 选" /><input type="button" id="sendBtn" value="提 交" /></form>
</body>
</html>
DOM查询的其他的方法
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//获取body标签//var body = document.getElementsByTagName("body")[0];/** 在document中有一个属性body，它保存的是body的引用*/var body = document.body;/** document.documentElement保存的是html根标签*/var html = document.documentElement;//console.log(html);/** document.all代表页面中所有的元素*/var all = document.all;//console.log(all.length);/*for(var i=0 ; i//all = document.getElementsByTagName("*");//console.log(all.length);/** 根据元素的class属性值查询一组元素节点对象* getElementsByClassName()可以根据class属性值获取一组元素节点对象，* 但是该方法不支持IE8及以下的浏览器*///var box1 = document.getElementsByClassName("box1");//console.log(box1.length);//获取页面中的所有的div//var divs = document.getElementsByTagName("div");//获取class为box1中的所有的div//.box1 div/** document.querySelector()* - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象* - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替* - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个*/var div = document.querySelector(".box1 div");var box1 = document.querySelector(".box1")//console.log(div.innerHTML);//console.log(box1.innerHTML);/** document.querySelectorAll()* - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回* - 即使符合条件的元素只有一个，它也会返回数组*/box1 = document.querySelectorAll(".box1");box1 = document.querySelectorAll("#box2");console.log(box1);};</script></head><body><div id="box2"></div> <div class="box1">我是第一个box1 <div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div></div></body>
</html> DOM增删改
<!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><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function() {//创建一个"广州"节点,添加到#city下myClick("btn01",function(){//创建广州节点 广州 //创建li元素节点/** document.createElement()* 可以用于创建一个元素节点对象，* 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，* 并将创建好的对象作为返回值返回*/var li = document.createElement("li");//创建广州文本节点/** document.createTextNode()* 可以用来创建一个文本节点对象* 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回*/var gzText = document.createTextNode("广州");//将gzText设置li的子节点/** appendChild()* - 向一个父节点中添加一个新的子节点* - 用法：父节点.appendChild(子节点);*/li.appendChild(gzText);//获取id为city的节点var city = document.getElementById("city");//将广州添加到city下city.appendChild(li);});//将"广州"节点插入到#bj前面myClick("btn02",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** insertBefore()* - 可以在指定的子节点前插入新的子节点* - 语法：* 父节点.insertBefore(新节点,旧节点);*/city.insertBefore(li , bj);});//使用"广州"节点替换#bj节点myClick("btn03",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** replaceChild()* - 可以使用指定的子节点替换已有的子节点* - 语法：父节点.replaceChild(新节点,旧节点);*/city.replaceChild(li , bj);});//删除#bj节点myClick("btn04",function(){//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** removeChild()* - 可以删除一个子节点* - 语法：父节点.removeChild(子节点);* * 子节点.parentNode.removeChild(子节点);*///city.removeChild(bj);bj.parentNode.removeChild(bj);});//读取#city内的HTML代码myClick("btn05",function(){//获取cityvar city = document.getElementById("city");alert(city.innerHTML);});//设置#bj内的HTML代码myClick("btn06" , function(){//获取bjvar bj = document.getElementById("bj");bj.innerHTML = "昌平";});myClick("btn07",function(){//向city中添加广州var city = document.getElementById("city");/** 使用innerHTML也可以完成DOM的增删改的相关操作* 一般我们会两种方式结合使用*///city.innerHTML += "广州 ";//创建一个livar li = document.createElement("li");//向li中设置文本li.innerHTML = "广州";//将li添加到city中city.appendChild(li);});};function myClick(idStr, fun) {var btn = document.getElementById(idStr);btn.onclick = fun;}</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul></div></div><div id="btnList"><div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div><div><button id="btn02">将"广州"节点插入到#bj前面</button></div><div><button id="btn03">使用"广州"节点替换#bj节点</button></div><div><button id="btn04">删除#bj节点</button></div><div><button id="btn05">读取#city内的HTML代码</button></div><div><button id="btn06">设置#bj内的HTML代码</button></div><div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div></div></body>
</html>练习
<!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>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">window.onload = function(){/** 点击超链接以后，删除一个员工的信息*///获取所有额超链接var allA = document.getElementsByTagName("a");//为每个超链接都绑定一个单击响应函数for(var i=0 ; i < allA.length ; i++){allA[i].onclick = function(){//点击超链接以后需要删除超链接所在的那行//这里我们点击那个超链接this就是谁//获取当前trvar tr = this.parentNode.parentNode;//获取要删除的员工的名字//var name = tr.getElementsByTagName("td")[0].innerHTML;var name = tr.children[0].innerHTML;//删除之前弹出一个提示框/** confirm()用于弹出一个带有确认和取消按钮的提示框* 需要一个字符串作为参数，该字符串将会作为提示文字显示出来* 如果用户点击确认则会返回true，如果点击取消则返回false*/var flag = confirm("确认删除"+name+"吗?");//如果用户点击确认if(flag){//删除trtr.parentNode.removeChild(tr);}/** 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，* 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为*/return false;};}};</script>
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div></body>
</html><!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>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /><script type="text/javascript">/** 删除tr的响应函数*/function delA() {//点击超链接以后需要删除超链接所在的那行//这里我们点击那个超链接this就是谁//获取当前trvar tr = this.parentNode.parentNode;//获取要删除的员工的名字//var name = tr.getElementsByTagName("td")[0].innerHTML;var name = tr.children[0].innerHTML;//删除之前弹出一个提示框/** confirm()用于弹出一个带有确认和取消按钮的提示框* 需要一个字符串作为参数，该字符串将会作为提示文字显示出来* 如果用户点击确认则会返回true，如果点击取消则返回false*/var flag = confirm("确认删除" + name + "吗?");//如果用户点击确认if(flag) {//删除trtr.parentNode.removeChild(tr);}/** 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，* 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为*/return false;};window.onload = function() {/** 点击超链接以后，删除一个员工的信息*///获取所有额超链接var allA = document.getElementsByTagName("a");//为每个超链接都绑定一个单击响应函数for(var i = 0; i < allA.length; i++) {allA[i].onclick = delA;}/** 添加员工的功能* - 点击按钮以后，将员工的信息添加到表格中*///为提交按钮绑定一个单击响应函数var addEmpButton = document.getElementById("addEmpButton");addEmpButton.onclick = function() {//获取用户添加的员工信息//获取员工的名字var name = document.getElementById("empName").value;//获取员工的email和salaryvar email = document.getElementById("email").value;var salary = document.getElementById("salary").value;//alert(name+","+email+","+salary);/** Tom tom@tom.com 5000 Delete <!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>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /><script type="text/javascript">/** 删除tr的响应函数*/function delA() {//点击超链接以后需要删除超链接所在的那行//这里我们点击那个超链接this就是谁//获取当前trvar tr = this.parentNode.parentNode;//获取要删除的员工的名字//var name = tr.getElementsByTagName("td")[0].innerHTML;var name = tr.children[0].innerHTML;//删除之前弹出一个提示框/** confirm()用于弹出一个带有确认和取消按钮的提示框* 需要一个字符串作为参数，该字符串将会作为提示文字显示出来* 如果用户点击确认则会返回true，如果点击取消则返回false*/var flag = confirm("确认删除" + name + "吗?");//如果用户点击确认if(flag) {//删除trtr.parentNode.removeChild(tr);}/** 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，* 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为*/return false;};window.onload = function() {/** 点击超链接以后，删除一个员工的信息*///获取所有额超链接var allA = document.getElementsByTagName("a");//为每个超链接都绑定一个单击响应函数for(var i = 0; i < allA.length; i++) {allA[i].onclick = delA;}/** 添加员工的功能* - 点击按钮以后，将员工的信息添加到表格中*///为提交按钮绑定一个单击响应函数var addEmpButton = document.getElementById("addEmpButton");addEmpButton.onclick = function() {//获取用户添加的员工信息//获取员工的名字var name = document.getElementById("empName").value;//获取员工的email和salaryvar email = document.getElementById("email").value;var salary = document.getElementById("salary").value;//alert(name+","+email+","+salary);/** Tom tom@tom.com 5000 Delete "+name+" "+""+email+" "+""+salary+" "+"Delete ";//获取刚刚添加的a元素，并为其绑定单击响应函数 var a = tr.getElementsByTagName("a")[0];a.onclick = delA;//获取tablevar employeeTable = document.getElementById("employeeTable");//获取employeeTable中的tbodyvar tbody = employeeTable.getElementsByTagName("tbody")[0];//将tr添加到tbodye中tbody.appendChild(tr);/*tbody.innerHTML += ""+""+name+" "+""+email+" "+""+salary+" "+"Delete "+" ";*/};};</script></head><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton">Submit</button></td></tr></table></div></body></html>
<!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>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">window.onload = function(){/** 点击超链接以后，删除一个员工的信息*///获取所有额超链接var allA = document.getElementsByTagName("a");//为每个超链接都绑定一个单击响应函数for(var i=0 ; i < allA.length ; i++){/** for循环会在页面加载完成之后立即执行，* 而响应函数会在超链接被点击时才执行* 当响应函数执行时，for循环早已执行完毕*/alert("for循环正在执行"+i);allA[i].onclick = function(){alert("响应函数正在执行"+i);//alert(allA[i]);return false;};}};</script>
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div></body>
</html>使用DOM操作CSS
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;}</style><script type="text/javascript">window.onload = function(){/** 点击按钮以后，修改box1的大小*///获取box1var box1 = document.getElementById("box1");//为按钮绑定单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){//修改box1的宽度/** 通过JS修改元素的样式：* 语法：元素.style.样式名 = 样式值* * 注意：如果CSS的样式名中含有-，* 这种名称在JS中是不合法的比如background-color* 需要将这种样式名修改为驼峰命名法，* 去掉-，然后将-后的字母大写* * 我们通过style属性设置的样式都是内联样式，* 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示* * 但是如果在样式中写了!important，则此时样式会有最高的优先级，* 即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效* 所以尽量不要为样式添加!important* * * */box1.style.width = "300px";box1.style.height = "300px";box1.style.backgroundColor = "yellow";};//点击按钮2以后，读取元素的样式var btn02 = document.getElementById("btn02");btn02.onclick = function(){//读取box1的样式/** 语法：元素.style.样式名* * 通过style属性设置和读取的都是内联样式* 无法读取样式表中的样式*///alert(box1.style.height);alert(box1.style.width);};};</script></head><body><button id="btn01">点我一下</button><button id="btn02">点我一下2</button><br /><br /><div id="box1"></div></body>
</html>读取元素的样式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: yellow;}</style><script type="text/javascript">window.onload = function(){//点击按钮以后读取box1的样式var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){//读取box1的宽度//alert(box1.style.width);/** 获取元素的当前显示的样式* 语法：元素.currentStyle.样式名* 它可以用来读取当前元素正在显示的样式* 如果当前元素没有设置该样式，则获取它的默认值* * currentStyle只有IE浏览器支持，其他的浏览器都不支持*///alert(box1.currentStyle.width);//box1.currentStyle.width = "200px";//alert(box1.currentStyle.backgroundColor);/** 在其他浏览器中可以使用* getComputedStyle()这个方法来获取元素当前的样式* 这个方法是window的方法，可以直接使用* 需要两个参数* 第一个：要获取样式的元素* 第二个：可以传递一个伪元素，一般都传null* * 该方法会返回一个对象，对象中封装了当前元素对应的样式* 可以通过对象.样式名来读取样式* 如果获取的样式没有设置，则会获取到真实的值，而不是默认值* 比如：没有设置width，它不会获取到auto，而是一个长度* * 但是该方法不支持IE8及以下的浏览器* * 通过currentStyle和getComputedStyle()读取到的样式都是只读的，* 不能修改，如果要修改必须通过style属性*///var obj = getComputedStyle(box1,null);/*alert(getComputedStyle(box1,null).width);*///正常浏览器的方式//alert(getComputedStyle(box1,null).backgroundColor);//IE8的方式//alert(box1.currentStyle.backgroundColor);//alert(getStyle(box1,"width"));var w = getStyle(box1,"width");alert(w);};};/** 定义一个函数，用来获取指定元素的当前的样式* 参数：* obj 要获取样式的元素* name 要获取的样式名*/function getStyle(obj , name){if(window.getComputedStyle){//正常浏览器的方式，具有getComputedStyle()方法return getComputedStyle(obj , null)[name];}else{//IE8的方式，没有getComputedStyle()方法return obj.currentStyle[name];}//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];}</script></head><body><button id="btn01">点我一下</button><br /><br /><div id="box1" ></div></body>
</html>其他样式操作的属性
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;padding: 10px;border: 10px solid yellow;}#box2{padding: 100px;background-color: #bfa;}#box4{width: 200px;height: 300px;background-color: #bfa;overflow: auto;}#box5{width: 450px;height: 600px;background-color: yellow;}</style><script type="text/javascript">window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");var box4 = document.getElementById("box4");btn01.onclick = function(){/** clientWidth* clientHeight* - 这两个属性可以获取元素的可见宽度和高度* - 这些属性都是不带px的，返回都是一个数字，可以直接进行计算* - 会获取元素宽度和高度，包括内容区和内边距* - 这些属性都是只读的，不能修改*///alert(box1.clientWidth);//alert(box1.clientHeight);//box1.clientHeight = 300;/** offsetWidth* offsetHeight* - 获取元素的整个的宽度和高度，包括内容区、内边距和边框*///alert(box1.offsetWidth);/** offsetParent* - 可以用来获取当前元素的定位父元素* - 会获取到离当前元素最近的开启了定位的祖先元素* 如果所有的祖先元素都没有开启定位，则返回body*/var op = box1.offsetParent;//alert(op.id);/** offsetLeft* - 当前元素相对于其定位父元素的水平偏移量* offsetTop* - 当前元素相对于其定位父元素的垂直偏移量*///alert(box1.offsetLeft);/** scrollWidth* scrollHeight* - 可以获取元素整个滚动区域的宽度和高度*///alert(box4.clientHeight);//alert(box4.scrollWidth);/** scrollLeft* - 可以获取水平滚动条滚动的距离* scrollTop* - 可以获取垂直滚动条滚动的距离*///alert(box4.scrollLeft);//alert(box4.scrollTop);//alert(box4.clientHeight); // 283//当满足scrollHeight - scrollTop == clientHeight//说明垂直滚动条滚动到底了//当满足scrollWidth - scrollLeft == clientWidth//说明水平滚动条滚动到底//alert(box4.scrollHeight - box4.scrollTop); // 600};};</script></head><body id="body"><button id="btn01">点我一下</button><br /><br /><div id="box4"><div id="box5"></div></div><br /><br /><div id="box3"><div id="box2" style="position: relative;"><div id="box1"></div></div></div></body>
</html>练习
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#info{width: 300px;height: 500px;background-color: #bfa;overflow: auto;}</style><script type="text/javascript">window.onload = function(){/** 当垂直滚动条滚动到底时使表单项可用* onscroll* - 该事件会在元素的滚动条滚动时触发*///获取id为info的p元素var info = document.getElementById("info");//获取两个表单项var inputs = document.getElementsByTagName("input");//为info绑定一个滚动条滚动的事件info.onscroll = function(){//检查垂直滚动条是否滚动到底if(info.scrollHeight - info.scrollTop == info.clientHeight){//滚动条滚动到底，使表单项可用/** disabled属性可以设置一个元素是否禁用，* 如果设置为true，则元素禁用* 如果设置为false，则元素可用*/inputs[0].disabled = false;inputs[1].disabled = false;}};};</script></head><body><h3>欢迎亲爱的用户注册</h3><p id="info">亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册</p><!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 --><input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守<input type="submit" value="注册" disabled="disabled" /></body>
</html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！