Day04.JavaScript

  1. 总体知识梳理:

 

  1. 数组:

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            //定义数组:长度是零,元素未定义

            var arr1 = new Array();

            

            //定义数组,长度是4,元素未定义

            var arr2 = new Array(4);

            

            //定义数组,长度为3,元素分别是1,2,3

            var arr3 = new Array(1,2,3);

            

            //定义数组,长度为3,元素分别为1,2,3

            var arr4 = [1,2,3];

            

            //js中的数组长度是可变的:

            var arr = new Array(4);//数组长度为4

            arr[100]=1;//长度变了,变为101

            

            //js同一个数组中可以定义不同类型的元素

            var arr5 = new Array("xq",123,true);

        </script>

    </head>

    <body>

    </body>

</html>

 

  1. document对象:

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="ds">

            xq

            <div>123</div>

            <div>123</div>

        </div>

    </body>

    <script>

        var dsObj = document.getElementById("ds");

        //childNodes:获得所有的子节点

        var allNode = dsObj.childNodes;

        alert(allNode);

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

            //nodeName:返回节点名称

            alert(allNode[i].nodeName);

            //nodeType:返回节点类型

            alert(allNode[i].nodeType);

            //nodeVaue:返回节点的值

            alert(allNode[i].nodeValue);

            

        }

    </script>

</html>

 

  1. 创建节点:

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        

    </head>

    <body>

        <div id="ds">

            

        </div>

    </body>

        <script type="text/javascript">

            //创建一个a标签:<a></a>

            var aobj = document.createElement("a");

            //创界文本节点

            var tobj= document.createTextNode("javascript");

            //将文本内容放到a标签内

            aobj.appendChild(tobj);

            //a标签插入到div标签内部

            var dobj = document.getElementById("ds");

            dobj.appendChild(aobj);

            

            var dsobj = document.getElementById("ds");

            dsobj.setAttribute("name","xq");

            

        </script>

</html>

 

  1. 全局函数

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            //parseInt()把字符串类型转换为一个整数

            var str = "311";

            var nul = parseInt(str);

            //可以通过typeof()判断数据类型

            alert(typeof(nul));

            alert(nul);

            

            //parseFloat():把字符串转为浮点数

            var str2 = "13.3";

            var nul2 = parseFloat(str2);

            alert(nul2);

            

            //encodeURI():编码

            var str3 = "山阴";

            var str4 = encodeURI(str3);

            alert(str4);

            //decodeURI():解码

            var str5 = decodeURI(str4);

            alert(str5);

            

        </script>

    </head>

    <body>

    </body>

</html>

 

 

案例分析:

案例一:

表格的隔行换色


技术分析:

既然要给一个普通的表格加颜色,需要用到我们的JavaScript:

知识点1:如何导入JavaScript?

直接使用<script></script>或者也可以通过<script src=" ">标签引入.js文件

知识点2:当整个页面加载完后,要给表格添加颜色,需要一个事件:onload。如何使用onload?可以直接在需要修改颜色的标签使用,例如整个表格都包含在了<body>标签内,所以可以直接把onload写在<body>标签内;其实也可以直接使用如下格式:window.onload 直接写在<script>标签内。

知识点3:我们要给行标签tr添加颜色,如何获取每一个行标签呢?

首选:document.getElementByTagName("标签名字");可以直接通过此方法获取tr标签

其实还可以通过id,name等方式获取;

知识点4:如何隔行设置颜色?

遍历+判断

 

步骤分析:

步骤一:html页面,有表格

步骤二:写script标签

步骤三:页面加载完成后Onload事件

步骤四:获得相应的标签对象

步骤五:给相应的标签对象设置颜色

 

代码实现:

<!DOCTYPE html>

<!--步骤一:html页面,有表格-->

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--步骤二:写script标签-->

        <script>

            //步骤三:页面加载完成以后 onload的事件,

            window.onload = function(){

                //步骤四:通过标签的名字获得相应的标签对象,通过元素的名字获得所有的标签对象

                var trObj = document.getElementsByTagName("tr");//此处trobj得到的是一个包含所有tr的数组

                //遍历trObj数组

                for (var i=2;i<trObj.length;i++) {

                    //进行判断

                    if(i%2==1){

                        //步骤五:给相应的标签对象加上颜色

                        trObj[i].style.backgroundColor="chartreuse";

                    }

                }

            }

        </script>

    </head>

    <body>

        <table id="tab1" border="1" width="800" align="center">

            <tr>

                <td colspan="5">

                    <input type="button" value="添加" />

                    <input type="button" value="删除" />

                </td>

                

            </tr>

            

            <tr style="background-color: #999999">

                <th>

                    <input type="checkbox" />

                </th>

                <th>分类ID</th>

                <th>分类名称</th>

                <th>分类描述</th>

                <th>操作</th>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>1</td>

                <td>手机数码</td>

                <td>手机数码类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>2</td>

                <td>电脑办公</td>

                <td>电脑办公类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>3</td>

                <td>鞋靴箱包</td>

                <td>鞋靴箱包类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>4</td>

                <td>家居饰品</td>

                <td>家居饰品类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

        </table>

    </body>

</html>


 

实现效果:


案例二:

鼠标放上去以后实现自动换色

技术分析:

页面加载完后? Window.onload=function(){}

鼠标放上去和鼠标离开的事件:

onmouseover=""; 鼠标放上去事件

onmouseout=""; 鼠标离开事件

步骤:

步骤一:html页面,有表格

步骤二:写script标签

步骤三:页面加载完成后Onload事件

步骤四:给相应的td对象添加事件,鼠标放上去和鼠标离开的事件

步骤五:给相应的事件里面添加颜色或取消颜色

代码:

<!DOCTYPE html>

<!--步骤一:页面-->

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--步骤二:写script标签-->

        <script>

 

        /*步骤三:页面加载完成后Onload事件*/

        window.onload=function(){

            //获得所有的tr对象

            var tdObj = document.getElementsByTagName("td");

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

                /*步骤四:给相应的td对象添加事件,鼠标放上去和鼠标离开的事件*/

                //鼠标放上去的事件

                tdObj[i].onmouseover = function(){

                    //步骤五:给相应的事件里面添加颜色或取消颜色

                    this.style.backgroundColor="#C726F4";

                }

                //鼠标离开的事件

                tdObj[i].onmouseout=function(){

                    this.style.backgroundColor="#fff";

                }

            }

        }

        </script>

    </head>

    <body>

        <table id="tab1" border="1" width="800" align="center">

            <tr>

                <td colspan="5">

                    <input type="button" value="添加" />

                    <input type="button" value="删除" />

                </td>

                

            </tr>

            

            <tr style="background-color: #999999">

                <th>

                    <input type="checkbox" />

                </th>

                <th>分类ID</th>

                <th>分类名称</th>

                <th>分类描述</th>

                <th>操作</th>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>1</td>

                <td>手机数码</td>

                <td>手机数码类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>2</td>

                <td>电脑办公</td>

                <td>电脑办公类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>3</td>

                <td>鞋靴箱包</td>

                <td>鞋靴箱包类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox"></td>

                <td>4</td>

                <td>家居饰品</td>

                <td>家居饰品类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

        </table>

    </body>

</html>

实现效果:


案例二:

看这个简单的表格,我们可以添加全选或者全不选吧?当我选中第一个框的时候,全部选中,再点击的时候进行取消。

 

代码实现:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            function selectAll(objtr){

                var val = objtr.checked;

                //获得标签对象数组,通过class的属性值获得标签对象

                var classtr = document.getElementsByClassName("itemSelect");

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

                    //添加状态

                    /*if(val==true){

                        classtr[i].checked=true

                    }else{

                        classtr[i].checked=false;

                    }*/

                    //因为val本身就是boolean类型,:

                    //全选

                    classtr[i].checked=val;

                    //反选

                    /*classtr[i].checked=!val;

                    */

                }

            }

        </script>

    </head>

    <body>

        <table id="tab1" border="1" width="800" align="center">

            <tr>

                <td colspan="5">

                    <input type="button" value="添加" />

                    <input type="button" value="删除" />

                </td>

                

            </tr>

            

            <tr style="background-color: #999999">

                <th>

                    <input type="checkbox" onclick="selectAll(this)"/>

                </th>

                <th>分类ID</th>

                <th>分类名称</th>

                <th>分类描述</th>

                <th>操作</th>

            </tr>

            <tr>

                <td><input type="checkbox" class="itemSelect"></td>

                <td>1</td>

                <td>手机数码</td>

                <td>手机数码类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox" class="itemSelect"></td>

                <td>2</td>

                <td>电脑办公</td>

                <td>电脑办公类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox" class="itemSelect"></td>

                <td>3</td>

                <td>鞋靴箱包</td>

                <td>鞋靴箱包类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

            <tr>

                <td><input type="checkbox" class="itemSelect"></td>

                <td>4</td>

                <td>家居饰品</td>

                <td>家居饰品类商品</td>

                <td><a href="">修改</a>|<a href="">删除</a></td>

            </tr>

        </table>

    </body>

</html>

 

案例三

省市联动:案例效果:

 

实现步骤:

步骤一:来一个页面。

步骤二:给省份下拉框绑定事件 onchange();

步骤三:我们需要将选中的下拉项 的值 传递到方法里面

步骤四: 基本的数组准备好

步骤五:根据传递过来的子 获得具体的省份。

步骤六:根据省份得到具体的市

步骤七:创建option标签 。文本信息放到具体项中。

步骤八:将具体的option项放到

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            /*CSS渲染*/

            

            body
{

                height:
500px;

            }

            

            #out
{

                background: url(../img/regist_bg.jpg);

                height:
100%;

                padding-top:
80px;

            }

            

            #inner
{

                border:
5px
double blueviolet;

                width:
800px;

                margin:
0
auto;

                padding:
20px;

                background-color: white;

            }

        </style>

        <script>

            function fsub() {

                /*

                 * 步骤一:先来一个页面

                 * 步骤二:onsubmit绑定事件

                 * 步骤三:得到用户名和密码的值

                 * 步骤四:判断用户名和密码是否为空

                 * 步骤五:正常提交

                 */

                //获取用户名值

                var username = document.getElementById("username").value;

                //获取密码值

                var password = document.getElementById("password").value;

                //获取确认密码值

                var password2 = document.getElementById("password2").value;

                //获取Email的值

                var email = document.getElementById("email").value;

                //获取出生日期的值

                var date = document.getElementById("date").value;

                //获取验证码值

                var yzm = document.getElementById("yzm").value;

                

                //判断

                if (username == "") {

                    //alert("用户名不能为空");

                    document.getElementById("sp1").innerHTML = "<font color='red'>用户名不能为空</font>";

                    return false;

                } else {

                    document.getElementById("sp1").innerHTML = "";

                }

                if (password == "") {

                    //alert("密码不能为空");

                    document.getElementById("sp2").innerHTML = "<font color='red'>密码不能为空</font>";

                    return false;

                } else {

                    document.getElementById("sp2").innerHTML = "";

                }

 

                if (password2 == "") {

                    document.getElementById("sp3").innerHTML = "<font color='red'>确认密码不能为空</font>";

                    return false;

                } else {

                    document.getElementById("sp3").innerHTML = "";

                }

                if (password != password2) {

                    document.getElementById("sp3").innerHTML = "<font color='red'>两次密码输入不同</font>";

                    return false;

                } else {

                    document.getElementById("sp3").innerHTML = "";

                }

 

                if (email == "") {

                    document.getElementById("sp4").innerHTML = "<font color='red'>Email不能为空</font>";

                    return false;

                } else {

                    document.getElementById("sp4").innerHTML = "";

                }

 

                if (date == "") {

                    document.getElementById("sp5").innerHTML = "<font color='red'>还未选择出生日期</font>";

                    return false;

                } else {

                    document.getElementById("sp5").innerHTML = "";

                }

 

                if (yzm == "") {

                    document.getElementById("sp6").innerHTML = "<font color='red'>验证码不能为空</font>";

                    return false;

                } else {

                    document.getElementById("sp6").innerHTML = "";

 

                }

                return true;

            }

            

            

            //定义数组

            var arr0 = ["昌平区","东城区","朝阳区","海淀区"];

            var arr1 = ["吉林市","长春市","四平市","辽源市"];

            var arr2 = ["青岛市","济南市","淄博市","东营市"];

            var arr3 = ["石家庄市","保定市","邢台市","廊坊市"];

            var arr4 = ["南京市","无锡市","徐州市","常州市"];

            

            //js数组没有二维的说法,但是数组里面可以存储任意类型

            var arr = [arr0,arr1,arr2,arr3,arr4];

            

            function selectCity(val){

                var arrCity=arr[val];

                

                document.getElementById("cityId").innerHTML="<option value=''>-----------</option>";

                

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

                    var cityName= arrCity[i];

                    //创建option标签

                    var opObj=document.createElement("option");

                    //创建节点对象

                    var ciObj= document.createTextNode(cityName);

                    //把具体的市放到option里面

                    opObj.appendChild(ciObj);

                    //获得市下拉对象

                    var cityObj= document.getElementById("cityId");

                    cityObj.appendChild(opObj);

                    

                }

                

            }

        </script>

    </head>

 

    <body>

        <div id="out">

            <div id="inner">

                <form action="success.html" method="get" onsubmit="return fsub()">

 

                    <table width="60%" align="center">

                        <tr>

                            <td colspan="3">

                                <font color="blueviolet" size="4">会员注册</font>

                                USER REGISTER

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">用户名:</td>

                            <td colspan="2">

                                <input type="text" id="username" name="username" size="30" />

                                <span id="sp1"></span>

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">密码:</td>

                            <td colspan="2">

                                <input type="password" id="password" name="password" size="30" />

                                <span id="sp2"></span>

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">确认密码:</td>

                            <td colspan="2">

                                <input type="password" id="password2" name="password2" size="30" />

                                <span id="sp3"></span>

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">Email:</td>

                            <td colspan="2">

                                <input type="text" id="email" name="email" size="30" />

                                <span id="sp4"></span>

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">性别:</td>

                            <td colspan="2">

                                <input type="radio" name="sex" value="1" checked="checked" />

                                <input type="radio" name="sex" value="0" />

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">出生日期:</td>

                            <td colspan="2">

                                <input type="date" id="date" name="date" />

                                <span id="sp5"></span>

                            </td>

                        </tr>

                        

                        <tr>

                            <td align="right">住址:</td>

                            <td colspan="2">

                                <select id="provinceId" onchange="selectCity(this.value)" style="width: 150px;">

                                    <option value="">-----------</option>

                                    <option value="0">北京</option>

                                    <option value="1">吉林省</option>

                                    <option value="2">山东省</option>

                                    <option value="3">河北省</option>

                                    <option value="4">江苏省</option>

                                </select>

                                <select id="cityId" style="width: 150px">

                                    <option value="">-----------</option>

                                </select>

                            </td>

                        </tr>

 

                        <tr>

                            <td align="right">验证码:</td>

                            <td colspan="2">

                                <input type="text" id="yzm" name="yzm" size="7" maxlength="4" />

                                <input type="image" src="../img/captcha.jhtml" />

                                <span id="sp6"></span>

                            </td>

                        </tr>

 

                        <tr>

                            <td colspan="3" align="center">

                                <input type="submit" width="100" value="注册" style="background: url(../img/register.gif)

                                 no-repeat
scroll
0
0
rgba(0, 0, 0, 0); height:35px;width:100px;color:white;" />

                            </td>

                        </tr>

 

                    </table>

 

                </form>

 

            </div>

        </div>

    </body>

 

</html>

小温

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: