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>
each用法实例 反选

 

 //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事件组合示例:

 

事件绑定

  1. .on( events [, selector ],function(){})
  • events: 事件
  • selector: 选择器(可选的)
  • function: 事件处理函数

移除事件(这个不常用)

  1. .off( events [, selector ][,function(){}])

off() 方法移除用[ .on()绑定的事件处理程序。

  • events: 事件
  • selector: 选择器(可选的)
  • function: 事件处理函数

阻止后续事件执行

  1. 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>
打印出100个li中被选中的

 

动画效果

复制代码
// 基本
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])
复制代码

 

posted on 2018-01-04 18:50  王大拿  阅读(147)  评论(0编辑  收藏  举报

导航