第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. 【codeforces 807B】T-Shirt Hunt

    [题目链接]:http://codeforces.com/contest/807/problem/B [题意] 你在另外一场已经结束的比赛中有一个排名p; 然后你现在在进行另外一场比赛 然后你当前有一 ...

  2. String类常见的方法

    类String public final class String extends Object implements Serializable, comparable<String>, ...

  3. 洛谷 1144 最短路计数 bfs

    洛谷1144 最短路计数 传送门 其实这道题目的正解应该是spfa里面加一些处理,,然而,,然而,,既然它是无权图,,那么就直接bfs了,用一个cnt记录一下每一个点的方案数,分几种情况讨论一下转移, ...

  4. struts2提交多个对象带图片

    一:实体类 二:前台页面 三:Action处理

  5. java 递归实现删除或查询指定目录下的全部文件

    /** * 递归列举盘符下的全部文件的名称,如E:\HeartIsland * * @author HeartIsland * */ public class FileListDemo { /** * ...

  6. 关于vue 自定义组件的写法与用法

    最近在网上看到很多大神都有写博客的习惯,坚持写博客不但可以为自己的平时的学习做好记录积累 无意之中也学还能帮助到一些其他的朋友所以今天我也注册一个账号记录一下学习的点滴!当然本人能力实在有限写出的文章 ...

  7. 信息安全-加密：SM4.0

    ylbtech-信息安全-加密:SM4.0 SM4.0(原名SMS4.0)是中华人民共和国政府采用的一种分组密码标准,由国家密码管理局于2012年3月21日发布.相关标准为“GM/T 0002-201 ...

  8. Oracle 数据库勒索病毒 RushQL 处理办法

    处理办法来自Oracle 官方: https://blogs.oracle.com/cnsupport_news/%E5%AF%B9%E6%95%B0%E6%8D%AE%E5%BA%93%E7%9A% ...

  9. Redis学习笔记（一） 初识 Redis

    简介 我所在的公司是一个以线下业务为主的公司,软件这一块的东西可以说是手工作坊,技术上的东西全靠大家自己折腾.最近也是觉得自己在社会主义的怀抱里安逸了太久,要提高思想政治觉悟,不能忘了资本主义的黑暗, ...

  10. redis模拟消息订阅

    使用办法: 订阅端: Subscribe 频道名称 发布端: publish 频道名称 发布内容 客户端例子: redis 127.0.0.1:6379> subscribe news Read ...