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 ...
随机推荐
- ORA-12560: TNS: 协议适配器错误（oracle service 已启动）
如果是安装完 oracle 客户端之后才出现的这个问题,请往下看 安装 oracle client 时,会配置一个客户端的监听,如果电脑上之前安装过 oracle service 就会和服务的监听冲突 ...
- 00064_字符串缓冲区_StringBuffer类
1.StringBuffer类 (1)StringBuffer又称为可变字符序列,它是一个类似于 String 的字符串缓冲区,通过某些方法调用可以改变该序列的长度和内容. (2)tringBuffe ...
- 【codeforces 805B】3-palindrome
[题目链接]:http://codeforces.com/contest/805/problem/B [题意] 让你生成一个只包含a,b,c的字符串; 要求c出现的次数最少,且任意一个 长度为3的子串 ...
- hdu 1163
别人的代码开始自己不知道什么数论解法: ab*ab=(a*10+b)(a*10+b)=a^2*100+2ab*10+b^2 所以the root digital=(a+b)*(a+b): 而数论中的定 ...
- SQL-Oracle存储过程-循环A表，向B表插入数据
--存储过程,查询A表,向B表插入数据 create or replace procedure prc_sg_sjtj_config(p_flag out varchar2) IS BEGIN FOR ...
- jdk环境变量设置理解
1.系统变量→新建 JAVA_HOME 变量 . 变量值填写jdk的安装目录(本人是 E:\Java\jdk1.7.0) 2.系统变量→寻找 Path 变量→编辑 在变量值最后输入 %JAVA_HOM ...
- 【HDOJ 2063】过山车
[HDOJ 2063]过山车 二分图最大匹配模板题 1女对n男 问匹配最大对数 代码例如以下: #include <iostream> #include <cstdlib> # ...
- chrome打开网址但是没有地址栏
chrome打开网址但是没有地址栏 C:\Users\Administrator>C:\Users\Administrator\AppData\Local\Google\Chrome\Appli ...
- 【POJ 3904】 Sky Code
[题目链接] http://poj.org/problem?id=3904 [算法] 问题可以转化为求总的四元组个数 - 公约数不为1的四元组个数 总的四元组个数为C(n,4),公约数不为1的四元组个 ...
- ThinkPHP5+Redis单例型购物车
<?php /** * Redis + 单例型购物车 * param $basket 存储商品信息 * param $ins 存储实例化对象 */ namespace lib; use redi ...