第七节 DOM操作应用-高级
表格应用：
获取：tBodies、tHead、tFoot、rows、cells
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM高级应用-表格的便捷操作</title>
<script>
window.onload=function(){
var oTab=document.getElementById('tab1');
// a=oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML;
// a=oTab.tBodies[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML; //获取所有表格的简单操作，该句与上面代码相同的意义
// a=oTab.tBodies[0].rows[1].getElementsByTagName('td')[1].innerHTML; //同上理，在获取到的表格下，获取该表格的某一行也有简单的操作，rows
a=oTab.tBodies[0].rows[1].cells[1].innerHTML; //同理，cells是获取行中的所有单元格，cells[1]是获取该行中第二个单元格
alert(a);
}
</script>
</head>
<body>
<table id="tab1" border="1" width="500">
<thead><!--表头-->
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody> <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->
<tr>
<td>11111</td>
<td>haohao</td>
<td>26</td>
</tr>
<tr>
<td>22222</td>
<td>maomao</td>
<td>25</td>
</tr>
<tr>
<td>33333</td>
<td>hanhan</td>
<td>24</td>
</tr>
<tr>
<td>44444</td>
<td>zhizhi</td>
<td>23</td>
</tr>
</tbody>
</table>
</body>
</html>
需要注意的是，每个表格可以有好多tBody，即tBodies是一个数组，但是每个表格只能有一个tHead（表头）、tFoot（表尾），所以tHead、tFoot不是一个数组，而是直接的两个元素；相同的rows（行）、cells（元素/单元格）也表示两个数组。
隔行变色：鼠标移入高亮
//表格样式还是上面的样式
window.onload=function () {
var oTab=document.getElementById('tab1'); for (var i=0; i<oTab.tBodies[0].rows.length; i++){
//注意：如果判断语句中没有tBodies[0]，则系统会默认把thead（表头）也算做一行，所以千万别忘了tBodies
oTab.tBodies[0].rows[i].onmouseover=function () { //鼠标移入，背景颜色变绿
this.style.background='green';
};
oTab.tBodies[0].rows[i].onmouseout=function () { //鼠标移出，背景颜色变白
this.style.background='';
}; if (i%2){ //系统默认1为True，0为False
oTab.tBodies[0].rows[i].style.background="";
} else {
oTab.tBodies[0].rows[i].style.background="#ccc";
}
}
};
//但是问题在于，移入变绿后，再移出，隔行变色也消失了，解决办法如下 window.onload=function () {
var oTab=document.getElementById('tab1');
var oldColor=''; for (var i=0; i<oTab.tBodies[0].rows.length; i++){
//注意：如果判断语句中没有tBodies[0]，则系统会默认把thead（表头）也算做一行，所以千万别忘了tBodies
oTab.tBodies[0].rows[i].onmouseover=function () { //鼠标移入，背景颜色变绿
oldColor=this.style.background; //用于存放原来的颜色
this.style.background='green';
};
oTab.tBodies[0].rows[i].onmouseout=function () { //鼠标移出，背景颜色变白
this.style.background=oldColor;
}; if (i%2){ //系统默认1为True，0为False
oTab.tBodies[0].rows[i].style.background="";
} else {
oTab.tBodies[0].rows[i].style.background="#ccc";
}
}
};
添加、删除表格中的一行：DOM方法的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM高级应用</title>
<script>//表格的添加、删除一行
window.onload=function () {
// var oTab=document.getElementById('tab1');
// var oBtn=document.getElementById('btn1');
// var oName=document.getElementById('name');
// var oAge=document.getElementById('age'); // oBtn.onclick=function () {
// var oTr=document.createElement('tr'); //先创建一行
//
// var oTd=document.createElement('td'); //再创建该行的列
// oTd.innerHTML=oTab.tBodies[0].rows.length+1; //?
// oTr.appendChild(oTd);
//
// var oTd=document.createElement('td'); //再创建该行的列
// oTd.innerHTML=oName.value; //?
// oTr.appendChild(oTd);
//
// var oTd=document.createElement('td'); //再创建该行的列
// oTd.innerHTML=oAge.value; //?
// oTr.appendChild(oTd);
//
// var oTd=document.createElement('td'); //再创建该行的列
// oTd.innerHTML='<a href="javascript:;">删除</a>'; //?
// oTr.appendChild(oTd);
//
// oTd.getElementsByTagName('a')[0].onclick=function(){
// oTab.tBodies[0].removeChild(this.parentNode.parentNode);
// };
//
// oTab.tBodies[0].appendChild(oTr);
// }; //此时，？处的问题就出现了，即在删除表格中用户添加的行时，其被删除下面的行的id并不会被改变，所以再次添加行时，
//又从新开始计算行数而产生添加行的id值，这样就会出现id值相同的情况，而正常的情况下，某个人的id值是唯一的（当然
//也有id值严格有序的，如有道云音乐中，删除歌单中的某一首歌，则下面的id值都会减一，来保证id的严格有序），所以在
//删除某一行后，其id值将不会再出现，解决办法如下：
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
var oName=document.getElementById('name');
var oAge=document.getElementById('age');
var id=oTab.tBodies[0].rows.length+1; oBtn.onclick=function () {
var oTr=document.createElement('tr'); //先创建一行 var oTd=document.createElement('td'); //再创建该行的列
oTd.innerHTML=id++; //?
oTr.appendChild(oTd); var oTd=document.createElement('td'); //再创建该行的列
oTd.innerHTML=oName.value; //?
oTr.appendChild(oTd); var oTd=document.createElement('td'); //再创建该行的列
oTd.innerHTML=oAge.value; //?
oTr.appendChild(oTd); var oTd=document.createElement('td'); //再创建该行的列
oTd.innerHTML='<a href="javascript:;">删除</a>'; //?
oTr.appendChild(oTd); oTd.getElementsByTagName('a')[0].onclick=function(){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}; oTab.tBodies[0].appendChild(oTr);
};
};
</script>
</head>
<body>
姓名：<input id="name" type="text"/>
年龄：<input id="age" type="text"/>
<button id="btn1">添加</button>
<table id="tab1" border="1" width="500">
<thead><!--表头-->
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody> <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->
<tr>
<td>1</td>
<td>haohao</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>maomao</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>hanhan</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>zhizhi</td>
<td>23</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
搜索 ：其实一般情况下搜索都是后台执行的，一般不用JS做搜索的工作，这里只是为了介绍思想
版本1：基础版本——字符串比较
版本2：忽略大小写——大小写转换
版本3：模糊搜索——search的使用
var str='abcdef'; //字符串的索引值从0开始
alert(str.search('c')); //找到并且返回字符串出现的位置，如果没有找到，返回-1
版本4：多关键词——split
高亮显示、筛选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM高级应用</title>
<script>
// //搜索---版本1：基础版本（字符串比较）
// window.onload=function () {
// var oTab=document.getElementById('tab1');
// var oTxt=document.getElementById('name');
// var oBtn=document.getElementById('btn2');
//
// oBtn.onclick=function () {
// for (var i=0; i<oTab.tBodies[0].rows.length; i++){
// if (oTab.tBodies[0].rows[i].cells[1].innerHTML==oTxt.value){
// oTab.tBodies[0].rows[i].style.background='yellow';
// } else {
// oTab.tBodies[0].rows[i].style.background='';
// }
// }
// };
// }; // //搜索---版本2：忽略大小写——大小写转换
// window.onload=function () {
// var oTab=document.getElementById('tab1');
// var oTxt=document.getElementById('name');
// var oBtn=document.getElementById('btn2');
//
// oBtn.onclick=function () {
// for (var i=0; i<oTab.tBodies[0].rows.length; i++){
// var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML;
// var sTxt=oTxt.value;
// if (sTab.toLowerCase()==sTxt.toLowerCase()){ //忽略大小写进行搜索
// oTab.tBodies[0].rows[i].style.background='yellow';
// } else {
// oTab.tBodies[0].rows[i].style.background='';
// }
// }
// };
// }; // //搜索---版本3：模糊搜索（在输入不完全的情况下，一样能搜索想要的事物）——search的使
// // var str='abcdef'; //search()方法的使用
// // alert(str.search('c')); //返回值为：2 表示字符‘c’在字符串str中的位置（或索引值）为2；
// // alert(str.search('de')); //返回值为：3 表示字符串‘de’在字符串str中的位置是从3开始的。
// // alert(str.search('g')); //返回值为：-1表示所搜索的字符不在字符串str中。
//
// window.onload=function () {
// var oTab=document.getElementById('tab1');
// var oTxt=document.getElementById('name');
// var oBtn=document.getElementById('btn2');
//
// oBtn.onclick=function () {
// for (var i=0; i<oTab.tBodies[0].rows.length; i++){
// var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
// var sTxt=oTxt.value.toLowerCase();
// if (sTab.search(sTxt)!=-1){ //如果搜索的值在表格字符串中存在
// oTab.tBodies[0].rows[i].style.background='yellow';
// } else {
// oTab.tBodies[0].rows[i].style.background='';
// }
// }
// };
// };
// 需要注意的是模糊搜索，如果你输入的字符可以在表格的多个行中找到匹配的值，系统会默认把所有符合条件的行 标出。 //搜索---版本4：多关键词--split()方法
// var str='abc 123 ert';
// var arr=str.split(' '); //用空格切分字符串
// alert(arr); //返回值为：abc,123,ert 表示字符串被切分成三段，此时arr.length=3
window.onload=function () {
var oTab=document.getElementById('tab1');
var oTxt=document.getElementById('name');
var oBtn=document.getElementById('btn2'); oBtn.onclick=function () {
for (var i=0; i<oTab.tBodies[0].rows.length; i++){
var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt=oTxt.value.toLowerCase(); var arr=sTxt.split(' '); //这里假设用户输入的关键字是以空格隔开的，所以以空格切分 //oTab.tBodies[0].rows[i].style.background=''; //控制高亮
oTab..display='none'; //控制筛选 for (var j=0; j<arr.length; j++){
if (sTab.search(arr[j])!=-1){ //如果搜索的值在表格字符串中存在
//oTab.tBodies[0].rows[i].style.background='yellow'; //控制高亮
oTab.tBodies[0].rows[i].style.display='block'; //控制筛选
}
}
}
};
};
//该方法实现了，多关键字的同时搜索，不过这里假设用户输入的多个关键字是以空格隔开的
</script>
</head>
<body>
姓名：<input id="name" type="text"/>
<button id="btn2">搜索</button>（请输入需要搜索的name值！）
<table id="tab1" border="1" width="500">
<thead><!--表头-->
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody> <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->
<tr>
<td>1</td>
<td>haohao</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>maomao</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>hanhan</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>zhizhi</td>
<td>23</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
排序：<li>、<img>等等
移动<li>
元素排序：转换——排序——插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动li标签</title>
<style>
#ul1{background: green;}
#ul2{background: yellow;}
</style>
<script>
window.onload=function () {
var oUl1=document.getElementById('ul1');
var oUl2=document.getElementById('ul2');
var oBtn=document.getElementById('btn1'); oBtn.onclick=function () {
var oLi=oUl1.children[0]; // //移动li的实现
// // oUl1.removeChild(oLi); //即使没有此句，效果依然没有影响
// oUl2.appendChild(oLi);
// //appendChild() 功能完整版：1.先把元素从原有父级上删掉，添加到新的父级里 //循环摆放li的实现
oUl1.appendChild(oLi);
};
};
</script>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>2</li>
<li>3</li>
</ul>
<button id="btn1">移动</button>
<ul id="ul2">
<li>1</li>
<li>2</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
简单的<li>标签排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动li标签</title>
<style>
#ul1{background: green;}
</style>
<script>
window.onload=function () {
var oUl1=document.getElementById('ul1');
var oBtn=document.getElementById('btn1'); oBtn.onclick=function () {
var aLi=oUl1.getElementsByTagName('li');
// aLi.sort(); //报错，原因：之前说aLi是一个数组（Array），但其实aLi严格意义来说，
// 并不能算是是一个数组（Array），而sort()是数组特有的一个排序方法；
// aLi其实是一个元素“集合”，和数组相似，有length，可以用“[]”，但是没有sort、join等数组的函数，所以报错
var arr=[];
for (var i = 0; i<aLi.length; i++){
arr[i]=aLi[i];
}
arr.sort(function (li1, li2) { //排序需要一个比较函数，该函数有两个参数
var n1=parseInt(li1.innerHTML);
var n2=parseInt(li2.innerHTML); return n1-n2;
});
for (var j=0; j<arr.length; j++){ //返回第i个值应该是多少？
// alert(arr[j].innerHTML); // 返回值是“3 10 11 ...” 正确
alert('该把'+arr[j].innerHTML+'插入到最后了！');
oUl1.appendChild(arr[j]);
}
};
};
</script>
</head>
<body>
<button id="btn1">排序</button>
<ul id="ul1">
<li>10</li>
<li>21</li>
<li>25</li>
<li>3</li>
<li>11</li>
<li>28</li>
<li>26</li>
<li>30</li>
</ul>
</body>
</html>
表格排序的实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM高级应用</title>
<script>
window.onload=function () {
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1'); oBtn.onclick=function () {
var arr=[]; for (var i=0; i<oTab.tBodies[0].rows.length; i++){
arr[i]=oTab.tBodies[0].rows[i]; //把所有元素集合中的值，添加到数组中
}
arr.sort(function (tr1, tr2) { //排序函数
var n1=parseInt(tr1.cells[0].innerHTML);
var n2=parseInt(tr2.cells[0].innerHTML);
return n1-n2;
}); for (var i=0; i<arr.length; i++){
alert('该把'+arr[i].innerHTML+'插入到最后了！');
oTab.tBodies[0].appendChild(arr[i]);
}
};
};
//该方法实现了，多关键字的同时搜索，不过这里假设用户输入的多个关键字是以空格隔开的
</script>
</head>
<body>
<button id="btn1">排序</button>
<table id="tab1" border="1" width="500">
<thead><!--表头-->
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody> <!--其实就算没有<tbody>这个标签，浏览器也会自动给我们的表格加上，所以我们在写表格的时候最好加上该标签！这样会显得代码比较严谨-->
<tr>
<td>3</td>
<td>haohao1</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>maomao1</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>hanhan1</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>zhizhi1</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>haohao2</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>maomao2</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>hanhan2</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>zhizhi2</td>
<td>23</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
表单应用
表单基础知识：
什么是表单：
向服务器提交数据，比如：用户注册
action：提交到哪里
表单事件：
onsubmit：提交时发生
onreset：重置时发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单事件</title>
<script>
window.onload=function () {
var oForm=document.getElementById('form1'); oForm.onsubmit=function () { //提交时的提示
alert('确认提交！');
};
oForm.onreset=function () {
alert('已清空！');
};
};
</script>
</head>
<body>
<!--表单存在的目的，其实就是为了向服务器提供数据-->
<form id="form1" action="http://...">
用户名：<input type="text" name="use"/><br/><!--而这个name相当于前端的id，前端靠id来查找元素，而后台就是通过它
（name）来查找元素的-->
密码：<input type="password" name="pass"/>
<input type="submit"/><!--上面form行间元素“action就是提交的位置”-->
<input type="reset">
</form>
</body>
</html>
表单内容验证：
阻止用户输入非法字符：阻止事件
输入时、失去焦点是验证：onkeyup、onblur
提交时检查：onsubmit
*后台数据检查：
第七节 DOM操作应用-高级的更多相关文章
- 迷你MVVM框架 avalonjs 沉思录 第2节 DOM操作的三大问题
jQuery之所以击败Prototype.js,是因为它自一开始就了解这三大问题,并提出完善的解决方案. 第一个问题,DOM什么时候可用.JS不像C那样有一个main函数,里面的逻辑不分主次.但JS是 ...
- 《JavaScript权威指南》学习笔记 第七天 DOM操作
由衷的觉得,随着IT技术的广泛的运用,个人电脑以及智能手机的使用,信息的获取与传播更为简单.但是我们获取有用信息的难度相反是越来越大了,想要保持住自己的注意力越来越难了.除了吃饭睡觉,我的精力都在电脑 ...
- 第六节 DOM操作应用
创建.插入和删除元素 创建DOM元素: createElement(标签名); //创建一个节点 appendChild(节点); //追加一个节点 例如:document.body.appendCh ...
- 06.DOM操作应用高级
获取表格tBodies.tHead.tFoot.rows获取行 cells获取td隔行变色 <!DOCTYPE HTML> <html> <head> <m ...
- 学习blus老师js(5)--DOM操作应用高级
一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...
- jQuery系列 第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...
- （七）jQuery中的DOM操作
一.jQuery的DOM操作 (1)查找节点: 查找元素节点: 1. 获取指定的标签节点 $(“上级标签 标签:eq(“标签索引”) ; 如:var li = $("ul li:eq(2) ...
- 第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- 第一百一十五节，JavaScript，DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
随机推荐
- SpringBoot------自定义拦截器
1.添加pom.xml使用的依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="htt ...
- 使用PHP几种写99乘法表的方式
首先按照规矩,还是先废话一番,对于刚学PHP的新手来讲,用php写九九乘法表无疑是非常经典的一道练习题. 但不要小看这道练习题,它对于逻辑的考验还是相当到位的. 也许有人会觉得,九九乘法表有什么难的, ...
- 将VSCode添加到右键
https://www.cnblogs.com/Rexcnblog/p/8046371.html https://www.jianshu.com/p/b49002fa10a7 @echo Off :S ...
- C# 网络爬虫利器之Html Agility Pack如何快速实现解析Html
简介 现在越来越多的场景需要我们使用网络爬虫,抓取相关数据便于我们使用,今天我们要讲的主角Html Agility Pack是在爬取的过程当中,能够高效的解析我们抓取到的html数据. 优势 在.NE ...
- ZooKeeper-3.3.4集群安装配置
https://blog.csdn.net/shirdrn/article/details/7183503
- PHP实现今天是星期几
echo "今天是星期" . mb_substr( "日一二三四五六",date("w"),1,"utf-8" );
- 赶鸭子上架的cdq分治
前置技能:归并排序,树状数组. cdq分治主要是用来离线解决一些奇怪的问题的.可以用来代替一些高级数据结构比如树套树或者KD-Tree之类的... 话说挑战2上的KD-Tree我到现在还没开始学... ...
- 【C++语法基础】实验1
实验内容: 题目:输入 1~7 的整数,如果输入的是 1~5,则输出“workday. Let’s work hard”:如果输入的是 6~7,则输出“weekend. Let’s have a re ...
- vim 多窗口操作
1.打开多个窗口打开多个窗口的命令以下几个:横向切割窗口:new+窗口名(保存后就是文件名) :split+窗口名,也可以简写为:sp+窗口名纵向切割窗口名:vsplit+窗口名,也可以简写为:vsp ...
- JavaScript——this
一.JavaScript 函数与方法 <body> <script type="text/javascript"> function show(){ con ...