学习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 ...
随机推荐
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
- Flask 4 拓展
NOTE 1.Flask被设计为可拓展模式,所以没有提供如数据库和用户认证等重要的功能,允许开发者按需开发. 2.使用Flask-Script支持命令行选项: 安装flask-script: pip ...
- [BZOJ1257][CQOI2007]余数之和
题目大意 给你 \(n, k\),计算 $ \sum_{i=1}^n k \bmod i$ 解析 注意到 $ k\bmod i=k-[k/i] \times i$ 则上式等于 $ n \times k ...
- Codeforces Round #417 (Div. 2) B. Sagheer, the Hausmeister
http://codeforces.com/contest/812/problem/B 题意: 有n层楼,每层楼有m个房间,1表示灯开着,0表示灯关了.最两侧的是楼梯. 现在每从一个房间移动到另一个房 ...
- shell 将输入的字符转换成大写
test.sh #!/bin/bash while read line do echo $line | tr '[a-z]' '[A-Z]' done 输出 dddddd DDDDDD sssss S ...
- Linux常用命令--文件操作、权限设置
1.编辑文件 cat aaa.txt 查看aaa.txt文件的内容 head - aaa.txt 查看aaa.txt文件前5行的内容 tail - aaa.txt 展示aaa.txt文件最后10行的内 ...
- VS2010快捷键大全----养成良好的习惯
VS2010版快捷键Ctrl+E,D ----格式化全部代码 Ctrl+E,F ----格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 生成编译 CTRL + O ...
- opencv错误（Unhandled expection at at 0x0007EEE...）
错误截图如下: 情况1:加载人脸检测分类器的时候出错,不能写相对路径一定要写绝对路径 例如:cascade.load("D:\\recognise-your-own-face2\\recog ...
- IOS-适配iOS10以及Xcode8
现在在苹果的官网上,我们已经可以下载到Xcode8的GM版本了,加上9.14日凌晨,苹果就要正式推出iOS10系统的推送了,在此之际,iOS10的适配已经迫在眉睫啦,不知道Xcode8 beat版本, ...
- canvas实现的时钟效果
最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...