学习blus老师js(5)--DOM操作应用高级
- 获取
- tBodies、tHead、tFoot、rows、cells
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1'); //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
};
</script>
</head> <body>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
- search方法的使用：
<script>
var str='abcdef'; alert(str.search('g')); //找到并且返回字符串出现的位置，如果没找到-1
</script>
2.appendChild的作用：
1.先把元素从原有父级上删掉
2.添加到新的父级
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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]; //oUl1.removeChild(oLi);
oUl2.appendChild(oLi); //1.先把元素从原有父级上删掉 2.添加到新的父级
};
};
</script>
</head> <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>
3.表格排序。这里例子是按照ID排序，排序的思路用到了上面的appendChild：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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++)
{
oTab.tBodies[0].appendChild(arr[i]);
}
};
};
</script>
</head> <body>
<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>王四</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oForm=document.getElementById('form1'); oForm.onsubmit=function ()
{
alert('aaa');
return false; //阻止默认事件
};
oForm.onreset=function ()
{
alert('bbbbbb');
};
};
</script>
</head> <body>
<form id="form1" action="http://www.zhinengshe.com/">
用户名：<input type="text" name="user" /><br>
密码：<input type="password" name="pass" />
<input type="submit" />
<input type="reset" />
</form>
</body>
</html>
学习blus老师js(5)--DOM操作应用高级的更多相关文章
- 学习blus老师js(4)--DOM
一.DOM节点 1.获取子节点: childNodes nodeType 节点类型 children 只包括元素,不包括文本: 子节点只算第一层.只算孩子一级 ...
- 学习blus老师js(1)--基础
1.网页换肤: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <t ...
- 学习blus老师js(6)--js运动基础
运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...
- 学习blus老师js(3)--定时器的使用
1.无缝滚动——基础 物体运动基础 让Div移动起来 offsetLeft的作用 用定时器让物体连续移动 offsetLeft: 获取物体的左边距:最大的优点在于可以综合考虑所有影响这个物体位置的 ...
- 学习blus老师js(2)--深入JavaScript
1.函数传参 可变参(不定参):arguments 参数的个数可变,参数数组 例1.求和 求所有参数的和 <!DOCTYPE HTML> <html> <head&g ...
- js的dom操作（整理）（转）
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理（整理）
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- JS的DOM操作及动画
JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...
- JS的DOM操作语法
整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
随机推荐
- CSS设置文本末行显示省略号...
首先设置文本标签或文字所在标签的宽度 最主要是以下三点: ①white-space:nowrap;如果是中文需要设置行末不断行 ②overflow:hidden;设置控 ...
- Uva 12304 - 2D Geometry 110 in 1!
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- PHP自定义XML类实现数组到XML文件的转换
这两天在公司写和各应用商店应用内搜索的接口,大致就像百度应用内搜索这样的东西,具体可以点下面的链接查看. 百度应用内搜索 有的应用商店需要JSON格式的数据,所以我只需要用下面的语句就可以返回对方服务 ...
- oracle: sql语句报ora-01461/ora-00911错误
oracle: sql语句报ora-01461/ora-00911错误 ora-00911:sql语句中可能含有特殊字符,或者sql语句中不能用";"分号结尾. sql语句报ora ...
- 用pycharm提交代码，冲突之后文件丢失找回方法
1: 更新代码时, 监测到本地代码改变,需要和合并,重启之后才可以, 选择No同时,代码会被冲掉,新增加的文件也会被冲掉, 但是pycharm有一个文件历史记忆,找到之后可以找到丢失的文件. 1: 选 ...
- 最短路径求解(Dijkstra)
Dijkstra算法分析 题目分析参照<数据结构>(严蔚敏)7-6节 最短路径问题描述 参照日常生活中的公交查询系统.我们有选项: 少换乘/最少站数 价格最少/时间最短.... (ps:下 ...
- IOS-网络（小文件下载）
// // ViewController.m // IOS_0131_小文件下载 // // Created by ma c on 16/1/31. // Copyright © 2016年 博文科技 ...
- java并发编程：线程安全管理类--原子操作类--AtomicLong
可以用原子方式更新的 long 值.有关原子变量属性的描述,请参阅 java.util.concurrent.atomic 包规范.AtomicLong 可用在应用程序中(如以原子方式增加的序列号), ...
- Cortex_M3——存储器系统学习笔记
看完一个章节完全不做学习笔记总结并进行知识转换,看了就会忘记啊~无奈脸. 一.CORTEX_M3总线一览 二.异常 编号为1-15的对应系统异常,大于等于16的则全是外部中断. 系统异常清单如下所示: ...
- XML——概述
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...