上节回顾：

1.前情回顾

    1. BOM
        window
            location.href = "https://www.sogo.com"
            location.reload()  // 重新加载当前页
            location.href
        DOM
            document
            
                1. 节点分为：
                    文档节点 document
                    文本节点 标签的文本
                    属性节点 id, class ...
                    标签节点 div,span, h1 ...
                    
                2. 寻找节点
                    1. 基本查找
                        标签名：document.getElementsByTagName
                        ID：    document.getElementByID
                        class名: document.getElementsByClassName
                    2. 间接查找
                        我的上一个标签： previousElementSibling
                        我的下一个标签： nextElementSibling
                        我的父标签：     parentElement
                        我的子标签：     children
                        我的第一个子标签：firstElementChild
                        我的最后一个子标签：lastElementChild

                2. 修改标签属性或样式
                
                    1. 修改文本信息
                        ele.innerText               获取文本节点的内容（包括子标签的文本）
                        ele.innerText="字符串"      修改标签的文本信息
                    2. 文档内容（HTML内容）
                        ele.innerHTML               获取文档内容
                        ele.innerHTML=“<h1>好</h1>” 赋值HTML内容
                    3. 修改样式
                        1. classList
                            ele.className               获取所有的class类名（字符串类型）
                            ele.classList               获取所有的class类名
                            ele.classList.contains(cls) 判断有没有某个class
                            ele.classList.add(cls)      添加一个class类名
                            ele.classList.remove(cls)   删除class类名
                            ele.classList.toggle(cls)   切换（有就删除，没有就添加）
                        2. ele.style.样式=""
                            注意：有中横线的CSS样式要转成驼峰形式
                            ele.style.backgroundColor="red"
                            
                    4. 属性
                        ele.attributes  获取所有的属性信息
                    
2. RegExp（正则） 求学要严谨

    1. 正则表达式不能加空格
    2. 当你设置了全局的g标志位，需要注意lastIndex  --> 每一次匹配上之后会把lastIndex设置为下一位索引值
    3. undefined他帮你转成"undefined"来做正则校验
上节回顾课堂笔记

今日内容： 

3. 今日内容
    1. 作业讲解+自定义模态框练习
    2. 事件
        常用事件：
            onfocus()
            onblur()
            onchange()事件 --> select联动的例子 
                                        1. selectEle.selectedIndex       --> 获取当前选中的option的索引值
                                        2. selectEle.options             --> 获取所有的option选项     
                                        3. selectEle.options.length=0    --> 清空所有的option选项
                                        
            键盘事件 --> jQuery讲个示例
        
        
        绑定事件的方式：  *****
            1. 在标签里面直接写on动作=func();
            2. 通过JS代码绑定事件 ele.click=function(){alert(123);}
            3. 基于已经存在的父标签来给子标签绑定事件，  --> 事件委托的方式
                
                
    3. 文档标签的创建
        
        引申出来的：
            script标签一般写在body标签的最下面，除非是文档加载之前就要运行的代码要放在head标签里 *****
今日内容课堂笔记
4. 今日作业



    1. 模态框里面的提交按钮要绑定事件
        1. 取值（通过 input标签.value 就能取值）
        2。 拿到值之后 拼接处一个tr标签
        3. tbody.appendChild(上面创建的tr标签)
    2. 删除按钮的事件
        1. 根据删除按钮找到当前行的tr
        2. 从tbody里面删掉这个tr (removeChild())
        
抽屉作业
今日作业课堂笔记

 

上节课的复习：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>复习</title>
</head>
<body>
<div id="d1" class="c1 c2 c3"> 第一层div
    <div>第二层Div
        <p>我是p标签</p>
    </div>
</div>
</body>
</html>
小例子1

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>昨天作业</title>
    <script>
        // 全选
        function checkAll() {
            // 找到所有的checkbox，全部选中
            // 1. 经过技术选型，决定使用.class方式查找标签
            var checkboxEles = document.getElementsByClassName("c1");
            // 2. 修改  eleObj.checked = true;
            for (var i=0;i<checkboxEles.length;i++) {
                checkboxEles[i].checked=true;
            }
        }

        // 反选
        function reverse() {
            // 找标签，判断
            // 1. 找标签（和上面一样）
            var checkboxEles = document.getElementsByClassName("c1");
            // 2. 判断 eleObj.checked 属性是true还是false
            // 如果是true; 则改为false;
            // 如果是false,则改为true;
//            for (var i=0;i<checkboxEles.length;i++) {
//                if (checkboxEles[i].checked){  // 已经选中的
//                    checkboxEles[i].checked=false;
//                }else {  // 没有选中的
//                    checkboxEles[i].checked=true;
//                }
//            }

            // 取反   ！（先按照上面的方式实现，再尝试一下使用取反的操作）
            for (var i=0;i<checkboxEles.length;i++) {
                checkboxEles[i].checked=!checkboxEles[i].checked;
            }
        }
        // 取消
        function cancleAll() {
            // 找到所有的checkbox，全部取消选中
            // 1. 经过技术选型，决定使用.class方式查找标签
            var checkboxEles = document.getElementsByClassName("c1");
            // 2. 修改  eleObj.checked = false;
             for (var i=0;i<checkboxEles.length;i++) {
                checkboxEles[i].checked=false;
            }
        }
    </script>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>技师姓名</th>
        <th>出生年</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td><input class="c1" type="checkbox"></td>
            <td>张建超</td>
            <td>85年</td>
        </tr>
         <tr>
            <td><input class="c1" type="checkbox"></td>
            <td>晓梅</td>
            <td>74年</td>
        </tr>
          <tr>
            <td><input class="c1" type="checkbox"></td>
            <td>李岩</td>
            <td>98年</td>
        </tr>
    </tbody>
</table>

<!--<label for="i1">技师1号</label>-->
<!--<input id="i1" type="checkbox" checked="checked">-->
<!--<label for="i2">技师2号</label>-->
<!--<input id="i2" type="checkbox">-->

<input type="button" value="全选" onclick="checkAll();">
<input type="button" value="反选" onclick="reverse();">
<input type="button" value="取消" onclick="cancleAll();">
</body>
</html>
作业讲解

 

正则的补充：

var p2=/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
undefined
s1
VM100:1 Uncaught ReferenceError: s1 is not defined
    at <anonymous>:1:1
(anonymous) @ VM100:1
var s1="alex1234"
undefined
s1
"alex1234"
p2.lastIndex
0
p2.test(s1)
true
p2.lastIndex
0
var p2=/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
undefined
s1
"alex1234"
p2.lastIndex
0
p2.test(s1)
true
p2.lastIndex
8
p2.test(s1)
false
p2.lastIndex
0
View Code

 

 

 

 

一、自定义模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义模态框</title>
    <style>
        .cover {
            /* 灰色的哪个背景 */
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left:0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 999;
        }
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            background-color: white;
            height: 400px;
            width: 600px;
            z-index: 1000;
            margin-left: -300px;
            margin-top: -200px;
        }
        .hide {
            display: none;
        }
    </style>
    <script>
        function showModal() {
            // 把.cover和.modal这两个div标签显示出来
            //  具体来说就是去掉这个两个标签的.hide 样式类
            // 1.找标签
//            var coverEles = document.getElementsByClassName("hide");
//            var coverEle = coverEles[0];
//            coverEle.classList.remove("hide");

            var coverEle = document.getElementsByClassName("cover")[0];
            coverEle.classList.remove("hide");

            // 显示白色筐
              var modalEle = document.getElementsByClassName("modal")[0];
            modalEle.classList.remove("hide");
        }
        function cancel() {
            var coverEle = document.getElementsByClassName("cover")[0];
            coverEle.classList.add("hide");

            // 隐藏白色筐
              var modalEle = document.getElementsByClassName("modal")[0];
            modalEle.classList.add("hide");
        }
    </script>
</head>
<body>

<input type="button" id="btn" onclick="showModal();" value="显示模态框">
<div class="cover hide"></div>
<div class="modal hide">
    <input type="text" placeholder="技师姓名">
    <input type="text" placeholder="出生年">

    <input type="button" value="提交">
    <input type="button" value="取消" onclick="cancel();">
</div>
</body>
</html>
模态框的例子

 

二、常用事件示例

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。
View Code
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>事件示例</title>
    <style>
        .c1{
            height: 300px;
            width: 300px;
            background-color: yellow;
        }
    </style>
    <script>
        function dbClick() {
            alert(123);
        }
        function f1(ths) {
            console.log(ths);
            ths.setAttribute("placeholder","");
        }
        function f2(ths) {
            ths.setAttribute("placeholder","霸王洗发水");
        }
    </script>
</head>
<body>
<div class="c1" ondblclick="dbClick();"></div>
<input type="text" placeholder="霸王洗发水" onfocus="f1(this);" onblur="f2(this);">
</body>
</html>
常用事件示例

 

三、创建文档标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>创建文档标签</title>
</head>
<body>
<div id="d1">

</div>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody id="t1">
    <tr>
        <td>1</td>
        <td>李</td>
        <td>客人</td>
    </tr>
    </tbody>
</table>
</body>
</html>
创建文档标签

1、

2、

3、

4、

 

 

四、select联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select联动</title>

</head>
<body>



<select name="" id="s1" onchange="loadData();">
    <option value="">请选择省份</option>

</select>

<select name="" id="s2">
    <option value="">请先选择省份</option>
</select>

    <script>
        var s1Ele = document.getElementById("s1");
        var data = {"河北": ["石家庄", "保定", "邯郸"], "湖南": ["长沙", "岳阳", "张家界"], "四川": ["成都", "绵阳", "攀枝花"]}
        // 把data里面的key都拿出来，生成option标签， 添加到s1这个select
        // 1.
        var str = "";
        for (var key in data) {
            console.log(key);
            // 2.
            var s = "<option>" + key + "</option>";
            console.log(s);
            str += s;
        }
        console.log(str);
        // 找到s1 select标签

        s1Ele.innerHTML=str;


        function loadData() {
            var s2Ele = document.getElementById("s2");
            s2Ele.options.length=0;  // 清空select下面的option
            // 自己用removeChild（）练习一下

            // 把data里面的key都拿出来，生成option标签， 添加到s1这个select
            var indexValue= s1Ele.selectedIndex;
            var optionELes = s1Ele.options;
            var key = optionELes[indexValue].innerText;
            var data2 = data[key];

            for (var i=0; i<data2.length;i++) {
                var optionEle = document.createElement("option");
                optionEle.innerText = data2[i];
                s2Ele.appendChild(optionEle);
            }
        }
    </script>
</body>
</html>
select联动

 

五、

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>键盘事件</title>
</head>
<body onkeydown="fl(event);">
<script>
    function fl(evl) {
        alert(evl.keyCode);//按下某个键时,先试一下按键的代码、
    }
</script>
</body>
</html>
键盘事件

 

六、

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>onload事件</title>
</head>
<body onload="f();">
<input type="text" value="haha" id="il">
<script>
    function f() {
        var ilEle=document.getElementById("il");
        alert(ilEle);
    }
</script>

</body>
</html>
onload事件

 

七、

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>鼠标事件</title>
    <style>
        .c1{
            height: 300px;
            width: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="c1" onmouseover="f();"></div>
<script>
    function f() {
        alert("红烧牛肉");
    }
</script>
</body>
</html>
鼠标事件

八、

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="x-ua-compatible" content="IE=edge">-->
    <title>onselect事件</title>
</head>
<body>
<input type="text" value="红烧茄子" id="il">
<textarea name="" id="" cols="30" rows="10" onselect="f2();">

</textarea>

<form action="" onsubmit="f3();">
    <input type="submit" value="提交">
</form>
<script>
    function f1(){
        alter("真香啊!");
    }
    function f2() {
        alter("再来一盘");
    }
    function f3() {
        alter("我一点都不饿");
    }
</script>
<script src="10.js"></script>
</body>
</html>
onselect事件
/**
 * Created by Administrator on 2017/12/29.
 */

    // 找标签
var i1Ele = document.getElementById("i1");
i1Ele.onselect = function () {
    alert("真香啊！");
}
10.js 文件

 九、事件绑定示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定示例</title>
</head>
<body>

<ul id="i1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
    <li>32</li>
    <li>33</li>
    <li>34</li>
    <li>35</li>
    <li>36</li>
    <li>37</li>
    <li>38</li>
    <li>39</li>
    <li>40</li>
    <li>41</li>
    <li>42</li>
    <li>43</li>
    <li>44</li>
    <li>45</li>
    <li>46</li>
    <li>47</li>
    <li>48</li>
    <li>49</li>
    <li>50</li>
    <li>51</li>
    <li>52</li>
    <li>53</li>
    <li>54</li>
    <li>55</li>
    <li>56</li>
    <li>57</li>
    <li>58</li>
    <li>59</li>
    <li>60</li>
    <li>61</li>
    <li>62</li>
    <li>63</li>
    <li>64</li>
    <li>65</li>
    <li>66</li>
    <li>67</li>
    <li>68</li>
    <li>69</li>
    <li>70</li>
    <li>71</li>
    <li>72</li>
    <li>73</li>
    <li>74</li>
    <li>75</li>
    <li>76</li>
    <li>77</li>
    <li>78</li>
    <li>79</li>
    <li>80</li>
    <li>81</li>
    <li>82</li>
    <li>83</li>
    <li>84</li>
    <li>85</li>
    <li>86</li>
    <li>87</li>
    <li>88</li>
    <li>89</li>
    <li>90</li>
    <li>91</li>
    <li>92</li>
    <li>93</li>
    <li>94</li>
    <li>95</li>
    <li>96</li>
    <li>97</li>
    <li>98</li>
    <li>99</li>
    <li>100</li>
</ul>

<script>
    // 传统写法
//    var liEles = document.getElementsByTagName("li");
//    for (var i=0;i<liEles.length;i++) {
//        liEles[i].onclick=function () {
//            // this 哪个标签触发的这个事件，this就指的谁哪个标签
//            alert(this.innerText);
//        }
//    }

    // 更好的方式
    var ulEle = document.getElementById("i1");
    ulEle.onclick=function (e) {  // 把事件本身当成参数传进来
        // event.target  // 点击的目标是谁
        console.log(e.target);
        var targetEle = e.target;
        alert(targetEle.innerText);
    }
</script>
</body>
</html>
事件绑定示例

 

十、

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>12 文档节点对象插入和删除</title>
</head>
<body>
<ul id="il">
    <li>111</li>
    <li>22</li>
</ul>
</body>
</html>
文章节点的插入和删除