JavaScript的字符串、数组以及DOM操作总结

2019-01-01 23:17:23来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

(一)JavaScript字符串操作

    JavaScript的字符串就是用' '或" "括起来的字符表示,日常的学习中有时候需要对字符串进行相关的操作。例如要获取字符串某个指定位置的字符,须使用类似Array数组的下标操作,索引号从0开始:

 var str='Hello World!'
  alert(str[0] )  //'H'
  alert(str[6]  ) //'W'
  alert(str[12]  ) //索引超出字符串的范围,但不会报错,一律返回undefined

    JavaScript为字符串提供了一些常用方法,调用这些方法不会改变原有字符串的内容,但是会返回一个新的字符串。以下为字符串操作常用的四种方法:

 toUpperCase() 把一个字符串全部变为大写:

var str='Hello World!';
str.toUpperCase() //返回hello world!

 toLowerCase() 把一个字符串全部变为小写: 

var str='Hello World!';
str.toLowerCase()  //返回hello world!

    indexOf() 会搜索指定字符串出现的位置

 

var str='Hello World!';
str.indexOf('ello');      //返回1
str.indexOf(' ');         //返回5
str.indexOf('World');  //返回6
str.indexOf('world');  //没有找到指定字符串,返回-1

    substring() 会返回指定索引区间的子串:

var str='Hello World!';
str.substring(0, 5);  //返回"Hello"
str.substring(2, 8);  //返回"llo Wo"
str.substring(-1);    //返回"Hello World!"
str.substring(-6);    //返回"Hello World!"

(二)JavaScript数组操作

    JavaScript的数组Array可以包含任何数据类型,并通过索引来访问每个元素。例如要获得数组Array的长度,可以直接访问数组Array的length属性:

var arr=[1,'true',3,4,'false'];
arr.length; //返回5

 若直接给数组Array的length赋予一个新的值会导致数组Array大小的变化:

var arr=[1,'true',3,4,'false'];
arr.length=7;    
alert(arr);      //返回[1,true,3,4,false,,]  
arr.length=3;  
alert(arr);      //返回[1,true,3]

    若数组Array通过索引把对应的元素修改成新的值(包括索引超过了范围),数组Array也会发生变化:

var arr=[1,'true',3,4,'false'];
arr[1] = 99;
alert(arr);      //arr变为[1, 99, 3,4, 'false']
arr[4] = true;
alert(arr);     //arr变为[1,'true',3,4,'true']

    与字符串一样,JavaScript也为数组操作提供了一些函数方法。

    indexOf() 与String的类似,搜索一个指定的元素的位置:

var arr = [1, 6, 'hello', null];
arr.indexOf(null);        //返回3
arr.indexOf(6);           //返回1
arr.indexOf('6');         //没有找到元素'6',返回-1

    slice() 对应String的substring() ,截取数组Array部分元素,返回一个新的数组Array:

var arr = [1, 6, 'hello', null];
arr.slice(0, 2);        //返回[1, 6]
arr.slice(3);           //返回[null]
arr.slice();            //返回[1, 6, 'hello', null]

    push() 往数组Array的末尾添加若干元素,pop() 则把数组Array的最后一个元素删除掉:

var arr = [1, 6, 'hello', null];
arr.push(99, 'A');
arr;            //arr变为[1, 6, 'hello, null, 99, 'A']
arr.pop();
arr;            //arr变为[1, 6, 'hello, null, 99]

    unshift() 往数组Array的头部添加若干元素,shift() 则把数组Array的第一个元素删掉:

var arr = [1, 6, 'hello', null];
arr.unshift(99, 'A');
arr;            //arr变为[99, 'A', 1, 6, 'hello, null]
arr.shift();
arr;            //arr变为['A', 1, 6, 'hello, null]

    sort() 是对数组Array的当前元素进行排序,而reverse() 则是颠倒数组Array中元素的顺序:

var arr=[1, 'C', 'A', 9];
arr.sort();            //返回[1, 9, "A", "C"]
arr.reverse();         //返回["C", "A", 9, 1]

    splice() 方法是修改数组Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素:

var arr = [1, 6, 'hello', null];
//从索引1开始删除2个元素,然后再添加2个元素
arr.splice(1, 2, 'A', 99);     //返回删除的2个元素[6, 'hello']
arr;       //arr变为[1, 'A', 99, null]
arr.splice(2, 1);              //返回从索引2开始删除的1个元素[99]
arr;       //arr变为[1, 'A', null]

(三)JavaScript Dom基本操作

    DOM(Document Object Model),即文档对象模型,是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,它允许开发人员添加、移除和修改页面的某一部分。当我们创建了一个网页并把它加载到Web浏览器上,DOM就在幕后悄然而生,因为它把你所编写的网页文档转换为一个文档对象。

  我们可以这么理解DOM,把DOM看做一棵节点树,主要由元素节点、属性节点、文本节点三种节点构成。例如下方的一行HTML代码,

<p title="reminder">Hello JavaScript</p>

     其中 p 为元素节点,title="reminder" 为属性节点,Hello JavaScript 为文本节点。

  HTML文档中每一个元素节点都是一个对象,其中3个获取特定元素的方法分别是: getElementById、getElementsByTagName 和 getElementsByClassName 方法。当我们得到需要的元素后,就可以获取它的各个属性,getAttribute 方法就是用来做这件事的,而 setAttribute 方法则用来更改属性节点的值。

例如下方的HTML文档,对其进行JavaScript的 DOM 的5种基本方法操作,如下所示:    

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Mobile phone</title>
        <style type="text/css">
            body {
                color: white;
                background-color: black;
            }
            p {
                color: yellow;
                font-family: "arial", sans-serif;
                font-size: 1.2em;
            }
            #purchases {
                border: 1px solid white;
                background-color: #333;
                color: #ccc;
                padding: 1em;
            }
            #purchase li {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h1>What to buy</h1>
        <p title="reminder">Never Settle !!!</p>
        <ul id="purchases">
            <li>HUAWEI</li>
            <li class="sale">OPPO & vivo</li>
            <li class="sale important">mi</li>
        </ul>
    </body>
</html>

    getElementById 方法,返回那个给定 id 属性值的元素节点对应的对象:

1 <script>
2   alert(typeof document.getElementById("purchases"));      //弹出的对话框显示object
3 </script>

    getElementsByTagName 方法,返回一个对象数组,每个对象对应着文档里给定标签的一个元素:

1 <script>
2     var items = document.getElementsByTagName("li");
3     for(var i = 0; i<items.length; i++){
4        alert(typeof items[i]);    //弹出的对话框显示object,重复3次
5     }
6 </script>

    getElementsByClassName 方法,返回一个对象数组,每个对象对应着文档里给定类名的一个元素:

1 <script>
2     var shopping = document.getElementById("purchases");
3     var sales = shopping.getElementsByClassName("sale");
4     alert(sales.length);    //弹出的对话框显示2
5 </script>

    getAttribute 方法,获取元素节点的各个属性:

1 <script>
2     var paras = document.getElementsByTagName("p")
3     for(var i = 0; i<paras.length; i++){
4         alert(paras[i].getAttribute("title"));      //弹出的对话框显示reminder
5     }
6 </script>

    setAttribute 方法,对属性节点的值做出修改:

1 <script>
2    var shopping = document.getElementById("purchases");
3     alert(shopping.getAttribute("title"));     //弹出的对话框显示null(空的值)
4     shopping.setAttribute("title", "a list of goods");
5     alert(shopping.getAttribute("title"));     //弹出的对话框显示a list of goods
6 </script>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:页面添加滚动图片效果

下一篇:js 随机点名