第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. 《你又怎么了我错了行了吧》【Alpha】Scrum meeting 5

    第五天 日期:2019/6/18 前言: 第5次会议在女生宿舍召开 冲刺第5天,对所有工作做了总结.继续完善编码工作. 1.1 今日完成任务情况以及明天任务安排 姓名 当前阶段任务 下一阶段任务 刘 ...

  2. auto-boxing, uboxing,以及缓存问题

    package chengbaoDemo; public class Test02 {    public static void main(String[] args) {        Integ ...

  3. Oracle解除表锁定问题

    1.肯定是你同时打开了多个操作页面,要记得关闭多个打开的sql窗口. 2.可以变相删除表,再重新创建一张同名的表来解除表被锁住的问题

  4. CCEditBox/CCEditBoxImpl

    #ifndef __CCEditBoxIMPL_H__ #define __CCEditBoxIMPL_H__ #include "cocos2d.h" #include &quo ...

  5. 多播 & multicast

    参考: http://blog.csdn.net/herbert5069/article/details/31358641

  6. 鸟书shell 学习笔记(二) shell中正則表達式相关

    通配符与正則表達式的差别 通配符是bash原生支持的语法,正則表達式是处理字符串的一种表示方式, 正則表達式须要支持的工具支持才干够 语系设置 : export LANG=C grep alias 设 ...

  7. mysql Access denied for user &#39;root&#39;@&#39;localhost&#39; (using password: YES)

    [现象说明] C/S程序远程訪问正常,本地訪问报下面异常 MySql.Data.MySqlClient.MySqlException (0x80004005): Authentication to h ...

  8. SVN打tag

          SVN打tag是一个非经常常使用的功能,要谈打tag,还得从SVN官方推荐的文件夹结构说起.SVN官方推荐在一个版本号库的根文件夹下先建立trunk.branches.tags这三个文件夹 ...

  9. elasticsearch源码分析之search模块(client端)

    elasticsearch源码分析之search模块(client端) 注意,我这里所说的都是通过rest api来做的搜索,所以对于接收到请求的节点,我姑且将之称之为client端,其主要的功能我们 ...

  10. 最大似然估计的缺陷 —— 方差和均值的 bias

    0. 均匀分布期望的最大似然估计 首先我们来看,如何通过最大似然估计的形式估计均匀分布的期望.均匀分布的概率密度函数为:f(x|θ)=1θ,0≤x≤θ.不失一般性地,将 x1,x2,-,xn 排序为顺 ...