DOM例子小结（一）

一、点击按钮切换图片

核心思路：

1、首先获取元素

2、为元素添加点击事件

3、当事件被触发时运行代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <button id="dog">狗子</button>

     <button id="cat">猫咪</button><br>

     <img src="1.jpg" width="150px" height="150px" title="狗子"/>

 <script>

 //修改元素属性

 //获取元素

     var dog = document.getElementById("dog");

     var cat = document.getElementById("cat");

     var img = document.querySelector('img');

 //注册事件 处理函数

     cat.onclick = function(){

         img.title='猫咪';

         img.src = '2.jpg';

 };

     dog.onclick = function(){

         img.title='狗子';

         img.src = '1.jpg';

 }

 </script>

 </body>

 </html>

二、点击变换输入框文字和按钮

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

 <button>按钮</button>

 <input type="text" value="输入内容">

 <script>

 //获取元素

 var btn = document.querySelector('button');

 var input = document.querySelector('input');

 //注册事件 处理程序

 btn.onclick = function(){

     //input.innerHTML = '点击了~';

     //innerHTML这个是普通盒子比如div标签里面的内容

     //表单里面的值是通过value属性来实现的

     input.value = '点击了~';

     //如果想让某个按钮被禁用，不可以再点击，使用disabled，让button被禁用

     //btn.disabled = true;

     this.disabled = true;

     //this指向的是事件函数的调用者，onclick=function这个函数是被btn调用了，所以在这里this指向的就是btn

 }

 </script>

 </body>

 </htm>

三、仿京东显示隐藏密码明文

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>仿京东登录框</title>

    <style>

    .box{

        width:300px;

        border-bottom:1px solid #f00;

        margin:100px auto;

        position:relative;

    }

    .box input{

        width:270px;

        height:30px;

        border: 0;

        outline:none;

    }

    .box img{

        position:absolute;

        top:10px;

        right:10px;

    }

    </style>

</head>

<body>

    <div class="box">

        <label for="">

            <img src="view_off.png" id="img1" />

        </label>

        <input type="password"  id="input1"></input>

    </div>

    <script>

    //获取元素

        var img1 = document.getElementById('img1');

        var input1 = document.getElementById('input1');

    //注册事件

    //遇到一个按钮可以点多次，就使用flag变量去实现

    /*    var flag = 0;

        img1.onclick = function(){

        点击一次之后，flag一定要变化

        if(flag == 0){

            img1.src="view.png";

            input1.type='text';

            flag = 1;

        }else{

            img1.src = "view_off.png"

            input1.type = 'password';

            flag = 0;

            }

        }*/

    img1.onclick = function(){

        if(input1.type == 'password'){

            img1.src = 'view.png';

            input1.type = 'text';

        }else{

            img1.src="view_off.png";

            input1.type='password';

        }

    }

    </script>

</body>

</html>

四、分时问候

核心思路：

1、根据系统不同时间来判断，所以需要用到日期内置对象

2、分为上午、下午、晚上所以利用多分支语句来设置不同的图片

3、需要一个图片，根据时间修改图片，就需要用到操作元素src属性。

4、需要一个div元素，显示不同的问候语，修改元素内容即可

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        img{

        width:150px;

        height:150px; }

    </style>

</head>

<body>

<img src="3.jpg"/>

<div>猪突猛进</div>

<script>

//1、获取元素

             var img = document.querySelector('img');

            var div = document.querySelector('div');

///2、得到当时的小时数

            var date = new Date();

             var h = date.getHours();

//3、判断小时数改变图片和文字信息

    if(h<12){

    img.src="4.jpg";

    div.innerHTML="炭治郎say:上午";

}else if(h<18){

    img.src="5.jpg";

    div.innerHTML="富冈义勇say:下午";

}else{

    img.src="6.jpg";

    div.innerHTML="我妻善逸say:晚上";

}

</script>

</body>

</html>

五、密码框验证信息

核心思想

1、首先判断使用的事件是失去焦点 onblur

2、如果输入正确则提示正确的信息，小图标颜色为绿色

3、如果输入不是6~16位，则提示错误信息颜色为红色，小图标变化

4、因为里面需要改变的样式比较多所以采用 className 修改样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>密码框格式提示错误信息</title>

    <style>

    .box{

        width:600px;

        margin:100px auto;

    }

    .massage{

        display:inline-block;

        font-size: 14px;

        color: #999;

        background: url(info_filled.png) no-repeat left center;

        padding-left: 20px;

    }

    .wrong{

        color:red;

        background:url(close_filled.png) no-repeat left center;

    }

    .right{

        color:green;

        background:url(check.png) no-repeat left center;

    }

    </style>

</head>

<body>

<div class="box">

    <input type="password" class="inp">

    <p class="massage"> 请输入6~16位密码</p>

</div>

    <script>

    //获取元素

    var inp = document.querySelector('.inp');

    var aa = document.querySelector('.massage');

    //注册事件

    inp.onblur = function(){

        //根据表单里面值的长度，进行判断

        if(this.value.length < 6 || this.value.length > 16){

            aa.className = ' massage wrong' ;

            aa.innerHTML = '    输入的密码为位数错误';

        }else{

            aa.className = 'massage right';

            aa.innerHTML = '    输入格式正确'

        }

    }

    </script>

</body>

</html>

六、排他多按钮点击

如果有同一组元素，如果想要某一个元素实现某种样式，需要用到循环的排他思想

1、先给所有元素清除样式；

2、给当前元素设置样式；

3、注意顺序不能颠倒，首先干掉其他元素，再设置当前元素；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>多个按钮的单击事件</title>

</head>

<body>

    <button>按钮1</button>

    <button>按钮2</button>

    <button>按钮3</button>

    <button>按钮4</button>

    <button>按钮5</button>

</body>

<script>

    //获取所有按钮元素

    var btns = document.getElementsByTagName('button');

    //btns 得到的是伪数组，里面的单独元素是 btn[i]

    for(var i=0 ; i < btns.length; i++){

        btns[ i ].onclick = function(){

        //第一步，先将所有的按钮背景颜色都去掉

            for(var i = 0; i < btns.length; i++){

                btns[i].style.backgroundColor = '';

            }

        //第二步，然后才让当前元素的背景颜色改变

        thisstyle.backgroundColor = '#aaf';

    }

}

</script>

</htm>

DOM例子小结（一）的更多相关文章

AES加密解密的例子小结
话不多说,先放上代码,一共有两个文件:AES.php(aes算法类文件)和aesDemo.php(应用实例文件),这里只贴出aesDemo.php,其他的看附件吧!aesDemo.php: 例子, ...
dom例子
//凡是html标签中的属性和值是一样的,那么在js中用true或者false 1,阅读协议倒计时 <input type="button" name="name& ...
混淆篇之原生DOM操作方法小结
1.0 DOM结构 1.1先来看结构图: 父节点兄弟节点当前节点属性节点子节点兄弟节点一般任意一个节 ...
JS的Dom树小结
一[DOM树节点] DOM节点分为三大类:元素节点.文本节点.属性节点文本节点.属性节点,为元素节点的两个子节点: 通过getElement系列方法,可以去到元素节点. 二[查看节点] ...
原生DOM操作方法小结
1.0 DOM结构父节点兄弟节点当前节点属性节点子节点兄弟节点一般任意一个节点我们都会从父节点,子节点,以及兄弟节点的角度去考察.节点一般我们只需关注元素节点,属性节点及文本节点即可 ...
Javascript基础篇小结
转载请声明出处博客原文随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧第一课时入门基础知识点: 操作系统就是个应用程序只要是应用程序都要占用物理内存浏览器 ...
高性能JavaScript笔记一（加载和执行、数据访问、DOM编程）
写在前面好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...
$.ajax({})方法success，error，complete，beforeSend使用例子及解释
在与后台交互的时候,经常使用到jquery的$.ajax()方法来请求数据: 回调函数用的比较多的是success,但是complete.beforeSend.error函数也是很有用的: 下面是使用 ...
JS——BOM、DOM
BOM.DOM BOM window对象 history对象 location对象 screen对象 DOM DOM对HTML元素访问操作 HTML DOM树 DOM 节点 DOM访问HTML元素 D ...

随机推荐

应用安全 - 社工 - By 大数据 - shodan - 汇总
使用 | 命令搜索语法 hostname: 搜索指定的主机或域名,例如 hostname:”google” port: 搜索指定的端口或服务,例如 port:”” country: 搜索指定的国家, ...
vue-cli3.0使用及部分配置详解
1.检测安装 vue-V 2.创建项目命令:(官网) 3.简单的配置信息这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是让你选的,第一个是默认配置,一般选第二个,自己 ...
linxu passwd 给linux用户设置密码命令
[root@localhost ~]# passwd # 修改 root 用户的密码 passwd 给linux用户设置密码命令 passwd www 直接passwd是当前用户设置密码非交互式修 ...
HDU 1257 最少拦截系统最长递增子序列
HDU 1257 最少拦截系统最长递增子序列题意这个题的意思是说给你$n$个数,让你找到他最长的并且递增的子序列$(LIS)$.这里和最长公共子序列一样$(LCS)$一样,子序列只要 ...
Layui关闭弹出层并刷新父窗口
先确保已经引入layui和jquery 再确保初始化layer弹出层 <script> layui.use(['form', 'layer'], function() { var form ...
scrapy之360图片爬取
#今日目标 **scrapy之360图片爬取** 今天要爬取的是360美女图片,首先分析页面得知网页是动态加载,故需要先找到网页链接规律, 然后调用ImagesPipeline类实现图片爬取 *代码实 ...
C# System.Reflection （反射）
在使用.NET创建的程序或组件时,元数据(metadata)和代码(code)都存储于“自成一体”的单元中,这个单元称为装配件.我们可以在程序运行期间访问这些信息. 在System.Reflectio ...
13.AutoMapper 之映射前后(Before and After Map Action)
https://www.jianshu.com/p/1ff732094f21 映射前后(Before and After Map Action) 你可能偶尔需要在映射发生前后执行自定义逻辑.这应该很少 ...
qtdebug和release加载不同的文件配置
win32:CONFIG(release, debug|release): { LIBS +=$$PWD/../../../thirdparty\qwt\lib\qwt.lib LIBS +=$$PW ...
js 学习四对象应用吃货游戏
游戏来源于 Mdn学习网站: 该例子用于对象的理解非常有效(建议看完上面网站的内容在开始练习) 弹球 body { margin: 0; overflow: hidden; font-family: ...