美文网首页
Java EE之旅05-JS基础(下)

Java EE之旅05-JS基础(下)

作者: 小楠总 | 来源:发表于2017-12-05 01:40 被阅读23次

js的BOM

回归一下,JS最初由网景公司创造,JS基本组成包括:

  1. 核心(ECMAScript):描述了JS的语法和基本对象
  2. 浏览器对象模型(BOM):与浏览器交互的方法和接口
  3. 文档对象模型 (DOM):处理网页内容的方法和接口

下面先来介绍BOM。

(1)window对象
    弹框的方法:
        提示框:alert("提示信息");
        确认框:confirm("确认信息");
            有返回值:如果点击确认返回true  如果点击取消 返回false
            var res = confirm("您确认要删除吗?");
            alert(res);
        输入框:prompt("提示信息");
            有返回值:如果点击确认返回输入框的文本 点击取消返回null
            var res =  prompt("请输入密码?");
            alert(res);
    open方法:
        window.open("url地址");           
        open("../jsCore/demo10.html");
        
    定时器:
        setTimeout(函数,毫秒值);
            setTimeout(
                function(){
                    alert("xx");
                },
                3000
            );
        clearTimeout(定时器的名称);
            var timer;
            var fn = function(){
                alert("x");
                timer = setTimeout(fn,2000);
            };
            var closer = function(){
                clearTimeout(timer);
            };
            fn();
        setInterval(函数,毫秒值);
        clearInterval(定时器的名称)
            var timer = setInterval(
            function(){
                alert("nihao");
            },
            2000
        );
        var closer = function(){
            clearInterval(timer);
        };
    
    注意:
        setTimeout在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次性的。 
        setInterval则不一样,它从载入后,每隔指定的时间就执行一次表达式,周而复始的。

    需求:注册后5秒钟跳转首页
    恭喜您注册成功,<span id="second" style="color: red;">5</span>秒后跳转到首页,如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
    <script type="text/javascript">
        var time = 5;
        var timer;
        timer = setInterval(
            function(){
                var second = document.getElementById("second");
                if(time>=1){
                    second.innerHTML = time;
                    time--;
                }else{
                    clearInterval(timer);
                    location.href="../jsCore/demo10.html";
                }
            },
            1000
        );
    </script>
    
(2)location对象
    location.href="url地址";
(3)history对象
    back();
    forward();
    go();
    <a href="demo7.html">后一页</a>
    <input type="button" value="上一页" onclick="history.back()">
    <input type="button" value="下一页" onclick="history.forward()">
    
    <input type="button" value="上一页" onclick="history.go(-1)">
    <input type="button" value="下一页" onclick="history.go(1)">

JS的DOM

1、理解一下文档对象模型

html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改。
在dom树中,一切皆为节点对象。

2、dom方法和属性

(1)getElementById-通过id获得元素节点对象
    例子:
    <form name="form1" action="test.html" method="post">
        <input type="text" name="username" value="哈哈" id="mid" onchange="">
        <input type="button" name="ok" value="确定"/>
    </form>

    //输出id为mid的标签的信息
    var inputNode = document.getElementById("mid");
    alert("type:" + inputNode.type + "\nvalue:" + inputNode.value);

(2)getElementsByName-通过name获得节点对象集合(因为name同名可以有多个)
    例子:
    <form name="form1" action="test.html" method="post">
        <input type="text" name="myname" value="哈哈1" id="tid_1"><br>
        <input type="text" name="myname" value="哈哈2" id="tid_2"><br>
        <input type="text" name="myname" value="哈哈3" id="tid_3"><br>
        <input type="button" name="ok" value="确定"/>
    </form>

    //通过元素的name属性获取所有元素的引用
    var inputNodes = document.getElementsByName("myname");
    //测试该数据的长度
    alert(inputNodes.length);
    //遍历元素,输出所有value属性的值
    for (var i = 0; i < inputNodes.length; i++) {
        var inputNode = inputNodes[i];
        alert(inputNode.value);
    }
    //为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值
    for (var i = 0; i < inputNodes.length; i++) {
        var inputNode = inputNodes[i];
        inputNode.onchange = function () {
            alert(this.value);
        };
    }

(3)getElementsByTagName-通过标签名称获得元素节点的集合

(4)hasChildNodes-查看元素节点是否含有子节点

(5)nodeName、nodeType、nodeValue属性

    每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
    nodeName(节点名称) 
    nodeValue(节点值) 
    nodeType(节点类型)

        1.nodeName
        nodeName 属性含有某个节点的名称。
        
        元素节点的 nodeName 是标签名称 
        属性节点的 nodeName 是属性名称 
        文本节点的 nodeName 永远是 #text 
        文档节点的 nodeName 永远是 #document 
        注释:nodeName 所包含的 XML 元素的标签名称永远是大写的

        2.nodeValue
        对于文本节点,nodeValue 属性包含文本。
        对于属性节点,nodeValue 属性包含属性值。
        nodeValue 属性对于文档节点和元素节点是不可用的。

        3.nodeType
        nodeType 属性可返回节点的类型。
        
        最重要的节点类型是:
        
        元素类型 节点类型 
        元素  1 
        属性      2 
        文本  3 
        注释  8 
        文档  9 

(6)childNodes属性-子节点集合;parentNode(this.parentNode)-父节点

(7)replaceChild-父节点替换子节点
    例子:
    <ul>
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing"> 重庆</li>
    </ul>
    
    <ul>
        <li id="fk" value="fangkong">反恐</li>
        <li id="ms" value="moshou">魔兽</li>
        <li id="cq1" value="chuanqi">传奇</li>
    </ul>   
  
    //点击北京节点,将被反恐节点替换
    var bj = document.getElementById("bj");
    var fk = document.getElementById("fk");
    bj.onclick = function(){
        //
        var parentNode = this.parentNode;
        parentNode.replaceChild(fk,this);
    };

(8)查找、设置属性节点
    例子:
    <ul>
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing">重庆</li>
    </ul>

    var bj = document.getElementById("bj");
    alert(bj.getAttribute("value"));
    bj.setAttribute("value", "哈哈");
    alert(bj.getAttribute("value"));

(9)节点的创建与添加、删除
    例子:
    <ul id="city">
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing">重庆</li>
    </ul>
    
    
    //增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下
    var li = document.createElement("li");
    li.setAttribute("id", "tj");
    li.setAttribute("value", "tianjin");
    
    var txt = document.createTextNode("天津");
    li.appendChild(txt);
    
    var city = document.getElementById("city");
    
    city.appendChild(li);
    //city.insertBefore(tj, cq);
    //city.removeChild(tj);

(10)innerHTML属性(比较重要)
    例子:
    <div id="subject">jquery</div>

    //将<h1>今天</h1>写到div的层中
    var div = document.getElementById("subject");
    div.innerHTML = "<h1>今天</h1>";

    //使用innerHTML读出id=subject中的文本内容
    var div = document.getElementById("subject");
    alert(div.innerHTML);

相关文章

网友评论

      本文标题:Java EE之旅05-JS基础(下)

      本文链接:https://www.haomeiwen.com/subject/ytfqixtx.html