学习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 ...
随机推荐
- 【转载】linux fork死循环炸弹及其预防
转自linux fork死循环炸弹及其预防 在Linux系统下执行这段代码 :(){ :|:& }:: 就会引起死机,一旦执行起来后,唯一的方法就是重启系统.实际上这段代码是一段无限递归代码, ...
- 双击不能运行可执行的jar文件
1.首先在命令行下运行jar包看文件是否报错(java -jar jar文件名称.jar) 如果程序中有System.out.println()语句,不想让其输出到控制台而保存到文件 ...
- shell 判断变量是否为空
一句话判断 [ ! $a ] && echo "a is null" 1.判断变量 read -p "input a word :" word ...
- vnc viewer 点击system 卡死现象
转自:http://zhangjunli177.blog.163.com/blog/static/1386073082012103052527557/ VNC viewer desktop dead ...
- 2-15-MySQL进阶
select select 字段列表 from 数据表 [[as] 别名] [where 条件] 别名: 数据表 [[as] 别名] select AA.money,BB.name from prod ...
- 过滤器系列（二）—— Cuckoo filter
这一篇讲的是布谷过滤器(cuckoo fliter),这个名字来源于更早发表的布谷散列(cuckoo hash),尽管我也不知道为什么当初要给这种散列表起个鸟名=_= 由于布谷过滤器本身的思想就源自于 ...
- javascript---关于字符串和数组的方法
在学习javascript过程中,遇到过很多关于数组和字符串的一些操作.之前也总结了不少方法,可是一遇到自己用的时候,就忘了.不是忘了方法叫什么名,就是忘了方法的参数有什么,返回的是什么? 现在就再次 ...
- 安装MySQL后要做的事
安装MySQL后要修改的配置 [mysql] default-character-set=utf8 [mysqld] # 关闭域名反解 skip_name_resolve # 每表一个独立的表空间文件 ...
- MySQL根据表字段生成C#Model语句
USE INFORMATION_SCHEMA;SELECT CONCAT('/// <summary>\r\n/// ',COLUMN_COMMENT,'\r\n/// </summ ...
- python 发送QQ邮件的小例子
首先QQ邮件用第三方客户端发送要申请验证码.而不是QQ的密码. 授权码就是你接下来登录要使用的密码 那么剩下的工作就很简单了.附简单代码如下: #coding:utf-8 import smtplib ...