(1)认识JS
JavaScript是一种被嵌入在HTML网页中的基于对象和事件驱动的脚本语言。脚本实际上就是一段代码,用来完成某些特殊的功能。
JQuery是JS非常优秀的一个库,两者获取的对象不同,但可以相互转化,以后再表。
(一)JS的调试
function div_alert(){ alert("请输入你的名字!"); }; function div_confirm(){ a = confirm("请输入你的名字~") console.log(a) }; function div_prompt(){ a = prompt("亲输入你的名字!") console.log(a) console.log(typeof(a)); }; function mingzia(){ mingzi = prompt("请输入你的名字:") console.log(typeof(mingzi)); if(mingzi == null){ console.log("您按下了取消键"); }else if(mingzi == ''){ console.log("您输入的内容为空!"); mingzia(); }else{ console.log("您输入的内容是:"+ mingzi) }; }; function Doc_wri(){ document.write("我是一个惊喜!") }
其中,console.log()是在控制台输出。alert()弹出一个警示框。confime()弹出一个可以选择“确定”和“取消”的框,对于两个框会有不同的布尔类型的返回值,true and false。prompt()是一个可以输入内容的框,输入的内容是String类型,可以使用typeof()将类型打印出来。
(二)JS与DOM
DOM是Document Object Model 翻译为文档对象模型,是HTML和XML文档编辑接口。
HTML DOM定义了访问和操作HTML文档的标准方法。DOM树结构表达HTML文档。
在网上找了一个HTML的树形结构:
(A)在HTML DOM中,所有的事物都被称之为节点。DOM是被视为节点的树的HTML。节点间存在层级关系。
(1)DOM树结构中又可以详细的分为:整个文档节点、元素节点、文本节点、属性节点和注释节点。每个节点都有节点类型、节点名称、节点值(nodeType、nodeName、nodeValue)。其中元素的NodeType=1,文本的nodeType=3,文档的nodetype=9。
(2)对于DOM树结构,节点间彼此是有层级结构的,使用:父、子、兄弟节点、同胞节点等语言描述(parentNode、previousSibling、nextSibling、firstChild、lastChild)。
(3)对于节点的的操作,也可以总结为“增删查改”。
(4)DOM 处理中的常见错误是希望元素节点包含文本。如果想通过节点控制文本,可以使用:innerHTML函数。
本段代码主要是使用JS原生代码,查找某一个节点的父节点、兄弟节点和子节点等。
<!DOCTYPE html> <html> <head> <title>节点间的关系</title> <style type="text/css"> .wrap{width:1000px; margin:0 auto;} </style> </head> <body> <div class="wrap"> <h1>介绍DOM结构</h1> <p class="test">There are a number of reason why the DOM is awesome, here are some:</p> <ul> <li>我是一个测试!</li> <li id="everywhere"> <span>随时可以找到。</span> <span>我想。</span> </li> <li class="test">简单。</li> <li class="test">快速。</li> </ul> </div> <script type="text/javascript"> // 找到前一个兄弟节点previousSibling,JS会将空格也算进去,所以要将空格排除 function pre(elem){ do{ elem = elem.previousSibling; console.log(elem.nodeType+elem.nodeName+elem.nodeValue +'里面的文本是:'+elem.innerHTML) }while(elem.nodeType != 1); return elem; }; //找到下一个兄弟节点 function next(elem){ do{ elem = elem.nextSibling; console.log(elem.nodeType+elem.nodeName+elem.nodeValue +'里面的文本是:'+elem.innerHTML); }while(elem && elem.nodeType != 1); return elem; }; //查找第一个子元素 function first(elem){ elem = elem.firstChild; if(elem && elem.nodeType !=1){ elem = next(elem); } return elem; //return elem && elem.nodeType !=1 ? next(elem) : elem; }; //查找最后一个子元素 function last(elem){ elem = elem.lastChild; return elem && elem.nodeType !=1 ? pre(elem) : elem; }; //查找父元素 function parent(elem){ elem = elem.parentNode; console.log(elem.nodeType+elem.nodeName+elem.nodeValue +'里面的文本是:'+elem.innerHTML); return elem && elem.nodeType !=1 ? parent(elem) : elem; } elem = document.getElementById('everywhere') // pre(elem); //next(elem); //de = first(elem) //de = last(elem) de = parent(elem) console.log("我得到的内容是:"+ de) </script> </body> </html>
(B)标准的DOM方法。
DOM编程可以是一个非常平滑的过程,提供了非常强大的方法快速的获取想要的节点的办法
(1)获取元素和属性的修改。
(2)DOM结构的增删查改。
注:JS设置标签的样式可以通过node.style.color = value 设置。
<!-- 元素属性的修改 -->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>节点的增删查改</title> <style type="text/css"> .wrap{width:1000px; margin:0 auto;} .one{font-weight: bold; font-size: 30px;} </style> </head> <body> <div class="wrap"> <h1>介绍DOM结构</h1> <p class="test">There are a number of reason why the DOM is awesome, here are some:</p> <ul> <li>我是一个测试!</li> <li id="everywhere"> <span>随时可以找到。</span> <span>我想。</span> </li> <li class="test">简单。</li> <li class="test">快速。</li> </ul> </div> <script type="text/javascript"> //获取的是指定的唯一的一个元素 document.getElementById("everywhere").style.color='red'; //获取的是一个数组:节点列表 console.log(document.getElementsByTagName("li").length); //document.getElementsByTagName("li")获取的是一个JS对象 //document.getElementsByTagName("li")[0]是一个DOM对象 // for i in document.getElementsByTagName("li"){ // console.log(i.innerHTML) // } //python的写法,不应该是这样的,我错了!!! for(var i = 0, len=document.getElementsByTagName("li").length; i<len; i ++){ console.log(document.getElementsByTagName("li")[i].innerHTML); }; console.log(document.getElementsByClassName("test").length); //查找指定的拥有某个类名的元素 function hasClass(name,type){ var r =[]; var re = new RegExp("(^|\\s)" + name + "(\\s|s)"); var e = document.getElementsByTagName(type||"*"); for(var j=0; j<e.length;j++){ //test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回 false. if(re.test(e[j])){ r.push(e[j]); }; }; return r; }; //获取元素属性:getAttribute(property) //设置元素属性:setAttribute(property,value) console.log(document.getElementsByTagName('li')[1].getAttribute('id')); document.getElementsByTagName('li')[0].setAttribute('class','one'); </script> </body> </html>
<!-- DOM结构的增删查改 -->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>节点的增删查改</title> <style type="text/css"> .wrap{width:1000px; margin:0 auto;} .one{font-weight: bold; font-size: 30px;} .a_{font-size: 20px; text-decoration: none;font-weight: bold;} </style> </head> <body> <div class="wrap"> <h1>介绍DOM结构</h1> <p class="test">There are a number of reason why the DOM is awesome, here are some:</p> <ul> <li>我是一个测试!</li> <li id="everywhere"> <span>随时可以找到。</span> <span>我想。</span> </li> <li class="test">简单。</li> <li class="test">快速。</li> </ul> <ol id='ol_list'></ol> </div> <script type="text/javascript"> //获取的是指定的唯一的一个元素 document.getElementById("everywhere").style.color='red'; //获取的是一个数组:节点列表 console.log(document.getElementsByTagName("li").length); //document.getElementsByTagName("li")获取的是一个JS对象 //document.getElementsByTagName("li")[0]是一个DOM对象 // for i in document.getElementsByTagName("li"){ // console.log(i.innerHTML) // } //python的写法,不应该是这样的,我错了!!! for(var i = 0, len=document.getElementsByTagName("li").length; i<len; i ++){ console.log(document.getElementsByTagName("li")[i].innerHTML); }; console.log(document.getElementsByClassName("test").length); //查找指定的拥有某个类名的元素 function hasClass(name,type){ var r =[]; var re = new RegExp("(^|\\s)" + name + "(\\s|s)"); var e = document.getElementsByTagName(type||"*"); for(var j=0; j<e.length;j++){ //test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回true,否则返回 false. if(re.test(e[j])){ r.push(e[j]); }; }; return r; }; //获取元素属性:getAttribute(property) //设置元素属性:setAttribute(property,value) console.log(document.getElementsByTagName('li')[1].getAttribute('id')); document.getElementsByTagName('li')[0].setAttribute('class','one'); //DOM结构的增删查改 //首先增加DOM节点(createElement),或者创建文本节点(createTextNode) //然后将它插入到DOM中(insertBefore(nodeToInset, beforeNode)、appendChild(nodeToInsert)) //直接将文档注入到HTML结构中,使用的方法是innerHTML //删除DOM节点removeChild //下面的代码是在一个节点创建一个子节点 var ele = document.getElementsByClassName("test")[1]; console.log(ele.nodeName+ele.innerHTML); var new_a = document.createElement("a"); new_a.style.color="#123321"; new_a.setAttribute("class","a_"); new_a.href='https://i-beta.cnblogs.com/posts?cateId=1476711'; new_a.innerHTML='壹碗'; ele.appendChild(new_a); //使用parentNode.insertBefore(nodeToInset-要插入的节点, beforeNode-已有的节点) var parNode = document.getElementsByTagName("ul")[0]; var nodeToIn = document.createElement("li"); // nodeToIn.href="https//www/baidu.com"; nodeToIn.innerHTML='百度'; parNode.insertBefore(nodeToIn,ele); //删除节点 parent.removeChild() parNode.removeChild(nodeToIn); //通过InnerHTML注入HTML到DOM var ol_li = document.getElementById("ol_list"); ol_li.innerHTML = "<li>猫</li><li>狗</li><li>猪</li>"; </script> </body> </html>
案例一创建表格
使用到的函数:createElement()创建标签 insertRow()插入行 insetCell() 插入列 appendChild()追加节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格的创建</title> <style type="text/css"> table{ border-collapse: collapse;} table td{border:1px solid red; height: 40px; width: 100px; line-height: 40px; text-align: center;} </style> </head> <body> <div class="wrap"> <div> <input type="text" placeholder="请输入要插入的行数" class="row1"> <input type="text" placeholder="请输入要插入的行数" class="col1"> <input type="button" name="" value="插入表格" onclick="createTable()"> <input type="button" name="" value="斑马线表格" onclick="chageTab()"> </div> <div class="table"></div> </div> <script type="text/javascript"> //table createElement() //insertRow() 插入行 //insertCell()插入列 //动态的控制插入的行和列 2 3 3 5 // 插入表格 function createTable(){ table_wrap = document.getElementsByClassName("table")[0]; table = document.createElement("table"); //获得行数 var row = parseInt(document.getElementsByClassName("row1")[0].value); //获得列数 var col1 = parseInt(document.getElementsByClassName("col1")[0].value); if(row>0 && col1>0){ for(let i=0; i<row; i++){ var trNode = table.insertRow(); for(let j=0;j<col1;j++){ var td_Node = trNode.insertCell(); td_Node.innerHTML = '第'+(i+1)+'行 第'+(j+1)+'列'; } table_wrap.appendChild(table); }; }else{ alert("请输入正确的行数和列数!"); } } // 斑马线表格 function chageTab(){ var tr_list = document.getElementsByTagName("tr"); for(let i = 0; i<tr_list.length; i+=2){ tr_list[i].style.backgroundColor = '#ddd'; } for(let i = 1;i<tr_list.length;i+=2){ tr_list[i].style.backgroundColor = '#432'; tr_list[i].style.color ="#fff" } } </script> </body> </html>
效果:
案例二 点击按钮创建表格,如果创建的div存在内容,则弹出警告框
第一种方法:判断指定内容里面是否有子标签,子标签的长度为0则创建table表格。
第二种方法,判断里面是否存在内容,内容的长度为0,则创建table表格。
第三种方法,设置flag。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS创建表格</title> <style type="text/css"> .table table{border-collapse: collapse;} .table td{width:200px; height: 40px; line-height: 40px; border: 1px solid #ddd; text-align: center;} </style> </head> <body> <div class="wrap"> <input type="button" name="" value="创建表格" onclick="createTable()"> <div class="table"></div> </div> <script type="text/javascript"> function createTable(){ // 创建表格 HTML // 循环创建行 // 在每一行里面,循环创建列 table_div = document.getElementsByClassName("table")[0]; //判断子标签的长度 if(table_div.childNodes.length == 0){ wrap_table = document.createElement("table"); var rows = 5; var cols = 5; for(var i = 0;i<rows;i++){ tr_list = document.createElement("tr"); for(var j =0;j<cols;j++){ td_list = document.createElement("td"); td_list.innerHTML ="第"+ (i+1)+"行,第"+(j+1)+"列"; tr_list.appendChild(td_list); } wrap_table.appendChild(tr_list); } table_div.appendChild(wrap_table); }else{ alert("表格已创建"); } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS创建表格</title> <style type="text/css"> .wrap{width:1000px; maigin:0 auto;} .table table{border-collapse: collapse;} .table td{height: 30px; width:100px; border:1px solid #ddd; text-align: center; line-height: 30px;} </style> </head> <body> <div class="wrap"> <input type="button" value="创建表格" onclick="creatTable()"> <div class="table"></div> </div> <script type="text/javascript"> function creatTable(){ parentNode = document.getElementsByClassName('table')[0]; // 第二种方法,如果没有内容创建table表格 var eleStrLen = parentNode.innerHTML.length if(eleStrLen==0){ eleTable = document.createElement("table"); // 创建行数与列数 var rows = 5; var cols = 5; for(var i = 0; i< rows;i++){ tr_rows = document.createElement("tr"); for(var j = 0;j<cols;j++){ td_cols = document.createElement("td"); td_cols.innerHTML =i+' '+j; tr_rows.appendChild(td_cols); } eleTable.appendChild(tr_rows); } parentNode.appendChild(eleTable); }else{ alert("表格已创建!"); } } </script> </body> </html>