第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. botot framework选择下拉框

    1,下拉框不能输入文字,如图: 方法: select from list    id=xxx   要选择的数据 2.下拉框可输入文字,如图: 方法: click element   di=xxx   ...

  2. C#中的string驻留池

    刚开始学习C#的时候,就听说CLR对于String类有一种特别的内存管理机制:有时候,明明声明了两个String类的对象,但是他们偏偏却指向同一个实例.如下: String s1 = "He ...

  3. 王立平--split字符串切割

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQyNTUyNw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  4. android 九宫格（16宫格）控件

    public class NineRectView extends ViewGroup { private Context ctx; private int wSize,hSize,row,colum ...

  5. spark视频教程免费下载

    下载地址:点我下载   其它章节陆续上传中,Hadoop视频教程正在整理中,敬请关注.

  6. 使用Swift和SpriteKit写一个忍者游戏

    这篇文章的游戏使用SpriteKit和Swift语言来完毕. SpriteKit是苹果自己的游戏引擎,更能贴合iOS系统底层的API,只是架构和实现上都是模仿了Cocos2D.所以使用上事实上区别不大 ...

  7. 继承的综合运用《Point类派生出Circle类而且进行各种操作》

    类的组合与继承 (1)先建立一个Point(点)类.包括数据成员x,y(坐标点). (2)以Point为基类.派生出一个Circle(圆)类,添加数据成员(半径),基类的成员表示圆心: (3)编写上述 ...

  8. jenkins下载

    前置条件:需要有java环境的jdk 一.安装使用 下载地址:https://jenkins-ci.org/content/thank-you-downloading-windows-installe ...

  9. 三种数据库日期转字符串对照sql server、oracle、mysql（V4.11）

    三种数据库日期转换对照: http://blog.csdn.net/zljjava/article/details/17552741 SQL类型转换函数:cast(type1 as type2) 数据 ...

  10. python课程设计笔记（一）开发环境配置

    今天开始学python,一个月后交成果?还是希望自己不要浮躁,认真地去学,有所付出也不期望太大回报. 现在还是一脸懵逼的状态,看着教程一点点来吧= = 毕竟我是最棒的最发光的阳光彩虹小白马! 1. 去 ...