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 ...
随机推荐
- Ubuntu下安装Tensorflow
本文目录 引言 基于Anaconda的tensorflow安装 1 下载linux版本的Anaconda安装包 2 安装Anaconda 利用anaconda安装tensorflow 1 建立一个 c ...
- Myeclipse学习总结（5）——Myeclipse常用快捷键再学习
Ctrl+1 快速修复 Ctrl+D: 删除当前行 Ctrl+Q 定位到最后编辑的地方 Ctrl+L 定位在某行 Ctrl+O 快速显示 OutLine Ctrl+T 快速显示当前类的继承结构 ...
- struts配置问题
- HDU 2857 Mirror and Light
/* hdu 2857 Mirror and Light 计算几何 镜面反射 */ #include<stdio.h> #include<string.h> #include& ...
- 【配置属性】—Entity Framework实例详解
Entity Framework Code First的默认行为是使用一系列约定将POCO类映射到表.然而,有时候,不能也不想遵循这些约定,那就需要重写它们.重写默认约定有两种方式:Data Anno ...
- 【基础训练】HDOJ2032杨辉三角
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvWEdzaWxlbmNl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- Ubuntu16.04添加源的地址
打开terminal,输入sudo gedit /etc/apt/sources.list,向该文件中添加源的地址即可,如,可添加如下地址 deb-src http://archive.ubuntu. ...
- hadoop(八) - hbase集群环境搭建
1. 上传hbase安装包hbase-0.96.2-hadoop2-bin.tar.gz 2. 解压 tar -zxvf hbase-0.96.2-hadoop2-bin.tar.gz -C /clo ...
- android TextView加边框
为TextView加边框.须要在drawable建xml文件,里面设置shape来设置文本框的特殊效果. <?xml version="1.0" encoding=" ...
- 赵雅智_android获取本机运营商，手机号部分能获取
手机号码不是全部的都能获取.仅仅是有一部分能够拿到. 这个是因为移动运营商没有把手机号码的数据写入到sim卡中.SIM卡仅仅有唯一的编号.供网络与设备 识别那就是IMSI号码,手机的信号也能够说是通过 ...