Jquery使用

本文轉載自查看原文 2018-08-03 11:06 886 前端

常用js插件

https://v3.bootcss.com/
https://www.bootcdn.cn/
http://www.fontawesome.com.cn/

一、jquery是什么？

1）Jquery簡介

jQuery是繼prototype之后又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。
它是輕量級的js庫(壓縮后只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX交互。
jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。
jQuery能夠使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html里面插入一堆js來調用命令了，只需定義id即可。

2）什么是Jquery對象

jQuery 對象就是通過jQuery包裝DOM對象后產生的對象。
jQuery 對象是 jQuery 獨有的. 如果一個對象是 jQuery 對象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
      比如：
      $("#test").html()   意思是指：獲取ID為test的元素內的html代碼。其中html()是jQuery里的方法
      這段代碼等同於用DOM實現代碼： document.getElementById(" test ").innerHTML;
雖然jQuery對象是包裝DOM對象后產生的，但是jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery里的方法.亂使用會報錯
約定：如果獲取的是 jQuery 對象, 那么要在變量前面加上$.
    var $variable = jQuery 對象
    var variable = DOM 對象
基本語法：$(selector).action()

二、查詢標簽選擇器和篩選器

1）選擇器

基本選擇器            $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")
層級選擇器            $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")
基本篩選器            $("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")
屬性選擇器            $('[id="div1"]')   $('["alex="sb"][id]')
表單選擇器            $("[type='text']")----->$(":text")                    
只適用於input標簽     $("input:checked")

View Code

選擇器基本練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
    <div>hello div</div>
    <div class="div">hello div</div>
    <p>hello p</p>
    <p id="p1">hello</p>

    <div  class="outer">
        <div>
            <p>hellov p1</p>
        </div>
        <p>hellov p2</p>
    </div>
    <p>hellov p4</p>

    <div class="div">hello div
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>5555</li>
            <li>6666</li>
        </ul>
    </div>

    <p user="dsp">hellov sp</p>
    <p user="lsp">hellov sppp</p>

    <input type="text">
    <input type="button">
<script>
//    $("*").css("color","red")
//    $("div").css("color","red")
//    $("#p1").css("color","red")
//    $(".div").css("color","red")
//    $(".div,#p1").css("color","red")

//     $(".outer p").css("color","red")
//    $(".outer>p").css("color","red")
//    $(".outer+p").css("color","red")

//    $(".div li:first").css("color","green")
//    $(".div li:last").css("color","green")
//    $(".div li:eq(3)").css("color","green")     // 指的是第4個標簽
//    $(".div li:lt(3)").css("color","green")     // 指的是前3個標簽 1，2，3
//    $(".div li:gt(3)").css("color","green")    // 指的是從4開始的標簽 4,5，*,*

//    $("[user]").css("color","green")
//    $("[user='lsp']").css("color","green")
//
//    $("[type='button']").css("width","300px")
    $(":button").css("width","300px")
</script>
</body>
</html>

View Code

2）篩選器

過濾篩選器
    $("li").eq(2)  $("li").first()  $("ul li").hasclass("test")
    
查找篩選器
    $("div").children(".test")    $("div").find(".test")
    $(".test").next()    $(".test").nextAll()   $(".test").nextUntil()
    $("div").prev()  $("div").prevAll()  $("div").prevUntil()
    $(".test").parent()  $(".test").parents()  $(".test").parentUntil()
    $("div").siblings()

View Code

3）小結：

$("#id")            // id選擇器
$("tagName")        // 簽選擇器
$(".className")        // class選擇器：
$("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(元素選擇器)// 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)

屬性選擇器：
[attribute]
[attribute=value]  // 屬性等於
[attribute!=value] // 屬性不等於

first() // 獲取匹配的第一個元素
last() // 獲取匹配的最后一個元素
not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
eq() // 索引值等於指定值的元素

$("div:has(h1)")// 找到所有后代中有h1標簽的div標簽
$("div:has(.c1)")// 找到所有后代中有c1樣式類的div標簽
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")// 找到所有后代中不含a標簽的li標簽

示例

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標簽
$("input[type!='text']");// 取到類型不是text的input標簽

屬性選擇器示例

自定義模態框，使用jQuery實現彈出和隱藏功能。

<!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>
    .cover {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: darkgrey;
      z-index: 999;
    }
    .modal {
      width: 600px;
      height: 400px;
      background-color: white;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -300px;
      margin-top: -200px;
      z-index: 1000;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="彈" id="i0">

<div class="cover hide"></div>
<div class="modal hide">
  <label for="i1">姓名</label>
  <input id="i1" type="text">
   <label for="i2">愛好</label>
  <input id="i2" type="text">
  <input type="button" id="i3" value="關閉">
</div>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
<script src="jquery-3.3.1.min.js"></script>
<script>
  var tButton = $("#i0")[0];
  tButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).removeClass("hide");
    $(modalEle).removeClass("hide");
  };

  var cButton = $("#i3")[0];
  cButton.onclick=function () {
    var coverEle = $(".cover")[0];
    var modalEle = $(".modal")[0];

    $(coverEle).addClass("hide");
    $(modalEle).addClass("hide");
  }
</script>
</body>
</html>

靜態對話框示例

4）針對表單的常用篩選

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

表單常用篩選

$(":checkbox")  // 找到所有的checkbox

示例

4.1）表單的對象屬性

$(":checkbox")  // 找到所有的checkbox

表單對象屬性

示例一：找到可用的input標簽

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input標簽

示例:找input標簽

示例二：找到被選中的option

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">廣州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被選中的option

示例:找到選中的option

5）上下，父親，兒子，兄弟元素選擇

下一個元素：
    $("#id").next()
    $("#id").nextAll()
    $("#id").nextUntil("#i2")
上一個元素：
    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")
父親元素：
    $("#id").parent()
    $("#id").parents()  // 查找當前元素的所有的父輩元素
    $("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。
兒子和兄弟元素：
    $("#id").children();// 兒子們
    $("#id").siblings();// 兄弟們

元素選擇概況

6）查找和篩選

查找
    搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。
    $("div").find("p")等價於$("div p")
篩選
    篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的范圍。用逗號分隔多個表達式。
    $("div").filter(".c1")等價於 $("div.c1" // 從結果集中過濾出有c1樣式類的

三、操作標簽（樣式操作，文本操作，屬性操作，文檔操作）

1）樣式操作

查找
    搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。
    $("div").find("p")等價於$("div p")
篩選
    篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的范圍。用逗號分隔多個表達式。
    $("div").filter(".c1")等價於 $("div.c1" // 從結果集中過濾出有c1樣式類的
    
----------------------------------------------------------------------------------------------------------------------
動作類
    addClass();        // 添加指定的CSS類名。
    removeClass();    // 移除指定的CSS類名。
    toggleClass();    // 切換CSS類名，如果有就移除，如果沒有就添加
判斷類
    hasClass();        // 判斷樣式存不存在
位置類
    offset()        // 獲取匹配元素在當前窗口的相對偏移或設置元素位置
    position()        // 獲取匹配元素相對父元素的偏移
    scrollTop()        // 獲取匹配元素相對滾動條頂部的偏移
    scrollLeft()    // 獲取匹配元素相對滾動條左側的偏移
    注意： .offset()方法允許我們檢索一個元素相對於文檔（document）的當前位置。
         與.position()的差別在於： .position()是相對於相對於父級元素的位移。

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

樣式操作方法

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

返回頂部示例

2）文本操作

HTML代碼：
    html()// 取得第一個匹配元素的html內容
    html(val)// 設置所有匹配元素的html內容
文本值：
    text()// 取得所有匹配元素的內容
    text(val)// 設置所有匹配元素的內容
值：
    val()// 取得第一個匹配元素的當前值
    val(val)// 設置所有匹配元素的值
    val([val1, val2])// 設置checkbox、select的值

文本操作方法

獲取被選中的checkbox或radio的值：

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

$("input[name='gender']:checked").val()

示例

2.1）定義登錄驗證

<!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>
    .error {
      color: red;
    }
  </style>
</head>
<body>

<form action="">
  <div>
    <label for="input-name">用戶名</label>
    <input type="text" id="input-name" name="name">
    <span class="error"></span>
  </div>
  <div>
    <label for="input-password">密碼</label>
    <input type="password" id="input-password" name="password">
    <span class="error"></span>
  </div>
  <div>
    <input type="button" id="btn" value="提交">
  </div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  $("#btn").click(function () {
    var username = $("#input-name").val();
    var password = $("#input-password").val();

    if (username.length === 0) {
      $("#input-name").siblings(".error").text("用戶名不能為空");
    }
    if (password.length === 0) {
      $("#input-password").siblings(".error").text("密碼不能為空");
    }
  })
</script>
</body>
</html>

登錄驗證

3）屬性操作

用於ID等或自定義屬性：
    attr(attrName)// 返回第一個匹配元素的屬性值
    attr(attrName, attrValue)// 為所有匹配元素設置一個屬性值
    attr({k1: v1, k2:v2})// 為所有匹配元素設置多個屬性值
    removeAttr()// 從每一個匹配的元素中刪除一個屬性
用於checkbox和radio
    prop() // 獲取屬性
    removeProp() // 移除屬性

屬性方法

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

屬性示例

4）文檔操作

添加到指定元素內部的后面
    $(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()// 參數

文檔處理方法

<!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>
        #b1 {
            background-color: deeppink;
            padding: 5px;
            color: white;
            margin: 5px;
        }

        #b2 {
            background-color: dodgerblue;
            padding: 5px;
            color: white;
            margin: 5px;
        }
    </style>
</head>
<body>

<button id="b1">屠龍寶刀，點擊就送</button>
<hr>
<button id="b2">屠龍寶刀，點擊就送</button>

<script src="jquery-3.3.1.min.js"></script>
<script>
    // clone方法不加參數true，克隆標簽但不克隆標簽帶的事件
    $("#b1").on("click", function () {
        $(this).clone().insertAfter(this);
    });
    // clone方法加參數true，克隆標簽並且克隆標簽帶的事件
    $("#b2").on("click", function () {
        $(this).clone(true).insertAfter(this);
    });
</script>
</body>
</html>

點擊觸發復制功能示例

五、事件處理

1）常用事件

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

1.1）click事件示例

<!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>
</head>
<body>

<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>Egon</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Alex</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Yuan</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>EvaJ</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Gold</td>
        <td>
            <select>
                <option value="1">上線</option>
                <option value="2">下線</option>
                <option value="3">停職</option>
            </select>
        </td>
    </tr>
    </tbody>
</table>

<input type="button" id="b1" value="全選">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反選">

<script src="jquery-3.3.1.min.js"></script>
<script>
    // 全選
    $("#b1").on("click", function () {
        $(":checkbox").prop("checked", true);
    });
    // 取消
    $("#b2").on("click", function () {
        $(":checkbox").prop("checked", false);
    });
    // 反選
    $("#b3").on("click", function () {
        $(":checkbox").each(function () {
            var flag = $(this).prop("checked");
            $(this).prop("checked", !flag);
        })
    });
//    // 按住shift鍵，批量操作
//    // 定義全局變量
//    var flag = false;
//    // 全局事件，監聽鍵盤shift按鍵是否被按下
//    $(window).on("keydown", function (e) {
////    alert(e.keyCode);
//        if (e.keyCode === 16) {
//            flag = true;
//        }
//    });
//    // 全局事件,shift按鍵抬起時將全局變量置為false
//    $(window).on("keyup", function (e) {
//        if (e.keyCode === 16) {
//            flag = false;
//        }
//    });
//    // select綁定change事件
//    $("table select").on("change", function () {
//        // 是否為批量操作模式
//        if (flag) {
//            var selectValue = $(this).val();
//            // 找到所有被選中的那一行的select，選中指定值
//            $("input:checked").parent().parent().find("select").val(selectValue);
//        }
//    })
</script>
</body>
</html>

全選反選示例

1.2）hover示例

<!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>hover示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .nav {
      height: 40px;
      width: 100%;
      background-color: #3d3d3d;
      position: fixed;
      top: 0;
    }

    .nav ul {
      list-style-type: none;
      line-height: 40px;
    }

    .nav li {
      float: left;
      padding: 0 10px;
      color: #999999;
      position: relative;
    }
    .nav li:hover {
      background-color: #0f0f0f;
      color: white;
    }

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    .son {
      position: absolute;
      top: 40px;
      right: 0;
      height: 50px;
      width: 100px;
      background-color: #00a9ff;
      display: none;
    }

    .hover .son {
      display: block;
    }
  </style>
</head>
<body>
<div class="nav">
  <ul class="clearfix">
    <li>登錄</li>
    <li>注冊</li>
    <li>購物車
      <p class="son hide">
        空空如也...
      </p>
    </li>
  </ul>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(".nav li").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
</script>
</body>
</html>

hover示例

1.3）實時監聽input輸入值變化示例

<!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>實時監聽input輸入值變化</title>
</head>
<body>
<input type="text" id="i1">

<script src="jquery-3.3.1.min.js"></script>
<script>
    /*
     * oninput是HTML5的標准事件
     * 能夠檢測textarea,input:text,input:password和input:search這幾個元素的內容變化，
     * 在內容修改后立即被觸發，不像onchange事件需要失去焦點才觸發
     * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
     * 使用jQuery庫的話直接使用on同時綁定這兩個事件即可。
     * */
    $("#i1").on("input propertychange", function () {
        alert($(this).val());
    })
</script>
</body>
</html>

監聽input輸入值內容

2）事件方法（事件綁定，移除事件，阻止后續事件執行）

事件綁定
    .on( events [, selector ],function(){})
        events： 事件
        selector: 選擇器（可選的）
        function: 事件處理函數
    
移除事件
    .off( events [, selector ][,function(){}])
    off() 方法移除用 .on()綁定的事件處理程序。
        events： 事件
        selector: 選擇器（可選的）
        function: 事件處理函數    
    
阻止后續事件執行
    return false; // 常見阻止表單提交等
    
注意：
    像click、keydown等DOM中定義的事件，我們都可以使用`.on()`方法來綁定事件，
    但是`hover`這種jQuery中定義的事件就不能用`.on()`方法來綁定了。

事件方法

如果使用事件委托的方式綁定hover事件處理函數，可以參照如下代碼分兩步綁定事件

('ul').on('mouseenter', 'li', function() {//綁定鼠標進入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//綁定鼠標划出事件
    $(this).removeClass('hover');
});

示例

2.1）事件委托：是通過事件冒泡的原理，利用父標簽去捕獲子標簽的事件。

表格中每一行的編輯和刪除按鈕都能觸發相應的事件。
$("table").on("click", ".delete", function () {
  // 刪除按鈕綁定的事件
})

示例

六、Jqueryd的特殊方法

1）動畫效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
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])

動畫效果方法

<!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>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">點贊</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

點贊特效示例

2）each迭代

2.1）each迭代數組

一個通用的迭代函數，它可以用來無縫迭代對象和數組。數組和類似數組的對象通過一個長度屬性
（如一個函數的參數對象）來迭代數字索引，從0到length - 1。其他對象通過其屬性名進行迭代。

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


輸出：
010
120
230
340

each迭代數組

2.2）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");  // 對所有標簽做統一操作

each示例

　　注意：在遍歷過程中可以使用 return false提前結束each循環。

3）.data(key, value)

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

$("div").data("k",100);    //給所有div標簽都保存一個名為k，值為100
$("div").data("k");        //返回第一個div標簽中保存的"k"的值
$("div").removeData("k");  //移除元素上存放k對應的數據

data方法

七、實例練習

1）實現左側菜單，點開菜單一，展示。其他收起來。單開菜單二展示，其他收起來....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        function show(self) {
            $(self).next().removeClass("hide")
            $(self).parent().siblings().children(".con").addClass("hide")
        }
    </script>
    <style>
        .menu{
            height: 500px;
            width: 30%;
            background-color: gainsboro;
            float: left;
        }
        .content{
            height: 500px;
            width: 70%;
            background-color: darkgrey;
            float: left;
        }
        .title{
            line-height: 50px;
            background-color: darkseagreen;
            color: forestgreen;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this);">菜單一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜單二</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="show(this);">菜單三</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
    </div>
    <div class="content"></div>
</div>
</body>
</html>

View Code

2）實現下拉菜單

如京東案例

要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            /*border: 1px solid red;*/
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
        }
        .menu a{
            border-right: 1px solid red;
            padding: 11px;
        }
        .content{
            background-color: tan;
            border: 1px solid green;
            height: 300px;
        }
        .hide{
            display: none;
        }

        .current{
            background-color: darkgray;
            color: yellow;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>
      <div class="tab_outer">
          <ul class="menu">
              <li xxx="c1" class="current" onclick="tab(this);">菜單一</li>
              <li xxx="c2" onclick="tab(this);">菜單二</li>
              <li xxx="c3" onclick="tab(this);">菜單三</li>
          </ul>
          <div class="content">
              <div id="c1">內容一</div>
              <div id="c2" class="hide">內容二</div>
              <div id="c3" class="hide">內容三</div>
          </div>
      </div>

<script>
    function tab(self) {
//        $(self).addClass("current");
//        $(self).siblings().removeClass("current")  // 2語句合並成下面一句
        $(self).addClass("current").siblings().removeClass("current")
//        alert($(self).attr("xxx"))  // c2 ,c3
        var s= $(self).attr("xxx");
        $("#"+s).removeClass("hide").siblings().addClass("hide");
    }
</script>
</body>
</html>

View Code

3）Jquery的屬性prop用實現全選，取消，反選框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
    <button onclick="selectall();">全選</button>
    <button onclick="cancel();">取消</button>
    <button onclick="reverse();">反選</button>
    <table border="1" id="Table">
        <tr>
            <td><input type="checkbox"></td>
            <td>111</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>222</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>333</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>444</td>
        </tr>
    </table>

<script>
//// 測試each的屬性
//li=[10,20,30,40]
////dic={name:"yuan",sex:"male"}
//$.each(li,function(i,x){
//    console.log(i,x)
//})

function selectall() {
    $("table :checkbox").prop("checked",true)
}
function cancel() {
    $("table :checkbox").prop("checked",false)
}

function reverse() {
    $("table :checkbox").each(function(){
        if ($(this).prop("checked")){
            $(this).prop("checked",false)
        }else {
            $(this).prop("checked",true)
        }
    })
}
</script>
</body>
</html>

View Code

4）用clone實現加減框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="outer">
    <div class="item">
         <input type="button" value="+" onclick="fun1(this)">
        <input type="text">
    </div>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
     function fun1(self) {
         var Clone=$(self).parent().clone();
         Clone.children(":button").val("-").attr("onclick","func2(this)");
         $("#outer").append(Clone)
     }

     function func2(self) {
//         alert(123)
         $(self).parent().remove()
     }
</script>
</body>
</html>

View Code

5）實現靜態對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: rebeccapurple;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: coral;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: gold;

        }
    </style>
</head>
<body>
<div class="back">
    <input id="ID1" type="button" value="click" onclick="action1(this)">
</div>

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>

<script src="jquery-3.2.1.min.js"></script>
<script>

      function action1(self) {
          $(self).parent().siblings().removeClass("hide");
      }

       function action2(self) {
          $(self).parent().parent().children(".shade,.models").addClass("hide")
      }
//    function action(act){
//        var ele=document.getElementsByClassName("shade")[0];
//        var ele2=document.getElementsByClassName("models")[0];
//        if(act=="show"){
//              ele.classList.remove("hide");
//              ele2.classList.remove("hide");
//        }else {
//              ele.classList.add("hide");
//              ele2.classList.add("hide");
//        }

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

View Code

原文出處：https://www.cnblogs.com/liwenzhou/p/8178806.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery(二) jQuery對Ajax的使用 JQuery的使用怎么使用jQuery Jquery(一) 初識Jquery，簡單使用Jquery。 Jquery（01）jQuery的下載以及使用使用jquery dialog jQuery File Upload的使用 Jquery ligerUI的使用如何安裝jQuery並使用 jquery flotcharts使用簡介