欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

小强的HTML5移动开发之路（31）—— JavaScript回顾6

程序员文章站 2022-05-10 15:06:42
...
HTML DOM模型： w3c dom 模型(规范)出现之前，各个浏览器自己支持的一些dom操作
Select对象
属性：selectedIndex:表示用户现在选择的那个选项的下标(从0开始)length:获取或者设置选项的长度options:值是一个数组，每个数组元素是option对象，表示下拉列表的所有选项Option对象
属性：text:选项的描述value:选项的值selected:当值为ture时，表示这个选项被用户选中可以按照如下方式创建Option对象

var obj = new Option(text, value);

<html>  
    <head>  
        <script src="myjs.js"></script>  
        <script>  
            function f1(){  
                //alert($('s1').selectedIndex);  
                //alert($('s1').length);  
                var arr = $('s1').options;  
                for(i=0;i<arr.length;i++){  
                    alert(arr[i].text +'   '+ arr[i].value);  
                }  
            }  
            function f2(){            
                var op = new Option('武汉','wh');  
                $('s1').options[$('s1').options.length] = op;  
            }  
        </script>  
    </head>  
    <body>  
        <select id="s1" style="width:120px;" name="s1">  
            <option value="bj">北京</option>  
            <option value="sh">上海</option>  
            <option value="xa">西安</option>  
            <option value="sz">深圳</option>  
            <option value="tj">天津</option>  
        </select>  
        <input type="button" value="点我吧" onclick="f2();"/>  
    </body>  
</html>

级联下拉列表

<html>  
    <head>  
        <script src="myjs.js"></script>  
        <script>  
            var arr = new Array();  
            arr[0] = [new Option('--方向--','-1')];  
            arr[1] = [new Option('商务英语','en1'),  
                new Option('专业英语','en2')];  
            arr[2] = [new Option('计算机软件','comp1'),  
                new Option('计算机网络','comp2'),  
                new Option('计算机应用','comp3')];  
            //数组的创建放在外面执行效率更高  
            function change(index){  
                $('s2').length = 0;  
                for(i=0;i<arr[index].length;i++){  
                    $('s2').options[i] = arr[index][i];  
                }  
            }  
        </script>  
    </head>  
    <body>  
        <select id="s1" style="width:120px;" onchange="change(this.selectedIndex);">  
            <!-- this表示绑定该事件的节点,在这里表示<select>节点-->  
            <option value="-1">--专业--</option>  
            <option value="english">英语</option>  
            <option value="computer">计算机</option>  
        </select>  
        <select id="s2" style="width:120px;">  
            <option value="-1">--方向--</option>  
        </select>  
    </body>  
</html>

Table对象 相当于<table>
属性：tHead:返回tHead对象tFoot:返回tFoot对象tBody:返回tBody对象数组rows:返回表格所有的行，TableRow数组方法：var obj = insertRow(index):在index处插入一行,返回的obj是TableRow对象(下标从0开始)deleteRow(index):删除index处的一行TableRow对象 相当于<tr>
属性：cells：表示所有单元格的一个数组(TableCell对象)方法：var obj = insertCell(index); 在index处插入一个单元格，返回obj是TableCelldelecteCell(index):删除一个单元格TableCell对象 相当于<td>

<html>  
    <head>  
        <script src="myjs.js"></script>  
        <script>  
            //html dom模型做  
            function addRow1(){  
                var tr = $('t1').insertRow($('t1').rows.length);      
                var td1 = tr.insertCell(tr.cells.length);  
                var td2 = tr.insertCell(tr.cells.length);  
                td1.innerHTML = $('name').value;  
                td2.innerHTML = $('salary').value;  
                //tr.style.backgroundColor = 'red';   //两种样式1  
                //tr.className = 'selected';          //两种样式2  
                $('t1').rows[1].cells[1].style.backgroundColor = 'red';//把某一格加亮  
            }  
            //采用w3c dom模型做  
            function addRow2(){  
                var tr1 = document.createElement('tr');  
                var td1 = document.createElement('td');  
                var td2 = document.createElement('td');  
                td1.innerHTML = $('name').value;  
                td2.innerHTML = $('salary').value;  
                tr1.appendChild(td1);  
                tr1.appendChild(td2);  
                $('t1').appendChild(tr1);  
            }  
        </script>  
        <style>  
            .selected{  
                background-color:red;  
            }  
        </style>  
    </head>  
    <body>  
        <table id="t1" border="1" cellpadding="0" cellspacing="0" width="60%">  
            <tr><td>姓名</td><td>工资</td></tr>  
            <tr><td>zs</td><td>2000</td></tr>  
            <tr><td>ls</td><td>3000</td></tr>  
            <tr><td>wu</td><td>4000</td></tr>  
        </table><br/>  
        姓名：<input type="text" name="name" id="name"/>  
        工资：<input type="text" name="salary" id="salary"/>  
        <input type="button" value="添加" onclick="addRow2();"/>  
    </body>  
</html>

以上就是 小强的HTML5移动开发之路（31）—— JavaScript回顾6的内容，更多相关内容请关注PHP中文网（www.php.cn）！

相关标签： HTML5，移动开发，JavaScript回顾

上一篇： Avro入门1–序列化与远程通信

下一篇： 关于恶意字符的介绍

推荐阅读