前端之JQuery

時間  2019-12-09
標籤 前端 jquery 欄目 JQuery 简体版
原文   原文鏈接

摘要：

  • jQuery初識

  • jQuery具體使用方法

  • jQuery初識

  1. jQuery介紹：
    jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
    使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，可以極大地簡化JavaScript編程。它的宗旨就是：「Write less, do more.「
  2. 爲什麼要用JQuery？
    #     jQuery是一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面加載速度。
    #     豐富的DOM選擇器,jQuery的選擇器用起來很方便，好比要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再好比要將一個表格的隔行變色，jQuery也是一行代碼搞定。
    #     鏈式表達式。jQuery的鏈式操做能夠把多個操做寫在一行代碼裏，更加簡潔。
    #    事件、樣式、動畫支持。jQuery還簡化了js操做css的代碼，而且代碼的可讀性也比js要強。
    #    Ajax操做支持。jQuery簡化了AJAX操做，後端只需返回一個JSON格式的字符串就能完成與前端的通    信。
    #    跨瀏覽器兼容。jQuery基本兼容瞭如今主流的瀏覽器，不用再爲瀏覽器的兼容問題而傷透腦筋。
    #    插件擴展開發。jQuery有着豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗  口等等基本前端頁面上的組件都有對應插件，而且用jQuery插件作出來的效果很炫，而且能夠根據本身須要去改寫和封裝插件，簡單實用。
  3. jQuery的版本介紹、下載和安裝：
    #    版本： 
    1.x：兼容IE678,使用最爲普遍的，官方只作BUG維護，功能再也不新增。所以通常項目來講，使用1.x版本就能夠了，最終版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，不多有人使用，官方只作BUG維護，功能再也不新增。若是不考慮兼容低版本的瀏覽器可使用2.x，最終版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的瀏覽器。須要注意的是不少老的jQuery插件不支持3.x版。目前該版本是官方主要更新維護的版本。
維護IE678是一件讓人頭疼的事情，通常咱們都會額外加載一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減小，PC端用戶已經逐步被移動端用戶所取代，若是沒有特殊要求的話，通常都會選擇放棄對678的支持。
    版本介紹

    # 下載和安裝：
    下載連接：jQuery官網
    如何使用：進入官網>[Download jQueryv3.4.1]>[Download the compressed, production jQuery 3.4.1]
    打開後Ctrl+A 複製全部代碼，進入pycharm，新建一個js文件，粘貼進去，保存爲jQuery-3.4.1.js。
    每次在HTML文件head中調用：<script src="jQuery-3.4.1.js"></script>（固然，該文件應該在運行的HTML文件的同一級目錄）。
    css

  4. jQuery對象：
    jQuery對象就是經過jQuery包裝DOM對象後產生的對象， 它是jQuery獨有的，也就是說只有jQuery可使用裏面的方法，不能與DOM對象的方法混用，jQuery對象沒法使用DOM對象的任何方法，DOM對象也不能使用jQuery對象裏面的方法。
    約定俗成：聲明一個jQuery對象變量的時候變量名開頭要加上$。
     jQuery方法示例：html

    $('#id1').html();

 　　　開頭用$，表明這是一個jQuery方法，括號裏面「#id1」選擇id=‘id1‘的標籤，而「$('#id1')」表明的就是jQuery對象，後面用點的形式使用其方法，好比.html().獲取id值爲id1的標籤的
　　　 HTML代碼。
　　    該方法的做用等同於DOM方法中：document.getElemengtById('id1').innerHTML;能夠看出，jQUery的使用是對DOM方法的簡化，可能一段JS代碼看不出來，可是若是隨着代
　　    代碼的增多，這種去繁爲簡的操做會大大增長效率和代碼的易讀性。（jQuery的方法只要對比DOM方法一下就很容易搞清楚）　前端

　　    

　　    

　  jQuery語法基本語法格式：$(’選擇器‘).action（’具體操做‘）jquery

  • jQuery基本選擇器：id class tag

    $('#id');     //id選擇器
$('.className');   //類選擇器
$('tagNmae');   //標籤選擇器
    $('div.c1');    //查找有c1類的div標籤
    $('*');   //全部元素選擇器
    $('#id,.className,tagName');  //組合選擇器
    $('x y');  //查找x的全部後代裏的y
    $('x > y')  //查找x的兒子裏的y
    $('x + y')  //查找x全部緊挨着它的且在下面的同級裏的y
    $('x ~ y')  //查找x後面的全部兄弟裏的y

  • jQuery基本篩選器/has

    篩選器：顧名思義找到標籤後再根據一些條件篩選過濾
以找到div標籤爲例：在div標籤內進一步篩選：
$('div:first')  //第一個標籤
$('div:last')  //最後一個標籤
$('div:eq(index)')  // 索引等於index的那個標籤
$('div:even')   //匹配索引是奇數的全部標籤，從0開始計數
$('div:odd')   //匹配索引是偶數的全部標籤，從0開始計數
$('div:gt(index)')   //匹配全部大於index索引值的元素
$('div:lt(index)')   //匹配全部大於index索引值的元素
$('div:not(選擇器)')   // 移除全部知足not條件選擇器的標籤
$('div:has(選擇器)')  // 選取全部包含一個或多個條件選擇器的標籤

    示例：web

    $("div:has(h1)")        // 找到全部後代中有h1標籤的div標籤
$("div:has(.c1)")       // 找到全部後代中有c1樣式類的div標籤
$("li:not(.c1)")          // 找到全部不包含c1樣式類的li標籤
$("li:not(:has(a))")    // 找到全部後代中不含a標籤的li標籤

  • jQuery操做類屬性

    [attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於

示例：
$("input[type='checkbox']");       //取到checkbox類型的input標籤
$("input[type != 'text']");        //取到不是text類型的input標籤

  • jQuery模態框示例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模態框_仿</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        .cover0 {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(176,176,176,0.5);
            z-index: 888;
        }
        .modal0 {
            width: 400px;
            height: 200px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 999;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <button>彈彈彈</button>
    <div class="cover0 hide" id="d1"></div>
    <div class="modal0 hide" id="d2">
        <form action="">
            <p><label for="i10">username: <input type="text" id="i10"></label></p>
            <p><label for="i20">password: <input type="password" id="i20"></label></p>
            <p><input type="submit" value="登陸"></p>
        </form>
        <button class="close0">關閉</button>
    </div>
    <script>
　　     //點擊彈按鈕事件發生，取消模態框的hide類屬性，模態框顯現
        $('button:first').on('click',function(){
            $("#d1").removeClass('hide');
            $("#d2").removeClass('hide');
        });
        // 點擊關閉按鈕事件發生，增長模態框的hide類屬性，模態框隱藏
        $('button:last').on('click',function(){
            $("#d1").addClass('hide');
            $("#d2").addClass('hide');
        })

    </script>
</body>
</html>

  • jQuery表單篩選器

    :text
:password
:file
:radio
:checkbox

:submit
:reset
:button

例子：
$(":checkbox")    //找到全部的checkbox

　　   表單對象屬性編程

  • :enabled
:disabled
:checked
:selected

例子：
<!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"></label></p>
    <p><label for="i2">password: <input type="password" id="i2"></label></p>
    <p><input type="submit" value="登陸" disabled></p>
</form>
<select name="" id="">
    <option value="BeiJing">北京</option>
    <option value="ShangHai" selected>上海</option>
    <option value="WuHan">武漢</option>
</select>
</body>
</html>

在google瀏覽器，console內
$("input:enabled")[0];
<input type="text" id="i1">
$("input:enabled")[1];

$(':selected')[0];
<option value="ShangHai" selected="">上海</option>
<input type="password" id="i2">

  • jQuery篩選器方法

  1. 查找下一個標籤：
  2. 查找上一個元素：
  3. 父親、兒子、兄弟元素：

  • jQuery之find方法、filter方法
    搜索全部與指定表達式匹配的標籤，這個方法是找出正在處理的標籤的後代標籤的好辦法

  1. $('div').find("p")

等價於：$("div p")
  2. $('div').filter(".c1")

// 從結果集中過濾出有c1樣式類的
// 等價於 $("div.c1") 
  3. 補充 
    .first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最後一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq() // 索引值等於指定值的元素

 

  • jQuery左側菜單（點擊一個菜單，該菜單顯示二級菜單，其它菜單的二級菜單收回）、包含jQuery鏈式操做

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左側菜單</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            min-width: 1080px;
        }

        .hide {
            display: none;
        }
        .left {
            position: fixed;
            top: 0;
            left: 0;
            width: 20%;
            height: 100%;
            background-color: rgb(100,100,100);

        }
        .right {
            position: absolute;
            right: 0;
            top: 0;
            width: 80%;
            height: 100%;
            background-color: aquamarine;

        }
        .menu {
            color: white;
        }
        .title {
            padding: 15px 5px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="left">
    <div class="menu">
        <div class="title">菜單一
            <div class="items hide">
                <div>11111</div>
                <div>11111</div>
                <div>11111</div>
            </div>
        </div>
        <div class="title">菜單二
            <div class="items hide">
                <div>22222</div>
                <div>22222</div>
                <div>22222</div>
            </div>
        </div>
        <div class="title">菜單三
            <div class="items hide">
                <div>33333</div>
                <div>33333</div>
                <div>33333</div>
            </div>
        </div>
    </div>
</div>
    <div class="right"></div>

<script>
    $('.title').on('click',function () {
       // $(this).children().removeClass('hide');
       // $(this).siblings().children().addClass('hide');
        //鏈式查找（在前面的位置繼續查找）
       $(this).children().removeClass('hide').parent().siblings().find('.items').addClass('hide');
    })
</script>
</body>
</html>

  • jQuery操做標籤
    # 樣式操做：

    addClass(‘類名’);// 用jQuery對象添加指定的類名到該對象對應標籤中
removeClass(‘類名’);// 用jQuery對象移除指定的類名
hasClass(‘類名’);// 用jQuery對象判斷該標籤內是否存在指定的類名
toggleClass();// 用jQuery對象現判斷指定類名是否有，若是有就移除，若是沒有就添加。


CSS樣式設置:
css("color","red")//DOM操做：tag.style.color="red"
$("p").css("color", "red"); //將全部p標籤的字體設置爲紅色

    # 位置操做：

    offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置
position()// 獲取匹配元素相對父元素的偏移
scrollTop()// 獲取匹配元素相對滾動條頂部的偏移
scrollLeft()// 獲取匹配元素相對滾動條左側的偏移


offset()方法：相對於文檔（document）的當前位置。 position()方法：相對於相對於父級元素的位移。

    ## jQuery offset() 方法：

    定義和用法
offset() 方法設置或返回被選元素相對於文檔的偏移座標。
做用：
①當用於返回偏移時： 該方法返回第一個匹配元素的偏移座標。它返回一個帶有兩個屬性（以像素爲單位的 top 和 left 位置）的對象。

②當用於設置偏移時： 該方法設置全部匹配元素的偏移座標。

語法：

返回偏移座標：
$(selector).offset()

設置偏移座標：
$(selector).offset({top:value,left:value})

使用函數設置偏移座標：
$(selector).offset(function(index,currentoffset))
(index - 返回集合中元素的 index 位置。
currentoffset - 返回被選元素的當前座標。)

    ## jQuery position() 方法：

    定義和用法：
position() 方法返回第一個匹配元素的位置（相對於它的父元素）。
該方法返回一個帶有兩個屬性（以像素爲單位的 top 和 left 位置）的對象。

語法：
$(selector).position()

    ## scrollTop()、scrollLeft()：
    jQuery對象的標籤的滾動條（垂直滾動條(Top)、水平滾動條(Left)）:已經滾動過的距離
    這裏須要注意，若是對象的標籤沒有滾動條那麼返回的值是0。該方法經常使用在獲取窗口對象$(window)滾動條滾動的位置，經過位置來進行某些人性化設置網頁效果。

    <!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="p0">沒有滾動條的p標籤</p>
    <p id="p1">市(多選) &nbsp&nbsp
        <select name="city" id="s1" multiple>
            <option value="WuHan">武漢市</option>
            <option value="WuHan">武漢市</option>
            <option value="WuHan">武漢市</option>
            <option value="WuHan">武漢市</option>
            <option value="WuHan">武漢市</option>
            <option value="WuHan">武漢市</option>
            <option value="WuHan">武漢市</option>
            <option value="WuHan">武漢市</option>
            <option value="WuHan">武漢市</option>
            <option value="EZhou">鄂州市</option>
            <option value="EZhou">鄂州市</option>
            <option value="EZhou">鄂州市</option>
            <option value="HuangShi">黃石市</option>
        </select>
    </p>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div>24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div>28</div>
    <div>29</div>
    <div>30</div>
    <div>31</div>
    <div>32</div>
    <div>33</div>
    <div>34</div>
    <div>35</div>
    <div>36</div>
    <div>37</div>
    <div>38</div>
    <div>39</div>
    <div>40</div>
    <div>41</div>
    <div>42</div>
    <div>43</div>
    <div>44</div>
    <div>45</div>
    <div>46</div>
    <div>47</div>
    <div>48</div>
    <div>49</div>
    <div>50</div>
</body>
</html>
    scollTop示例

    捕捉滾動條離頂部的距離來判斷返回頂部按鈕的顯示

    <!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.2.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>
    View Code

    #尺寸：

    height()
innerHeight()
outerHeight()
width()   
innerwidth()
outerwidth()

    $('#p0')height():(width寬度同理可知）

    #文本操做：

    HTML代碼：
html()// 取得第一個匹配元素的html內容
html(val)// 設置全部匹配元素的html內容

文本值：
text()// 取得全部匹配元素的內容
text(val)// 設置全部匹配元素的內容

值：
val()// 取得第一個匹配元素的value屬性的值
val(val)// 設置全部匹配元素value屬性的值
val([val1, val2])// 設置多選的checkbox、多選select的value屬性的值
    示例：
    <!    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 class="d">我是第一個p標籤
        <input type="text" id="123" value="555">
        <div>6666</div>
        <p>啪啪啪啪</p>
    </div>
    <div class="d">我是第二個p標籤
        <p>嘿嘿嘿嘿</p>
    </div>
</body>
</html>


    #屬性操做：

    attr(attrName)// 返回第一個匹配元素的屬性值
attr(attrName, attrValue)// 爲全部匹配元素設置一個屬性值
attr({k1: v1, k2:v2})// 爲全部匹配元素設置多個屬性值
removeAttr()// 從每個匹配的元素中刪除一個屬性

    #文檔處理：

    $(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

$(A).after(B)// 把B放到A的後面
$(A).insertAfter(B)// 把A放到B的後面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

remove()// 從DOM中刪除全部匹配的元素。
empty()// 刪除匹配的元素集合中全部的子節點。

replaceWith()
replaceAll()

clone()// 參數

  • 事件：(使用方法與JS對象相似，只是語法更加簡潔）

    #經常使用事件

    click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

    #事件綁定：

    事件綁定
.on( events [, selector ],function(){})
events： 事件
selector: 選擇器（可選的）
function: 事件處理函數

    #移除事件：

    .off( events [, selector ][,function(){}])
off() 方法移除用 .on()綁定的事件處理程序。

events： 事件
selector: 選擇器（可選的）
function: 事件處理函數

    #阻止後續事件執行：
    　　有時候點擊提交按鈕會進行後續事件（將輸入的文本提交到服務器、執行一些跳轉操做..），可是若是輸入文本爲空提交時候，點擊後沒有經過驗證的話，就不該該跳轉。這時候能夠經過設置event.preventDefault()；或者return false；來阻止默認行爲 。

    return false; // 常見阻止表單提交等
e.preventDefault();
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默認事件</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>

<form action="">
    
    <form action="">
        <input type="text">
        <input type="submit" id="d1">
    </form>
</form>

<script>
    $("#d1").click(function (e) {
        alert(123);      //點擊提交按鈕若是不作任何阻止動做，頁面會將輸入的文本發送到服務器，同時刷新頁面清空輸入框，可是若是阻止後續事件發生後就不會刷新頁面，文本框也不會刷新。 // return false;
        // e.preventDefault();
    });
</script>
</body>
</html>


    # 阻止事件冒泡：(冒泡：若是父、子、孫三個等級標籤都包含同一類型的事件，那麼在孫標籤觸發事件後，好比點擊事件，因爲點擊的事件是在孫標籤上面，可是孫標籤又是子標籤裏面，子標籤又是父標籤內部，因此會連鎖觸發子與父標籤的點擊事件，致使連鎖反應，這種過程就像一個水泡從下往上冒出水面的過程，俗稱事件冒泡。
    具體能夠看下面的代碼示例，將e.stopPropagation()註釋掉就會產生冒泡的狀況。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
    <p>
        <span>點我</span>
    </p>
</div>

<script>
    $("span").click(function (e) {  //注意這裏必定要傳個形參e
        alert("span");
        e.stopPropagation();   //這一步就阻止了點擊事件上傳給其父級標籤的冒泡過程
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

    # 頁面載入：
    當DOM載入就緒能夠查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數，由於它能夠極大地提升web應用程序的響應速度。
    兩種寫法：

    $(document).ready(function)(){
    // 在這裏些JS代碼...
})

    簡寫：

    $(function(){
    // JS代碼...
})

    !Tip:

    與window.onload的區別:

    ## window.onload()函數有覆蓋現象，必須等待着圖片資源加載完成以後才能調用
## jQuery的這個入口函數沒有函數覆蓋現象，文檔加載完成以後就能夠調用（建議使用此函數

    # 事件委託：事件委託是經過事件冒泡的原理，利用父標籤去捕獲子標籤的事件。

    $("table").on("click", ".delete", function () {
  // 刪除按鈕綁定的事件
})
    <!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>我是按鈕</button>

<script>
    // 事件委託
    $('body').on('click','button',function () {
        alert('經過body標籤click事件，觸發body內的子標籤「button」的點擊事件>>>委託')
    })

</script>
</body>
</html>

    # 動畫效果（動態效果）：

    speed:可選,規定顯示效果的速度:(毫秒/"slow"/"fast") easing:可選。規定在動畫的不一樣點上元素的速度。默認值爲 "swing"。 可能的值： "swing" - 在開頭/結尾移動慢，在中間移動快 "linear" - 勻速移動 提示：擴展插件中提供更多可用的 easing 函數。 callback:可選。show() 方法執行完以後，要執行的函數。

// 基本
show(speed,easing,callback)
hide(speed,easing,callback)
toggle(speed,easing,callback)
// 滑動
slideDown(speed,easing,callback)
slideUp(speed,easing,callback)
slideToggle(speed,easing,callback)
// 淡入淡出
fadeIn(speed,easing,callback)
fadeOut(speed,easing,callback)
fadeTo(speed,opacity,easing,callback)    //speed(必須） opacity透明度（必須參數）
fadeToggle(speed,easing,callback)
// 自定義（瞭解便可）
animate(p,speed,easing,callback)

    #  如下爲補充內容：

    # jQuery.each(collection, callback(indexInArray, valueOfElement))：後端

    描述：一個通用的迭代函數，它能夠用來無縫迭代對象和數組。數組和相似數組的對象經過一個長度屬性（如一個函數的參數對象）來迭代數字索引，從0到length - 1。其餘對象經過其屬性名進行迭代。數組

    li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循環的具體元素。
})

輸出：
010
120
230
340

    # .each(function(index, Element))：

    描述：遍歷一個jQuery對象，爲每一個匹配元素執行一個函數。.瀏覽器

    each 方法用來迭代jQuery對象中的每個DOM元素。每次回調函數執行時，會傳遞當前循環次數做爲參數(從0開始計數)。因爲回調函數是在當前DOM元素爲上下文的語境中觸發的，因此關鍵字this老是指向這個元素。服務器

    // 爲每個li標籤添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

    注意: jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素 - 被稱爲隱式迭代的過程。當這種狀況發生時，它一般不須要顯式地循環的.each()方法：

    也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就能夠了：

    $("li").addClass("c1");  // 對全部標籤作統一操做

    注意：

    在遍歷過程當中可使用return false提早結束each循環。

    .data()

    在匹配的元素集合中的全部元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。

    .data(key, value):

    描述：在匹配的元素上存儲任意相關數據。

    $("div").data("k",100);//給全部div標籤都保存一個名爲k，值爲100

    .data(key):

    描述: 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值—經過.data(name,value)或HTML5 data-*屬性設置。

    $("div").data("k");//返回第一個div標籤中保存的"k"的值

    .removeData(key):

    描述：移除存放在元素上的數據，不加key參數表示移除全部保存的數據。

    $("div").removeData("k");  //移除元素上存放k對應的數據
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程