（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>
