JavaScript入门（二）

最新推荐文章于 2020-09-09 11:19:06 发布

jiangtea

最新推荐文章于 2020-09-09 11:19:06 发布

阅读量346

点赞数

分类专栏： javaee 文章标签： javascript

本文链接：https://blog.csdn.net/jiangtea/article/details/76099764

版权

javaee 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、标签<thead>和<tbody>的使用，实现不同行不同颜色：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload = function(){
                var tbEle = document.getElementById("tbl");
                //获取tbody的行数
                var len = tbEle.tBodies[0].rows.length;
                //body的行数遍历
                for(var i = 0;i < len ; i ++){
                    if (i%2 == 0){
                        //设置背景色
                        tbEle.tBodies[0].rows[i].style.backgroundColor = "pink";
                    }else{
                        tbEle.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>

这里写图片描述

2、事件onmouseover和onmouseout的使用，实现鼠标移上去的那行，哪行背景颜色变色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function changeColor(id,flag){
                if(flag == "over"){
                    document.getElementById(id).style.backgroundColor = "red";
                } else if(flag == "out"){
                    document.getElementById(id).style.backgroundColor = "white";
                }   
            }
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr onmouseover="changeColor('tr1','over')" onmouseout = "changeColor('tr1','out')" id="tr1">
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr onmouseover="changeColor('tr2','over')" onmouseout = "changeColor('tr2','out')" id="tr2">
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr onmouseover="changeColor('tr3','over')" onmouseout = "changeColor('tr3','out')" id="tr3">
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr onmouseover="changeColor('tr4','over')" onmouseout = "changeColor('tr4','out')" id="tr4">
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr onmouseover="changeColor('tr5','over')" onmouseout = "changeColor('tr5','out')" id="tr5">
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr onmouseover="changeColor('tr6','over')" onmouseout = "changeColor('tr6','out')" id="tr6">
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

3、事件小结
这里写图片描述
onfocus/onblur:聚焦/离焦事件，用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件。
onkeydown/onkeypress：搜索引擎使用较多。
onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove：。
onsubmit：表单提交事件，有返回值，控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件。

4、复选框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function checkAll(){
                var checkAllEle = document.getElementById("checkAll");
                if(checkAllEle.checked == true){//如果选中就都选中
                    var checkOnes = document.getElementsByName("checkOne");
                    for(var i = 0; i < checkOnes.length ;i ++){
                        checkOnes[i].checked = true;
                    }
                }else{//如果不选中就都不选中
                    var checkOnes = document.getElementsByName("checkOne");
                    for(var i = 0; i < checkOnes.length ;i ++){
                        checkOnes[i].checked = false;
                    }
                }
            }
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" >
            <thead>
                <tr>
                    <td colspan="4">
                        <input type="button" value="添加" />
                        <input type="button" value="删除" />
                    </td>
                </tr>
                <tr>
                    <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>4</td>
                    <td>赵六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

这里写图片描述

5、javascript的DOM
Document:整个html文件都成为一个document文档；
Element:所有的标签都是Element元素；
Attribute：标签里面的属性；
Text：标签中间夹着的内容为text文本；
Node:document、element、attribute、text统称为节点node。

5.1、Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
这里写图片描述
注意：
getElementsByName()和getElementsByTagName()两个方法获取之后需要遍历！
创建文本节点：document.createTextNode()。
创建元素节点：document.createElement()。

5.2、Element对象
我们所认知的html页面中所有的标签都是element元素。

element.appendChild():向元素添加新的子节点，作为最后一个子节点。

element.firstChild:返回元素的首个子节点。

element.getAttribute():返回元素节点的指定属性值。

element.innerHTML:设置或返回元素的内容。

element.insertBefore():在指定的已有的子节点之前插入新节点。

element.lastChild:返回元素的最后一个子元素。

element.setAttribute():把指定属性设置或更改为指定值。

element.removeChild():从元素中移除子节点。

element.replaceChild():替换元素中的子节点。

5.3、Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute。
这里写图片描述

5.4、动态添加城市

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload = function(){
                document.getElementById("btn").onclick = function(){
                    var ulEle = document.getElementById("ul1");
                    //创建文本节点
                    var textNote = document.createTextNode("深圳");
                    //创建元素节点
                    var liEle = document.createElement("li");
                    //添加
                    liEle.appendChild(textNote);
                    ulEle.appendChild(liEle);
                }
            }
        </script>
    </head>
    <body>
        <input type = "button" value = "添加城市" id = "btn"/>
        <ul id="ul1">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
    </body>
</html>

6、城市二级联动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <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){
                var cityEle = document.getElementById("city");
                cityEle.options.length = 0;
                for(var i = 0;i < cities.length; i ++ ){
                    if(val == i){
                        //省份下的遍历城市
                        for(var j = 0;j < cities.length; j ++ ){
                            var textNode = document.createTextNode(cities[i][j]);
                            var opEle = document.createElement("option");
                            opEle.appendChild(textNode);
                            cityEle.appendChild(opEle);
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
            <form method="get" action="#" onsubmit="return checkForm()"
                <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>
            </form>
        </table>
    </body>
</html>

这里写图片描述

7、javascript内置对象

Js Array, Js Boolean, Js Date, Js Math, Js Number, Js String, Js RegExp

7.1、Array对象
这里写图片描述

数组的特点：长度可变！数组的长度=最大角标+1

7.2、Boolean对象
这里写图片描述
如果value 不写，那么默认创建的结果为false.

7.3、Date对象
new Date().getTime()解决浏览器缓存问题

7.4、Math和number对象
与java里面的基本一致。

7.5、String对象

match():找到一个或多个正则表达式的匹配。
substr():从起始索引号提取字符串中指定数目的字符。
substring():提取字符串中两个指定的索引号之间的字符。

<script>
    var str = "-a-b-c-d-e-f-";
    var str1 = str.substr(2,4);//-b-c
    var str2 = str.substring(2,4);//-b
</script>

7.6、RegExp对象
正则表达式对象
test : 检索字符串中指定的值。返回 true 或 false。

8、全局函数
全局属性和函数可用于所有内建的 JavaScript 对象。
这里写图片描述

<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.baidu.com";
    //alert(encodeURI(str1));//http://www.baidu.com
    //alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.baidu.com
    //alert(decodeURI(encodeURI(str1)));//http://www.baidu.com
    //alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.baidu.com

    var str2 = "alert('abc')";
    //alert(str2);
    eval(str2);
</script>

jiangtea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门（二）

1、标签<thead>和<tbody>的使用，实现不同行不同颜色：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var tb
复制链接

扫一扫