学习javascript好多同学不知道怎么上手，跟着网上的新手教程做了一遍又觉得javascript很简单，但是真正自己用起来又觉得写不出什么东西，我觉得学习最好的方法就是跟着有趣的例子做,所以我们的口号是“每天一例，轻松javascript”

今天给大家带来第一个例子，简单Dom操作，效果先看下图

html代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>DIV设置样式</title>

        <script src="setDiv.js" type="text/javascript" charset="utf-8"></script>

        <link rel="stylesheet" type="text/css" href="setDiv.css"/>

    </head>

    <body>

        <div id="mainbox">

            <p>请为下面的DIV设置样式：</p>

            <input type="button" name="" id="setButton" value="设置" />

            <div id="setBox"></div>

        </div>

        <div id="shadow"></div>

        <div id="jumpDiv">

            <div class="controlBox">

                <p>请选择背景颜色</p>

                <ul>

                    <li style="background: red; color: #fff;">红</li>

                    <li style="background: yellow; color: #fff;">黄</li>

                    <li style="background: blue; color: #fff;">蓝</li>

                </ul>

            </div>

            <div class="controlBox">

                <p>请选择宽度</p>

                <ul>

                    <li>200</li>

                    <li>300</li>

                    <li>400</li>

                </ul>

            </div>

            <div class="controlBox">

                <p>请选择高度</p>

                <ul>

                    <li>400</li>

                    <li>500</li>

                    <li>600</li>

                </ul>

            </div>

            <div id="controlButton">

                <input type="button" name="" id="reset" value="恢复" />

                <input type="button" name="" id="ok" value="确定" />

            </div>

        </div>

    </body>

</html>

css代码

ul li {

    display: inline;

    list-style-type: none;

}

p {

    float: left;

}

#mainbox {

    width: 740px;

    height: 420px;

    background: #ccc;

    float: left;

    padding: 10px;

}

#mainbox p {

    font-size: 20px;

    font-weight: bold;

    margin: 0;

    line-height: 38px;

}

#mainbox input {

    border: none;

    background: #ff0000;

    color: #fff;

    width: 100px;

    height: 40px;

    font-weight: bold;

    cursor: pointer;

}

#setBox {

    width: 100px;

    height: 100px;

    border: 2px solid #000;

    margin: 20px 0;

    background: #fff;

}

#shadow {

    width: 100%;

    height: 100%;

    background: #000;

    position: absolute;

    opacity: 0.6;

    z-index: 9;

    display: none;

}

#jumpDiv {

    width: 270px;

    height: 170px;

    background: #fff;

    border: 10px solid #999;

    position: absolute;

    padding: 20px 0 0 30px;

    display: none;

    z-index: 99;

    left: 50%;

    top:15%;

    margin: 0 auto;

}

.controlBox {

    width: 100%;

    float: left;

}

.controlBox p {

    width: 120px;

    margin: 0;

    padding: 6px 0 0 0;

}

#jumpDiv ul {

    width: 140px;

    float: left;

    padding: 0;

    margin: 0;

}

#jumpDiv ul li {

    width: 30px;

    height: 30px;

    border: 1px solid #999;

    font-size: 10px;

    float: left;

    margin: 5px;

    background: #ddd;;

    line-height: 30px;

    text-align: center;

    cursor: pointer;

    display: block;

}

#controlButton {

    text-align: center;

    padding: 5px 0 0 0;

    width: 100%;

    height: 30px;

    float: left;

}

#controlButton  input {

    width: 60px;

    height: 30px;

    background: #000080;

    text-align: center;

    color: #fff;

    line-height: 30px;

    border: 1px solid #ccc;

    cursor: pointer;

}

javascript代码

window.onload = function () {

    function luka(element) {

        //if (/#/.test(element) == true) 正则也可以匹配，不过正则的效率没有函数高，貌似任何语言都是

        if (element.indexOf('#') > -1) {

            return document.getElementById(element.replace(/#/,''));

        };

        if (element.indexOf('.') > -1) {

            return document.getElementsByClassName(element.replace(/\./g,''));

        };

        if (/^[a-zA-Z]+&/.element = true) {

            return document.getElementsByTagName(element);

        };

        console.log(element);

    };

    //下面主要是为了偷懒写的循环，不然一个个li去学控制很烦，而且这样能让html看着很清爽，记住写代码就是要怎么偷懒怎么写，这里的偷懒是复用的意思，用最少的功能实现最优的功能

    function liClick() {

        var obj = luka("li");

        //console.log(obj.length);

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

            obj[i].index = i;

            obj[i].onclick = function() {

                 var numClick = this.index;

                 if (0 <= numClick <= 2) {

                    luka("#setBox").style.backgroundColor = luka("li")[numClick].style.backgroundColor;

                 };

                 if (3 <= numClick <= 5) {

                    luka("#setBox").style.width = luka("li")[numClick].innerHTML+"px";

                 };

                 if (6 <= numClick <= 8) { //等效 numClick == 6 || numClick == 7 || numClick == 8

                    luka("#setBox").style.height = luka("li")[numClick].innerHTML+"px";

                 };

            };

        };

    };

    function shadow() {

        luka("#shadow").style.display = "none";

        luka("#jumpDiv").style.display = "none";

    };

    luka("#setButton").onclick = function() {

        luka("#shadow").style.display = "block";

        luka("#jumpDiv").style.display = "block";

    };

    luka("#reset").onclick = function() {

        luka("#setBox").style.width = "100px";

        luka("#setBox").style.height = "100px";

        luka("#setBox").style.backgroundColor = "#fff";

    };

    luka("#ok").onclick = shadow;

    luka("#shadow").onclick = shadow; //点击阴影关闭遮罩和弹出的控制框

    luka("#jumpDiv").onmouseover = liClick; //绑定事件响应的层

}

知识点

  • document.getElementById or getElementsByClassName or getElementsByTagName 这类操作我们经常要用，反复打，又麻烦，效率又低，所以我们封装一个库，方便之后调用，我写的这个：

    • luka("#id")这种方式就可以调用getElementById
    • luka(".id")调用getElementsByClassName
    • luka("element")调用getElementsByTagName
    • PS：为什么叫luka是因为我喜欢，我爱
  • 不知道大家是不是和我一样，刚开始觉得遮罩很神奇，其实真做了就很简单，遮罩就是加了一个div的半透明层，操作一下控制这个层的display属性就可以简单的实现了

  • 思考：

    • 弹出的层怎么能用鼠标拖动呢？如果你有兴趣，实现了回复我吧
  • 最后求大神指教，求大神优化代码

javascript新手实例1-DOM基本操作的更多相关文章

  1. JavaScript思维导图—DOM基本操作

    JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/ DOM基本 ...

  2. javascript DOM基本操作

    javascript DOM基本操作 1.DOM(Document Object Model 文档对象模型) 2.节点: 文档节点:document 元素节点:html.head.body.title ...

  3. JavaScript之旅（DOM）

    JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...

  4. JavaScript 小实例 - 表单输入内容检测，对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

  5. 10种JavaScript特效实例让你的网站更吸引人

    我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...

  6. [JavaScript之BOM与DOM]

    [JavaScript之BOM与DOM] BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ( ...

  7. 我要成为前端工程师！给 JavaScript 新手的建议与学习资源整理

    来源于:http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx 今年有 ...

  8. JavaScript小实例：拖拽应用（二）

    经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...

  9. javascript小实例，拖拽应用（一）

    前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...

随机推荐

  1. 人工智能之深度学习-初始环境搭建（安装Anaconda3和TensorFlow2步骤详解）

    前言: 本篇文章主要讲解的是在学习人工智能之深度学习时所学到的知识和需要的环境配置(安装Anaconda3和TensorFlow2步骤详解),以及个人的心得体会,汇集成本篇文章,作为自己深度学习的总结 ...

  2. Pycharm：在Pycharm中使用控制台命令

    最下方跟Console同行的Terminal,其中输入指令就相当于在cmd命令行窗口输入指令

  3. QUIC协议详解

    声明 本文可以自由转载但需注明原始链接.本文为本人原创,作者LightningStar,原文发表在博客园.本文主体内容参考论文[1]完成. 介绍 QUIC,发音同quick,是"Quick ...

  4. JZ-013-调整数组顺序使奇数位于偶数前面

    调整数组顺序使奇数位于偶数前面 题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对 ...

  5. Dubbo服务框架和spring-cloud架构的优缺点

    Dubbo一.dubbo简介 Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的RPC实现服务的输出和输入功能,可以和Spring框架无缝集成. Dubbo是一款高性能.轻 ...

  6. 【架构】从instagram学习最小化IT是怎么做的

    Keep it very simple (极简主义) Don't re-invent the wheel (不重复发明轮子) Go with proven and solid technologies ...

  7. 华为交换机配置telnet、SSH

    如果网络中有一台或多台网络设备需要远程进行配置和管理,可以通过Telnet远程连接到每一台设备上,对这些网络设备进行集中的管理一维护. 一.AAA认证Telnet服务端 1.配置接口信息 <Hu ...

  8. CSS学习Day01

    1.什么是CSS 如何学习 CSS是什么 CSS怎么用 CSS选择器(重点+难点) 美化网页(文字.阴影.超链接.列表.渐变) 盒子模型 浮动 定位 网页动画(特效效果) 1.1什么是CSS Casc ...

  9. .NET Core剪裁器Zack.DotNetTrimmer升级瘦身引擎，并支持剪裁计划的录制和回放

    上周,我发布了对.NET Core程序进行瘦身的开源软件Zack.DotNetTrimmer,与.NET Core内置的剪裁器相比,Zack.DotNetTrimmer不仅对程序的剪裁效果更好,而且还 ...

  10. 配置 PackMan 镜像

    一.参考链接 阿里云镜像站 二.PackMan 镜像介绍 Packman 是 OpenSUSE 最大的第三方软件源,主要为 OpenSUSE 提供额外的软件包,包括音视频解码器.多媒体应用.游戏等. ...