第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大常用实例）的更多相关文章

  1. Selenium2学习-014-WebUI自动化实战实例-012-Selenium 操作下拉列表实例-div+{js|jquery}

    之前已经讲过了 Selenium 操作 Select 实现的下拉列表:Selenium2学习-010-WebUI自动化实战实例-008-Selenium 操作下拉列表实例-Select,但是在实际的日 ...

  2. Bootstrap历练实例：大的按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  3. spark2.4.5计算框架中各模块的常用实例

    本项目是使用scala语言给出了spark2.4.5计算框架中各模块的常用实例. 温馨提醒:spark的版本与scala的版本号有严格的对应关系,安装请注意. Spark Core RDD以及Pair ...

  4. find一些常用参数的一些常用实例和一些具体用法和注意事项。

    find一些常用参数的一些常用实例和一些具体用法和注意事项. 1．使用name选项: 文件名选项是find命令最常用的选项,要么单独使用该选项,要么和其他选项一起使用.  可以使用某种文件名模式来匹配 ...

  5. 关于js函数，方法，对象实例的一些说明

    朋友们大家好,好久没有更新文章了,最近正好有空就想着写点什么吧,加上这段时间总是能听到一些朋友们问关于js函数,方法,对象实例到底有什么区别这个问题,所以今天就献丑来简单说明一些吧! 其实这些主要都是 ...

  6. 【转】 Android常用实例—Alert Dialog的使用

    Android常用实例—Alert Dialog的使用 AlertDialog的使用很普遍,在应用中当你想要用户做出“是”或“否”或者其它各式各样的选择时,为了保持在同样的Activity和不改变用户 ...

  7. 【转】JS回调函数--简单易懂有实例

    JS回调函数--简单易懂有实例 初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is ...

  8. Textillate.js有什么用及使用实例

    Textillate.js有什么用及使用实例 一.总结 一句话总结:Textillate.js – 实现动感的 CSS3 文本动画的简单插件 二.textillate.js 文字动画 textilla ...

  9. Java JUC之Atomic系列12大类实例讲解和原理分解

    Java JUC之Atomic系列12大类实例讲解和原理分解 2013-02-21      0个评论       作者:xieyuooo 收藏    我要投稿 在java6以后我们不但接触到了Loc ...

随机推荐

  1. centos 如何执行.bin 文件？？

    默认下载,或者上传到 linux 上的 .bin 文件都是白色的,不能被执行. 想要用 ./ 命令去执行,需要先给这个 bin 文件赋权限 chmod u+x 文件名(全名称) 执行完成这个命令,可以 ...

  2. InitializingBean 和 DisposableBean 指定初始化和销毁方法

    通过实现 InitializingBean 和 DisposableBean 接口,也可以指定 bean 的初始化和销毁方法 二.Student 类 public class Student impl ...

  3. 洛谷 1821: [JSOI2010]Group 部落划分 Group

    1821: [JSOI2010]Group 部落划分 Group Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2596  Solved: 1221[S ...

  4. lpa标签传播算法解说及代码实现

    package lpa; import java.util.Arrays; import java.util.HashMap; import java.util.Map; public class L ...

  5. 微软ASP.NET网站部署指南（9）：部署数据库更新

    1.  综述 无论什么时候,程序都有可能像代码更新一样更新数据库.本章节你将进行数据库改动,測试.然后部署到測试环境和生产环境. 提醒:假设依据本章节所做的操作出现错误信息或一些功能不正常的话,请务必 ...

  6. java根据汉字获取全拼和首字母

    import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuPinyinCase ...

  7. [寒江孤叶丶的Cocos2d-x之旅_33]RichTextEx一款通过HTML标签控制文字样式的富文本控件

    RichTextEx一款通过HTML标签控制文字样式的富文本控件 原创文章,欢迎转载.转载请注明:文章来自[寒江孤叶丶的Cocos2d-x之旅系列] 博客地址:http://blog.csdn.net ...

  8. 机器学习之线性分类器（Linear Classifiers）——肿瘤预测实例

    线性分类器:一种假设特征与分类结果存在线性关系的模型.该模型通过累加计算每个维度的特征与各自权重的乘积来帮助决策. # 导入pandas与numpy工具包. import pandas as pd i ...

  9. Oracle的awr和ash

    1.     10g之前 用户的连接将产生会话,当前会话记录保存在v$session中:处于等待状态的会话会被复制一份放在v$session_wait中.当该连接断开后,其原来的连接信息在v$sess ...

  10. [转]Linux常用命令学习

    转自 https://www.cnblogs.com/gaojun/p/3359355.html 1.ls命令 就是list的缩写,通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文 ...