【2017-03-31】JS-DOM操作:操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素
一、操作属性
1、什么是属性:
<div class="div" id="div1" style="" ></div>
其中class id style 都是这个div的属性
<input type="button" value="这是一个按钮" disabled="disabled" aa="haha" />
disabled="disabled" 按钮不可用
disabled="none" 按钮可用
aa="haha" 自己设置的一个属性,对div本身不起任何作用,仅用于js中调用使用。
2、操作属性的方式:
1、设置/添加/更改属性
对象.setAttribute("属性名","属性值");
2、获取属性的值
对象.getAttribute("属性名");
3、移除一个属性
对象.removeAttribute("属性名");
注意:
this的用法:this代表离他最近的触发事件的那个对象
二、彩虹导航栏
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.div {
width: 150px;
height: 60px;
float: left;
margin-right: 10px;
}
</style>
</head>
<body> <div class="div" style="background-color: red;" bb="red"></div>
<div class="div" style="background-color: yellow;" bb="yellow"></div>
<div class="div" style="background-color: green;" bb="green"></div>
<div class="div" style="background-color: blue;" bb="blue"></div>
<div class="div" style="background-color: aqua;" bb="aqua"></div> </body>
</html>
<script type="text/javascript"> //通过class=div取得对象放到数组里
var oDivs = document.getElementsByClassName('div');
//循环遍历每一个
for (var i = 0; i < oDivs.length; i++) {
//鼠标移入事件:如果之前颜色不是黑色,鼠标移入把他的背景色变为灰色
oDivs[i].onmouseover = function () {
if (this.style.backgroundColor != "black")
this.style.backgroundColor = "#e0e0e0";
}
//鼠标移出事件:如果之前颜色不是黑色,在鼠标移出的时候背景色变为原来的颜色
oDivs[i].onmouseout = function () {
if (this.style.backgroundColor != "black")
//将原来的颜色放到自己设定的一个属性里,调用该属性
this.style.backgroundColor = this.getAttribute('bb');
}
//鼠标点击事件:鼠标点击的时候背景颜色变为黑色,且同时只能有一个黑色存在。
oDivs[i].onclick = function () {
//在给点击事件修改背景颜色之前先把每个的原本颜色刷新一遍。
for (var j = 0; j < oDivs.length; j++) {
oDivs[j].style.backgroundColor = oDivs[j].getAttribute('bb');
}
this.style.backgroundColor = "black";
}
}
</script>
三、定时器
1、定时炸弹型:
window.setTimeout(function(){在定时结束后要执行的代码},时间间隔毫秒);
延迟执行,只执行一次。
2、循环执行型:
window.setInterval(function(){要循环执行的代码},时间间隔毫秒);
有返回值,可以用一个变量来接收这个定时器对象。
3、关闭定时器(循环执行类)
window.clearInterval(要关闭的定时器对象);
一旦执行这句代码,会立刻停止此定时器对象的执行。
var timer =window.setInterval(function(){},20)
window.clearInterval(timer);
扩展:
对象.offsetWidth 对象当前即时的宽度
对象.offsetLeft 对象当前左边距
对象.offsetHeight 对象当前高度
对象.offsetTop 对象当前上边距
var oBtn1 = document.getElementById("btn1");
oBtn1.onclick=function(){
var timer = window.setInterval(function(){
if(oBtn1.setoffLeft>500) //如果左边距大于了500 关闭定时器,
{
window.clearInterval(timer); //关闭定时器
}
oBtn1.style.left=oBtn1.offsetLeft+10+"px"; //向右跑+;向左跑-;宽度赋值,别忘了最后带单位,数值与字符串拼接最后为字符串
},20)
}
四、操作内容
1、普通元素.innerHTML="值" 会把值里面的标记进行执行
2、普通元素.innerText="值" 将值原封不动的展现出来,即使里面有标记。
3、var s = 普通元素.innerHTML 会把此元素下所有文本、标记、代码都取出来
4、var s = 普通元素.innerText 只会把此元素下的文本取出来,标记代码不予理会
5、表单元素的取值赋值只能用value
表单元素.value="值";
var s =表单元素.value;
赋值的用法:创建一个div +=是在原有基础上继续加。
扩展:样式里边自动换行: word-wrap:break-word;
五、创建元素并添加
简单的朋友圈发布页面:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
width: 500px;
margin: 0 auto;
} #txt1 {
width: 500px;
height: 150px;
} #context {
width: 100%;
background-color: gray;
padding: 30px 0;
} .item {
width: 80%;
margin-left: 10%;
background-color: white;
margin-bottom: 20px;
} .item-title {
width: 80%;
margin-left: 10%;
font-size: 18px;
border-bottom: 1px solid black;
padding: 10px 0;
} .item-context {
width: 80%;
margin-left: 10%;
font-size: 15px;
padding: 10px 0;
word-wrap: break-word;
} .item-bottom {
width: 80%;
margin-left: 10%;
font-size: 15px;
text-align: right;
border-top: 1px solid black;
padding: 10px 0;
}
</style> </head>
<body>
<textarea id="txt1"></textarea>
<input type="button" value="发表" id="btn1" />
发表人:<input type="text" id="txt_name" />
<div id="context">
</div> </body>
</html> <script type="text/javascript">
document.getElementById('btn1').onclick = function () {
var user = document.getElementById("txt_name").value;
var con = document.getElementById('txt1').value; var boss = document.getElementById('context'); //创建容器
var oItem = document.createElement('div');
oItem.setAttribute('class', 'item'); //创建标题
var oTitle = document.createElement('div');
oTitle.setAttribute('class', 'item-title');
oTitle.innerText = user; //标题嵌入
oItem.appendChild(oTitle); //创建内容
var oContext = document.createElement('div');
oContext.setAttribute('class', 'item-context');
oContext.innerText = con; //内容嵌入
oItem.appendChild(oContext); //创建删除
var oTime = document.createElement('div');
oTime.setAttribute('class', 'item-bottom');
oTime.innerHTML = "<input type='button' onclick='del(this);' value='删除' />"; //侵入式事件写法,调用一个方法 //内容嵌入
oItem.appendChild(oTime); if (boss.children.length <= 0) {
boss.appendChild(oItem);
}
else {
boss.insertBefore(oItem, boss.children[0]); //往第一个位置添加:添加oItem,添加在boss.children[0]之前
} } //删除方法
function del(a) {
var chi = a.parentNode.parentNode; chi.parentNode.removeChild(chi);
} </script>
动态创建dom对象:docunmen.createElement("标记名");
往a标记中添加一个子集元素:a.appendChild(对象名); 添加位置在最末尾
如何往第一个位置添加? a.insertBefore(添加的对象名,添加在谁之前);
在a标记中删除一个子集元素:a.removeChild(对象名);
六、操作相关元素
var b =a.nextSibling 找到a的下一个同辈元素,注意包含空格换行,不管有几个空格和换行都算做一个。
var b =a.previousSibling 找到a的上一个同辈元素,注意包含空格换行,不管有几个空格和换行都算做一个。
var b =a.parentNode 找到a的上一级父级元素。
var b =a.childNodes 找到a的下一级元素,找出来的是数组。
var b =a.firstChild 找到a的第一个子集, a.lastChild 找到a的最后一个子集, a.childNodes[n] 找到a的第n个子集。
【2017-03-31】JS-DOM操作:操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素的更多相关文章
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- js Dom对象的属性与方法
1.对象集合: (1).all[]; (2).images[]; (3).anchors[]; (4).forms[]; (5).links[]; ...
- js dom 的常用属性和方法
1.对象集合: (1).all[]; (2).images[]; (3).anchors[]; (4).forms[]; (5).links[]; ...
- jQery的链式操作和商城简易导航栏
今天要记录的是jq的一些简单操作.项目的需求是做一个导航栏,单机不同的商品名称链接,显示相应的内容.用js来写的话相对代码量要多一些,选择jqrey一行则可以搞定,下面呢是我的代码和效果图 这个是初始 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- 文本属性和字体属性,超链接导航栏案例 background
文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 col ...
- 用原生JS实现爱奇艺首页导航栏
以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: <html> <head> <title>爱奇艺</title> < ...
- Shutting down CodePlex 03/31/2017
Almost 11 years after we created CodePlex, it’s time to say goodbye. We launched CodePlex in 2006 b ...
- js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV
标记用 js变量比如url链接一般都是a里面的href属性值 在js里单引号链接 以后再忘记就能有地方找了 例子: /* 添加1200 居中div 包裹 获取元素集合 上层元素100% * @ele ...
随机推荐
- Hangfire 使用笔记
“巨人们”的地址 Hangfire Mysql: https://github.com/arnoldasgudas/Hangfire.MySqlStorage 在获取set表数据的sql语句有bug ...
- dev简单实现柱状图,曲线图
1.数据源代码: DataTable dt = new DataTable(); dt.Columns.Add("A"); dt.Columns.Add("B" ...
- 解决Ubuntu不能连接xshell
首先,判断Ubuntu是否安装了ssh服务: 1.ps -e |grep ssh 如果服务已经启动,则可以同时看到“ssh-agent”和“sshd”,否则表示没有安装服务,或没有开机启动 2.安装s ...
- http服务搭建
http服务器搭建 主配置文件在 /etc/httpd/conf/httpd.conf 安装http yum install httpd -y 启动http服务器 systemctl start ...
- 最常用的UML工具介绍
最常用的UML工具介绍 1.Rational Rose.大名鼎鼎,史上最有名.最无可替代的UML产品,以至于,大多数将之等同于UML工具,正如将可乐等同于可口可乐.需要指出的是,自从 Rational ...
- JSP-表单元素示例
<%@ page language="java" pageEncoding="UTF-8"%><%@ page import="ja ...
- SqlService 索引原理
索引的概念 索引的用途:我们对数据查询及处理速度已成为衡量应用系统成败的标准,而采用索引来加快数据处理速度通常是最普遍采用的优化方法. 索引是什么:数据库中的索引类似于一本书的目录,在一本书中使用目录 ...
- 版本控制器——Egit使用方法
什么是Git Gitv是目前世界上最先进的分布式版本控制系统. 那我们为什么需要学习Git呢?因为在我们传统的java自学中,所有的项目都是自己独立开发完成,而且项目基本都是小型项目,在优化和体验上往 ...
- Linux下修改系统时区
使用 /etc/localtime 文件修改时区 先查看一下当前的时区,下面这个例子中使用 UTC 即世界统一标准时区.假设你可能需要改为美国西部标准时间,即太平洋时间. # date Thu Aug ...
- 使用ocupload和POI一键上传Excel并解析导入数据库
使用的工具如下: JQuery ocupload jquery.ocupload-1.1.2.js Apache POI poi-3.9.jar 如果是Maven项目添加依赖如下: <depe ...