day 56 jQuery学习
1.补充：each
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素
$.each() 是调用jQuery中的each方法 用法 如 $.each($(':checkbox'),function( ){ 注意function(i,v) 里边可以加这两个参数，代表索引，对象
与$(selector).each() 这个是调用这和个对象的each()方法 如 $(':checkbox').each(function () {
用each 方法完成反选
$('#x2').on('click',function () {
$.each($(':checkbox'),function(){
//each方法，从checkbox列表中依次取出每个checkbox对象，然后对其进行操作
console.log(this);
if ($(this).prop('checked')===false)//判断checkbox框中是否为选中，是的话就执行下一段
{
$(this).prop('checked',true);
}else{$(this).prop('checked',false);}
} );
下有重要代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </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" value="1" ></td> <td>alex</td> <td>18</td> </tr> <tr> <td ><input class="c1" type="checkbox" value="2" ></td> <td>agon</td> <td>18</td> </tr> <tr> <td ><input class="c1" type="checkbox" value="3" ></td> <td>haha</td> <td>18</td> </tr> </tbody> </table> <input id="x1" type="button" value="全选" > <input id='x2' type="button" value="反选" > <input id="x3" type="button" value="取消" > <script src="../jquery-3.2.1.min.js"></script> <script> $('#x1').on('click',function () { $(':checkbox').prop('checked',true); }); // $('#x3').on('click',function () { $('.c1').val([]); 传统写法 但是一般true 或false的用prop $('#x3').on('click',function () { $(':checkbox').prop('checked',false); }); //each方法，从checkbox列表中依次取出每个checkbox对象，然后对其进行操作 // 反选方法1： $('#x2').on('click',function () { $(':checkbox').each(function () { this.checked=!this.checked; //this就是指的是当前取出的对象 // }); //下边是反选方法2 $('#x2').on('click',function () { $.each($(':checkbox'),function(){ //each方法，从checkbox列表中依次取出每个checkbox对象，然后对其进行操作 console.log(this); //this 指的是当前被each到的对像 if ($(this).prop('checked')===false){ $(this).prop('checked',true); }else{$(this).prop('checked',false);} } ); }); </script> </body> </html>
//return false 能够起到当出现 3 时候就停止循环return false;
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <script src="jquery-3.2.1.min.js"></script> <script> $.each($('p'),function(){ if ($(this).text()==="3"){ //return false 能够起到当出现 3 时候就停止循环 return false; } else{console.log(this);} }) </script> </body> </html>
- 如果一个jQuery查找的对象被多次用到，我们可以用变量把它保存起来，减少重复查找
还有就是存到变量里， 多次查找调用不会飘黄报错，否则会飘黄
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$('ul').append(lielem); 注意被放进去的对象是DOM对象的形式放进去
$(A).appendTo(B)// 把A追加到B 注意 To 中的 T 是大写
$(lielem).appendTo($('ul'));
append(content)
关于append中可以插入的从内容详解
可以是一下三种的任意一种
HTML 元素 如 "<p>你好</p>"
jQuery 对象 如 $('input[typt="checkbox "]')
DOM 元素 如 ulElem
详细解法
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文档操作</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script src="jquery-3.2.1.min.js"></script> <script> //在jQuery中最常用的DOM方法就是这个了*****，其他的不怎么用 //先创建一个li标签 var lielem=document.createElement('li'); //给li标签里面放值 lielem.innerText='5'; //用append方法放进去 注意 被放进去的对象是 以 DOM对象 的形式放进去的 $('ul').append(lielem); </script> </body> </html>
添加到指定元素内部的前面 这个的用法和append的用法一致 只不过是往前边插入
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
如： var pelem=document.createElement('p');
pelem.innerText='我是外部的P';
$('ul').after(pelem);
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
用法 $('li:first').remove() 删除第一个li标签
empty()// 删除匹配的元素集合中所有的子节点。
例子：
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
关于触发事件的绑定的重要代码******
// 不能用$('.delete')来绑定这个事件，因为，开始绑定，如果又新增了一行则， //这一行的.delete是无效的， 所以要用tbody 来绑定删除事件（相当于表身体的全局），以便新增后也能用
// 用tbody 绑定的用法要记住
$('tbody').on('click','.delete',function () { $(this).parent().parent().remove();
重要代码（内涵事件委托冒泡算法）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文档操作示例</title> </head> <body> <button id="b1">新增</button> <table border="1" id="t1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>杠娘</td> <td> <input type="button" value="编辑"> <input class="delete" type="button" value="删除"> </td> </tr> <tr> <td>2</td> <td>Alex</td> <td>吹牛逼</td> <td> <input type="button" value="编辑"> <input class="delete" type="button" value="删除"> </td> </tr> <tr> <td>3</td> <td>Yuan</td> <td>日天</td> <td> <input type="button" value="编辑"> <input class="delete" type="button" value="删除"> </td> </tr> </tbody> </table> <script src="jquery-3.2.1.min.js"></script> <script> $('#b1').on('click',function(){ var trelem=document.createElement('tr'); trelem.innerHTML='<td>4</td> <td>Yuan</td> <td>日天</td> <td> <input type="button" value="编辑"> <input class="delete" type="button" value="删除"> </td>'; $('tbody').append(trelem); }); // 不能用$('.delete')来绑定这个事件，因为，开始绑定，如果又新增了一行则， //这一行的.delete是无效的， 所以要用tbody 来绑定删除事件，以便新增后也能用 $('tbody').on('click','.delete',function () { $(this).parent().parent().remove(); }) </script> </body> </html>
替换
replaceWith()
用法：
$('p').replaceWith(spanElem) p 被后边的 spanelem对像替代
$("p").replaceWith("<b>Hello world!</b>");
replaceAll()
提示：replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。
克隆
clone()// 参数
用法：$(this).clone().inertAfter(this) 其中有参数 不写的话默认是false 写上true的话规定需也复制事件处理程序。
克隆示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#b1{height: 30px;
width: 80px;
background-color: #8eb031;
color: white;
}
#b1{height: 30px;
width: 80px;
background-color: darkorange;
color: white;
}
</style>
<body>
<button id="b1" class="button" >屠龙宝刀，点击就送</button>
<button id="b2" class="button1" >屠龙宝刀，点击就送11</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$('#b1').on('click',function () {
$(this).clone().insertAfter(this)
//不写参数默认数false 只是克隆内容，不复制事件处理程序，
// 就是他绑定的方法不被克隆
});
$('#b2').on('click',function () {
$(this).clone(true).insertAfter(this)
// 规定需复制事件处理程序。 也就是被克隆的带有点击克隆的功能
})
</script>
</body>
</html>
事件
常用事件
click(function(){...})
hover(function(){...}) 这个不可以用事件绑定方法
blur(function(){...})
focus(function(){...})
change(function(){...}) 常用于监控select 选择框中的变化
keyup(function(){...})
用法 jQurey对象.click(function(){.........})
如 $('input.delete').click(function(){......})
常用的还是 即下边的事件绑定： jQurey对象.on('动作 如 click',function(){.........})
keydown和keyup事件组合示例：
事件绑定
.on( events [, selector ],function(){})
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
移除事件（这个不常用）
.off( events [, selector ][,function(){}])
off() 方法移除用[ .on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等 如登录页面 不提交即点提交后不刷新提交到后台去
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法： 以后写jQuery代码都要加这一局
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
文档加载完绑定事件，并且阻止默认事件发生：
登录校验示例事件委托(常用在触发事件的标签过多，或者被触发事件的标签在创建完之后还不存在的情况下)
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例：（如100个li 中显示点击的那个li的innertext内容，还有就是表格操作中新增的行的删除功能能够使用）
表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
详见上边的例子
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <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 src="jquery-3.2.1.min.js"></script> <script> $(document).ready(function () { $('ul').on('click',function (event) { console.log(event.target);//这个代表被选中的对象 event事件 target目标 var clickedli=event.target; alert(clickedli.innerText); }) }) </script> </body> </html>
动画效果
// 基本
show([s,[e],[fn]]) 出现
hide([s,[e],[fn]]) 消失
toggle([s],[e],[fn]) 里边可以放时间毫秒 如 $('img').toggle(3000) 三秒内逐渐消失
// 滑动
slideDown([s],[e],[fn]) 从上往下放下
slideUp([s,[e],[fn]]) 向上收起
slideToggle([s],[e],[fn]) 放下的则收起，收起的点击则放下
// 淡入淡出
fadeIn([s],[e],[fn])··出现
fadeOut([s],[e],[fn]) 消失
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义
animate(p,[s],[e],[fn])
