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小实例，拖拽应用（一）
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
随机推荐
- kubernetes配置使用ceph动态存储
在k8s集群中配置ceph 3.1.使用cephfs (1) 在ceph集群创建cephfs #以下操作在ceph集群的admin或者mon节点上执行 #创建pool来存储数据和元数据 ceph os ...
- manjaro卸载与重装Arch linux
前言 之前安装了manjaro-deepin,但太久没用了,昨天更新系统后,出了点问题,重装个新版本吧. 卸载manjaro 由于之前安装了manjaro,默认开机引导程序是linux的Grub,那么 ...
- Navicat连接不上MySQL 8.0
Navicat连接不上MySQL 8.0 更改加密方式 1.先通过命令行进入mysql的root账户: C:\Windows\system32> mysql -uroot -p 2.更改加密方式 ...
- 4、mysql的存储引擎
存储引擎 存储引擎是负责对表中的数据进行提取和写入工作的,我们可以为不同的表设置不同的存储引擎,也就是说不同的表可以有不同的物理存储结构,不同的提取和写入方式. 1.1 InnoDB 引擎:具备外键支 ...
- CF1548B题解
在日报上面看到的,发现 NOIP 模拟赛考过这个 trick( 首先我们把题目要求的条件这么写: \[a_i=x_i \times m+k \] 那么我们要找到满足条件的数组,差分后的数组一定都是 \ ...
- VUE3 之 状态动画 - 这个系列的教程通俗易懂，适合新手
1. 概述 老话说的好:不用羡慕别人,每个人都有属于自己的人生道路,重要的是在前进道路上遇见阻碍时,如何去积极的面对并解决. 言归正传,今天我们来聊聊 VUE 的状态动画. 2. 状态动画 2.1 数 ...
- Redis常见延迟问题定位与分析
Redis作为内存数据库,拥有非常高的性能,单个实例的QPS能够达到10W左右.但我们在使用Redis时,经常时不时会出现访问延迟很大的情况,如果你不知道Redis的内部实现原理,在排查问题时就会一头 ...
- Docker——questions
服务器的防火墙有什么用?(P14) Tomcat中的webapps.dist这一文件输出目录是用来做什么的?(P15) 容器之间实现数据共享的基础是要在主机有挂载的卷?
- java高级用法之:无所不能的java,本地方法调用实况
目录 简介 JDK的本地方法 自定义native方法 总结 简介 相信每个程序员都有一个成为C++大师的梦想,毕竟C++程序员处于程序员鄙视链的顶端,他可以俯视任何其他语言的程序员. 但事实情况是,无 ...
- HT4936S锂电池充放电芯片，充电宝芯片
应用电路 引脚定义 参考 http://www.hotchip.com.cn/products/