学习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. 前端js webuploader上传(导入)excel文件

    项目开发中用到导入(上传)Excel文件 我使用的是百度的webuploader: 1:下载:http://fex.baidu.com/webuploader/(官方下载/示例) 2:使用Web Up ...

  2. LeetCode-043-字符串相乘

    字符串相乘 题目描述:给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例说明请见LeetCode官网. 来源:力扣( ...

  3. LGP5363题解

    感觉博弈题都是高大上神秘结论... 感谢@KaiSuoShuTong 开锁疏通愿意教我这题的博弈部分/qq 考虑每次移动棋子,实际上是有一车 \(a_i\),每次操作相当于令 \(a_i-c,a_{i ...

  4. LGCF235B题解

    简单期望/fad 题意明确,不说了. 对于高次期望,一个套路的方法是维护低次期望(?) 考虑 dp,设 \(dp1[i]\) 为前 \(i\) 次点击中 所有连续的 \(O\) 的长度之和,\(dp2 ...

  5. Java的jinfo命令使用详解

    jinfo命令简介 jinfo(Java Virtual Machine Configuration Information)是JDK提供的一个可以实时查看Java虚拟机各种配置参数和系统属性的命令行 ...

  6. [C++] C++socket套接字网络通讯实例

    //服务器端:#include "winsock2.h"  #include <string>#pragma comment(lib, "ws2_32.lib ...

  7. 创建一个 20G 的分区，并格式化为 ext4 文件系统

     创建一个 20G 的分区,并格式化为 ext4 文件系统,并完成如下要求: (1)block 大小为 2048,预留空间 20%,卷标为 MYDATA #fdisk /dev/sdb -->n ...

  8. Linux下swap(交换分区)的增删改

    swap介绍 Linux 的交换分区(swap),或者叫内存置换空间(swap space),是磁盘上的一块区域,可以是一个分区,也可以是一个文件,或者是他们的组合.交换分区的作用是,当系统物理内存吃 ...

  9. Badger简单使用

    Badger简介 badger 是 dgraph 开源的 LSMTree 的 KV 引擎,它相比 leveldb 有 KV 分离.事务.并发合并等增强,是 go 生态中比较生产级的存储引擎了. 文档: ...

  10. static变量和函数如何巧妙调用

    app.c 和 main.c 之间,在main.c中调用app.c的static变量和函数,需要利用一个结构体结合指针通过传地址的方式间接访问. app   --------------------- ...