学习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 ...
随机推荐
- 关于LIS和LCS问题的o(nlogn)解法
o(n^2)解法就不赘述了,直接解释o(nlogn)解法 LIS最长递增子序列: 先明确一个结论:在长度最大为len的递增序列里若末尾元素越小,该递增序列越容易和后面的子序列构造出一个更长的递增子序列 ...
- luogu P1192 台阶问题
https://www.luogu.org/problem/show?pid=1192 登楼梯 肯定能想到 dp[i] = dp[i-1] + dp[i-2] + ...+ dp[i-k] 然后想到 ...
- python 去除不可见的控制字符
尤其是在json load的时候,字符串中的不可见控制字符可能会导致错误,应该先对字符串进行控制字符过滤. 对网页文本同样适用,最好在处理网页文本时先进性控制字符清洗. Replace null by ...
- mysql之innodb的锁分类介绍
一.innodb行锁分类 record lock:记录锁,也就是仅仅锁着单独的一行 gap lock:区间锁,仅仅锁住一个区间(注意这里的区间都是开区间,也就是不包括边界值. next-key loc ...
- python学习笔记（locust性能测试模块）
locust是基于python的性能测试工具.支持python2.7及其以上的版本.相对于主流的LR与Jmeter工具使用的方式不一样.locust是通过编写python代码来完成性能测试的. 通过L ...
- idea中解决Git反复输入代码的问题
打开git终端,或者idea中的插件终端,输入命令: git config --global credential.helper store 借用一下别人的图不要介意哈.......... 执行上述命 ...
- HDU1698 线段树入门之区间修改/查询(lazy标记法)
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- orm框架的使用
Install npm install orm Node.js Version Support Supported: 0.12 - 6.0 + Tests are run on Travis CI I ...
- html绘制三角形（兼容IE6）
.sanjiao { width:; height:; overflow: hidden; border-width: 10px; border-color: red transparent tran ...
- android中LayoutInflater.from(context).inflate的分析
在应用中自定义一个view,需要获取这个view的布局,需要用到 (LinearLayout) LayoutInflater.from(context).inflate(R.layout.conten ...