第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. 【Manthan, Codefest 18 (rated, Div. 1 + Div. 2) C】Equalize

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] Swap操作显然只能对(i-1,i)执行才有用. 不然直接将i翻转以及j翻转 显然比直接交换更优. 那么现在我们就相当于有两种操作. ...

  2. MySQL 利用binlog增量备份+还原实例

    一,什么是增量备份 增量备份,就是将新增加的数据进行备份.假如你一个数据库,有10G的数据,每天会增加10M的数据,数据库每天都要备份一次,这么多数据是不是都要备份呢?还是只要备份增加的数据呢,很显然 ...

  3. AJAX发送POST请求，请求提交后Method从POST变成GET

    服务器如果返回301或者302状态码,所有请求方法都会切换成GET头部的location如果要保证重定向后的请求方法,需要在服务端返回307(临时)或者308(永久)状态码,这两个状态码不会更改原请求 ...

  4. 洛谷—— P1204 [USACO1.2]挤牛奶Milking Cows

    https://www.luogu.org/problem/show?pid=1204 题目描述 三个农民每天清晨5点起床,然后去牛棚给3头牛挤奶.第一个农民在300秒(从5点开始计时)给他的牛挤奶, ...

  5. [Design]制作磨砂效果

    比较适合运用到网页或者APP的设计当中,推荐过来和飞特的朋友们一起分享学习了,先来看看最终的效果图吧 具体的制作步骤如下:

  6. 视差滚动demo （pc）

    根据设计图设定每屏的高度,js会自动缩放到全屏尺寸,效果要大尺寸才能看的出来 demo :http://runjs.cn/detail/uvizsekd <!DOCTYPE html> & ...

  7. indexOf实际试用方法

    用于搜索和查找关键字个数或者位置 例如: package zifu; public class tianqi { public static void main (String args[]){ St ...

  8. [OS][ linux ] 建立新帳號, 變更密碼, 加入 sudoer

    新增 linux , 設定預設 password, 新增 user 到 sudoers 1. 新增 User sudo useradd aa97 2. 設定 User password sudo pa ...

  9. reflect 反射结合集合泛型的总结

    集合泛型: 可以放任何对象的 ArrayList  ArrayList list = new ArrayList();  没有限定泛型类型. list.add("lilin");l ...

  10. 【SQL优化】SQL优化工具

    SQLAdvisor 是由美团点评公司北京DBA团队开发维护的 SQL 优化工具:输入SQL,输出索引优化建议. 它基于 MySQL 原生词法解析,再结合 SQL 中的 where 条件以及字段选择度 ...