js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom的增加/添加删除练习
2024-06-03 22:37:39
dom基础
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>dom</title></head><body><button id="btn">我是一个按钮</button><script type="text/javascript">// 浏览器已经为我们提供文档节点 对象，这个对象时window属性// 可以在页面中直接使用，文档节点代表的是整个网页//console.log(document);//获取button对象:var btn = document.getElementById("btn");console.log(btn);//修改按钮里的文字//先试试能不能获取到console.log(btn.innerHTML);btn.innerHTML="I am a button"</script>
</body></html>
绑定单击文档的事件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件</title></head><body><!-- 我们可以在时间对应的属性中设置一些js代码这样当事件被触发时，这些代码会被执行 ondblclick双击onmousemove 鼠标触摸这种写法称为结构和行为耦合，不方便使用--><!-- <button id="btn" onmousemove="alert('我是按钮,我被点击了')">我是一个按钮</button> --><button id="btn">我是一个按钮</button><script type="text/javascript">//事件，就是浏览器和用户之间的交互行为// 比如，点击按钮，鼠标移动，关闭窗口//获取按钮对象var btn=document.getElementById("btn");console.log(btn);//可以为按钮对应的时间绑定处理函数的形式来响应事件，//这样当事件被触发时，其对应的函数将会被调用//像这种为单击事件绑定的函数，我们称为单击响应函数btn.ondblclick=function(){alert("点一次哦~~");};</script>
</body></html>
文档的加载
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文档的加载</title><script type="text/javascript">/* onload事件会在整个页面加载完成之后才触发！！！为window绑定一个onload该事件对应的相应函数将会在页面加载完成之后执行这样就可以确保代码执行时所有的dom对象都已经加载完毕了*/window.onload = function () {//获取按钮var btn = document.getElementById("btn");//为按钮绑定响应函数btn.onclick = function () {alert("hello");}}</script></head><body><!-- 浏览器加载页面时，是按照自上向下的顺序读取的读取一行，就运行一行如果将script标签写在页面的上面，在代码执行时，页面还没有加载--><button id="btn">点我一下 </button></body></html>
通过类名
var btn = document.getElementsByClassName("btn")[0];btn.onclick = function () {alert("dfg");}
getElementsByName
getElementsByTagName
都得到的是一个数组
获取元素节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取元素节点</title><script type="text/javascript">/* 尝试定义一个函数，专门用来为指定元素绑定单击响应函数idbtr 要绑定单击响应函数的对象的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(可以通过查看元素内部的html代码查看获取到的对不对)alert(bj.innerHTML);}var btn02 = document.getElementById("btn02");btn02.onclick = function () {//查找所有的li节点//通过标签名获取一组元素标签节点//这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中//即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName("li");//alert(lis);//alert(lis.length);//遍历数组for (var i = 0; i < lis.length; i++) {alert(lis[i].innerHTML);}}var btn03 = document.getElementById("btn03");btn03.onclick = function () {//查找name=gender的所有元素(input元素)var inputs = document.getElementsByName("gender");// alert(inputs.length);for (var i = 0; i < inputs.length; i++) {/* innerHTML用来获取元素内部的HTML代码,对于自结束标签（input）这个属性没有意思alert(inputs[i].innerHTML);*//*如果需要读取元素节点的属性，直接使用元素.属性名alert(inputs[i].value); 元素.id 元素.name 元素.value 但是class属性不能采用这种方式，要使用className*/alert(inputs[i].className);}}var btn04 = document.getElementById("btn04");btn04.onclick = function () {//查找#city下面的所有li节点//首先找到#cityvar city = document.getElementById("city");var lis = city.getElementsByTagName("li");// alert(lis.length);for (var i = 0; i < lis.length; i++) {alert(lis[i].innerHTML);}}var btn05 = document.getElementById("btn05");btn05.onclick = function () {//返回#city的所有子节点var city = document.getElementById("city");/* childnodes会获取包括文本节点在内的所有节点标签之间的空白（换行）也会被当做节点在IE8以下的浏览器中不会把空白当做节点var cns=city.childNodes;alert(cns.length); //9children属性可以获取当前元素的所有子元素*/var cns = city.children;for (var i = 0; i < cns.length; i++) {alert(cns[i].innerHTML);}}var btn06 = document.getElementById("btn06");btn06.onclick = function () {//获取id为phone的属性var phone = document.getElementById("phone");//返回#phone的第一个子节点/*firstchild 可以获取到当前元素的第一个子节点（包括空白文本节点）firstElementChild 不包括空白 但是兼容性不好*/var fir = phone.firstElementChild;alert(fir.innerHTML);}//为id为btn07的按钮绑定一个单击响应函数myclick("btn07", function () {//获取id为北京的节点var bj = document.getElementById("bj");//父节点肯定是一个var pn = bj.parentNode;// alert(pn);alert(pn.innerHTML);/*innerText 可以获取元素内部的文本内部，并且会自动将html标签去除，和innerhtml类似 */alert(pn.innerText);});//btn08myclick("btn08", function () {//返回id为Android的前一个兄弟节点var and = document.getElementById("android");/*也可能获取到空白文本(空格)*/// var andps=and.previousSibling;/*不会获取空白文本*/var andps = and.previousElementSibling;alert(andps);});//btn09myclick("btn09", function () {//获取id为username的value值属性var user = document.getElementById("username");//value值就是文本框中填写的内容alert(user.value);});//btn10myclick("btn10", function () {//获取id为username的value值属性var user = document.getElementById("username");//value值就是文本框中填写的内容user.value = "今天天气真不错";});myclick("btn11", function () {var bj = document.getElementById("bj");//alert(bj.innerHTML); 有标签//alert(bj.innerText) //获取北京 的文本节点alert(bj.firstChild.nodeValue);});}</script></head><style>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;}
</style><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 lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript">window.onload = function () {/*点击按钮切换图片切换图片，就是修改img标签的Src属性*///获取两个按钮var prev = document.getElementById("prev");var next = document.getElementById("next");/*获取img,因为返回的是一个数组，但数组中每次其实只有一张图片，所以我们加一个【0】，把第一张图片给取出来*/var img = document.getElementsByTagName("img")[0];//查看img得到的是什么（加上索引【0】，得到的就是元素了） alert(img);//创建一个数组，用来保存图片的路径var imgarr = ["./picture/jd (1).jpg", "./picture/jd (2).jpg", "./picture/jd (3).jpg", "./picture/tb (2).png", "./picture/tb (1).png"]//创建一个变量，来保存当前正在显示的图片的索引var index = 0;//设计提示文字var info=document.getElementById("info");info.innerHTML="一共"+imgarr.length+"张图片,当前是第"+(index+1)+"张";//分别为两个按钮绑定单击响应函数prev.onclick = function () {//修改元素的属性 元素.属性=属性值/*这样得到的是定值，不太好img.src="./picture/jd (1).jpg";*/index--;if(index<0){//变成循坏index=imgarr.length-1;}info.innerHTML="一共"+imgarr.length+"张图片,当前是第"+(index+1)+"张";img.src = imgarr[index];}next.onclick = function () {index++;if(index>imgarr.length-1){index=0;}img.src = imgarr[index];info.innerHTML="一共"+imgarr.length+"张图片,当前是第"+(index+1)+"张";}}</script></head><style>* {margin: 0;padding: 0;}#outer {width: 590px;margin: 50px auto;background-color: antiquewhite;padding: 10px;text-align: center;}
</style><body><div id="outer">
<p id="info"></p><img src="./picture/jd (1).jpg" alt="京东"><button id="prev">上一张</button><button id="next">下一张</button></div>
</body></html>全选全不选
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全选练习</title><script type="text/javascript">window.onload = function () {var items = document.getElementsByName("items");//checkedAllBtn全选按钮，点击按钮以后，多选框全被选中var checkedAllBtn = document.getElementById("checkedAllBtn");checkedAllBtn.onclick = function () {//设置多选框变成选中状态// alert(items.length);验证一下是否获取了for (var i = 0; i < items.length; i++) {items[i].checked = true;}//将全选按钮选中checkedAllBox.checked=true;};//checkedNoBtn全不选var checkedNoBtn = document.getElementById("checkedNoBtn");checkedNoBtn.onclick = function () {// var items=document.getElementsByName("items");for (var i = 0; i < items.length; i++) {items[i].checked = false;}//将全不选按钮选中checkedAllBox.checked=false;};//checkedRevBtn反选var checkedRevBtn = document.getElementById("checkedRevBtn");checkedRevBtn.onclick = function () {// var items=document.getElementsByName("items");
//也加默认设置为true
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.checked=false;}}//在反选时，也要进行判断，可以直接复制过来但是比较麻烦}//sendBtn提交var sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function () {for (var i = 0; i < items.length; i++) {if (items[i].checked) {alert(items[i].value);}}}//checkedAllBoxvar checkedAllBox = document.getElementById("checkedAllBox");checkedAllBox.onclick = function () {for (var i = 0; i < items.length; i++) {/* items[i].checked =checkedAllBox.checked;在事件的相应函数中，响应函数给谁绑定的this就是谁*/items[i].checked =this.checked;}}/*如果四个多选框全都（没）选中，则CheckBox也应该（没）选中给四个多选框分别绑定单击响应函数*/for(var i=0;i<items.length;i++){items[i].onclick=function(){checkedAllBox.checked=true;for(var j=0;j<items.length;j++){//如果有一个没选中if(!items[j].checked){checkedAllBox.checked=false;//一旦进入break，则退出循环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 lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>dom其他属性</title><script type="text/javascript">window.onload = function () {/*获取body标签var body=document.getElementsByClassName("body")[0];在document中有一个属性body，它保存的是body的引用documentElement保存的是html根标签document.all代表页面中所有的元素(html head body meta title....)*/var body = document.body;var html = document.documentElement;// console.log(html);var all = document.all;// for(var i=0;i<all.length;i++)// console.log(all[i]);/*根据元素的class属性查询一组元素节点对象兼容性 ie9+ */var box1 = document.getElementsByClassName("box1");console.log(box1.length);/*获取box1中的所有div( .box1 div ) document.querySelector()需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象虽然IE8中没有getElementsByClassName，但是我们可以通过querySelector使用该方法只会返回唯一的元素如果满足条件的元素有多个，但是只会返回第一个*/var div = document.querySelector(".box1 div");console.log(div.innerHTML);/*document.querySelectorAll 该用法和selector用法类似，不同的是它会将符合条件的元素封装在一个数组里*///var box1 = document.querySelectorAll(".box1")[0];var box1 = document.querySelectorAll(".box1");console.log(box1.length);}</script>
</head><body><div class="box1"><div>我是div中的box1</div></div><div></div>
</body></html>
dom的增加
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>dom的增删改</title><script type="text/javascript">function myclick(idstr, fun) {var btn = document.getElementById(idstr);btn.onclick = fun;}window.onload = function () {//1.创建一个广州节点，绑定在#city下 myclick("btn01", function () {/*广州节点 是一个li节点document.createElement 可以用于创建一个元素节点对象想创建什么标签就写什么，将新建好的对象返回document.createTextNode可以用来创建一个文本节点对象需要一个文本内容作为参数，并且将新的节点返回*/var li = document.createElement("li");var gztext = document.createTextNode("广州");/* Text是li的子节点，现在开始设置appendChild()向一个父节点添加一个新的子节点父节点.appendChild(子节点)*/li.appendChild(gztext);var city = document.getElementById("city");city.appendChild(li);});//将广州节点插入到#bj前面myclick("btn02", function () {var li = document.createElement("li");var gztext = document.createTextNode("广州");li.appendChild(gztext);/*insertBefore在指定的子节点前插入新的子节点，（找父节点，没有父节点就没有子节点）父节点.insertbefore(新结点，旧节点);*/var bj = document.getElementById("bj");var city = document.getElementById("city");city.insertBefore(li, bj);});//使用广州节点替换#bj节点myclick("btn03", function () {var li = document.createElement("li");var gztext = document.createTextNode("广州");li.appendChild(gztext);var bj = document.getElementById("bj");var city = document.getElementById("city");/*replaceChild可以使用指定的子节点替换已有的父节点（指定子节点的）父节点.replaChild(新结点，旧节点)*/city.replaceChild(li, bj);});//删除#bj节点myclick("btn04", function () {var bj = document.getElementById("bj");var city = document.getElementById("city");/*removeChild可以删除子节点父节点.removeChild(删除的节点)city.removeChild(bj);子节点.parentNode.removeChild(子节点);*/bj.parentNode.removeChild(bj);});//读取city内的html代码myclick("btn05",function(){var city=document.getElementById("city");console.log(city.innerHTML);});//设置bj内的html代码myclick("btn06",function(){var bj=document.getElementById("bj");bj.innerHTML="昌平";});//创建一个广州节点，添加到city下面myclick("btn07",function(){//使用innerHTML也可以完成相关操作var li=document.createElement("li");li.innerHTML+="广州";var city=document.getElementById("city");city.appendChild(li);});}</script></head>
<style>body {width: 800px;margin-left: auto;margin-right: auto;}button {width: 300px;margin-bottom: 10px;text-align: left;}#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;}
</style><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">1、创建一个"广州"节点,添加到#city下</button></div><div><button id="btn02">2、将"广州"节点插入到#bj前面</button></div><div><button id="btn03">3、使用"广州"节点替换#bj节点</button></div><div><button id="btn04">4、删除#bj节点</button></div><div><button id="btn05">5、读取#city内的HTML代码</button></div><div><button id="btn06">6、设置#bj内的HTML代码</button></div><div><button id="btn07">7、创建一个"广州"节点,添加到#city下</button></div></div></body></html>
添加删除练习1
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>添加删除记录练习</title><script type="text/javascript">//点击a删除tr的响应函数function delA() {/*点击超链接以后，需要删除超链接所在的那一行点击哪个超链接，this就是谁alert(this);获取到当前的tr*/var tr = this.parentNode.parentNode;/*获取要删除员工的名字var name=tr.getElementsByTagName("td")[0].innerHTML;或者*/var name = tr.children[0].innerHTML;/*删除之前弹出一个对话框alert("确认删除吗?")alert不行，没有取消删除confirm用于弹出一个带有确认和取消按钮的提示框它是有返回值的，如果用户点击确认，返回true*/if (confirm("确认删除" + name + "吗?")) {tr.parentNode.removeChild(tr);}/*点击超链接以后，超链接会跳转页面但是此时我们不希望跳转 通过return false或者把超链接的href改为JavaScript:;*/return false;}window.onload = function () {/*1.点击超链接之后，删除员工的信息我们要做的就是，首先获取超链接*/var allA = document.getElementsByTagName("a");//为每个超链接绑定一个单击响应函数for (var i = 0; i < allA.length; i++) {allA[i].onclick = delA;}//2.添加var sub = document.getElementById("addEmpButton");sub.onclick = function () {//获取文本框input中的内容var name = document.getElementsByTagName("input")[0];// alert(name.value);查看是否正确获取到值var email = document.getElementById("email").value;// alert(email.value);var salary = document.getElementsByTagName("input")[2];// alert(salary.value);var tableobj = document.getElementById("employeeTable");var trobj = document.createElement("tr");//准备新添加一行元素，先获取一个td//因为步骤重复，这个地方合成一个函数function APPEND(info) {var tdobj = document.createElement("td");tdobj.innerHTML = info;trobj.appendChild(tdobj);}APPEND(name.value);APPEND(email);//把value在上面获取也行APPEND(salary.value);/* var tdobj = document.createElement("td");tdobj.innerHTML = email.value;trobj.appendChild(tdobj);var tdobj = document.createElement("td");tdobj.innerHTML = salary.value;trobj.appendChild(tdobj);*/var tdobj = document.createElement("td");var aobj = document.createElement("a");aobj.innerHTML = "Delete";//向a中添加href属性aobj.href = "javascript:;";//为新添加的a重新添加单击绑定函数aobj.onclick = delA;tdobj.appendChild(aobj);trobj.appendChild(tdobj);//获取tableobj的tbody(返回的是一个数组)var tbody = tableobj.getElementsByTagName("tbody")[0];tbody.appendChild(trobj);}}</script>
</head>
<style>#total {width: 450px;margin-left: auto;margin-right: auto;}ul {list-style-type: none;}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: 10px;padding: 10px;float: left;}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;}th,td {background-color: white;}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;}#formDiv input {width: 100%;}.word {width: 40px;}.inp {width: 200px;}
</style><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>
添加删除练习2
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>添加删除记录练习</title><script type="text/javascript">//点击a删除tr的响应函数function delA() {var tr = this.parentNode.parentNode;var name = tr.children[0].innerHTML;if (confirm("确认删除" + name + "吗?")) {tr.parentNode.removeChild(tr);}return false;}window.onload = function () {var allA = document.getElementsByTagName("a");//为每个超链接绑定一个单击响应函数for (var i = 0; i < allA.length; i++) {allA[i].onclick = delA;}//2.添加var sub = document.getElementById("addEmpButton");sub.onclick = function () {//获取文本框input中的内容var name = document.getElementsByTagName("input")[0];// alert(name.value);查看是否正确获取到值var email = document.getElementById("email").value;// alert(email.value);var salary = document.getElementsByTagName("input")[2];// alert(salary.value);var trobj = document.createElement("tr");trobj.innerHTML = "<td>" + name.value + "</td>" + "<td>" + email + "</td>" + "<td>" + salary.value + "</td>" +"<td><a href='javascript:;'>Delete</a></td>";//获取添加的a元素，并给它绑定单击响应函数var a = trobj.getElementsByTagName("a")[0];a.onclick = delA;var tableobj = document.getElementById("employeeTable");/*在代码里面是没有body,但是检查的时候会发现，有，我们需要添加在tbody里面而且tbody是table里面的元素*/var tbody=tableobj.getElementsByTagName("tbody")[0];tbody.appendChild(trobj);}}</script>
</head>
<style>#total {width: 450px;margin-left: auto;margin-right: auto;}ul {list-style-type: none;}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: 10px;padding: 10px;float: left;}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;}th,td {background-color: white;}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;}#formDiv input {width: 100%;}.word {width: 40px;}.inp {width: 200px;}
</style><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>
a的索引问题
window.onload = function () {var allA = document.getElementsByTagName("a");//为每个超链接绑定一个单击响应函数for (var i = 0; i < allA.length; i++) {/*for循坏在页面加载完成之后立即执行而响应函数会在超链接被点击时才执行当响应函数执行时，for循坏早已经执行完毕所以响应函数这个3，才是undefined*/alert("for循环正在执行"+i);allA[i].onclick = function () {alert("响应函数正在执行"+i);/*这个地方的this能不能换成allA[i],不可以var tr = this.parentNode.parentNode;*/}}//2.添加
js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom的增加/添加删除练习相关推荐
- c#web页面显示弹窗_C#监听IE文档加载完成、弹窗、JS弹窗、页面跳转
这个Demo在早段时间有个网友需要做一个相关方面的软件,我给做出来的.很方面,在JS弹窗监听上耗了不少时间.现在均已解决!请勿用作非法商业用途,该软件产生的后果与作者本人无关,特此声明. 由于需要对H ...
- document.ready和onload的区别——JavaScript文档加载完成事件
文章转自:http://blog.csdn.net/kk5595/article/details/5713209 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒 ...
- DOM文档加载的步骤：
(1) 解析HTML结构. (2) 加载外部脚本和样式表文件. (3) 解析并执行脚本代码. (4) 构造HTML DOM模型.//ready (5) 加载图片等外部文件. (6) 页面加载完毕.// ...
- 监控页面后退前进，浏览器文档加载事件之pageshow、pagehide
输入密码后,点击查看协议,然后返回注册页面,密码输入栏为空,应该显示默认提示信息"请设置登录密码",情况如下 页面结构: <div class="inputwrap ...
- 文档加载完后执行相关事件
document.onreadystatechange = function () {if(document.readyState == 'complete'){// code } } 转载于:htt ...
- 深入理解DOM事件类型系列第六篇——加载事件
前面的话 提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.java ...
- 需求获取方法之观察与文档审查
需求工程系列: 软件需求工程习题1(1~4章) 软件需求工程习题2(5~7章) 需求工程中的面谈和原型(8.9章) 需求获取方法之观察与文档审查(10章) 需求工程规格说明.需求验证.需求管理(11~ ...
- uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言 最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
- JS使用技巧-如何解决谷歌浏览器下载图片、PDF文档时只打开不下载的问题？
问题描述: 页面下载跨域的图片.pdf文件,浏览器总是自动打开,并且在下载列表里面不显示. 如何解决谷歌浏览器下载图片.PDF文档时只打开不下载的问题?如何变成直接下载? 解决方法: 使用js获取下载 ...
最新文章
- python使用正则表达式验证用户输入密码的有效性
- sql将一列拆分为多列_【Excel实用技巧】把一列数据拆分为多列的三个菜鸟招数，你还有更菜的方法吗？...
- 在Windows下使用make命令
- 高人对libsvm的经典总结（全面至极）
- 前端学习（1846）vue之电商管理系统电商项目基本概述
- python turtle 怎么设计背景颜色_Python, turtle海龟作图，如何添加背景图片？
- git删除某次提交（某个commit）的方法【转】
- 算法--帕斯卡三角（杨辉三角）JS写法
- 树——一种数据结构（二）
- poj 2987 Firing (最大权 闭合 图)
- Github README.md中添加图片
- 格力空调通讯协议_格力空调485-格力风管机空调内外机单片机RS485通讯协议格式是怎样的-电气资讯 - 电工屋...
- Python数据库sqlite3详解
- 搜狗首席科学家柳超博士谈“字根嵌入”让机器更懂中文
- 爱上文案——如何写出有销售力的广告文案
- Android:Glide异步加载图片,设置默认图片和错误图片
- 用前端代码智能识别身份证的头像
- 北京智和信通受邀出席2022IT运维大会，荣获“2022智能运维星耀榜最具影响力企业”
- matlab 出现 numeric,About Numeric Matlab
- 科软-信息安全实验2-netfilter实验