智能社JavaScript学习笔记——13/14 - DOM操作应用 - 高级
来源：互联网 发布：赛尔网络年终奖多吗 编辑：程序博客网 时间：2024/06/04 18:50
表格应用
1. 获取
tBodies、tHead、tFoot、rows、cells
注意： 一个表格可以有多个tbody （所以tBodies是复数，是一个数组），但是只能有一个thead，一个tfoot （tHead和tFoot不是数组，只是一个元素）。
表格.tBodies[0] == 表格.getElementsByTagName(“tbody”)[0]
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><script>window.onload = function(){ var oTab = document.getElementById("tab1"); //alert(oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[2].getElementsByTagName("td")[1].innerHTML); alert(oTab.tBodies[0].rows[2].cells[1].innerHTML);};</script><body><table id="tab1" border="1" width="500px"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>1</td> <td>Lisa</td> <td>25</td> </tr> <tr> <td>2</td> <td>Blue</td> <td>27</td> </tr> <tr> <td>3</td> <td>张三</td> <td>23</td> </tr> <tr> <td>4</td> <td>李四</td> <td>28</td> </tr> <tr> <td>5</td> <td>王五</td> <td>24</td> </tr> </tbody></table></body></html>2. 隔行变色
简单的隔行变色：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><script>window.onload = function(){ var oTab = document.getElementById("tab1"); //for(var i=0; i<oTab.rows.length; i++) 如果不指明tBodies, 那么会将tHead和tFoot也算进去 for(var i=0; i<oTab.tBodies[0].rows.length; i++) { if(i%2) { oTab.tBodies[0].rows[i].style.background = "#ccc"; } else { oTab.tBodies[0].rows[i].style.background = ""; } }};</script><body><table id="tab1" border="1" width="500px"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>1</td> <td>Lisa</td> <td>25</td> </tr> <tr> <td>2</td> <td>Blue</td> <td>27</td> </tr> <tr> <td>3</td> <td>张三</td> <td>23</td> </tr> <tr> <td>4</td> <td>李四</td> <td>28</td> </tr> <tr> <td>5</td> <td>王五</td> <td>24</td> </tr> </tbody></table></body></html>鼠标移入高亮:
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><script>window.onload = function(){ var oTab = document.getElementById("tab1"); var oldColor = ""; //for(var i=0; i<oTab.rows.length; i++) 如果不指明tBodies, 那么会将tHead和tFoot也算进去 for(var i=0; i<oTab.tBodies[0].rows.length; i++) { 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 = ""; //鼠标移出后会将原来的背景色去掉 this.style.background = oldColor; }; if(i%2) { oTab.tBodies[0].rows[i].style.background = "#ccc"; } else { oTab.tBodies[0].rows[i].style.background = ""; } }};</script><body><table id="tab1" border="1" width="500px"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>1</td> <td>Lisa</td> <td>25</td> </tr> <tr> <td>2</td> <td>Blue</td> <td>27</td> </tr> <tr> <td>3</td> <td>张三</td> <td>23</td> </tr> <tr> <td>4</td> <td>李四</td> <td>28</td> </tr> <tr> <td>5</td> <td>王五</td> <td>24</td> </tr> </tbody></table></body></html>3. 添加、删除一行
DOM方法的使用
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><script>window.onload = function(){ var oTab = document.getElementById("tab1"); var oName = document.getElementById("name"); var oAge = document.getElementById("age"); var oBtn = document.getElementById("btn1"); var id = oTab.tBodies[0].rows.length + 1; oBtn.onclick = function() { var oTr = document.createElement("tr"); var oTd = document.createElement("td"); //oTd.innerHTML = oTab.tBodies[0].rows.length + 1; //出现问题：如果中间删除一行后，新添加的id有重复 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>"; oTd.innerHTML = '<a href="javascript:;">删除</a>'; oTr.appendChild(oTd); oTd.getElementsByTagName("a")[0].onclick = function() { //oTab.removeChild(this.parentNode.parentNode); //出错，必须写上tBodies oTab.tBodies[0].removeChild(this.parentNode.parentNode); }; //oTab.appendChild(oTr); oTab.tBodies[0].appendChild(oTr); };};</script><body>姓名：<input id="name" type="text" />年龄：<input id="age" type="text" /><input id="btn1" type="button" value="添加" /><table id="tab1" border="1" width="500px"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>Lisa</td> <td>25</td> <td></td> </tr> <tr> <td>2</td> <td>Blue</td> <td>27</td> <td></td> </tr> <tr> <td>3</td> <td>张三</td> <td>23</td> <td></td> </tr> <tr> <td>4</td> <td>李四</td> <td>28</td> <td></td> </tr> <tr> <td>5</td> <td>王五</td> <td>24</td> <td></td> </tr> </tbody></table></body></html>4. 搜索
版本1：基础版本——字符串比较
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><script>window.onload = function(){ var oTab = document.getElementById("tab1"); var oName = document.getElementById("name"); var oBtn = document.getElementById("btn1"); oBtn.onclick = function() { for(var i=0; i<oTab.tBodies[0].rows.length; i++) { if(oTab.tBodies[0].rows[i].cells[1].innerHTML == oName.value) { oTab.tBodies[0].rows[i].style.background = "yellow"; } else { oTab.tBodies[0].rows[i].style.background = ""; } } };};</script><body>姓名：<input id="name" type="text" /><input id="btn1" type="button" value="搜索" /><table id="tab1" border="1" width="500px"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>Lisa</td> <td>25</td> <td></td> </tr> <tr> <td>2</td> <td>Blue</td> <td>27</td> <td></td> </tr> <tr> <td>3</td> <td>张三</td> <td>23</td> <td></td> </tr> <tr> <td>4</td> <td>李四</td> <td>28</td> <td></td> </tr> <tr> <td>5</td> <td>王五</td> <td>24</td> <td></td> </tr> </tbody></table></body></html>版本2：忽略大小写——大小写转换
<script>window.onload = function(){ var oTab = document.getElementById("tab1"); var oName = document.getElementById("name"); var oBtn = document.getElementById("btn1"); 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 = oName.value; if(sTab.toLowerCase() == sTxt.toLowerCase()) { oTab.tBodies[0].rows[i].style.background = "yellow"; } else { oTab.tBodies[0].rows[i].style.background = ""; } } };};</script>版本3：模糊搜索——search的使用
str1.search(str2)： 若str1中包含str2， 返回出现的位置（从0开始），否则返回-1。
<script>window.onload = function(){ var oTab = document.getElementById("tab1"); var oName = document.getElementById("name"); var oBtn = document.getElementById("btn1"); 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 = oName.value.toLowerCase(); if(sTab.search(sTxt) != -1) { oTab.tBodies[0].rows[i].style.background = "yellow"; } else { oTab.tBodies[0].rows[i].style.background = ""; } } };};</script>版本4：多关键词——split
<script>window.onload = function(){ var oTab = document.getElementById("tab1"); var oName = document.getElementById("name"); var oBtn = document.getElementById("btn1"); 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 = oName.value.toLowerCase(); var arr = sTxt.split(' '); oTab.tBodies[0].rows[i].style.background = ""; for(var j=0; j<arr.length; j++) { if(sTab.search(arr[j]) != -1) { oTab.tBodies[0].rows[i].style.background = "yellow"; } } /* 不能这样写，因为搜索下一个关键字时会把之前高亮的清除！！！ for(var j=0; j<arr.length; j++) { if(sTab.search(arr[j]) != -1) { oTab.tBodies[0].rows[i].style.background = "yellow"; } else { oTab.tBodies[0].rows[i].style.background = ""; } } */ } };};</script>筛选出符合条件的
<script>window.onload = function(){ var oTab = document.getElementById("tab1"); var oName = document.getElementById("name"); var oBtn = document.getElementById("btn1"); 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 = oName.value.toLowerCase(); var arr = sTxt.split(' '); oTab.tBodies[0].rows[i].style.display = "none"; for(var j=0; j<arr.length; j++) { if(sTab.search(arr[j]) != -1) { oTab.tBodies[0].rows[i].style.display = "block"; } } } };};</script>5. 排序
移动Li
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><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]; // 注意： 是children，而不是child //oUl1.removeChild(oLi); //可以不用， 因为appendChild：先把元素从原来的父级上删除，然后再添加到新的父级。 oUl2.appendChild(oLi); };};</script><body><ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul><input id="btn1" type="button" value="移动" /><ul id="ul2"></ul></body></html>或者：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><script>window.onload = function(){ var oUl1 = document.getElementById("ul1"); var oBtn = document.getElementById("btn1"); oBtn.onclick = function() { var oLi = oUl1.children[0]; oUl1.appendChild(oLi); };};</script><body><input id="btn1" type="button" value="移动" /><ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul></ul></body></html>元素排序：转换——排序——插入
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><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,而是一个元素集合。它没有sort方法。 // convert aLi to an array: var arr = []; for(var i=0; i<aLi.length; i++) { arr[i] = aLi[i]; } arr.sort(function (li1, li2) { var num1 = parseInt(li1.innerHTML); var num2 = parseInt(li2.innerHTML); return num1-num2; }); for(var j=0; j<arr.length; j++) { alert("该把"+arr[j].innerHTML+"插入到最后"); oUl1.appendChild(arr[j]); } };};</script><body><input id="btn1" type="button" value="排序" /><ul id="ul1"> <li>34</li> <li>25</li> <li>9</li> <li>88</li> <li>54</li></ul></body></html>表单应用
1. 表单基础知识
什么是表单
向服务器提交数据，比如：用户注册
action 提交到哪里
2. 表单事件
onsubmit 提交时发生
onreset 重置时发生
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><script>window.onload = function(){ var oForm = document.getElementById("form1"); oForm.onsubmit = function() { alert("aaa"); }; oForm.onreset = function() { alert("bbb"); };};</script><body><form id="form1" action="http://www.zhinengshe.com/"> 用户名：<input id="name" type="text" /> <br /> 密码：<input type="password" name="user" /> <input type="submit" /> <input type="reset" /></form></body></html>3. 表单内容验证
阻止用户输入非法字符 阻止事件
输入时、失去焦点时验证 onkeyup、onblur
提交时检查 onsubmit
*后台数据检查
0 0
- 智能社JavaScript学习笔记——13/14 - DOM操作应用 - 高级
- 智能社JavaScript学习笔记——12-DOM操作应用
- 智能社JavaScript学习笔记——11 - DOM基础
- 学习笔记——JavaScript操作DOM
- JavaScript DOM学习笔记3——DOM属性操作
- 《JavaScript高级程序设计》学习笔记——DOM
- javascript高级编程学习笔记 DOM操作（一）
- javaScript操作DOM学习笔记
- JavaScript——DOM操作应用
- JavaScript——DOM的高级应用一
- DOM——JavaScript高级程序设计笔记（8）
- DOM 扩展——JavaScript高级程序设计笔记（9）
- 精通JavaScript开发课时13-14（DOM操作应用）笔记
- JavaScript学习笔记二十四：操作DOM
- Javascript学习笔记07——DOM
- JavaScript学习笔记4——DOM
- 智能社JavaScript学习笔记——JS运动基础
- JavaScript DOM学习笔记1——DOM节点层次
- 人不可貌像外表乖乖其實骨子淫蕩透了 陪你一起神遊仙境欲仙欲死神秘小穴等...
- 常见算法题：逆置单链表
- ZigZag Conversion
- [leetcode] Linked List Cycle II
- [leetcode] Length of Last Word
- 智能社JavaScript学习笔记——13/14 - DOM操作应用 - 高级
- LeetCode解题报告---Reverse Integer
- UIBezierPath详解
- Heartbeat 3.x应用全攻略之：安装、配置、维护
- Heartbeat 3.x应用全攻略之：概念组成及工作原理
- LeetCode-String to Integer (atoi)
- 产品级敏捷的核心在 "决策"
- 关于c++内存的一点总结20150603
- Unique Binary Search Trees
