一、操作属性

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操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素的更多相关文章

  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. windows下部署免费ssl证书(letsencrypt)

    随着网络的发展,网络安全也越来越重要,对于网站来说,从Http升级到https也是我们要做的首要事情.要实现https,首先我们需要申请一张SSL证书,这篇文章我主要介绍下边这几个方面: 1. SSL ...

  2. scala IDE错误：..is cross-compiled with incompatible version....

    下午scala工程出现如下错误: 搜索这个问题,没有找到答案. 直接去官网查看http://scala-ide.org/docs/current-user-doc/faq/index.html,发现了 ...

  3. 利用AForge.NET 调用电脑摄像头进行拍照

    当然了,你需要去官网下载类库,http://www.aforgenet.com/ 调用本机摄像头常用的组件: AForge AForge.Controls AForge.Imaging AForge. ...

  4. js中可转bool为false的值

    number :0为false,其他都为true. string:""为false,其他字符串都为真,PS: " "空格为true,"false&qu ...

  5. unity3d 脚本学习系列

    最近使用unity3d,对其中的脚本部分进一系列总结,算是这一段时间的收获吧.

  6. Josephus问题的java实现

    import java.util.ArrayList; import java.util.ListIterator; public class Josephus { public static voi ...

  7. 2-23c#基础循环语句

    循环语句 必须具备四要素:初始条件.循环条件.循环体.状态改变 for (初始条件; 循环条件; 状态改变)    {  循环体} 简单举例 for(int i=1;i<=10;i++)//就是 ...

  8. eclipse中注释常用关键字

    关键词列表: @author 作者名 @date 日期 @version 版本标识 @parameter 参数及其意义 @since 最早使用该方法/类/接口的JDK版本 @return 返回值 @t ...

  9. Git 基本工作流程

    1. 用户信息配置(全局配置) $ git config --global user.name leo$ git config --global user.email hehe_xiao@qq.com ...

  10. Rotate Array leetcode

    Rotate an array of n elements to the right by k steps. For example, with n = 7 and k = 3, the array  ...