javascript新手实例1-DOM基本操作
学习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基本操作的更多相关文章
- JavaScript思维导图—DOM基本操作
JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/ DOM基本 ...
- javascript DOM基本操作
javascript DOM基本操作 1.DOM(Document Object Model 文档对象模型) 2.节点: 文档节点:document 元素节点:html.head.body.title ...
- JavaScript之旅（DOM）
JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...
- JavaScript 小实例 - 表单输入内容检测，对页面的增删改
JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...
- 10种JavaScript特效实例让你的网站更吸引人
我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...
- [JavaScript之BOM与DOM]
[JavaScript之BOM与DOM] BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ( ...
- 我要成为前端工程师！给 JavaScript 新手的建议与学习资源整理
来源于:http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx 今年有 ...
- JavaScript小实例：拖拽应用（二）
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
- javascript小实例，拖拽应用（一）
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
随机推荐
- 教程1--安装Git软件
在https://git-scm.com/下载git for windows,双击安装即可. (1)单击Next (2)选择安装目录 (3)勾选创建桌面快捷方式.Git Bash.Git GUi.已经 ...
- java 读取xlsx文件
public class ReadExcel { public static void main(String[] args) { Workbook wb = null; Sheet sheet = ...
- ComboBox控件绑定数据源后,添加'请选择'或'全部'
ComboBox控件绑定数据源后,添加'请选择'或'全部' 当使用ComboBox控件绑定数据源之后,通过Items 属性添加的数据是无效的,此时如果要在所有选项前添加 选项 ,则需要考虑从数据源下手 ...
- JZ-014-链表中倒数第 K 个结点
链表中倒数第 K 个结点 题目描述 输入一个链表,输出该链表中倒数第k个结点. 题目链接: 链表中倒数第 K 个结点 代码 /** * 标题:链表中倒数第 K 个结点 * 题目描述 * 输入一个链表, ...
- 微信小程序如何测试？
不需要安装,只要在微信里找到这个小程序打开即可使用,由于小程序的便捷,如今越来越多的平台开发方都纷纷推出自身的小程序应用. 那我们该如何进行微信小程序测试呢? 1.功能测试 功能测试以需求文档和交互视 ...
- 六、Java方法
Java方法 何为方法 System.out.println(),那么它是什么呢? System是一个类,out是一个对象,println()是一个方法 Java方法是语句的集合,它们在一起执行的 ...
- 【行业Tip】三电是什么
电动汽车的"三电"是指:电池.电机.电控.
- 关于dotnet动态生成controller的问题
一些动态生成controller的问题 前言 最近在写包, 一开始封装了仓储Repository用于操作数据库, 然后为了快速开发一些业务简单的接口, 通过QueryController , Modi ...
- C++中如何可以修改const函数内的成员变量的值？
呵呵,你使用mutable关键字来定义变量就可以了.下面举例说明 C++关键字mutable Mutable (1)mutable的意思是"可变的,易变的",跟C++中的const ...
- Asp.net Core Filter过滤器异常处理
本文旨在: 1 继承ExceptionFilterAttribute,重写Override OnException(ExceptionContext context)处理异常 2 在.netCore中 ...