星期一，今天学习了JS

　　最近很忙，都没什么时间去看传智播客的视频了，嘿，上次网上可以下载，我就有的黑马二期的视频了。然后寒假都一直在看，最近也在看，看到了快进入asp.net了了，最近在看那个什么多线程。异步线程什么什么的，真难啊。听说多写代码就会好很多，嗯，多写写把，最近有时间的话，我也常常在看window phone7高级编程，是nick randolph写的，老美的把，扬中科推荐的，我觉得看不来啊，虽然翻译了，但是觉得怪怪的看完在说把。觉得扬中科的视频讲的更好理解。因为我有兴趣网wp开发发展才会去看的。还有马伦老师说过，有时间可以去看看，c++，还有Linux，多看看mysql也不错，但是要精通一门。其他了解就可以了，主要是mysql渐渐主流了，Linux是开源的，c++有助于理解很多东西。
　　今天蛮累的，六点二十才下课，今天讲了JS的。DOM高级编程，使用getElement系列方法访问指定节点。然后操作。setAttribute("","")设置节点属性。使用parentNode、firstChild、lastChild根据层次查找节点，创建和添加节点。createElement(tagName),appendChild(nodeName),insertBefore(newNode,oldNode),cloneNode(deep)deep是bool类型。当为true的时候，会复制指定的节点以及他所有子节点。false只复制制定节点和它的属性。innerHTML是可以得到里面的内容。删除和替换节点。

View Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>MyHtml1.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    </head>
    <script type="text/javascript">
     
    function ptu_change() {
        var a1 = document.getElementById("a1");
        var b1 = document.getElementById("b1");
        if (a1.innerHTML == "百度新闻") {
            a1.href = "http://www.qq.com";
            a1.innerHTML = "qq新闻";
            b1.innerHTML = "百度新闻";
            //第二种方法
            //a1.setAttribute("href", "http://www.qq.com");
            //a1.setAttribute("innerHTML", "qq新闻");
            //b1.setAttribute("innerHTML", "百度新闻");
        } else {
            a1.href = "http://www.baiud.com";
            a1.innerHTML = "百度新闻";
            b1.innerHTML = "qq新闻";
            //第二种方法
            //a1.setAttribute("href", "http://www.baidu.com");
            //a1.setAttribute("innerHTML", "百度新闻");
            //b1.setAttribute("innerHTML", "qq新闻");
        }
    }
</script>
    <body>
        <a id="a1" href="http://www.baidu.com">百度新闻</a>
        <br />
        <button id="b1" onclick="ptu_change()">
            qq新闻
        </button>
    </body>
</html>

View Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Test2.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    </head>
    <script type="text/javascript">
        function readUL() {
            var ul1 = document.getElementById("ul1");
            var lis = ul1.childNodes; //重要
            for ( var i = 0; i < lis.length; i++) {
                alert(lis[i].innerHTML);
            }
        }
        function readLI() {
            var li2 = document.getElementById("li2");
            var ul1 = li2.parentNode;
            var lis = ul1.childNodes;
            for ( var i = 0; i < lis.length; i++) {
                alert(lis[i].innerHTML);
            }
        }
        function addLI() {
            var ul1 = document.getElementById("ul1");
            var newLi = document.createElement("li");
            newLi.innerHTML = "新建的子树";
            ul1.appendChild(newLi);
        }
        function addByIndex() {
            var ul1 = document.getElementById("ul1");
            var lis = ul1.childNodes;
            var num1 = document.getElementById("num1").value;
            var newLi = document.createElement("li");
            newLi.innerHTML = "新建的子树" + num1;
            ul1.insertBefore(newLi, lis[num1]);
        }
        //克隆节点
        function addByClone() {
            var ul1 = document.getElementById("ul1");
            var lis = ul1.childNodes;
            var num1 = document.getElementById("num1").value;
            var cloneLi = lis[num1].cloneNode(true);
            ul1.appendChild(cloneLi)
        }
        //删除节点
        function delById() {
            var ul1 = document.getElementById("ul1");
            var lis = ul1.childNodes;
            var num1 = document.getElementById("num1").value;
            ul1.removeChild(lis[num1]);
        }
        //按指定位置替换
        function replaceById(){
            var ul1 = document.getElementById("ul1");
            var lis = ul1.childNodes;
            var num1 = document.getElementById("num1").value;
            var newLi=document.createElement("li");
            newLi.innerHTML="替换的子树";
            ul1.replaceChild(newLi,lis[num1])            
        }    
</script>
    <body>
        <ul id="ul1">
            <li>
                字1
            </li>
            <li id="li2">
                字2
            </li>
            <li>
                字3
            </li>
            <li>
                字4
            </li>
        </ul>
        <button onclick="readUL()">
            遍历UL
        </button>
        <button onclick="readLI()">
            遍历LI
        </button>
        <button onclick="addLI()">
            新建Li
        </button>
        <br />
        <input id="num1" type="text" value="0"></input>
        <button onclick="addByIndex()">
            按下标添加子树到指定位置
        </button>
        <button onclick="addByClone()">
            按下标克隆
        </button>
        <button onclick="delById()">
            按下标删除
        </button>
        <button onclick="replaceById()">
            按下标替换
        </button>
    </body>
</html>

posted on 2013-03-18 23:26 Jerome_s 阅读(170) 评论(0) 收藏举报

刷新页面返回顶部

星期一，今天学习了JS

导航

公告