其实本人是半路出家，是个萌新啦，当然是奔着高工资去的，估计自己也不能做出啥贡献，不过啦这只是目前的想法。
现在还是开始正题惹。
javaScript中 DOM（Document Object Model）的操作：
1.获取节点：childNodes（子节点）【firstChild（第一个子节点）、lastChild（最后一个子节点）】、parentNode（父节点）；
我的理解呢，js就是用各种方法去操作html中的各种标签啊、标签属性这样的一种工具，然后做出一些想要的效果，当然作为一个英语废，看到这些单词的时候很是头痛，哪怕是最简单的child这个单词有时候都会拼写错误，但还是身坚智残，再傻也得看看自己能傻到什么程度，扯远了…… 本人觉得啊这些逻辑关系还是比较好懂的，就是麻烦在，一篇完整的网页文档那么多代码 那么多id啊，class属性….取名字真的是很难，再加上权重啥的，有时候他不一定就能获取到你想要的操作节点，这是比较头疼的了，对于我来说，看别人和老师都是用的 驼峰命名法和匈牙利命名法比较多，可是小生本来手速就慢，而且还英语废，每次取名字都是a啊、b啊啥的 一旦内容多了，我想我就废了。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getByclass(oParent,sclass){
//封装好的函数：可以通过类名查找元素们
var aResult=[];
var aEles=oParent.getElementsByTagName('*');
for(var i=0;i<aEles.length;i++){
if(aEles[i].className==sclass){
aResult.push(aEles[i]);
}
}
return aResult;
}
window.onload = function() {
var oUl=document.getElementById('ul1');
var aBox=getByclass(oUl,'box');
//alert(aBox.length);
for(var i=0;i<aBox.length;i++){
aBox[i].style.background='red';
}
}
</script>
</head>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
<p class="box" style="height: 20px;width: 200px;"></p>
</ul>
</body>
</html>
2.创建DOM元素：createElement(标签名) 创建一个节点、appendChild(节点) 追加一个节点；insertBefore(节点,原有节点) 在已有元素前插入、removeChild(节点) 删除一个节点、文档碎片（这个东东，萌新真的就觉得上升了高度了）；
通过第一步的获取想要操作的节点，然后就可以利用这里的第二步在获取到的节点父级或者子级下面添加一些东东了，当然添加的就是标签咯，也不知道能不能添加些其他的东西，比如图片啊视频啥的没弄过，不知道怎么搞…创建DOM元素的这几个命令咧是要配合使用的，你创建了节点不添加的话是没用的，就如同写了函数不调用就等同于白写了，恩我的理解是这样的，其实浏览器也是笨笨的啊。。。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
margin:100px;
}
#tab1{
text-align: center;
line-height: normal;
width: 500px;
margin-top: 20px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var na=document.getElementById('name');
var ag=document.getElementById('age');
var pu=document.getElementById('pus');
var bt=document.getElementById('btn1');
var ta=document.getElementById('tab1');
var ah=document.getElementById('ahh');
var tj=ta.tBodies[0].rows.length+1;
pu.onclick=function(){
var tr=document.createElement('tr');
var td=document.createElement('td');
td.innerHTML=tj++;
tr.appendChild(td);
var td=document.createElement('td');
td.innerHTML=na.value;
tr.appendChild(td);
var td=document.createElement('td');
td.innerHTML=ag.value;
tr.appendChild(td);
var td=document.createElement('td');
td.innerHTML='<a href="javascript:;">删除</a>';
tr.appendChild(td);
td.getElementsByTagName('a')[0].onclick=function(){
ta.tBodies[0].removeChild(this.parentNode.parentNode)
}
ta.tBodies[0].appendChild(tr);
}
bt.onlick=function(){
for(var i=0;i<ta.tBodies[0].rows.length;i++){
var a=ta.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var b=ah.value.toLowerCase();
var arr=b.split(' ');
ta.tBodies[0].rows[i].style.display='none';
for(var j=0;j<arr.length;j++){
if(ta.search(arr[j])!=-1){
// ta.tBodies[0].rows[i].style.display='block';
ta.tBodies[0].rows[i].style.background='yellow';
}
}
}
}
}
</script>
</head>
<body>
姓名：<input id="name" type="text"/>
年龄：<input id="age" type="text" />
<input type="text" name="ahh" id="ahh" value="" placeholder="输入姓名检索"/>
<input type="button" name="pus" id="pus" value="添加" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500">
<thead>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>陈庆祥</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张帆</td>
<td>16</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>梁嘉健</td>
<td>18</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>任西霖</td>
<td>20</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>孟琪玮</td>
<td>18</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>孟获</td>
<td>1000+</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>张三</td>
<td>25</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>3.表格应用：tBodies、tHead、tFoot、rows、cells:
这也是节点的获取了，不过是获取表格的，tBodies是表格啦，后面加上【0】，数字0就表示第一个表格了，然后tHead【0】就是表格里面最开头那个，表格不加任何样式之前，看着字体最粗的也就是最前面那个的标签名叫thead的东东，tFoot我猜应该就是最后那个了，rows好理解了加上数字表示第几行，cells就是第几行的第几列了，嘻嘻。萌新的javaScript 也就到这了，还有很多等着我去学，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
table{border-collapse:collapse;margin:0 auto;}
tbody tr{cursor:pointer;}
th,td{width:200px;height:30px;border:1px solid #000;}
td{text-align:center;}
</style>
<script type="text/javascript">
window.onload=function(){
var oTable=document.getElementById('table');
var oBody=table.tBodies[0];
var aRows=oBody.rows;
var oHead=table.tHead;
var oRow=oHead.rows[0];
//求总分
for(var i=0;i<aRows.length;i++){
var iRd1=parseInt(aRows[i].cells[2].innerHTML);
var iRd2=parseInt(aRows[i].cells[3].innerHTML);
var iRd3=parseInt(aRows[i].cells[4].innerHTML);
aRows[i].cells[5].innerHTML=iRd1+iRd2+iRd3;
}
//按各项排序
var oYw=oRow.cells[2];
//按语文成绩排名后添加id
oYw.onclick=function(){
paixu(2);
addid();
}
var oSx=oRow.cells[3];
//按数学成绩排名后添加id
oSx.onclick=function(){
paixu(3);
addid();
}
//按英语成绩排名后添加id
var oYy=oRow.cells[4];
oYy.onclick=function(){
paixu(4);
addid();
}
var oZf=oRow.cells[5];
oZf.onclick=function(){
paixu(5);
addid();
}
//这个函数是进行排序的，可以传参进行各类排序
function paixu(celnum){
var arr=[];//new Array() a
for(var i=0;i<aRows.length;i++){
arr[i]=aRows[i];
}
arr.sort(function(a,b){
var n1=parseInt(a.cells[celnum].innerHTML);
var n2=parseInt(b.cells[celnum].innerHTML);
return n2-n1;
});
for(var i=0;i<aRows.length;i++){
oBody.appendChild(arr[i]);
}
//console.log(arr[0].cells[5].innerHTML);
}
//动态添加排名id的
function addid(){
for(var i=0;i<aRows.length;i++){
aRows[i].cells[0].innerHTML=i+1;
}
}
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oBtn4=document.getElementById('btn4');
var oBtn5=document.getElementById('btn5');
var oBtn6=document.getElementById('btn6');
var oBtn7=document.getElementById('btn7');
var oBtn8=document.getElementById('btn8');
oBtn1.onclick=function(){
paixu(2);
oBtn7.value=aRows[0].cells[2].innerHTML;
}
oBtn2.onclick=function(){
oBtn7.value=pingjun(2);
}
oBtn8.onclick=function(){
search();
}
function pingjun(lie){
//求平均数
var num=0;
for(var i=0;i<aRows.length;i++){
num=num+parseInt(aRows[i].cells[lie].innerHTML);
}
return num/aRows.length;
}
//最高成绩的同学名字
function search(){
var oTex=oBtn7.value;
for(var i=0;i<aRows.length;i++){
aRows[i].style.display='none';
if(aRows[i].cells[1].innerHTML==oTex){
aRows[i].style.display='table-row';
}
}
}
}
</script>
</head>
<body>
<input type="button" name="" id="btn1" value="语文最高分" />
<input type="button" name="" id="btn2" value="语文平均分" />
<input type="button" name="" id="btn3" value="数学最高分" />
<input type="button" name="" id="btn4" value="数学平均分" />
<input type="button" name="" id="btn5" value="英语最高分" />
<input type="button" name="" id="btn6" value="英语平均分" />
<input type="text" name="btn7" id="btn7" value="" />
<input type="button" name="" id="btn8" value="查询" />
<table id="table">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>外语</th>
<th>总和</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>陈小妞</td>
<td>76</td>
<td>80</td>
<td>87</td>
<td></td>
</tr>
<tr>
<td></td>
<td>陈莲莲</td>
<td>98</td>
<td>43</td>
<td>78</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Alien</td>
<td>90</td>
<td>53</td>
<td>86</td>
<td></td>
</tr>
<tr>
<td></td>
<td>陈晓瑞</td>
<td>80</td>
<td>43</td>
<td>87</td>
<td></td>
</tr>
<tr>
<td></td>
<td>高健</td>
<td>43</td>
<td>87</td>
<td>98</td>
<td></td>
</tr>
<tr>
<td></td>
<td>张媛媛</td>
<td>60</td>
<td>54</td>
<td>84</td>
<td></td>
</tr>
<tr>
<td></td>
<td>郑媛媛</td>
<td>34</td>
<td>34</td>
<td>67</td>
<td></td>
</tr>
<tr>
<td></td>
<td>秦优</td>
<td>54</td>
<td>87</td>
<td>87</td>
<td></td>
</tr>
<tr>
<td></td>
<td>陈书贞</td>
<td>65</td>
<td>87</td>
<td>67</td>
<td></td>
</tr>
<tr>
<td></td>
<td>陈杲</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>希望各位大腿，不吝赐教啊，我想学的好点然后就可以有高工资啦哈哈哈哈哈。
3265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
