//----------总结01.查找dom元素 document.getElementById();//通过id获取一个dom元素
document.getElementsByClassName();//通过class获取dom数组
document.getElementsByTagName();//通过标签名获取dom数组
//02.修改dom元素 dom.type = "text"//type属性
dom.innerHTML//双标签的文本值 这里注意innerText
dom.value//修改单标签的文本值,比如input
document.getElementById().style.height//注意样式需要通过style点出来,高度,宽度需要添加单位
1.删除dom元素
dom元素.parentNode.removeChild(dom元素)//dom元素不能自己删除自己,必须通过父元素删除自己
//删除的dom元素还在内存中,只是将他从dom树里面删除了
//04.创建dom元素 document.createElement("input");//在js中所有dom元素的创建都是通过这种方式,传入不同的标签名,返回不同的元素
dom元素.appendChild(newNode)//创建好的dom元素必须将他添加到dom树里面去才能看的到
//05.克隆dom元素
dom元素.cloneNode(true);//所有的dom元素都有这个方法,传入false 只克隆元素本身,传入 true 子元素一起克隆
//06.a标签引入js代码
<a href="javascript:这里写js代码">测试用</a>//在javascript:之后写js代码
//07.select标签的特殊
//01.通过设置select.value 可以修改被选中的option.但是设置的value值,必须有相应的option标签存在,否则没效果
//02.修改了选中的option标签会触发select标签的 onchange事件
//08.第二种绑定0级dom事件的方式
<input type='button' onclick='这里写的是js代码'>//注意这样绑定的方法体内部的this
//09.快速获取父节点
dom元素.parentNode
//10.注意
写js的时候可能没有提示,大胆的写上去把!!!!!
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> //01.变量定义 //var fox = 123; //alert(fox); //fox = "小狐狸"; //02.对象的写法 //对象的直面两标识发里面 属性名 可以加"" 也可以不加 //加了双引号:叫做 json格式 //不加双引号:js的字面量表示法 //var fox = new Object(); //fox = { // "name":"小二黑",age:18 //} ////03.数组,长度可变,object //var foxArr = new Array(); //foxArr = [1, 2, 3, 4, { "name": "fox", "age": 19 }]; //foxArr[foxArr.length]//数组新增一位 ////04.判断语句 ////string 对象 数组 数字(除0) true ////false 0 NaN null undefined //function sayhi() { } //if (sayhi) { //} ////05选择 break 可以不写 会向下执行 //switch (switch_on) { // default: //} //06循环语句 //while (true) { //} //do { //} while (true); //for (var i in o) { // o[i] //} //for (var i = 0; i < length; i++) { //} //07方法 //new Function 里面的方法体如果只有一行 不需要分号,如果多行 必须用分号隔开 //function sayHi(name, age) { // return new Function("alert(123)"); //} //var returnFunc = sayHi(); //returnFunc(); ////08. dom(文档对象模型) dom对象和dom树 ////每一个标签都是一个dom对象,浏览器解析完毕所有html标签以后 生成dom树 //document.getElementById(); //通过id 获取单个 //document.getElementsByClassName();//通过class 获取多个 //document.getElementsByTagName();//通过标签名 获取多个 ////09bom 浏览器对象模型 可以理解为是一个类 ////window对象可以理解为 是bom类new出来的对象 ////在页面中定义的所有全局变量,都是window的属性 //// window //var haha = "123"; ////方法体里面的this 看调用这个方法的时候 这个方法由谁点出来 //function sayHi() { // alert(this); //} //---------------分割线问题解答 //01function(直接创建的时候使用) Function(new 方法对象的时候使用) //除了写法不同,其他都一样,都是创建了一个方法对象 //function sayHello() { } //new Function(); //02 //var people = sayHello();//执行sayHello方法 将方法的返回值赋给people //var smallPeople = sayHello;//直接将方法的引用地址给smallPeople </script> </head> <body> <input type="button" id="btnTest" /> </body> </html> <script type="text/javascript"> //03匿名函数 //匿名函数 就是定义的时候不需要写名字的函数,但是他也会在内存中创建一个方法对象 //document.getElementById("btnTest").onclick = function () { alert("123"); } //function sayHi() { // alert("123"); //} //document.getElementById("btnTest").onclick = sayHi; //变量必须定义在方法的下面------ var haha = function () { alert("捏哈哈"); } document.getElementById("btnTest").onclick = haha; //对于方法,浏览器做了优化,只有在调用这个方法的时候,才会去页面里面找 //document.getElementById("btnTest").onclick = sayHello; //function sayHello() { // alert("123"); //} </script>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <input type="button" value="docment绑定" id="btnDoc"/> <input type="button" value="标签内绑定" id="btnSurprise" onclick="sayThis(this);"/> </body> </html> <script type="text/javascript"> //0级dom事件绑定方法1 直接通过onclick=xxx绑定的 document.getElementById("btnDoc").onclick = function () { alert(this); } alert(document.getElementById("btnDoc").onclick); //02.直接写在标签里面的 事件属性 用=号赋值 =号后面写的是 js代码 //直接写在标签内部的onclick属性 浏览器在解析的时候 会自动生成一个方法 将这段js代码包起来 alert(document.getElementById("btnSurprise").onclick); //全局函数 function sayThis(SomeObj) { alert(this+"||"+SomeObj) } </script>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ol { list-style: none; } li { text-align: center; border: 1px solid #0094ff; 300px; margin: 0 auto; } </style> </head> <body> <ol> <li> <label>NumA:</label><input type="text" id="numA" /></li> <li> <label>NumB:</label><input type="text" id="numB" /></li> <li> <input type="button" value="+" onclick="doCom('+')" /> <input type="button" value="-" onclick="doCom('-')" /> <input type="button" value="*" onclick="doCom('*')" /> <input type="button" value="/" onclick="doCom('/')" /></li> <li> <label>Result:</label><input type="text" id="Result" /></li> </ol> </body> </html> <script type="text/javascript"> function doCom(method) { var numA = document.getElementById("numA").value.trim(); var numB = document.getElementById("numB").value.trim() switch (method) { case "+": if (checkNum(numA, numB)) { //修改结果文本框里面的value字 document.getElementById("Result").value = Number(numA) + Number(numB); } else { alert("请正确输入"); } break; case "-": if (checkNum(numA, numB)) { //修改结果文本框里面的value字 document.getElementById("Result").value = Number(numA) - Number(numB); } else { alert("请正确输入"); } break; case "*": if (checkNum(numA, numB)) { //修改结果文本框里面的value字 document.getElementById("Result").value = Number(numA) * Number(numB); } else { alert("请正确输入"); } break; case "/": if (checkNum(numA, numB)) { //修改结果文本框里面的value字 document.getElementById("Result").value = Number(numA) / Number(numB); } else { alert("请正确输入"); } break; default: } } //检查两个文本框里面的是否是数字 function checkNum(numA, numB) { //判断是否不是一个数字 if (window.isNaN(numA) == false && numB != "" && numA != "" && window.isNaN(numB) == false) { return true; } else { return false; } } </script>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> table { border: 1px solid #0094ff; border-collapse: collapse; 300px; } td { border: 1px solid #0094ff; } div { border: 1px solid #0094ff; 298px; } </style> </head> <body> <table id="tbList"> <tbody id="tbListBody"> <tr> <td>序号</td> <td>姓名</td> <td>技能</td> <td>操作</td> </tr> </tbody> </table> <div> <input type="checkbox" id="chkAll" /><label for="chkAll" style="cursor: pointer">全选</label> <a href="javascript:void(0)" onclick="DoDelChecked()">删除选中</a> </div> </body> </html> <script type="text/javascript"> //01.table 浏览器在解析的时候,会自动生成一个tbody 然后把tr放到tbody里面去 //如果在table已经生成完毕在 table.appendChild(tr)添加tr 那么就是加到 table下面 var dataArr = [ { "name": "柯震东", "skill": "吸毒" }, { "name": "李代沫", "skill": "唱歌" }, { "name": "张默", "skill": "像房祖名" }, { "name": "房祖名", "skill": "像张默" }, { "name": "郭美美", "skill": "吃毒大米" }, ] //02.使用代码为table添加tr for (var i = 0; i < dataArr.length; i++) { //02.1创建一个tr var trCreate = document.createElement("tr"); //02.2生成td分为两种 //单元格00 var td00 = document.createElement("td"); td00.innerHTML = i + 1 + "<input type='checkbox'class='chkOne'>"; trCreate.appendChild(td00); //单元格01 var td01 = document.createElement("td"); td01.innerHTML = dataArr[i].name; trCreate.appendChild(td01); //单元格02 var td02 = document.createElement("td"); td02.innerHTML = dataArr[i].skill; trCreate.appendChild(td02); //单元格03 var td03 = document.createElement("td"); td03.innerHTML = "<a href='javascript:void(0)' onclick='doDelTr(this)'>删除该行</a>"; trCreate.appendChild(td03); //将tr添加到tbody里面 // document.getElementById("tbListBody").appendChild(trCreate);tbList document.getElementById("tbList").appendChild(trCreate); } //02.5checked这个属性有点特殊,直接写在标签里面,不给值 就是被选中; 给任何值也是被选中 //如果使用js去修改checked属性 给true 就是选中 给false 就是不选中 //document.getElementById("chkAll").checked = false; //03.为全选框设置点击事件 document.getElementById("chkAll").onclick = function () { //alert(this.checked); //for循环 将所有的单选框的选中状态设置跟全选框一样就好 var chkOneObjs = document.getElementsByClassName("chkOne"); for (var i = 0; i < chkOneObjs.length; i++) { chkOneObjs[i].checked = this.checked; } } //-----------------分割线 方法 //a标签的this 就是他的href属性 function doDelTr(aObj) { if (confirm("你想好了?")) { // alert(aObj); //根据a标签 获取他所在的tr // a标签 td tr var delTr = aObj.parentNode.parentNode; //通过tr的父节点 删除tr //tr tr的父节点 delTr.parentNode.removeChild(delTr); } else { alert("不要手贱啊"); } } //删除选中的方法 function DoDelChecked() { //获取所有的单选框 var chkOneObjs = document.getElementsByClassName("chkOne"); //循环 判断 单选框是否被选中 for (var i = chkOneObjs.length-1; i >=0; i--) { if (chkOneObjs[i].checked==true) { //通过单选框 获取所在tr // 单选框 td tr var delTr = chkOneObjs[i].parentNode.parentNode; //通过tr获取父节点 调用父节点的删除方法 delTr.parentNode.removeChild(delTr); } } //如果被选中 就删除 //否则 不干事情 } </script>
图片文字切换
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> div { border:1px solid #0094ff; margin:0 auto; } #divImg { 300px; height:192px; } #divInfo { 300px; height:30px; } li { float:left; border:1px solid #0094ff; height:15px; 25px; text-align:center; line-height:15px; } ol { list-style:none; position:absolute; top:168px; left:595px; } </style> </head> <body> <div id="divImg"> <ol> <li key="button1">1</li> <li key="button2">2</li> <li key="button3">3</li> <li key="button4">4</li> </ol> </div> <div id="divInfo"></div> </body> </html> <script type="text/javascript"> //图片信息数据存储 var imgInfoArr = [ { "key": "button1", "imgPath": "/img/1.jpg", "imgInfo": "两个小loli" }, { "key": "button2", "imgPath": "/img/2.jpg", "imgInfo": "嫦娥本月" }, { "key": "button3", "imgPath": "/img/3.jpg", "imgInfo": "美女与野兽" }, { "key": "button4", "imgPath": "/img/4.jpg", "imgInfo": "学生装cosplay" } ]; //为数据对象绑定方法--面向对象 //循环判断传入的key 符合哪一个,返回符合的对象 imgInfoArr.GetObjByKey = function (key) { for (var i = 0; i < this.length; i++) { if (this[i].key == key) { return this[i]; } } } //---------------上面是准备数据下面是绑定方法 //获取所有的li标签 var liObjs = document.getElementsByTagName("li"); //为li标签绑定点击事件--通过dom元素.getAttribute("属性名")可以获取自定义属性 for (var i = 0; i < liObjs.length; i++) { liObjs[i].onclick = function () { //获取自定义属性 key var myKey = this.getAttribute("key"); //通过key去获取对象 var imgInfoObj = imgInfoArr.GetObjByKey(myKey); //将对象的属性设置给 图片div 还有文字div //修改背景图片 document.getElementById("divImg").style.backgroundImage = "url(" + imgInfoObj.imgPath + ")"; //修改文字 document.getElementById("divInfo").innerHTML = imgInfoObj.imgInfo; } } ////根据key获取 对象的方法 //function GetImgObj(key) { // for (var i = 0; i < imgInfoArr.length; i++) { // if (imgInfoArr[i].key == key) // { // return imgInfoArr[i]; // } // } //} //var someObj=GetImgObj("button3"); //alert(someObj.key+"|"+someObj.imgPath+"|"+someObj.imgInfo); </script>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /*//渲染树*/ #divBox { height: 100px; 100px; border: 1px solid #0094ff; } </style> </head> <body> <div id="divBox" ></div> </body> </html> <script type="text/javascript"> //绑定点击事件 document.getElementById("divBox").onclick = function () { //01.获取dom元素标签内部的样式 ////获取原有样式 //var oldHeight = parseInt(this.style.height); ////累加 //oldHeight += 10; ////设置回去 //this.style.height = oldHeight + "px"; //02.获取dom元素的样式--无论在内部 还是在 style标签中 //通过这种方式拿到的样式 是只读的 alert(window.getComputedStyle(this).height); this.style.height; } </script>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> ol { list-style:none; } li { border:1px solid #0023ff; height:20px; 100px; } </style> </head> <body> <select id="selList"> <option>鱼香肉丝</option> <option>水煮肉片</option> <option>鱼香茄子</option> </select> <ol> <li id="liEdit">水煮肉片</li> </ol> <input type="button" id="edit" value="编辑"/> <input type="button" id="saveEdit" value="保存修改"/> </body> </html> <script type="text/javascript"> //为按钮添加点击事件 document.getElementById("edit").onclick = function () { //为li标签 追加一个 子节点 select标签 //dom元素有一个clone方法 传的布尔值 表示 克隆的深浅, var selClone = document.getElementById("selList").cloneNode(true); //设置克隆的select标签的 option的选中状态 //如果 option标签 没有添加value值,那么 option标签的 innerHTML就是他的value 可读可写 //设置select标签的value值 为option标签有的 ,那么就相当于 选中了那个option标签 selClone.value = document.getElementById("liEdit").innerHTML; //清空问本质 document.getElementById("liEdit").innerHTML = ""; //将克隆的select标签 追加到li标签里面 document.getElementById("liEdit").appendChild(selClone); //修改克隆出来的select标签的id selClone.id = "editSel"; } //为保存修改按钮添加点击事件 //id虽然唯一,但是重复也不会报错 //取值的时候 从上到下查找.找到了符合要求的一个 就不继续找了 document.getElementById("saveEdit").onclick = function () { // alert(document.getElementById("editSel").value); document.getElementById("liEdit").innerHTML = document.getElementById("editSel").value; } </script>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> div { border:1px solid #0094ff; height:100px; 100px; } </style> </head> <body> <!--使用a标签引入js代码 javascript:这里写js代码--> <a href="javascript:alert('大家下午好,不要打瞌睡了');">点击打招呼</a> <div id="divBox"> div的id为divBox <input type="button" id="btnTest" value="id=btnTest" /> </div> </body> </html> <script type="text/javascript"> //为按钮添加点击事件 document.getElementById("btnTest").onclick = function () { alert(this.id); //删除自己-通过parentNode获取父节点,然后调用父节点的删除方法 //this.parentNode.removeChild(this); //parentElement有浏览器兼容问题 this.parentElement.removeChild(this); } </script>