day 53 js学习之

---恢复内容开始---

1.昨日作业讲解

弄一个上图一样的选择器，可以全选，可以反选，取消

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*table{border: 2px solid black}*/

    </style>

    <script>

        //写一个函数 当触发按钮的时候执行这个函数

        function quanxuan(){

            //全选，先找出按钮对象

            var qelems=document.getElementsByClassName('c1');

            //循环取出所有的所有的对象，并将他的checked属性写为true,

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

                //checked 属性 为true的时候选中，是false时候取消选中

                qelems[i].checked=true;

            }

        }

        function fanxuan(){

            //全选，先找出按钮对象

            var qelems=document.getElementsByClassName('c1');

            //循环取出所有的所有的对象，并将他的checked属性写为true,

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

                //checked 属性 为true的时候选中，是false时候取消选中

                //在循环中找出属性为true的设置为false  将为false的设置为true

                if (qelems[i].checked==true){qelems[i].checked=false;}else

                 {qelems[i].checked=true;}

            }

        }

        function quxiao(){

            var qelems=document.getElementsByClassName('c1');

            //循环取出所有的所有的对象，并将他的checked属性写为false,

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

                //checked 属性 为true的时候选中，是false时候取消选中

                qelems[i].checked=false;

        }}

    </script>

</head>

<body>

<!--table 里边的border是特殊属性，不是style 里的， 不能直接在哪儿设置-->

<table  border="8">

    <thead>

    <tr>

        <th>序号</th>

        <th>姓名</th>

        <th>年龄</th>

    </tr>

    </thead>

    <tbody>

    <tr>

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

        <td>alex</td>

        <td>18</td>

    </tr>

    <tr>

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

        <td>agon</td>

        <td>18</td>

    </tr>

    <tr>

        <td ><input class="c1" type="checkbox" class="c2" ></td>

        <td>haha</td>

        <td>18</td>

    </tr>

    </tbody>

</table>

<input type="button" value="全选"  onclick="quanxuan();">

<input type="button" value="反选"  onclick="fanxuan();">

<input type="button" value="取消"  onclick="quxiao();">

</body>

</html>

代码

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。 onclick="f1();"  单击就调用函数f1()

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

onfocus        元素获得焦点。               // 练习：输入框

onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

onkeypress     某个键盘按键被按下并松开。

onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。

onmousemove    鼠标被移动。

onmouseout     鼠标从某元素移开。

onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。

onsubmit      确认按钮被点击，使用的对象是form。

this:(重要常在函数中用)

<!--注意此时 this 就能代表这个input标签对象 f1(this) 中的 this 是实参-->

<input type="text" placeholder="霸王洗发水" onfocus="f1(this)" onblur="f2()">

例子：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>洗发</title>

</head>

<body>

<!--注意此时 this 就能代表这个input标签对象 f1(this) 中的 this 是实参-->

<input type="text" placeholder="霸王洗发水" onfocus="f1(this)" onblur="f2(this)">

</body>

<script>

    //这是一个函数  这时候的ths 是形参

    function f1(ths){
　　　　//给ths 添加 placeholder=''的属性

        ths.setAttribute('placeholder','')

    }

       function f2(ths){

　//给ths 添加 placeholder='霸王洗发水'   的属性

ths.setAttribute('placeholder','霸王洗发水') } 

</script> 

</html>

例子：双击改变图案的形状

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>事件实例</title>

    <style>

        div{background-color:rosybrown;

            width:200px;

            height:500px;

            }

    </style>

</head>

<body>

<!--实现双击这个块级标签就触发函数f1()-->

<div ondblclick="f1();"></div>

<script>

    function f1(){

        var divelem=document.getElementsByTagName('div');

        //实现双击调用函数f1() 改变div颜色

        divelem[0].style.backgroundColor='red';

    }

</script>

</body>

</html>

常用的那些

操作内容

innerText  文本

innerHTML  HTML内容

value  值

文档节点的增删改查

增

createElement(name)  创建节点（标签）

appendChild( 节点名称，不用加引号 ) 末尾添加节点，并返回新增节点
insertBefore()  参照节点之前插入节点，两个参数：要插入的节点和参照节点

例子：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>创建文档标签</title>

</head>

<body>

<table border="2">

    <thead>

    <tr>

        <th>id</th>

        <th>姓名</th>

        <th>爱好</th>

    </tr>

    </thead>

    <tbody id="t1">

    <tr >

        <td> 1</td>

        <td> 晓梅</td>

        <td> 不知道</td>

    </tr>

    </tbody>

</table>

<script>

    function f(){

        //找到tbody标签

    var trelem=document.getElementById('t1');

    //创建一个tr标签

    var tr2=document.createElement('tr');

       //创建一个td标签

    var td1=document.createElement('td');

       //在td标签中写入内容

    td1.innerText='2';

    //将td 放到tr中去

    tr2.append(td1);

    //将tr 放到ｂｏｄｙ　中去

    trelem.append(tr2);

//    //可以通过这种方式给<tr></tr> 标签网里边添加内容

//    tr2.innerHTML='<td>2</td><td> 李岩</td><td> 洗脚</td>';

    }

</script>

</body>

</html>

给文档增加一行

删

查找到要删除的元素

获取它的父元素

使用removeChild()方法删除

改

第一种方式:

使用上面增和删结合完成修改

第二种方式:

使用setAttribute();方法修改属性

使用innerHTML属性修改元素的内容

一些属性标签的修改‘

3. 创建标签
1. doucument.creatElement("div") --> 要创建什么标签括号里面就写什么
2. 设置标签内容
1. eleObj.innerHTML = "<p>P标签</p>"
2. eleObj.innerText = "标签中间的文本"

3. 标签属性
1. input标签相关
1. inputEle.value --> 获取input框的输入值
2. inputEle.value = "请输入xxx" --> 设置input框的值
2. checkbox标签相关
1. checkboxEle.checked --> 返回true或false
2. checkboxEle.checked = true --> 选中该checkbox
3. select标签相关
1. selectObj.options --> 获取所有的option选项（数组）
2. selecObj.selectedIndex --> 获取选中的option的索引值
3. selecObj.options.length=0 --> 快速清空option

查

使用之前介绍的方法.

重要例子：select联动：

选择省连动的市也能够根这出现

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>联动</title>

</head>

<body>

<select name="" id="s1"  onchange="f();" >

    <option value="">请选择省份</option>

    <!--<option value="">河北</option>-->

    <!--<option value="">湖南</option>-->

    <!--<option value="">四川</option>-->

</select>

<select name="" id="s2">

<option value="" >请先选省份</option>

</select>

<script>

    var s1='';

    var data={'河北':['石家庄','保定','邯郸'],'湖南':['长沙','岳阳','其他'],'四川':['攀枝花']};

    //吧var中的key 都拿出来，生成option标签，放到s1的select中去

    //1吧可以都拿出来

    for (var key in data){

        console.log(key);

        //在for循环中创建字符串Op  里边写的是option标签

        var op='<option>'+key+'</option>';

        //将所有标签都循环加到开始为空的一个字符串s1中去

        s1+=op;

    }

    var celeEle=document.getElementById('s1');

    //给省那里加上这一个字符串，用innerHTML写入会生成三个省的option标签

    celeEle.innerHTML=s1;

    s2='';

    function f(){

        var xianshishi=document.getElementById('s2');

        //每次选择都先将市的长度置为0

        xianshishi.options.length=0;

        //得到option的列表

        var ops=celeEle.options;

        console.log(ops);

    //将选择的省的下标取到

        var selin=celeEle.selectedIndex;

        console.log(selin);

    //根据下下标取出选择的省的option标签  如 <option>河北</option>

        var xuansheng=ops[selin];

    //取出里边的字  如 河北

        var shengtext=xuansheng.innerText;

        console.log(shengtext);

        //根据选的省 联想出市，

//        var sheng=document.getElementById('s2');

        //从字典中根据键（省）取出值（市的列表）

            var shi=data[shengtext];

            console.log(shi);

        //在for循环中将市写成option的格式，与省的写法一样

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

            var shi1='<option>'+shi[i]+'</option>';

            console.log(shi1);

            s2+=shi1;

        }

        xianshishi.innerHTML=s2;

    }

</script>

</body>

</html>

选择省，关联出他下边的市

重要例子：事件的绑定，有event

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>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');

////    console.log(lieles);

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

////一个一名函数，

//        lieles[i].onclick=function () {

////this  代表被选择的

//            alert(this.innerText);

//

//        };

//    }

        var a=document.getElementById('i1');

        a.onclick=function(event){

            //把事件自身点击事件当成参数传进来

            //            在控制台上打印event.target 事件  目标

            console.log(event.target);

        var targetEle=event.target;

        alert(targetEle.innerText);

        }

    </script>

</body>

</html>

事件的绑定