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小实例，拖拽应用（一）
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
随机推荐
- Linux CentOS7.X-安装mysql5.7数据库(安装包tar.gz）
一.下载对应版本的mysql 1.官网下载压缩安装包. 进入到mysql官网下载自己对应版本的mysql,下载地址:https://dev.mysql.com/downloads/mysql/5.7. ...
- WPF启动屏幕SplashScreen
SplashScreen类为WPF应用程序提供启动屏幕. 方法一:设置图片属性 1. 添加启动图片到项目中 2. 设置图片属性的Build Action为SplashScreen 方法二:编写代码 1 ...
- Dubbo是什么?核心总结
Dubbo --是SOA架构的具体的实现框架! 2.1 Dubbo简介 Apache Dubbo是一款高性能的Java RPC框架.官网地址:[http://dubbo.apache.org] dub ...
- Angular + asp.net core 入门
一.简介 通俗的理解,Angular 只是一个前端框架,它只负责前端的事,但一个完整的项目还应该有后端,这其中之一可选的技术就是 asp.net core .这里简单学习一下两个框架之间的协同开发. ...
- EasySwoole-ElasticSearch-Head启动
- 手写 Vue 系列 之 从 Vue1 升级到 Vue2
前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...
- 手写 Vue2 系列 之 编译器
前言 接下来就要正式进入手写 Vue2 系列了.这里不会从零开始,会基于 lyn-vue 直接进行升级,所以如果你没有阅读过 手写 Vue 系列 之 Vue1.x,请先从这篇文章开始,按照顺序进行学习 ...
- MYSQL数年库安装
MySQL系列 MySQL 的三大主要分支mysqlmariadbpercona Server MySQL系列2.2.2.1 MySQL 的三大主要分支mysqlmariadbpercona Serv ...
- 一文详解Redis键过期策略
摘要:Redis采用的过期策略:惰性删除+定期删除. 本文分享自华为云社区<Redis键过期策略详解>,作者:JavaEdge. 1 设置带过期时间的 key # 时间复杂度:O(1),最 ...
- CF578D题解
LCS 为给定串的长度减一,考虑枚举一个区间 \([L,R]\),表示 \(S\) 和 \(T\) 的长度为 \(L-1\) 的前缀完全相同以及长度为 \(n-R\) 的后缀完全相同,且没有比这个前缀 ...