柴少鹏的官方网站 技术在分享中进步,水平在学习中升华

JS之定时器与DOM小例子(二)

前面已经有了一个简单的了解,这里继续记录学习。

一、先记录一些方法

1.1 字符串(String)

字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法。
常见功能:

obj.length  #长度
obj.trim()  #移除空白
obj.trimLeft() #移除左边空白
obj.trimRight) #移除右边空白
obj.charAt(n)  #返回字符串中的第n个字符
obj.concat(value, ...)  #拼接
obj.indexOf(substring,start) #子序列位置
obj.lastIndexOf(substring,start) #子序列位置
obj.substring(from, to)  #根据索引获取子序列
obj.slice(start, end) #切片
obj.toLowerCase() #大写
obj.toUpperCase() #小写
obj.split(delimiter, limit) #分割
obj.search(regexp)  #从头开始匹配,返回匹配成功的第一个位置(g无效)
obj.match(regexp)  #全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp, replacement)  #替换,正则中有g则替换所有,否则只替换第一个匹配项,
                                     $数字:匹配的第n个组内容;
                                     $&:当前匹配的内容;
                                     $`:位于匹配子串左侧的文本;
                                     $':位于匹配子串右侧的文本
                                     $$:直接量$符号

1.2 数组

JavaScript中的数组类似于Python中的列表。常见功能:

obj.length   #数组的大小
obj.push(ele) #尾部追加元素
obj.pop()  #尾部获取一个元素
obj.unshift(ele) #头部插入元素
obj.shift()  #头部移除元素
obj.splice(start, deleteCount, value, ...)  #插入、删除或替换数组的元素
                    obj.splice(n,0,val) #指定位置插入元素
                    obj.splice(n,1,val) #指定位置替换元素
                    obj.splice(n,1)     #指定位置删除元素
obj.slice( ) #切片
obj.reverse( ) #反转
obj.join(sep) #将数组元素连接起来以构建一个字符串
obj.concat(val,..) #连接数组
obj.sort( ) #对数组元素进行排序

1.3 序列化操作

JSON.stringify()  #将对象转换为字符串
JSON.parse()  #将字符串转换为对象类型
转义:

图片.png

1.4 时间

Date对象,Date类
var d = new Date()  #d就是时间对象

d.getXXX获取
d.setXXX设置

图片.png

图片.png

1.5 JavaScipt面向对象

对象前要加new:

var obj = new Foo(‘we’);
Function Foo(n){
   this.name = n;
}
#函数里面的this代指对象
#创建对象时,new函数()

二、小例子

写例子之前先了解下函数:

JavaScript中函数基本上可以分为一下三类:

// 普通函数
    function func(arg){        return true;
    }          
// 匿名函数
    var func = function(arg){        return "tony";
    }  
// 自执行函数
    (function(arg){
        console.log(arg);
    })('123')
//注意:对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数。

2.1 alert小例子

#  alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。语法:alert(message)

参数       #描述
message    #要在 window 上弹出的对话框中显示的纯文本(而非 HTML 文本)

下面是一个小例子:

<body>
   <input type="text" id="user" />
   <input type="button" onclick="GetData();" value="点我" />
   <script>
       function GetData() {
           var i = document.getElementById('user');
           alert(i.value);
       }
   </script>
</body>

图片.png

2.2 setInterval小例子

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法:setInterval(code,millisec[,"lang"])

参数   #描述
code   #必需。要调用的函数或要执行的代码串。    
millisec  #必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

下面是一个小例子:

<body>
   <script>
       setInterval("alert('三秒刷新一次啊');",3000); //这里记得如果是数字alert()里面就不用加单引号,但是如果是字符串就要加上单引号表示其实str。后面的3000是3000毫秒
   </script>

图片.png

2.3 console.log小例子

       对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断JavaScript程序的执行,从而造成副作用;alert弹出框需要点击确认比较麻烦,而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑。最重要的是alert只能输出字符串,不能输出对象里面的结构,console.log()console.log()可以接受任何字符串、数字和JavaScript对象,可以看到清楚的对象属性结构,在ajax返回json数组对象时调试很方便。

http://blog.csdn.net/qq_31561851/article/details/62046102  #console的使用详解

下面是一个小例子:

<body>
    <script>
        function f1() {  //定了个函数循环打印数组中的元素
            a = [11,22,33,44]
            for (var item in a){
                console.log(item);  //调用了console.log打印item
            }
        }
        setInterval("f1()",1000);  //创建一个定时器,通过定时器调用,1秒钟打印一次
    </script>
</body>

图片.png


2.4 利用上面的内容写一个LED屏幕的效果

先来利用浏览器抓取下信息:

<div id="i1" style="border: 1px solid red;width: 170px;">欢迎领导莅临指导</div>

图片.png

图片.png

来了解下Document 对象,也就是HTML DOM对象中的DOM Document:

Document 对象介绍:

       每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

Document 对象集合:

#集合   #描述
all[]   #提供对文档中所有 HTML 元素的访问。    
anchors[]  #返回对文档中所有 Anchor 对象的引用。    
applets    #返回对文档中所有 Applet 对象的引用。    
forms[]    #返回对文档中所有 Form 对象引用。    
images[]    #返回对文档中所有 Image 对象引用。    
links[]    #返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性:

#属性   #描述
body    #提供对 <body> 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的 <frameset>。    
cookie   #设置或返回与当前文档有关的所有 cookie。    
domain    #返回当前文档的域名。    
lastModified   #返回文档被最后修改的日期和时间。    
referrer    #返回载入当前文档的文档的 URL。    
title    #返回当前文档的标题。    
URL    #返回当前文档的 URL。

Document 对象方法:

#方法    #描述
close()   #关闭用 document.open() 方法打开的输出流,并显示选定的数据。    
getElementById()  #返回对拥有指定id 的第一个对象的引用。    
getElementsByName()  #返回带有指定名称的对象集合。    
getElementsByTagName()  #返回带有指定标签名的对象集合。    
open()   #打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。    
write()  #向文档写 HTML 表达式 或 JavaScript 代码。    
writeln()  #等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

下面是一个小例子:

<body>
   <div id="i1" style="border: 1px solid red;width: 170px;text-align: center;">欢迎领导莅临指导</div>
   <script>
       //定义一个普通函数
       function func() {
           var tag = document.getElementById('i1');   //获取到html中的id等于i1的标签
           var content = tag.innerText;  //innerText 打印标签之间的纯文本信息,会将标签过滤掉,innerHtml 打印标签之间的内容,包括标签和文本信息
           var f = content.charAt(0); //取文本信息的第一个字段
           var l = content.substring(1,content.length);  //取第二个字段到最后的字段
           var new_content = l + f;  //让取出来的这两个字段相连
           tag.innerText = new_content; //重新给tag的文本内容赋值
       }
       setInterval('func()',500);  //然后500毫秒执行一下此函数,也就是说每次都是取出新的tag的字段丢到尾部,比如第一次是欢丢尾部第二次执行就是迎丢尾部,以此类推
   </script>
</body>

图片.png

#浏览器就出现了LED显示屏上面的效果,这段话看上去就是滚动的效果。

2.5 实现表单全选和反选的效果

html页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/table.css" type="text/css" rel="stylesheet"/>
</head>
<body style="margin: 0">
    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancleAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />
        <table>
            <thead>
               <tr>
                   <th>选择</th>
                   <th>主机名</th>
                   <th>端口</th>
               </tr>
            </thead>
            <tbody id="tb">
               <tr>
                   <td>
                       <input type="checkbox" />
                   </td>
                   <td>1.1.1.1</td>
                   <td>80</td>
               </tr>
               <tr>
                   <td>
                       <input type="checkbox" />
                   </td>
                   <td>1.1.1.2</td>
                   <td>81</td>
               </tr>
               <tr>
                   <td>
                       <input type="checkbox" />
                   </td>
                   <td>1.1.1.3</td>
                   <td>82</td>
               </tr>
            </tbody>
        </table>
    </div>
    <!--遮罩层开始-->
 <div id="i1" class="c1 hide"></div>
    <!--遮罩层结束-->
    <!--弹出框开始-->
 <div id="i2" class="c2 hide">
         <p><input type="text" /></p>
         <p><input type="text" /></p>
         <p>
             <input type="button" value="取消" onclick="HideModel();">
             <input type="button" value="确定" onclick="HideModel();">
         </p>
    </div>
    <script type="text/javascript" src="js/table.js"></script>
</body>
</html>

#这是一个较为完整的例子,css文件一般是在head元素哪里引用,js文件一般是在body的底部引用这样如果网络有问题或者js加载过多或者有问题的话不会影响页面内容的显示。

css/table.css代码:

.hide{
      display: none;
  }
  .c1{
      position: fixed;
      left:0;
      top:0;
      right:0;
      bottom: 0;
      background-color: #b94a48;
      opacity: 0.6;
      z-index: 9;
  }
  .c2{
      width: 500px;
      height: 400px;
      background-color: white;
      position: fixed;
      left: 50%;
      right: 50%;
      margin-left: -250px;
      margin-top: 100px;
      z-index: 10;
  }
  table{
      border: 1px;
      border-color: red;
      border-style: solid;
  }
  th,td{
      border: 1px solid black;
      font-size: 24px;
      text-align: center;
  }

js/table.js代码:

function  ShowModel(){
            document.getElementById('i1').classList.remove('hide'); //将hide这个属性去掉,就是display: none;  去掉,显示弹出框
            document.getElementById('i2').classList.remove('hide');
        }
function HideModel(){
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }
function ChooseAll(){
            var tbody = document.getElementById('tb')
            //获取所有的tr
            var tr_list = tbody.children;
            //children() 方法返回被选元素的所有直接子元素。DOM 树:该方法只沿着 DOM 树向下遍历单一层级。如需向下遍历多个层级(返回子孙节点或其他后代),请使用 find() 方法。
                        //提示:如需沿着 DOM 树向上遍历单一层级,或向上遍历直至文档根元素的所有路径(返回父节点或其他祖先),请使用 parent() 或 parents() 方法。
                        //注意:该方法不会返回文本节点。如需返回包含文本节点的所有子节点,请使用 contents() 方法。
            for(var i=0;i<tr_list.length;i++){
                //循环所有的tr,current_tr
                var current_tr = tr_list[i];
                var chekbox = current_tr.children[0].children[0];
                chekbox.checked = true;  //就是将chekbox选中
            }
        }
function  CancleAll(){
            var tbody = document.getElementById('tb');
            //获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                //循环所有的tr,current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }
        }
function  ReverseAll(){
            var tbody = document.getElementById('tb');
            //获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}  //这是一个最简单的if判断,如果checkbox被选中就取消选中,如果没选中就将其选中。
            }
        }

图片.png

图片.png

#可以全选,可以反选,可以取消,点击添加会弹出模态对话框,可以输入,点击模态对话框的确定或者取消又返回正常页面。

三、DOM元素对象

#上面的那个例子用到了很多DOM元素对象的东西,这里记录一下。

3.1 HTML DOM 元素对象

HTML DOM 节点:

在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :

文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素文本是文本节点
注释是注释节点

元素对象:

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点。NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合。元素可以有属性。

属性和方法:

以上属性和方法可适用于所有 HTML 元素:

#属性/方法            #描述
element.accessKey    #设置或返回accesskey一个元素    
element.addEventListener()    #向指定元素添加事件句柄    
element.appendChild()    #为元素添加一个新的子元素    
element.attributes    #返回一个元素的属性数组    
element.childNodes    #返回元素的一个子节点的数组    
element.classlist    #返回元素的类名,作为 DOMTokenList 对象。    
element.className    #设置或返回元素的class属性    
element.clientHeight  #在页面上返回内容的可视高度(不包括边框,边距或滚动条)    
element.clientWidth   #在页面上返回内容的可视宽度(不包括边框,边距或滚动条)    
element.cloneNode()   #克隆某个元素    
element.compareDocumentPosition()    #比较两个元素的文档位置。    
element.contentEditable    #设置或返回元素的内容是否可编辑    
element.dir    #设置或返回一个元素中的文本方向    
element.firstChild    #返回元素的第一个子节点    
element.focus()    #设置文档或元素获取焦点    
element.getAttribute()    #返回指定元素的属性值    
element.getAttributeNode()    #返回指定属性节点    
element.getElementsByTagName()    #返回指定标签名的所有子元素集合。    
element. getElementsByClassName()    #返回文档中所有指定类名的元素集合,作为 NodeList 对象。    
element.getFeature()    #返回指定特征的执行APIs对象。    
element.getUserData()    #返回一个元素中关联键值的对象。    
element.hasAttribute()    #如果元素中存在指定的属性返回 true,否则返回false。    
element.hasAttributes()    #如果元素有任何属性返回true,否则返回false。    
element.hasChildNodes()    #返回一个元素是否具有任何子元素    
element.hasFocus()    #返回布尔值,检测文档或元素是否获取焦点    
element.id    #设置或者返回元素的 id。    
element.innerHTML    #设置或者返回元素的内容。    
element.insertBefore()    #现有的子元素之前插入一个新的子元素    
element.isContentEditable    #如果元素内容可编辑返回 true,否则返回false    
element.isDefaultNamespace()    #如果指定了namespaceURI 返回 true,否则返回 false。    
element.isEqualNode()    #检查两个元素是否相等    
element.isSameNode()    #检查两个元素所有有相同节点。    
element.isSupported()    #如果在元素中支持指定特征返回 true。    
element.lang    #设置或者返回一个元素的语言。    
element.lastChild    #返回的最后一个子元素    
element.namespaceURI    #返回命名空间的 URI。    
element.nextSibling    #返回该元素紧跟的一个节点    
element.nodeName    #返回元素的标记名(大写)    
element.nodeType    #返回元素的节点类型    
element.nodeValue    #返回元素的节点值    
element.normalize()    #使得此成为一个"normal"的形式,其中只有结构(如元素,注释,处理指令,CDATA节和实体引用)隔开Text节点,即元素(包括属性)下面的所有文本节点,既没有相邻的文本节点也没有空的文本节点    
element.offsetHeight    #返回,任何一个元素的高度包括边框和填充,但不是边距    
element.offsetWidth    #返回元素的宽度,包括边框和填充,但不是边距    
element.offsetLeft    #返回当前元素的相对水平偏移位置的偏移容器    
element.offsetParent    #返回元素的偏移容器    
element.offsetTop    #返回当前元素的相对垂直偏移位置的偏移容器    
element.ownerDocument    #返回元素的根元素(文档对象)    
element.parentNode    #返回元素的父节点    
element.previousSibling    #返回某个元素紧接之前元素    
element.querySelector()    #返回匹配指定 CSS 选择器元素的第一个子元素    
document.querySelectorAll()    #返回匹配指定 CSS 选择器元素的所有子元素节点列表    
element.removeAttribute()    #从元素中删除指定的属性    
element.removeAttributeNode()    #删除指定属性节点并返回移除后的节点。    
element.removeChild()    #删除一个子元素    
element.removeEventListener()    #移除由 addEventListener() 方法添加的事件句柄    
element.replaceChild()    #替换一个子元素    
element.scrollHeight    #返回整个元素的高度(包括带滚动条的隐蔽的地方)    
element.scrollLeft    #返回当前视图中的实际元素的左边缘和左边缘之间的距离    
element.scrollTop    #返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离    
element.scrollWidth    #返回元素的整个宽度(包括带滚动条的隐蔽的地方)    
element.setAttribute()    #设置或者改变指定属性并指定值。    
element.setAttributeNode()    #设置或者改变指定属性节点。    
element.setIdAttribute()    
element.setIdAttributeNode()    
element.setUserData()    #在元素中为指定键值关联对象。    
element.style    #设置或返回元素的样式属性    
element.tabIndex    #设置或返回元素的标签顺序。    
element.tagName    #作为一个字符串返回某个元素的标记名(大写)    
element.textContent    #设置或返回一个节点和它的文本内容    
element.title    #设置或返回元素的title属性    
element.toString()    #一个元素转换成字符串    
nodelist.item()    #返回某个元素基于文档树的索引    
nodelist.length    #返回节点列表的节点数目。

3.2 HTML DOM classList 属性

定义和用法:

      classList 属性返回元素的类名,作为 DOMTokenList 对象。该属性用于在元素中添加,移除及切换 CSS 类。classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。

Properties:

#属性       #Description
length    #返回类列表中类的数量,该属性是只读的    
#如查看<div>元素有多少个类名:var x = document.getElementById("myDIV").classList.length;

方法:

#方法                       #描述
add(class1, class2, ...)   #在元素中添加一个或多个类名。如果指定的类名已存在,则不会添加    
contains(class)         #返回布尔值,判断指定的类名是否存在。可能值:true - 元素包已经包含了该类名  false - 元素中不存在该类名    
item(index)      #返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null    
remove(class1, class2, ...)   #移除元素中一个或多个类名。注意: 移除不存在的类名,不会报错。    
toggle(class, true|false)    #在元素中切换类名。第一个参数为要在元素中移除的类名,并返回 false。 如果该类名不存在则会在元素中添加类名,并返回 true。 第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。
                             例如:移除一个 class: element.classList.toggle("classToRemove", false); 
                              添加一个 class: element.classList.toggle("classToAdd", true);
                              注意: Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。

技术描述:

返回值:一个 DOMTokenList, 包含元素的类名列表

一些例子:

为 <div> 元素添加多个类:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

为 <div> 元素移除一个类:

document.getElementById("myDIV").classList.remove("mystyle");

为 <div> 元素移除多个类:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

为 <div> 元素切换类:

document.getElementById("myDIV").classList.toggle("newClassName");

获取 <div> 元素的类名:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;
#x输出结果为:mystyle anotherClass thirdClass

获取 <div> 元素的第一个类名(索引为0):

var x = document.getElementById("myDIV").classList.item(0);
#x的输出结果为mystyle

查看元素是否存在 "mystyle" 类:

var x = document.getElementById("myDIV").classList.contains("mystyle");
#x输出结果为:true


作者:忙碌的柴少 分类:JS学习 浏览:203 评论:0
留言列表
发表评论
来宾的头像