学习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 ...
随机推荐
- Vim提示E325（锁机制）
背景 用vim命令处理一些超大文件时,有时会遇到卡死现象,不得不强制退出.但是,再次用vim命令访问这个文件时,会出现“E325:ATTENTION”提示.如果不做处理,以后每次都会出现. 分析 经过 ...
- java学习之浅谈多线程3--线程间协作
通过保证临界区上多个线程的相互排斥,线程同步完全可以避免竞争状态的发生,但是有时还需要线程之间的协作.有两种方式可用于线程间的通信. 1.使用条件Condition Condition接口: +awa ...
- hdu 4348 To the moon 主席树区间更新
To the moon Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Prob ...
- Codeforces Round #307 (Div. 2) D. GukiZ and Binary Operations 矩阵快速幂优化dp
D. GukiZ and Binary Operations time limit per test 1 second memory limit per test 256 megabytes inpu ...
- Stub学习
RPC RPC(Remote Procedure Call)就是某台主机A(一般为client)像调用本地的过程一样去调用另一台主机B(一般为server)上的某个过程.RPC代码可能长成这个样子: ...
- CSS 再学习，基础篇
语法 h1 {color:red; font-size:14px;} 共享声明 h1,h2,h3,h4,h5,h6 { color: green; } 继承 通过 CSS 继承,子元素将继承最高级元素 ...
- RHEL6.5恢复root密码
1.开机上下键停留在如下界面,键盘输入小写e: 2.选择如下选项,并输入小写e: 3.输入1,回车进入单用户模式: 4.键盘输入小写b,进行启动: 5.进入到单用户模式: 6.修改root用户密码,并 ...
- [Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'number primary key,
如题,mysql建表语句报错 分析:就是一个语法错误,具体问题具体分析 本例中,直接赋值过来的 sql建表语句,直接粘贴到mysql数据库运行,报错! 经查询,mysql中 number类型的定义有如 ...
- centos7(debian,manjora,freebsd)命令及安装mysql、git、gpg、gogs，安装docker，zsh，chrome
最小安装: 1. 选择English 2. DATE & TIME 修改好本地时间 SOFTWARE SELECTION默认的Minimal Install就好 INSTALLATION DE ...
- Java网络编程和NIO详解6：Linux epoll实现原理详解
Java网络编程和NIO详解6:Linux epoll实现原理详解 本系列文章首发于我的个人博客:https://h2pl.github.io/ 欢迎阅览我的CSDN专栏:Java网络编程和NIO h ...