JavaScript续

BOM常用的对象:

一. location地址栏对象:

1. location是什么：
    代表浏览器中的地址栏对象
   
2. href属性：
    ● 得到值：  得到当前地址栏的地址，类似于：document.URL
        location.href
    ● 设置值： 用于浏览器地址的跳转，可以跳转到一个新的页面
        location.href = "新的URL";
        //简写：
        location = "新的URL";

 

3. reload()方法:   
    重新加载当前的页面，类似于浏览器上刷新的按钮功能

二、history对象

    1.作用：
        用来访问用户已经访问过来的页面，数据从浏览器缓存中读取，而不是去访问服务器。效率更高

  1     <script type="text/javascript">
  2         //如果一段代码中，多次出现了某个对象，如：document，可简写
  3         with(document) {
  4             write("Hello World!" + "<br/>");
  5             write(URL + "<br/>");
  6             write(location.href  + "<br/>");
  7             //转到其它的页面去
  8             //location.href= "02-nine.html";
  9             write(new Date() + "<br/>");
 10         }
 11         //跳转的页面
 12         function jumpPage(url) {
 13             //location.href = url;
 14             location = url;
 15         }
 16     </script>

View Code

     2.方法：
        back() 访问刚刚访问过上一个页面，相当于后退的按钮
        forward() 访问刚刚访问过下一个页面，相当于前进的按钮
        go() 使用整数参数，可以使用go(1) 相当于 forward() ， go(-1)相当于back()

  1     <a href="03-location.html">第三个页面</a>
  2     <input type="button" value="前进" onclick="history.forward()"/>
  3     <input type="button" value="go前进" onclick="history.go(1)"/>
  4 
  5     <input type="button" value="后退" onclick="history.back()" />
  6     <input type="button" value="go后退" onclick="history.go(-1)" />
  7 

View Code

内置对象:

一、数组对象Array
  1. 创建数组的方式：

    1) 方式一：创建一个长度为0的数组对象。
            var arr = new Array();
       
    2) 方式二： 指定长度创建数组对象。
            var arr = new Array(3);
   
    3) 方式三： 指定数组中的元素值创建数组对象
            var arr = new Array(1,1,1,1);
   
    4) 方式四：
            var arr = [1,1,1]   

 

  2. 数组的遍历     

    1) 使用下标遍历
            for(var i=0; i<arr.length; i++) {
                 document.write(arr[i] + "&nbsp;");
             }
            
    2) 使用for-in
            for(var n in arr) {
               //n表示下标(不是元素本身)，而且是字符串类型(不是数值型)
            }

    3) 两种遍历方式的区别
          for-in这种方式只能输出已经初始化的元素，undefined的元素不能输出。
          而下标遍历的方式可以输出所有的元素

 

  3. 数组常用的方法：

    1). sort()  排序，默认按字符串进行排序

        //按进行排序

        数组.sort(function(o1,o2){
            return o1-o2;
        });

    2). reverse() 将数组中的元素反转
    3). join(separator) 将一个数组使用指定的符号转成字符串

二. 日期对象

  1. 创建Date对象：

  1 var d = new Date();

  2. Date对象的方法：

    getFullYear() 得到年份
    getMonth() 月份，从0开始。
    getDate() 日，一个月中的一天
    getDay()  星期，0-6，周日是0
    getHours()  小时
    getMinutes()  分
    getSeconds()   秒
    getMilliseconds()  毫秒
    getTime()  1970-1-1到现在的毫秒数
    toLocaleString() 得到本地格式的日期

2. 几个属性和方法：

        1) document.getElementById("id") 通过id得到唯一元素
    2) innerHTML：修改指定元素内部的HTML
    3) innerText：修改指定元素内部的纯文本
    4) innerHTML和innerText的区别：innerText中的HTML标签不起作用，原样输出。      

3. 与Date相关的方法

    1) window.setTimeout(函数名, 毫秒数)
        在指定毫秒数以后，运行一次函数
        函数名：要运行的函数
        毫秒数：过多久执行
       
    2) window.setInterval(函数名, 毫秒数)
        每过指定的毫秒数，调用一次函数。一直调用下去
   
    3) 调用时函数名的写法：
        window.setTimeout("myClock()",1000);
        window.setTimeout(myClock,1000);

DOM编程:  Document Object Model 文档对象模型（重点）

一: 节点与DOM树
        HTML在浏览器中进行解析的时候，首先会创建一棵文档树。
        我们可以通过JS程序，对内存中树上的每个节点进行操作，达到修改HTML网页内容的目的。

 

二. 获取DOM结点

三个方法:

    1) document.getElementById("id") 通过id得到唯一的元素
    2) document.getElementsByName("name") 通过标签的name属性得到一组元素
    3) document.getElementsByTagName("标签名")  通过标签的名字得到一组元素san

三. 修改DOM的方法:

1. 元素操作的方法：

    1) document.createElement("标签名") 创建一个指定标签名的元素
    2) element.setAttribute("属性名", "属性值") 给一个元素设置属性名和属性值
        如果属性名不存在，则是添加，如果存在，则是修改
    3) document.createTextNode("文本节点")    创建一个文本节点
   
    4) parent.appendChild(child)    把创建的节点追加成parent的子节点，加到当前元素的最后一个子节点
    5) parent.insertBefore(新建节点,已经在树上存在的节点)    将当前创建的元素插入到指定元素的前面
   
    6) parent.removeChild(child)    删除一个节点

3. 遍历节点的属性:

    1) childNodes： 当前元素所有的子节点，返回数组
    2) firstChild：得到当前元素的第一个子节点
    3) lastChild： 得到当前元素的最后一个子节点
    4) parentNode： 得到当前元素的父节点
    5) nextSibling： 得到下一个兄弟节点
    6) previousSibling：得到上一个兄弟节点

  1 ----
  2 省份
  3 <select id="province" οnchange="showCity()">
  4     <option>省份</option>
  5     <option value="0">广东</option>
  6     <option value="1">湖南</option>
  7     <option value="2">广西</option>
  8 </select>
  9 城市
 10 <select id="city">
 11     <option>城市</option>
 12 </select>
 13 -----
 14 
 15 二维数组：
 16 var cities =[["广州","深圳","东莞","湛江"] ,["长沙","株洲","湘潭","岳阳"] ,["南宁","桂林","贵港","柳州"]];
 17 
 18 <script type="text/javascript">
 19     var cities =[["广州","深圳","东莞","湛江"] ,["长沙","株洲","湘潭","岳阳"] ,["南宁","桂林","贵港","柳州"]];
 20      //动态创建城市
 21     function showCity() {
 22         //得到城市对象
 23         var city = document.getElementById("city");
 24         var index = document.getElementById("province").value;
 25         //得到数组的内容
 26         var arr = cities[index];
 27         //删除option中元素,select中有一个options数组属性，代表所有的option的集合
 28         city.options.length = 1;  //清空
 29         //动态创建option
 30         for (var i=0; i<arr.length; i++) {
 31             //创建option
 32            var op = document.createElement("option");
 33            op.innerHTML = arr[i];
 34            //添加成select的子元素
 35            city.appendChild(op);
 36         }
 37     }
 38 </script>

View Code

正则表达式:

1. 创建方式:

    方式1：var reg = new RegExp("正则表达式","匹配模式");

    方式2：var reg = /正则表达式/匹配模式;

2. 两种方式的区别：
    方式2中直接写的是正则表达式，\不用进行转义

4. 匹配上与Java中的不同：
    Java默认要精确匹配，而JS是模糊匹配，只要包含指定的正则表达式，则返回true

5. 正则表达式有关的方法：
    1) 正则表达式对象.test("要匹配的字符串")
        返回true，表示匹配，返回false表示不匹配
6. 匹配模式：   
    i 忽略大小写

转载于:https://www.cnblogs.com/zengjm/p/7063827.html