html之js笔记二

一、数组

       定义：var arr = []; 如：var arr = [1,2,3,4];

              或者：var arr = new Array();二者没有啥区别，相较而言前者运行速率要快些；

     属性：

             lenth  -------->即可获取，又可设置；例：快速清空数组

     使用原则：数组应该只存一种类型的变量

     方法：

             var  ar r = [1,2,3,4,];

             1.push(num)      arr.push(4);   向数组尾部添加一个数-->'4' ;

             2.pop()          arr.pop();      从末尾删除一个数

             3.shift()                                从头部删除依噶元素

             4.unshift(num)                            从头部添加一个元素

             5.splice(start,length)                用法一、 删除，start 起始位置 ，length 删除个数

                        (start,length,num[])        用法二、删除之后插入   示列：arr.splice(2,0,'a','b');    //输出：1,2,a,b,3,4

            6.concat()                                   数组拼接    a.concat(b);

            7.join()                                        分隔符  arr,join("-");//打印：1-2-3-4；

            8.sort()                                        排序

                   例：var arr = ["float","width","height","p","html","body"];

                            arr.sort();//安单词首字母快速排序，sort() 做字符串排序

                          var arr = [12,8,44,112,99];

                          arr.sort();//返回:112,12,8,44,99 ;如果要让它识别数组，可传参，如下：

                           arr.sort(function(n1,n2){

                                 return n1 - n2; => if{n1<n2){return -1;}else if(n1 > n2){ return 1;} else{return 0;}

                            });

函数：

          函数传参：

    [] . 具有相同的意义

    [] 像Java的泛型 没有具体属性，只有对象

    <div id="div1" onclick="show('value','400px')">    

    </div>

    <script>

        function show(name,value){

            var div = document.getElementById("div1");

            div.dispaly[name] = value;

        }

    </script>

    

    style  className

    1.函数加样式是添加在行间；

    2.行间样式改变时，className失效    

        

    提取行间事件

    <input id="btn1

    function show(name,value){

            var div = document.getElementById("div1");

            div.onclick = function(){

            }

    }        

    

    选项卡：

    <div id="div1">

            <input class="active" type="button" value="教育">

            <input type="button" value="科学">

            <input type="button" value="生物">

            <input type="button" value="历史"><br />

            <div style="display: block;">1234</div>

            <div>2345456</div>

            <div>45252523</div>

            <div>4424252</div>

        </div>

    <style>

            #div1 div{

                width:200px;

                height:200px;

                display:none;

                background: #ccc;

                border: 1px solid #999;

            }

            #div1 .active{

                background: yellowgreen;

            }

        </style>

        <script>

            window.onload = function(){

                var div1 = document.getElementById("div1");

                var btn = div1.getElementsByTagName("input");

                var div2 = div1.getElementsByTagName("div");

                

                for (var i = 0;i<btn.length;i++) {

                    btn[i].index = i;

                    btn[i].onclick = function(){

                        for (var i = 0;i<btn.length;i++){

                            btn[i].className = "";

                            div2[i].style.display="none";

                        }

                        this.className = "active";//this表示指向当前点击/选中对象

                        div2[this.index].style.display = "block";

                    };

                }

            };

        </script>

       DOM节点

      childNodes nodeType

        获取子节点

        children

    使用:

        <ul id='ul'>

            <li></li>

            <li></li>

        </ul>

        <script>

            var ul = document.getElementById("ul");

            

            /*查找子节点的方案一，使用childNodes和nodeType*/

            for(var i=0;i<ul.childNodes.length;i++){

                //这种查找子节点方式时：空白处会有文本节点

                alert(ul.childNodes.length);//-->5

                //配合nodeType方能找到我们需要的节点

                //nodeType == 3 表示文本节点

                if(nodeType == 1){

                    ul.childNodes[i][name] = value;

                }    

            }

            /*方案二，直接使用children实现版本兼容*/

            for(var i=0;i<ul.children.length;i++){

                ul.children[i][name] = value;

            }

        </script>

        

    parentNode 父节点

        示例：

        <ul id='ul'>

            <li>12345<a href=#>隐藏</a></li>

            <li>12345<a href=#>隐藏</a></li>

            <li>12345<a href=#>隐藏</a></li>

            <li>12345<a href=#>隐藏</a></li>

        </ul>

        <script>

            window.onload = function(){

                var a1 = documentElementsByTagName("a");

                for(var i in a1){

                    a1[i].parentNode.style.dispaly = "none";

                }

            };

        </script>

    offsetParent 获取元素在页面上的实际位置；配合position可以实现相对运动

    alert(div.offsetParent);//body

    <body>

        <div></div>

    </body>

    

    首尾节点

        有兼容性问题

        firstChild(不兼容高版本)   firstElementChild(不兼容IE6-7)

        lastChild                    lastElementChild

    兄弟节点

        有兼容性问题

        previousSibling                previousElementSibling    

        nextSibling                    nextElementSibling    

    解决：

    var node = document.....;

    if(node.firstChild){

        //

    }else if(node.firstElementChild){

        //

    }

    dom方式操作属性

        

    dom方式操作元素属性

        获取：getAttribute(名称)

        设置：setAttribute(名称,值);

        删除：removeAttribute(名称);

        

        <input type=text id=text>

        <input type=button value=“” id=btn>

        <script>

            window.onload = function(){

                var text = ...;

                var btn = ...;

                btn.onclick = function(){

                    text.setAttribute("value","text");

                }

            }

        </script>

    

    className选择元素

    优点：相较于id选择，代码量少，id变多就得创建很多id属性

          相较于ByTagName定位更为准确

        示列：

        <ul id="ul1">

            <li class="li1"></li>

            <li></li>

            <li class="li1"></li>

            <li></li>

            <li class="li1"></li>

            <li></li>

            <li></li>

        </ul>

        <script>

            window.onload = function(){

                var oUl = document.getElementById("ul1");

                var box = getClass(oUl,"li1");

                for(var i=0;i<box.length;i++){

                    box[i].style.background = "red";

                }

            }

            function getClass(oParent,clzName){

                var result = [];

                var clz = oParent.getElementsByTagName("*");

                for(var i=0;i<clz.length;i++){

                    if(clz[i].className == clzName){

                        result.push(clz[i]);

                    }

                }

                return result;

            }

        </script>

    创建、插入和删除节点：

        creatElement(标签名);

        appendChild(节点);

        

        insertBefore(节点,原有节点);

        

        removeChild(节点);

        示列：

        <input type="text" id="text"><input type="button" value="创建" id="btn"/>

        <ul id="ul1"></ul>

        <script>

            window.onload = function(){

                var oUl = document.getElementById("ul1");

                var atext = document.getElementById("text");

                var btn = document.getElementById("btn");

                btn.onclick = function(){

                    var aLi = document.createElement("li");

                    aLi.innerHTML = atext.value;

                    

                    //oUl.appendChild(aLi);//这种插入方式默认添加到尾部

                    /*仿微博更新方式，更新显示置顶*/

                    /*单用insertBefore对有些不版本兼容*/

                    if(aLi.length > 0){

                        oUl.insertBefore(aLi,aLi[0]);

                    }else{

                        oUl.appendChild(aLi);

                    }

                };

            };

        </script>

11,文档碎片

        文档碎片可以提高DOM操作性能(理论上)

        //一般来讲不会降低性能，一般基本没用

        document.createDocumentFragment()

        <script>

            window.onload = function(){

                var oUl = document.getElementById("ul1");

                var oFrag = document.createDocumentFragment();

                var aLi = document.createElement("li");

                for(;i<10000;)

                {

                    oFra,appendChild(aLi);

                }

                oUl.appendChild(oFrag);//一次查到ul里

            };

DOM应用高级篇

        表格应用-1

        获取

         tBodies/tHead/tFoot/rows/cells

        各行变色

            鼠标移入高亮

        添加、删除一行

            DOM方法的使用

            

        示列：

        <script>

            window.onload = function(){

                var tab = document.getElementById("tabs");

                var i,oldColor;//用于记录/标记背景

                /*获取table表格下tBody的第二行第一例大值

                 *

                 * getElementsByTagName("tbody")可用tBodies代替，同理

                 *                         tr   ----- rows 行

                 *                      td   ----- cells 例

                 * value只应用于 input

                 * 其他一般用“innerHTML”打印值

                var name = tab.tBodies[0].rows[1].cells[0].innerHTML;

                alert(name);

                *

                */

                /*各行设置背景及选中高亮

                for(i = 0;i < tab.tBodies[0].rows.length;i++){

                    if(i % 2){

                        tab.tBodies[0].rows[i].style.background = "#CCC";

                    }else{

                        tab.tBodies[0].rows[i].style.background ="";

                    }

                    tab.tBodies[0].rows[i].onmouseover = function(){

                        oldColor = this.style.background;

                        this.style.background = "yellowgreen";

                    }

                    tab.tBodies[0].rows[i].onmouseout = function(){

                        this.style.background=oldColor;

                    }

                }

                */

                /*添加、删除*/

                //toLowerCase() 忽略大小写方法

                /**

                 * 搜索

                 * 1.直接比较

                 * 2.toLowerCase() 忽略大小写方法

                 *

                 * 3. 模糊搜索

                 * 搜索框的值 value 被搜索的值 str

                 * str.search(value) != -1

                 *

                 * 4. 多关键字 arr = str.split(" ");

                 * 原理：1）将搜索的字用空格隔开 变成一个数组/集合

                 *          2）外面循环被搜索的内容

                 *          3）里层循环被分割之后的数组

                 *          4）通过if(str[i].search(arr[j]) ！= -1);执行成功狗的操作即可

                 * 多关键字搜过可将2，3，直接整合一起搜索，返回结果

                 *

                 * 5. 筛选 默认dispaly = "none";符合的dispaly = "block";

                 */

                var name = document.getElementById("name");

                var age = document.getElementById("age");

                var sub = document.getElementById("submit");

                var id = tab.tBodies[0].rows.length+1;//id重用问题

                sub.onclick = function(){

                    var tr = document.createElement("tr");

                    

                    var td1 = document.createElement("td");

                    td1.innerHTML = id++;

                    tr.appendChild(td1);

                    

                    var td2 = document.createElement("td");

                    td2.innerHTML = name.value;

                    tr.appendChild(td2);

                    

                    var td3 = document.createElement("td");

                    td3.innerHTML = age.value;

                    tr.appendChild(td3);

                    

                    var td4 = document.createElement("td");

                    td4.innerHTML = '<a href="javascript:;">删除</a>';

                    tr.appendChild(td4);

                    

                    td4.getElementsByTagName("a")[0].onclick = function(){

                        tab.tBodies[0].removeChild(this.parentNode.parentNode);

                    }

                    tab.tBodies[0].appendChild(tr);

                };

            };

        </script>

        <input type="text" id="name"/> <input type="text" id="age"/><input type="button" value="提交" id="submit"/>

        <table border="1" width ="500" id="tabs">

            <thead>

                <tr>

                    <th>ID</th>

                    <th>姓名</th>

                    <th>年龄</th>

                    <th>操作</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>1</td>

                    <td>张三</td>

                    <td>23</td>

                    <td></td>

                </tr>

            </tbody>

        </table>