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小实例，拖拽应用（一）
前面我们将了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图: 就是这样一个简单的一个拖拽条,你可以把它理解为滚 ...
随机推荐
- 人工智能之深度学习-初始环境搭建（安装Anaconda3和TensorFlow2步骤详解）
前言: 本篇文章主要讲解的是在学习人工智能之深度学习时所学到的知识和需要的环境配置(安装Anaconda3和TensorFlow2步骤详解),以及个人的心得体会,汇集成本篇文章,作为自己深度学习的总结 ...
- 计算机网络——HTTP
目录 计算机网络-HTTP篇 HTTP 基本概念 常见状态码 常见字段 Get 与 Post HTTP 特性 HTTP(1.1) HTTP/1.1 HTTPS 与 HTTP HTTP/1.1.HTTP ...
- PyTorch深度学习实践——多分类问题
多分类问题 目录 多分类问题 Softmax 在Minist数据集上实现多分类问题 作业 课程来源:PyTorch深度学习实践--河北工业大学 <PyTorch深度学习实践>完结合集_哔哩 ...
- UnboundLocalError: local variable ‘xxx‘ referenced before assignment
原因 在Python函数中调用了某个和全局变量同名的局部变量,导致编译器不知道此时使用的是全局变量还是局部变量 a = 3 def func(): a+=3 func() UnboundLocalEr ...
- Pycharm：运行程序时，不额外打开一个Console
每次运行程序,比如A.py,都会额外生成一个Console,排列成一排的 A(2),A(3),... 那么如何关闭呢? 答案是:在Settings->Console中,勾选 'Use exis ...
- Python：读取txt中按列分布的数据，并将结果保存在Excel文件中 && 保存每一行的元素为list
import xlwt import os def write_excel(words,filename): #写入Excel的函数,words是数据,filename是文件名 wb=xlwt.Wor ...
- JZ-069-在 O(1) 时间内删除链表节点
在 O(1) 时间内删除链表节点 题目描述 在 O(1) 时间内删除链表节点. 方案:如果该节点不是尾节点,那么可以直接将下一个节点的值赋给该节点,然后令该节点指向下下个节点,再删除下一个节点,时间复 ...
- SETTLE约束算法的批量化处理
技术背景 在上一篇文章中,我们介绍了在分子动力学模拟中SETTLE约束算法的实现与应用,其中更多的是针对于单个的水分子.但由于相关代码是通过jax这一框架来实现的,因此对于多分子的体系,可以采用jax ...
- 08 Java的方法 方法的定义
2.方法的定义 Java的方法类似于其他语言的函数,是一段用来完成特定功能的代码片段,一般情况下,定义一个方法包含以下语法: **方法包含一个方法头和一个方法体.**下面是一个方法的所有部分: 修饰符 ...
- 字节跳动流式数据集成基于Flink Checkpoint两阶段提交的实践和优化
背景 字节跳动开发套件数据集成团队(DTS ,Data Transmission Service)在字节跳动内基于 Flink 实现了流批一体的数据集成服务.其中一个典型场景是 Kafka/ByteM ...