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>
