zoukankan      html  css  js  c++  java

  • 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;
         80px;
        background-color: #8eb031;
        color: white;

    }
      #b1{height: 30px;
         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])
    复制代码
  • 相关阅读:
    At least one JAR was scanned for TLDs yet contained no TLDs
    {转} MJPG流媒体在HTML5的呈现方案
    {转}理解HTTP/304响应
    blueimp,预览遮罩范围控制
    快速生成mysql上百万条测试数据
    mysql插入文本文档及读取
    tomcat启动报错:注释指定的bean类.与现有的冲突.相同的名称和类
    csv的文件excel打开长数字后面位变0的解决方法
    UNIX或LINUX时间戳转时间
    Myeclipse更新SVNStatusSubscriber 时报告了错误。1 中的 0 个资源已经同步。
  • 原文地址：https://www.cnblogs.com/wangkun122/p/8191389.html
Copyright © 2011-2022 走看看