JS DOM 实例（5大常用实例）
第1个实例：循环单击变色
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>1111</h1>
<h1>222</h1>
<h1>333</h1>
<h1>444</h1>
<h1>555</h1>
</body>
<script>
var one = document.getElementsByTagName('h1');
for(i=0;i<one.length;i++){
one[i].setAttribute('num',0);
one[i].onclick=function(){
num=parseInt(this.getAttribute('num'));
if(num%2==0){
this.style.background = "#ccc";
}else{
this.style.background = "#f0f";
}
this.setAttribute('num',num+1);
}
}
</script>
</html>
第2个实例：点击显示行号
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>1111</h1>
<h1>222</h1>
<h1>333</h1>
<h1>444</h1>
<h1>555</h1>
</body>
<script>
var one = document.getElementsByTagName('h1');
for(i=0;i<one.length;i++){
one[i].setAttribute('num',i+1);
one[i].onclick=function(){
this.innerHTML = this.getAttribute('num');
} }
</script>
</html>
第3个实例：点击标题隐藏、显示内容
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>linux</h1>
<p>linuxlinuxlinuxlinuxlinuxlinuxlinuxlinuxlinuxlinux</p>
<h1>php</h1>
<p>phpphpphpphpphpphpphpphpphpphpphpphpphpphpphpphpphp</p>
<h1>java</h1>
<p>javajavajavajavajavajavajavajavajavajavajavajavajava</p>
</body>
<script>
var one = document.getElementsByTagName('h1');
var ps = document.getElementsByTagName('p');
for(i=0;i<one.length;i++){
one[i].setAttribute('line',i);
one[i].setAttribute('num',0);
ps[i].id = i; one[i].onclick=function(){
num=parseInt(this.getAttribute('num'));
line=this.getAttribute('line');
nextp = document.getElementById(line); if(num%2==0){
//下边的span标签隐藏
nextp.style.display='none';
}else{
//下边的span标签显示
nextp.style.display='block';
}
this.setAttribute('num',num+1);
} }
</script>
</html>
第4个实例：选择下拉菜单里的值并显示_新方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style> </style>
</head>
<body>
<form action="javascript:">
<p>选择城市:</p>
<p>
<select id="sid">
<option value="北京" order="1">北京</option>
<option value="上海" order="5">上海</option>
<option value="广州" order="20">广州</option>
</select>
</p>
</form>
<p><input type="button" value="选择" id="btn"></p> </body> <script>
var btn = document.getElementById("btn");
var sid = document.getElementById("sid");
btn.onclick = function(){
idx = sid.selectedIndex;
opts = sid.options;
alert(opts[idx].value); //通过options里的value属性来获取值-value是标准属性
alert("城市排名："+opts[idx].getAttribute("order")); //通过order属性来获取值-order是非标准属性，所以用getAttribute来获得。
}
</script>
</html>
第4个实例：选择下拉菜单里的值并显示_旧方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style> </style>
</head>
<body>
<form action="javascript:">
<p>选择城市:</p>
<p>
<select id="sid">
<option value="请选城市">选择城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
</p>
</form>
<p><input type="button" value="选择" id="btn"></p> </body> <script>
var btn = document.getElementById("btn");
var sid = document.getElementById("sid");
btn.onclick = function(){
document.write(this.value = sid.value);
}
</script>
第5个实例：鼠标移入移出特效
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>1111111111111111</h1>
<h1>22222222222222</h1>
<h1>33333333333333</h1>
<h1>44444444444444</h1>
<h1>55555555555555</h1>
</body>
<script>
var one = document.getElementsByTagName('h1');
for(i=0;i<one.length;i++){
one[i].onmouseenter=function(){
this.style.background="#ccc";
}
one[i].onmouseleave=function(){
this.style.background="#fff";
}
}
</script>
</html>
第6个实例：多选、反选和全不选
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<form action="">
<p>选择爱好：</p>
<p>
<label>
<input type="checkbox" name="" id="">篮球
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id="">足球
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id="">游泳
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id="">逛街
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id="">音乐
</label>
</p>
</form>
<p>
<button id="all">全选</button>
<button id="notall">全不选</button>
<button id="unall">反选</button>
</p>
</body>
<script>
var all = document.getElementById('all');
var notall = document.getElementById('notall');
var unall = document.getElementById('unall');
inputs = document.getElementsByTagName('input'); //全选
all.onclick = function(){
for(i=0;i<inputs.length;i++){
inputs[i].checked = true;
}
} //全不选
notall.onclick = function(){
for(i=0;i<inputs.length;i++){
inputs[i].checked = false;
}
} //反选
unall.onclick = function(){
for(i=0;i<inputs.length;i++){ //方法1：三元运算符a?1:2;
//inputs[i].checked = inputs[i].checked?false:true; //方法2：一元运算符 !
inputs[i].checked = !inputs[i].checked; }
}
</script>
</html>
JS DOM 实例（5大常用实例）的更多相关文章
- Selenium2学习-014-WebUI自动化实战实例-012-Selenium 操作下拉列表实例-div+{js|jquery}
之前已经讲过了 Selenium 操作 Select 实现的下拉列表:Selenium2学习-010-WebUI自动化实战实例-008-Selenium 操作下拉列表实例-Select,但是在实际的日 ...
- Bootstrap历练实例：大的按钮
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- spark2.4.5计算框架中各模块的常用实例
本项目是使用scala语言给出了spark2.4.5计算框架中各模块的常用实例. 温馨提醒:spark的版本与scala的版本号有严格的对应关系,安装请注意. Spark Core RDD以及Pair ...
- find一些常用参数的一些常用实例和一些具体用法和注意事项。
find一些常用参数的一些常用实例和一些具体用法和注意事项. 1．使用name选项: 文件名选项是find命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用. 可以使用某种文件名模式来匹配 ...
- 关于js函数，方法，对象实例的一些说明
朋友们大家好,好久没有更新文章了,最近正好有空就想着写点什么吧,加上这段时间总是能听到一些朋友们问关于js函数,方法,对象实例到底有什么区别这个问题,所以今天就献丑来简单说明一些吧! 其实这些主要都是 ...
- 【转】 Android常用实例—Alert Dialog的使用
Android常用实例—Alert Dialog的使用 AlertDialog的使用很普遍,在应用中当你想要用户做出“是”或“否”或者其它各式各样的选择时,为了保持在同样的Activity和不改变用户 ...
- 【转】JS回调函数--简单易懂有实例
JS回调函数--简单易懂有实例 初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is ...
- Textillate.js有什么用及使用实例
Textillate.js有什么用及使用实例 一.总结 一句话总结:Textillate.js – 实现动感的 CSS3 文本动画的简单插件 二.textillate.js 文字动画 textilla ...
- Java JUC之Atomic系列12大类实例讲解和原理分解
Java JUC之Atomic系列12大类实例讲解和原理分解 2013-02-21 0个评论 作者:xieyuooo 收藏 我要投稿 在java6以后我们不但接触到了Loc ...
随机推荐
- 工具-Telerik trial安装图解
- BA-BACnet对象
BACNET协议有多少个对象呢,拿出西门子教程中的看看一下,居然有48个,其中的大部分都没有用到:
- Web前端开发实战2：二级下拉式菜单之JS实现
上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...
- android 九宫格（16宫格）控件
public class NineRectView extends ViewGroup { private Context ctx; private int wSize,hSize,row,colum ...
- HttpClient 4.4 请求
4.2 版本 /** * url 请求 paramUrl * * @time 2015年11月10日下午4:40:22 * @packageName com.rom.utils * @param ur ...
- 王立平--poser
Poser是Metacreations公司推出的一款lemmaId=234814&ss_c=ssc.citiao.link" style="color:rgb(51,102 ...
- Mysql中You can't specify target table for update in FROM clause错误的意思是说，不能先select出同一表中的某些值，再update这个表(在同一语句中)。
将select出的结果再通过中间表select一遍,这样就规避了错误.注意,这个问题只出现于mysql,mssql和oracle不会出现此问题. mysql中You can't specify tar ...
- [寒江孤叶丶的Cocos2d-x之旅_33]RichTextEx一款通过HTML标签控制文字样式的富文本控件
RichTextEx一款通过HTML标签控制文字样式的富文本控件 原创文章,欢迎转载.转载请注明:文章来自[寒江孤叶丶的Cocos2d-x之旅系列] 博客地址:http://blog.csdn.net ...
- SSD纠错码向LDPC码演变
作者:Stephen Bates SSD控制器芯片中採用的纠错编码(ECCs)的类型正在发生一场演变.相信很多这篇博文的读者对此都有所了解.传统上採用的纠错码是基于群变换的博斯-查德胡里-霍昆格母(B ...
- bzoj3715: [PA2014]Lustra(乱搞)
3715: [PA2014]Lustra 题目:传送门 题解: 随手一发水题x1 随便排序一下...小学生题??? 代码: #include<cstdio> #include<cst ...