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小实例，拖拽应用（一）
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
随机推荐
- 二级py--day3
二级PY--day3 1.结构化程序设计方法主要原则:自顶向下.逐步求精.模块化.限制使用goto语句 2.三种控制结构:顺序.选择和重复(循环) 3.结构化程序强调:程序的可复用性 4.结构化程序设 ...
- 【python】kNN基础算法--推荐系统
虽然把text转成全部量化是可以的,但是还是需要把text转成numpy的形式(这个是必须掌握的) 在将数据输入到分类器之前,必须将待处理数据的格式改变为分类器可以接受的格式. 数据规范化.数据归一化 ...
- think php 登录 （session+验证码）
..........表单页面 <!DOCTYPE html> {__NOLAYOUT__} <html lang="en"> <head> &l ...
- CF917D题解
题目大意 一张有 \(n\) 个节点的完全图,再给出这张图的一棵生成树,问该图有多少颗生成树和这颗生成树的公共边总共有 \(k\) 条,求助 \(0 \leq k \leq n-1\) 时所有 \(k ...
- 【1024打卡】C++字符串的输出((c语言风格)
c++字符串输出(c语言风格) 文章目录 c++字符串输出(c语言风格) 杂记 代码 杂记 今天程序设计竞赛白给了,果然还是太弱了,y总带带我TAT ┭┮﹏┭┮1024快乐 代码 c语言学习 #inc ...
- 2.5 C++STL stack详解
文章目录 2.5.1引入 2.5.2 代码示例 2.5.3 代码运行结果 总结 2.5.1引入 stack是一种"先进后出"的容器. 不过值得注意的是stack是一种关联容器,是通 ...
- AQS详解之独占锁模式
AQS介绍 AbstractQueuedSynchronizer简称AQS,即队列同步器.它是JUC包下面的核心组件,它的主要使用方式是继承,子类通过继承AQS,并实现它的抽象方法来管理同步状态,它分 ...
- Java基础—字符串的比较
1."=="方法进行比较时有以下两种情况: 基础数据类型:比较的是数据值是否相同 引用类型:比较的是地址值是否相同 字符串是对象,它比较内容是通过一个方法实现的,equals() ...
- JavaWeb——Tomcat使用
官方下载地址:https://tomcat.apache.org/download-90.cgi 选择安装包: 64-bit Windows zip (pgp, sha512) 注:tar.gz后缀的 ...
- ARM中断与架构知识 精简知识点
目录 一.ARM系统的异常与中断 二.CPU模式与寄存器 1.ARM CPU模式 2.ARM CPU state,两种指令集 3.ARM CPU寄存器: 引申介绍一下存储空间中的数据存放 4.ARM三 ...