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

事件绑定

.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>

打印出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])

查看全文

相关阅读:
ruby 二进制转十进制 Integer("0b101") = 5
开始菜单和我的文档的我的图片及我的音乐变成 my pictrues 正常图标了
 ruby watir 莫名其妙的错误
 Excel SaveAS是去掉提示框
 apache && jboss安装
 ruby require include的区别
 ruby控制鼠标
 This error is raised because the column 'type' is reserved for storing the class in case of inheritance
用正则表达式限制文本框只能输入数字,小数点,英文字母,汉字等各类代码
 ASP.NET 如何动态修改 Header 属性如添加 Meta 标签 keywords description!

原文地址：https://www.cnblogs.com/wangkun122/p/8191389.html