前端之jQuery

浅浅的花香味﹌ 2021-11-05 02:42 342阅读 0赞

**    简介**

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。

它的宗旨就是：“Write less, do more.

找到div标签并给div标签设置为红色:
    
    // 原生js操作
    var d1Ele = document.getElementById('d1');
    d1Ele.style.color = 'red';
    
    // jQuery操作
    $('#d1').css('color','blue');

jQuery学什么?

- 查找标签
    - 修改属性样式
    - 事件
    - Ajax异步请求
    - 插件机制

js对象与jQuery对象的相互转化:

![1634606-20190603203033530-1425472628.png][]

**  jQuery基本选择器:**

id选择器：
    
    $("#id")
    标签选择器：
    
    $("tagName")
    class选择器：
    
    $(".className")
    配合使用：
    
    $("div.c1")  // 找到有c1 class类的div标签
    所有元素选择器：
    
    $("*")
    组合选择器：
    
    $("#id, .className, tagName")

### **层级选择器：** ###

x和y可以为任意选择器

$("x  y");// x的所有后代y（子子孙孙）
    $("x > y");// x的所有儿子y（儿子）
    $("x + y")// 找到紧挨在x后面的y
    $("x ~ y")// x之后所有的兄弟y

### **基本筛选器：** ###

:first // 第一个
    :last // 最后一个
    :eq(index)// 索引等于index的那个元素
    :even // 匹配所有索引值为偶数的元素，从 0 开始计数
    :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
    :gt(index)// 匹配所有大于给定索引值的元素
    :lt(index)// 匹配所有小于给定索引值的元素
    :not(元素选择器)// 移除所有满足not条件的标签
    :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

示例:

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
    $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
    $("li:not(.c1)")// 找到所有不包含c1样式类的li标签
    $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

** jQuery操作类属性:**

addClass();// 添加指定的CSS类名。
    removeClass();// 移除指定的CSS类名。
    hasClass();// 判断样式存不存在
    toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jQuery-3.4.1.js"></script>
        <style>
            .c1 {
         
                width: 400px;
                height: 400px;
                border-radius: 50%;
                border: 3px solid black;
            }
            .bg_red {
         
                background-color: red;
            }
            .bg_green {
         
                background-color: green;
            }
        </style>
    </head>
    <body>
    <div class="c1 bg_red bg_green"></div>
    </body>
    </html>

![1634606-20190603205812247-274800952.png][]

**模态框示例:**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.4.1.min.js"></script>
        <style>
            .cover {
         
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(128,128,128,0.3);
                z-index: 999;
            }
            .modal {
         
                position: fixed;
                top: 50%;
                left: 50%;
                width: 400px;
                height: 200px;
                margin-top: -100px;
                margin-left: -200px;
                z-index: 1000;
                background-color: white;
            }
            .hide {
         
                display: none;
            }
        </style>
    </head>
    <body>
    <button id="show">出来吧我的模态框</button>
    
    
    <div class="cover hide"></div>
    <div class="modal hide">
        <p>username:<input type="text"></p>
        <p>password:<input type="text"></p>
        <button id="cancel">代表人类消灭你!</button>
    </div>
    
    
    <script>
        let b1Ele = $('#show')[0];
        let $cEle = $('.cover');
        let $mEle = $('.modal');
        let b2Ele = $('#cancel')[0];
        b1Ele.onclick = function () {
            $cEle.removeClass('hide');
            $mEle.removeClass('hide');
        };
        b2Ele.onclick = function () {
            $cEle.addClass('hide');
            $mEle.addClass('hide');
        }
    </script>
    </body>
    </html>

效果:

![1634606-20190603210517404-1991221264.png][]

**表单筛选器:**

:text
    :password
    :file
    :radio
    :checkbox
    
    :submit
    :reset
    :button

表单对象属性:

:enabled
    :disabled
    :checked
    :selected

表单:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jQuery-3.4.1.js"></script>
    </head>
    <body>
    <form action="">
        <p><input type="text"></p>
        <p><input type="password"></p>
        <p><input type="date"></p>
        <p><input type="radio"></p>
        <p><input type="checkbox" name="hobby">篮球</p>
        <p><input type="checkbox" name="hobby">足球</p>
        <p><input type="checkbox" name="hobby" checked>双色球</p>
    
        <select name="" id="">
            <option value="">xxx</option>
            <option value="" selected>yyy</option>
            <option value="">zzz</option>
        </select>
        <p><input type="file"></p>
        <p><input type="button"></p>
        <p><input type="submit"></p>
        <p><input type="reset"></p>
    
    </form>
    </body>
    </html>

表单筛选器:

# 针对表单内的标签
    $('input[type="text"]')
    # 简化写法
    $(':text')
    
    # 找到所有被选中的checkbox
    $(':checkbox')  # 注意select框中默认selected标签也会被找到
    $('input:checkbox')

**筛选器方法:**

# 避免$('input:first')太麻烦
    $('input').first()
    
    $("#id").next()
    $("#id").nextAll()
    $("#id").nextUntil("#i2")
    
    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")
    
    $("#id").parent()
    $("#id").parents()  // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
    
    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们

**链式操作:**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jQuery-3.4.1.js"></script>
    </head>
    <body>
    <p id="p1">p1</p>
    <p>p2</p>
    </body>
    </html>
    
    
    $('#p1').css('color','red').next().css('color','blue'); 实现一行代码改变p1,p2的颜色

**find 方法:**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jQuery-3.4.1.js"></script>
    </head>
    <body>
    <div>
        <span></span>
        <p><a href=""></a></p>
        <span></span>
        <p></p>
    </div>
    </body>
    </html>
    
    $('div').find('p');  等价于$("div p")

**左侧菜单:**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>左侧菜单示例</title>
      <style>
        .left {
         
          position: fixed;
          left: 0;
          top: 0;
          width: 20%;
          height: 100%;
          background-color: rgb(47, 53, 61);
        }
    
        .right {
         
          width: 80%;
          height: 100%;
        }
    
        .menu {
         
          color: white;
        }
    
        .title {
         
          text-align: center;
          padding: 10px 15px;
          border-bottom: 1px solid #23282e;
        }
    
        .items {
         
          background-color: #181c20;
    
        }
        .item {
         
          padding: 5px 10px;
          border-bottom: 1px solid #23282e;
        }
    
        .hide {
         
          display: none;
        }
      </style>
    </head>
    <body>
    
    <div class="left">
      <div class="menu">
        <div class="item">
          <div class="title">菜单一</div>
          <div class="items">
            <div class="item">111</div>
            <div class="item">222</div>
            <div class="item">333</div>
        </div>
        </div>
        <div class="item">
          <div class="title">菜单二</div>
          <div class="items hide">
          <div class="item">111</div>
          <div class="item">222</div>
          <div class="item">333</div>
        </div>
        </div>
        <div class="item">
          <div class="title">菜单三</div>
          <div class="items hide">
          <div class="item">111</div>
          <div class="item">222</div>
          <div class="item">333</div>
        </div>
        </div>
      </div>
    </div>
    <div class="right"></div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    
    <script>
      $(".title").click(function (){  // jQuery绑定事件
        // 隐藏所有class里有.items的标签
        // $(".items").addClass("hide");  //批量操作
        // $(this).next().removeClass("hide");
    
        // jQuery链式操作
        $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
      });
    </script>
    
    左侧菜单栏

**获取位置**:

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
    position()// 获取匹配元素相对父元素的偏移
    scrollTop()// 获取匹配元素相对滚动条顶部的偏移
    scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jQuery-3.4.1.js"></script>
        <style>
            #p1 {
         
                position: relative;
                border: 3px solid black;
            }
            #p2 {
         
                position: absolute;
                top: 100px;
                left: 100px;
                border: 3px solid red;
            }
    
        </style>
    </head>
    <body>
    <div id="p1">ppp<p id="p2">ppp222</p></div>
    
    </body>
    </html>

**滚动条:**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jQuery-3.4.1.js"></script>
    </head>
    <body>
    <div style="height: 1000px;background-color: red"></div>
    <div style="height: 1000px;background-color: green"></div>
    </body>
    </html>
    
    
    $(window).scrollTop(0); 可把屏幕滚到顶端

**小火箭示例:**

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>位置相关示例之返回顶部</title>
      <style>
        .c1 {
         
          width: 100px;
          height: 200px;
          background-color: red;
        }
    
        .c2 {
         
          height: 50px;
          width: 50px;
    
          position: fixed;
          bottom: 15px;
          right: 15px;
          background-color: #2b669a;
        }
        .hide {
         
          display: none;
        }
        .c3 {
         
          height: 100px;
        }
      </style>
    </head>
    <body>
    <button id="b1" class="btn btn-default">点我</button>
    <div class="c1"></div>
    <div class="c3">1</div>
    <div class="c3">2</div>
    <div class="c3">3</div>
    <div class="c3">4</div>
    <div class="c3">5</div>
    <div class="c3">6</div>
    <div class="c3">7</div>
    <div class="c3">8</div>
    <div class="c3">9</div>
    <div class="c3">10</div>
    <div class="c3">11</div>
    <div class="c3">12</div>
    <div class="c3">13</div>
    <div class="c3">14</div>
    <div class="c3">15</div>
    <div class="c3">16</div>
    <div class="c3">17</div>
    <div class="c3">18</div>
    <div class="c3">19</div>
    <div class="c3">20</div>
    <div class="c3">21</div>
    <div class="c3">22</div>
    <div class="c3">23</div>
    <div class="c3">24</div>
    <div class="c3">25</div>
    <div class="c3">26</div>
    <div class="c3">27</div>
    <div class="c3">28</div>
    <div class="c3">29</div>
    <div class="c3">30</div>
    <div class="c3">31</div>
    <div class="c3">32</div>
    <div class="c3">33</div>
    <div class="c3">34</div>
    <div class="c3">35</div>
    <div class="c3">36</div>
    <div class="c3">37</div>
    <div class="c3">38</div>
    <div class="c3">39</div>
    <div class="c3">40</div>
    <div class="c3">41</div>
    <div class="c3">42</div>
    <div class="c3">43</div>
    <div class="c3">44</div>
    <div class="c3">45</div>
    <div class="c3">46</div>
    <div class="c3">47</div>
    <div class="c3">48</div>
    <div class="c3">49</div>
    <div class="c3">50</div>
    <div class="c3">51</div>
    <div class="c3">52</div>
    <div class="c3">53</div>
    <div class="c3">54</div>
    <div class="c3">55</div>
    <div class="c3">56</div>
    <div class="c3">57</div>
    <div class="c3">58</div>
    <div class="c3">59</div>
    <div class="c3">60</div>
    <div class="c3">61</div>
    <div class="c3">62</div>
    <div class="c3">63</div>
    <div class="c3">64</div>
    <div class="c3">65</div>
    <div class="c3">66</div>
    <div class="c3">67</div>
    <div class="c3">68</div>
    <div class="c3">69</div>
    <div class="c3">70</div>
    <div class="c3">71</div>
    <div class="c3">72</div>
    <div class="c3">73</div>
    <div class="c3">74</div>
    <div class="c3">75</div>
    <div class="c3">76</div>
    <div class="c3">77</div>
    <div class="c3">78</div>
    <div class="c3">79</div>
    <div class="c3">80</div>
    <div class="c3">81</div>
    <div class="c3">82</div>
    <div class="c3">83</div>
    <div class="c3">84</div>
    <div class="c3">85</div>
    <div class="c3">86</div>
    <div class="c3">87</div>
    <div class="c3">88</div>
    <div class="c3">89</div>
    <div class="c3">90</div>
    <div class="c3">91</div>
    <div class="c3">92</div>
    <div class="c3">93</div>
    <div class="c3">94</div>
    <div class="c3">95</div>
    <div class="c3">96</div>
    <div class="c3">97</div>
    <div class="c3">98</div>
    <div class="c3">99</div>
    <div class="c3">100</div>
    
    <button id="b2" class="btn btn-default c2 hide">返回顶部</button>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
      $("#b1").on("click", function () {
        $(".c1").offset({left: 200, top:200});
      });
    
    
      $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
          $("#b2").removeClass("hide");
        }else {
          $("#b2").addClass("hide");
        }
      });
      $("#b2").on("click", function () {
        $(window).scrollTop(0);
      })
    </script>
    </body>
    </html>
    
    返回顶部示例

**尺寸:**

height()
    width()
    innerHeight()
    innerWidth()
    outerHeight()
    outerWidth()

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jQuery-3.4.1.js"></script>
        <style>
            p {
         
                border: 3px solid red;
                padding: 10px 14px 12px 16px;
                margin: 10px 32px 31px 24px;
            }
        </style>
    </head>
    <body>
    
    <p>我会p标签</p>
    </body>
    </html>

![1634606-20190603221652653-1295180809.png][]

**文本操作:**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jQuery-3.4.1.js"></script>
    </head>
    <body>
    
    
    <div>div
        <span>div>span</span>
        <p>div>p
            <a href="">div>p>a</a>
        </p>
        <span>div>span</span>
    </div>
    </body>
    </html>

取内容:

![1634606-20190603222202738-18478061.png][]

设置内容, html()会显示标签效果,text不会:

![1634606-20190603222337973-1755770301.png][]

**获取用户输入框的文本值:**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jQuery-3.4.1.js"></script>
    </head>
    <body>
    <input type="text">
    </body>
    </html>

![1634606-20190603223210206-605056097.png][]

**注册示例:**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
    <form action="">
        <p><label for="i1">username:
            <input type="text" id="i1" name="username">
            <span class="errors"></span>
        </label></p>
        <p><label for="i2">password:
            <input type="password" id="i2" name="password">
            <span class="errors"></span>
        </label></p>
        <input type="submit" value="注册" id="d1">
    </form>
    <script>
        // 获取按钮标签
        var $b1Ele = $('#d1');
        // 给按钮标签绑定点击事件
        // 原生js  b1ELe.onclick = function(){}
        $b1Ele.click(function () {
            // 获取到用户输入的内容
            var $userName = $('#i1');
            var $passWord = $('#i2');
            // 判断上面标签的value是否为空
            if ($userName.val().length == 0){
                // 找到username对于的span标签添加提示信息
                $('.errors').first().text('用户名不能为空')
            }
            // 判断上面标签的value是否为空
            if ($passWord.val().length == 0){
                // 找到username对于的span标签添加提示信息
                $('.errors').last().text('密码不能为空')
            }
            return false;   // 取消submit标签的刷新事件,换成button提交则不用此操作
        })
    </script>
    </body>
    </html>

效果:

![1634606-20190604184238534-112610053.png][]

**属性操作:**

// 获取文本属性
    $('#d1').attr('s1')  // 获取属性值
    $('#d1').attr('s1','haha')  // 设置属性值
    $('#d1').attr({'num':50,'taidi':'gay'})  // 设置多个属性
    $('#d1').removeAttr('taidi')  // 删除一个属性
    
    // 获取check与radio标签的checked属性
    $('#i1').prop('checked')
    $('#i1').prop('checked',true)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
    <p id="d1">20岁超越30岁，40岁，50岁的人</p>
    <p>衣锦还乡</p>
    <p>技多不压身</p>
    
    
    <input type="checkbox" name="hobby" id="i1" checked>读书
    <input type="checkbox" name="hobby" id="i2">写字
    <input type="checkbox" name="hobby" id="i3">吹牛逼
    </body>
    </html>

查看属性,添加一个,多个属性:

![1634606-20190604185451194-1342262239.png][]

**文档处理:**

// 标签内部尾部追加元素
    $('#d1').append(pEle)
    $pEle.appendTo($('#d1'))
    
    // 标签内部头部添加元素
    $('#d1').prepend(pEle)
    $pEle.prependTo($('#d1'))
    
    // 标签外部下面添加元素
    $(A).after(B)// 把B放到A的后面
    $(A).insertAfter(B)// 把A放到B的后面
    
    // 标签外部上面添加元素
    $(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面
    
    // 替换标签
    replaceWith()  // 什么被什么替换
    replaceAll()  // 拿什么替换什么
    
    // 克隆事例
    <button id="b2">屠龙宝刀，点击就送</button>
    // clone方法加参数true，克隆标签并且克隆标签带的事件
      $("#b2").on("click", function () {
        $(this).clone(true).insertAfter(this);  // true参数
      });

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
    <span></span>
    <div>div
        <span>div>span</span>
        <p>div>p
            <a href="">div>p>a</a>
        </p>
        <span>div>span</span>
    </div>
    <span>span</span>
    <span>span</span>
    </body>
    </html>

标签尾部添加文本:                                                                标签头部添加文本:

![1634606-20190604191150585-838318349.png][]      ![1634606-20190604191710309-219106690.png][]

标签外部的上面添加文本:                                                  文本替换(前面被后面替换):

![1634606-20190604192139062-1212903478.png][]           ![1634606-20190604192628497-1559401214.png][]

克隆示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <style>
            button {
         
                background-color: pink;
            }
        </style>
    </head>
    <body>
    <button>屠龙宝刀，点击就送！</button>
    
    <script>
        // 第一种绑定事件的方式
        // $('button').click(function () {
         
        //
        // })
        //
        $('button').on('click',function () {
            $(this).clone(true).insertAfter(this);   //this相当于button; clone中如果不加true,只克隆文本,不克隆事件
        })
    
    </script>
    </body>
    </html>

效果:

![1634606-20190604193732651-1049518045.png][]

**事件:**

// hover事件
    $('p').hover(  // 写两个函数一个表示鼠标移进去，另一个标示鼠标移出来
      function () {
        alert('来啦，老弟')
      },
      function () {
        alert('慢走哦～')
      }
    )
    // input实时监听
        $('#i1').on('input',function () {
            console.log($(this).val())
        });
    
    // focus/blur 其他同理js事件
    
    // 取消标签默认的事件
    return false
    
    $('input').click(function (e) {
            alert(123);
            // return false
            e.preventDefault();
        });
    
    
    // 事件冒泡
    div>p>span  // 三者均绑定点击事件
    $("span").click(function (e) {
            alert("span");
            e.stopPropagation();  // 阻止事件冒泡
        });
    
    // 事件委托
    <button>按钮</button>
    <script src="jQuery-3.3.1.js"></script>
    <script>
        $('body').on('click','button',function () {
            alert(123)
        })

hover事件:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
    <p>来玩啊,老弟!</p>
    
    <script>
        $('p').hover(
            function () {
                alert('How Much?')
        },
            function () {
                alert("欢迎老板下次再来，记得我是4号哟!")
            }
        )
    </script>
    </body>
    </html>

input 框实时获取用户输入:

效果:

![1634606-20190604195124363-640951566.png][]

取消标签自带的事件:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
    <form action="">
        <input type="submit">
    </form>
    
    
    <script>
        $('input').click(function (e) {
            alert(123);
            // 1.return false
            e.preventDefault();
        })
    
    
    </script>
    </body>
    </html>

事件冒泡: 点击事件逐层往上执行,  e.stopPropagation()阻止事件冒泡

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
    <div>div
        <p>div>p
            <span>div>p>span</span>
        </p>
    </div>
    <script>
        $('div').click(function () {
            alert('div')
        });
        $('p').click(function (a) {
            alert('p');
            a.stopPropagation()
        });
        $('span').click(function (e) {
            alert('span');
    
        });
    </script>
    </body>
    </html>

事件委托: 将触发的事件委托给内部某个标签去执行,初始化及动态添加的标签都可执行

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
    <button>我是23号技师，很高兴为您服务!</button>
    
    <script>
        // $('button').click(function () {
         
        //     alert(123)
        // })
    
        // 事件委托
        $('body').on('click','button',function () {
            alert(123)
        })
    
    </script>
    </body>
    </html>

效果:

![1634606-20190604200954381-1559167295.png][]

**文档加载:**

第一种方式:

$(document).ready(function()\{  
// 在这里写你的JS代码...  
\})

第二种方式:

$(function()\{  
// 你在这里写你的代码  
\})

第三种方式:

直接在body内部最下方书写代码

** jquery动态效果:**

// 标签记得设置高和宽
    
    $('img').hide(5000)
    $('img').show(5000)
    
    $('img').slideDown(5000)
    $('img').slideUp(5000)
    
    $('img').fadeIn(5000)
    $('img').fadeOut(5000)
    $('img').fadeTo(5000,0.4)

**each 循环:**

$.each(array,function(index){
      console.log(array[index])
    })
    
    $.each(array,function(){
      console.log(this);
    })
    
    // 支持简写
    $divEles.each(function(){
      console.log(this)  // 标签对象
    })

**标签存储数据data():**

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
    $("div").data("k");//返回第一个div标签中保存的"k"的值
    $("div").removeData("k");  //移除元素上存放k对应的数据

**    **

转载于:https://www.cnblogs.com/sima-3/p/10970581.html

[1634606-20190603203033530-1425472628.png]: /images/20211104/9c763e731e904d608f15b4ea686520b8.png
[1634606-20190603205812247-274800952.png]: /images/20211104/0fe1ebb1f2e34bf589db3e9bf16488cd.png
[1634606-20190603210517404-1991221264.png]: /images/20211104/3cfc3c61029140f98a9d8e560e059ff5.png
[1634606-20190603221652653-1295180809.png]: /images/20211104/8bd243a83a604dd594bafe164a2e719e.png
[1634606-20190603222202738-18478061.png]: /images/20211104/e45e4ba2f93e4174af24da44257aef8a.png
[1634606-20190603222337973-1755770301.png]: /images/20211104/514ad363ec584760a08b005dfb40b17e.png
[1634606-20190603223210206-605056097.png]: /images/20211104/85d0210e12e14bab868b66d4f4657150.png
[1634606-20190604184238534-112610053.png]: /images/20211104/a8b638c652ee4d6685ee94b34d828017.png
[1634606-20190604185451194-1342262239.png]: /images/20211104/103c345576fe4dea88ad0b8ad0b9714f.png
[1634606-20190604191150585-838318349.png]: https://img2018.cnblogs.com/blog/1634606/201906/1634606-20190604191150585-838318349.png
[1634606-20190604191710309-219106690.png]: /images/20211104/963c53ced37647bf87f5b2e3bbe3d874.png
[1634606-20190604192139062-1212903478.png]: https://img2018.cnblogs.com/blog/1634606/201906/1634606-20190604192139062-1212903478.png
[1634606-20190604192628497-1559401214.png]: /images/20211104/072814e8fc5345829a4f86efe37a856e.png
[1634606-20190604193732651-1049518045.png]: /images/20211104/1241df1634fb48aeb85568f5182728c8.png
[1634606-20190604195124363-640951566.png]: /images/20211104/75eb8c2251464c3f85b6aba982ac5adf.png
[1634606-20190604200954381-1559167295.png]: /images/20211104/6485c311d67945feb474dbd6b77eaba0.png