一、操作属性

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代表离他最近的触发事件的那个对象

二、彩虹导航栏

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <style type="text/css">
  7. .div {
  8. width: 150px;
  9. height: 60px;
  10. float: left;
  11. margin-right: 10px;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16.  
  17. <div class="div" style="background-color: red;" bb="red"></div>
  18. <div class="div" style="background-color: yellow;" bb="yellow"></div>
  19. <div class="div" style="background-color: green;" bb="green"></div>
  20. <div class="div" style="background-color: blue;" bb="blue"></div>
  21. <div class="div" style="background-color: aqua;" bb="aqua"></div>
  22.  
  23. </body>
  24. </html>
  25. <script type="text/javascript">
  26.  
  27. //通过class=div取得对象放到数组里
  28. var oDivs = document.getElementsByClassName('div');
  29. //循环遍历每一个
  30. for (var i = 0; i < oDivs.length; i++) {
  31. //鼠标移入事件:如果之前颜色不是黑色,鼠标移入把他的背景色变为灰色
  32. oDivs[i].onmouseover = function () {
  33. if (this.style.backgroundColor != "black")
  34. this.style.backgroundColor = "#e0e0e0";
  35. }
  36. //鼠标移出事件:如果之前颜色不是黑色,在鼠标移出的时候背景色变为原来的颜色
  37. oDivs[i].onmouseout = function () {
  38. if (this.style.backgroundColor != "black")
  39. //将原来的颜色放到自己设定的一个属性里,调用该属性
  40. this.style.backgroundColor = this.getAttribute('bb');
  41. }
  42. //鼠标点击事件:鼠标点击的时候背景颜色变为黑色,且同时只能有一个黑色存在。
  43. oDivs[i].onclick = function () {
  44. //在给点击事件修改背景颜色之前先把每个的原本颜色刷新一遍。
  45. for (var j = 0; j < oDivs.length; j++) {
  46. oDivs[j].style.backgroundColor = oDivs[j].getAttribute('bb');
  47. }
  48. this.style.backgroundColor = "black";
  49. }
  50. }
  51. </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;

五、创建元素并添加

简单的朋友圈发布页面:

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <style type="text/css">
  7. body {
  8. width: 500px;
  9. margin: 0 auto;
  10. }
  11.  
  12. #txt1 {
  13. width: 500px;
  14. height: 150px;
  15. }
  16.  
  17. #context {
  18. width: 100%;
  19. background-color: gray;
  20. padding: 30px 0;
  21. }
  22.  
  23. .item {
  24. width: 80%;
  25. margin-left: 10%;
  26. background-color: white;
  27. margin-bottom: 20px;
  28. }
  29.  
  30. .item-title {
  31. width: 80%;
  32. margin-left: 10%;
  33. font-size: 18px;
  34. border-bottom: 1px solid black;
  35. padding: 10px 0;
  36. }
  37.  
  38. .item-context {
  39. width: 80%;
  40. margin-left: 10%;
  41. font-size: 15px;
  42. padding: 10px 0;
  43. word-wrap: break-word;
  44. }
  45.  
  46. .item-bottom {
  47. width: 80%;
  48. margin-left: 10%;
  49. font-size: 15px;
  50. text-align: right;
  51. border-top: 1px solid black;
  52. padding: 10px 0;
  53. }
  54. </style>
  55.  
  56. </head>
  57. <body>
  58. <textarea id="txt1"></textarea>
  59. <input type="button" value="发表" id="btn1" />
  60. 发表人:<input type="text" id="txt_name" />
  61. <div id="context">
  62. </div>
  63.  
  64. </body>
  65. </html>
  66.  
  67. <script type="text/javascript">
  68. document.getElementById('btn1').onclick = function () {
  69. var user = document.getElementById("txt_name").value;
  70. var con = document.getElementById('txt1').value;
  71.  
  72. var boss = document.getElementById('context');
  73.  
  74. //创建容器
  75. var oItem = document.createElement('div');
  76. oItem.setAttribute('class', 'item');
  77.  
  78. //创建标题
  79. var oTitle = document.createElement('div');
  80. oTitle.setAttribute('class', 'item-title');
  81. oTitle.innerText = user;
  82.  
  83. //标题嵌入
  84. oItem.appendChild(oTitle);
  85.  
  86. //创建内容
  87. var oContext = document.createElement('div');
  88. oContext.setAttribute('class', 'item-context');
  89. oContext.innerText = con;
  90.  
  91. //内容嵌入
  92. oItem.appendChild(oContext);
  93.  
  94. //创建删除
  95. var oTime = document.createElement('div');
  96. oTime.setAttribute('class', 'item-bottom');
  97. oTime.innerHTML = "<input type='button' onclick='del(this);' value='删除' />"; //侵入式事件写法,调用一个方法
  98.  
  99. //内容嵌入
  100. oItem.appendChild(oTime);
  101.  
  102. if (boss.children.length <= 0) {
  103. boss.appendChild(oItem);
  104. }
  105. else {
  106. boss.insertBefore(oItem, boss.children[0]); //往第一个位置添加:添加oItem,添加在boss.children[0]之前
  107. }
  108.  
  109. }
  110.  
  111. //删除方法
  112. function del(a) {
  113. var chi = a.parentNode.parentNode;
  114.  
  115. chi.parentNode.removeChild(chi);
  116. }
  117.  
  118. </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操作:操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素的更多相关文章

  1. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  2. js Dom对象的属性与方法

    1.对象集合:      (1).all[];      (2).images[];      (3).anchors[];      (4).forms[];      (5).links[];   ...

  3. js dom 的常用属性和方法

    1.对象集合:      (1).all[];      (2).images[];      (3).anchors[];      (4).forms[];      (5).links[];   ...

  4. jQery的链式操作和商城简易导航栏

    今天要记录的是jq的一些简单操作.项目的需求是做一个导航栏,单机不同的商品名称链接,显示相应的内容.用js来写的话相对代码量要多一些,选择jqrey一行则可以搞定,下面呢是我的代码和效果图 这个是初始 ...

  5. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  6. 文本属性和字体属性,超链接导航栏案例 background

    文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 col ...

  7. 用原生JS实现爱奇艺首页导航栏

    以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: <html> <head> <title>爱奇艺</title> < ...

  8. 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 ...

  9. js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV

    标记用 js变量比如url链接一般都是a里面的href属性值 在js里单引号链接 以后再忘记就能有地方找了 例子: /* 添加1200 居中div 包裹 获取元素集合 上层元素100% * @ele ...

随机推荐

  1. 【Java深入研究】2、JVM类加载机制

    一.先看看编写出的代码的执行过程: 二.研究类加载机制的意义 从上图可以看出,类加载是Java程序运行的第一步,研究类的加载有助于了解JVM执行过程,并指导开发者采取更有效的措施配合程序执行. 研究类 ...

  2. jenkins coding.net webhook plugin

    开源地址: https://github.com/yuzd/coding.net =========================================================== ...

  3. 半小时C语言题目

    每个5分共100分.错选.多选.少选或不选均不得分. .[单选题]一个C程序的执行是从( ) A:本程序的main函数开始,到main函数结束 B:本程序文件的第一个函数开始,到本程序文件的最后一个函 ...

  4. 用C++编一程序,先输出一行sun mon tue wed thu fri fri,接着使用右对齐打印出日期,像日历那样

    用C++编一程序,先输出一行sun mon tue wed thu fri fri,接着使用右对齐打印出日期,像日历那样 先输出一行sun mon tue wed thu fri fri,再提醒用户输 ...

  5. PC端Web项目开发流程

    从前一直再做前端,突然想到如果有一天领导让自己独立承担一个web 项目的话是否有足够的能力去接这个任务,要学会自己去搭建一些基础的工具信息.所有的这一切在心里都要有个大致的流程,不然真正做的时候难免会 ...

  6. xcode升级到8.1

    一.JPush集成: 1. xcode7在iOS10以上的真机上运行接收不到通知的问题,把xcode升级到8.1,在build phases -> link binary with librar ...

  7. 第六篇 项目疑问 ------- BaseService<T> where T : class, new() 含义

    public abstract class BaseService<T> where T : class, new() { //当前仓储 //DbSession的存放 //为了职责单一的原 ...

  8. GPU渲染管线概述

    1.顶点着色器 顶点着色器是流水线的第一个阶段,它的输入来自于CPU.顶点着色器的处理单位是顶点,也就是说输入进来的每个顶点都会调用一次顶点着色器. 顶点着色器需要完成的工作主要有:坐标变换和逐顶点光 ...

  9. HTML 5入门知识(三)

    <canvas>标签 在网页中使用canvas元素,像使用其他HTML标签一样简单,然后利用JavaScript脚本调用绘图API,绘制各种图形.canvas拥有多种绘制路径.矩形.圆形. ...

  10. solr6.4.1搜索引擎同步mysql数据库

    尚未成功启动solr的,请参考我的另一篇文章:http://www.cnblogs.com/zhuwenjoyce/p/6506359.html(solr6.4.1 搜索引擎启动eclipse启动) ...