js02

2018-02-20 19:37:10来源:cnblogs.com作者:limuma人点击

分享

一、<thead></thead>,<tbody></tbody>:为了使表头和表格内容分开设置样式

1、tbody里边有一个rows.length,获取行数的知识点

2、<thead>

  <tr>

    <th></th>

  </tr>

</thead>

<tbody>只需将上述的th换为td即可

以一个案例说明如下:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>表格隔行换色</title>        <script>            window.onload = function(){                //1.获取表格                var tblEle = document.getElementById("tbl");                //2.获取表格中tbody里面的行数(长度)                var len = tblEle.tBodies[0].rows.length;                //这里的.tBodies[0]说明可以有多个tbody,这里只取第一个                //3.对tbody里面的行进行遍历                for(var i=0;i<len;i++){                    if(i%2==0){                        //4.对偶数行设置背景颜色                        tblEle.tBodies[0].rows[i].style.backgroundColor="pink";                    }else{                        //5.对奇数行设置背景颜色                        tblEle.tBodies[0].rows[i].style.backgroundColor="gold";                    }                }            }        </script>    </head>    <body>        <table border="1" width="500" height="50" align="center" id="tbl">            <thead>                <tr>                    <th>编号</th>                    <th>姓名</th>                    <th>年龄</th>                </tr>            </thead>            <tbody>                <tr >                    <td>1</td>                    <td>张三</td>                    <td>22</td>                </tr>                <tr >                    <td>2</td>                    <td>李四</td>                    <td>25</td>                </tr>                <tr >                    <td>3</td>                    <td>王五</td>                    <td>27</td>                </tr>                <tr >                    <td>4</td>                    <td>赵六</td>                    <td>29</td>                </tr>                <tr >                    <td>5</td>                    <td>田七</td>                    <td>30</td>                </tr>                <tr >                    <td>6</td>                    <td>汾九</td>                    <td>20</td>                </tr>            </tbody>        </table>    </body></html>        

二、js常见的内置对象

javascript内置对象1、Array对象  数组的创建:   数组的特点:长度可变!数组的长度=最大角标+12、Boolean对象  对象创建:   如果value 不写,那么默认创建的结果为false3、Date对象  getTime();返回 1970 年 1 月 1 日至今的毫秒数。解决浏览器缓存问题。
4、Math和number对象  与java里面的基本一致。5、String对象  match():找到一个或多个正则表达式的匹配。  substr():从起始索引号提取字符串中指定数目的字符。  substring():提取字符串中两个指定的索引号之间的字符。  例子:  <script>    var str = "-a-b-c-d-e-f-";    var str1 = str.substr(2,4);//-b-c   //alert(str1);   var str2 = str.substring(2,4);//-b    alert(str2);  </script>6、 RegExp对象:正则表达式对象方法:test;比如:正则.test(字符串);检索字符串中指定的值。返回 true 或 false。

三、js全局函数(可直接使用,不同于内置对象:使用方法之前要先创建对象)

  以代码来介绍几个全局函数:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>全局函数</title>        <script>            var str = "张三";            alert(encodeURI(str));//%E5%BC%A0%E4%B8%89            alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89                        alert(decodeURI(encodeURI(str)));//张三            alert(decodeURIComponent(encodeURIComponent(str)));//张三                        var str1 = "http://www.itheima.cn";            alert(encodeURI(str1));//http://www.itheima.cn            alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn                        alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn            alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn                        var str2 = "alert('abc')";            alert(str2);            eval(str2);                    </script>    </head>    <body>    </body></html>

四、js常见案例

1、案例一:使用js完成省市二级联动的效果

  首先,技术分析:

    确定事件(onchange)    使用一个二维数组来存储省份和城市(二维数组的创建?)    获取用户选择的省份(使用方法传参的方式:this.value)    遍历数组(获取省份与用户选择的省份比较,如果相同了,继续遍历该省份下    所有的城市)    创建文本节点和元素节点并进行添加操作    createTextNode()    createElement()    appendChild()

  其次,步骤分析:

    第一步:确定事件(onchange)并为其绑定一个函数    第二步:创建一个二维数组用于存储省份和城市    第三步:获取用户选择的省份    第四步:遍历二维数组中的省份    第五步:将遍历的省份与用户选择的省份比较    第六步:如果相同,遍历该省份下所有的城市    第七步:创建城市文本节点    第八步:创建option元素节点    第九步:将城市文本节点添加到option元素节点中去    第十步:获取第二个下拉列表,并将option元素节点添加进去    第十一步:每次操作前清空第二个下拉列表的option内容。

  具体代码:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>注册页面重新布局</title>        <style type="text/css">            .top{                border: 1px solid red;                width: 32.9%;                height: 50px;                float: left;            }            #clear{                clear: both;            }            #menu{                border: 1px solid blue;                width: 99%;                height: 40px;                background-color: black;            }            #menu ul li{                display: inline;                color: white;                font-size: 19px;            }            #bottom{                text-align: center;            }            #contanier{                border: 1px solid red;                width: 99%;                height: 600px;                background: url(../img/regist_bg.jpg);                position: relative;            }            #content{                border: 5px solid gray;                width: 50%;                height: 60%;                position: absolute;                top: 100px;                left: 300px;                background-color: white;                padding-top: 50px;            }        </style>                <script>            //1.创建一个二维数组用于存储省份和城市            var cities = new Array(3);            cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");            cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");            cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");            cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");                        function changeCity(val){                                //7.获取第二个下拉列表                var cityEle = document.getElementById("city");                                //9.每次选择一个省份之前,清空第二个下拉列表的option内容(清空上一次选择省份添加进去的optioncity内容)                cityEle.options.length=0;                                //2.遍历二维数组中的省份                for(var i=0;i<cities.length;i++){                    //注意,比较的是角标                    if(val==i){                        //3.遍历用户选择的省份下的城市                        for(var j=0;j<cities[i].length;j++){                            //alert(cities[i][j]);                            //4.创建城市的文本节点                            var textNode = document.createTextNode(cities[i][j]);                            //5.创建option元素节点                            var opEle = document.createElement("option");                            //6.将城市的文本节点添加到option元素节点                            opEle.appendChild(textNode);                            //8.将option元素节点添加到第二个下拉列表中去                            cityEle.appendChild(opEle);                        }                    }                }            }        </script>            </head>    <body>        <div>                        <!--1.logo部分的div-->            <div>                <!--切分为3个小的div-->                <div class="top">                    <img src="../img/logo2.png" height="47px"/>                </div>                <div class="top">                    <img src="../img/header.png" height="47px"/>                </div>                <div class="top" style="padding-top: 15px;height: 35px;">                    <a href="#">登录</a>                    <a href="#">注册</a>                    <a href="#">购物车</a>                </div>            </div>            <!--清除浮动-->            <div id="clear">                            </div>            <!--2.导航栏部分的div-->            <div id="menu">                <ul>                    <li >首页</li>                    <li >电脑办公</li>                    <li >手机数码</li>                    <li >孕婴保健</li>                    <li >鞋靴箱包</li>                </ul>            </div>            <!--3.中间注册表单部分div-->            <div id="contanier">                <div id="content">                    <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">                        <form method="get" action="#" onsubmit="return checkForm()">                        <tr>                            <td colspan="2" align="center">                                <font size="5">会员注册</font>                            </td>                                                    </tr>                        <tr>                            <td>                                用户名                            </td>                            <td>                                <input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>                            </td>                        </tr>                        <tr>                            <td>密码</td>                            <td>                                <input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位!')" onblur="check('password','密码不能为空!')" /><span id="passwordspan"></span>                            </td>                        </tr>                        <tr>                            <td>确认密码</td>                            <td>                                <input type="password" name="repassword" />                            </td>                        </tr>                        <tr>                            <td>email</td>                            <td>                                <input type="text" name="email" id="email" />                            </td>                        </tr>                        <tr>                            <td>姓名</td>                            <td>                                <input type="text" name="name" />                            </td>                        </tr>                        <tr>                            <td>籍贯</td>                            <td>                                <select onchange="changeCity(this.value)">                                    <option>--请选择--</option>                                    <option value="0">湖北</option>                                    <option value="1">湖南</option>                                    <option value="2">河北</option>                                    <option value="3">河南</option>                                </select>                                <select id="city">                                                                    </select>                            </td>                        </tr>                        <tr>                            <td>性别</td>                            <td>                                <input type="radio" name="sex" value="男"/>男                                <input type="radio" name="sex" value="女"/>女                            </td>                        </tr>                        <tr>                            <td>出生日期</td>                            <td>                                <input type="text" name="birthday" />                            </td>                        </tr>                        <tr>                            <td>验证码</td>                            <td>                                <input type="text" name="yanzhengma" />                                <img src="../img/yanzhengma.png" />                            </td>                        </tr>                        <tr>                            <td colspan="2">                                <input type="submit" value="注册" />                                                                        </td>                        </tr>                        </form>                    </table>                </div>            </div>            <!--4.广告图片的div-->            <div id="">                <img src="../img/footer.jpg" width="99%" />            </div>            <!--5.超链接与版权信息的div-->            <div id="bottom">                <a href="#">关于我们 </a>                <a href="#">联系我们 </a>                <a href="#">招贤纳士 </a>                <a href="#">法律声明</a>                <a href="#">友情链接</a>                <a href="#">支付方式</a>                <a href="#">配送方式 </a>                <a href="#">服务声明 </a>                <a href="#">广告声明 </a>                <p>Copyright © 2005-2016 传智商城 版权所有 </p>            </div>        </div>    </body></html>
js实现省市二级联动(只看籍贯选择部分即可)
<script>    //1.创建一个二维数组用于存储省份和城市    var cities = new Array(3);    cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");    cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");    cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");    cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");        function changeCity(val){                //7.获取第二个下拉列表        var cityEle = document.getElementById("city");                //9.清空第二个下拉列表的option内容        cityEle.options.length=0;                //2.遍历二维数组中的省份        for(var i=0;i<cities.length;i++){            //注意,比较的是角标            if(val==i){                //3.遍历用户选择的省份下的城市                for(var j=0;j<cities[i].length;j++){                    //alert(cities[i][j]);                    //4.创建城市的文本节点                    var textNode = document.createTextNode(cities[i][j]);                    //5.创建option元素节点                    var opEle = document.createElement("option");                    //6.将城市的文本节点添加到option元素节点                    opEle.appendChild(textNode);                    //8.将option元素节点添加到第二个下拉列表中去                    cityEle.appendChild(opEle);                }            }        }    }</script>
(具体部分)js代码
<select onchange="changeCity(this.value)">    <option>--请选择--</option>    <option value="0">湖北</option>    <option value="1">湖南</option>    <option value="2">河北</option>    <option value="3">河南</option></select><select id="city">    </select>
(具体部分)HTML代码

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台