前端第四篇---前端基礎之jQuery

時間  2020-05-23
標籤 前端 第四 基礎 jquery 欄目 JQuery 简体版
原文   原文鏈接

前端第四篇---前端基礎之jQuery

1、jQuery介紹

2、jQuery對象

3、jQuery基礎語法

4、事件

5、動畫效果

6、補充each

1、jQuery簡介

　　1.jQuery介紹

  1. jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。css

  2. jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，可以極大地簡化JavaScript編程。它的宗旨就是：「Write less, do more.‘’html

　　2.jQuery的優點

  1. 一款輕量級的JS框架。jQuery核心js文件才幾十kb，不會影響頁面加載速度。前端

  2. 豐富的DOM選擇器,jQuery的選擇器用起來很方便，好比要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼，而jQuery一行代碼就搞定了，再好比要將一個表格的隔行變色，jQuery也是一行代碼搞定。python

  3. 鏈式表達式。jQuery的鏈式操做能夠把多個操做寫在一行代碼裏，更加簡潔。jquery

  4. 事件、樣式、動畫支持。jQuery還簡化了js操做css的代碼，而且代碼的可讀性也比js要強。編程

  5. Ajax操做支持。jQuery簡化了AJAX操做，後端只需返回一個JSON格式的字符串就能完成與前端的通訊。後端

  6. 跨瀏覽器兼容。jQuery基本兼容瞭如今主流的瀏覽器，不用再爲瀏覽器的兼容問題而傷透腦筋。瀏覽器

  7. 插件擴展開發。jQuery有着豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件，而且用jQuery插件作出來的效果很炫，而且能夠根據本身須要去改寫和封裝插件，簡單實用。app

　　3.jQuery內容

  1. 選擇器框架

  2. 篩選器

  3. 樣式操做

  4. 文本操做

  5. 屬性操做

  6. 文檔處理

  7. 事件

  8. 動畫效果

  9. 插件

  10. each、data、Ajax

2、jQuery對象

jQuery對象就是經過jQuery包裝DOM對象後產生的對象。jQuery對象是 jQuery獨有的。若是一個對象是jQuery對象，那麼它就可使用jQuery裏的方法：例如$(「#i1」).html()。

$(「#i1」).html()的意思是：獲取id值爲i1的元素的html代碼。其中 html()是jQuery裏的方法。

至關於： document.getElementById("i1").innerHTML;

雖然 jQuery對象是包裝 DOM對象後產生的，可是 jQuery對象沒法使用 DOM對象的任何方法，同理 DOM對象也沒不能使用 jQuery裏的方法。

 

一個約定，咱們在聲明一個jQuery對象變量的時候在變量名前面加上$

var $variable = jQuery對像
var variable = DOM對象
$variable[0]//jQuery對象轉成DOM對象

拿上面那個例子舉例，jQuery對象和DOM對象的使用：　　

$("#i1").html();//jQuery對象可使用jQuery的方法
$("#i1")[0].innerHTML;// DOM對象使用DOM的方法

3、jQuery基礎語法

　3.1 查找標籤

　　3.1.1選擇器

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 實現彈出和隱藏功能

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>模態框</title>

    <style>
        /*<!--設置背景是絕對定位position-->*/ .cover{ position: absolute; top:0; right:0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 998;/*設置對象的層疊順序，數值大的會覆蓋在數值小的標籤之上。z-index 僅能在定位元素上奏效*/ } .modal{ position: absolute; left:50%; top:50%; /*------------*/ height: 400px; width: 600px; background-color: white; /*=------------=*/ margin-left: -300px; margin-top: -200px; z-index: 1000;         /*設置對象的層疊順序，數值大的會覆蓋在數值小的標籤之上。z-index 僅能在定位元素上奏效*/ } /*在瀏覽器中不顯示*/ .hide{ display: none; } </style>
</head>
<body>
<button id="b1">屠龍寶刀，點擊就送</button>
<!--對話框邊上的背景-->
<div class="cover hide"></div>
<!--彈出來的對話框-->
<div class="modal hide">
    <form>
        <p>
            <label> 用戶名： <input type="text">
            </label>
        </p>
        <p>
            <label> 密&nbsp&nbsp&nbsp碼： <input type="password">
            </label>
        </p>
        <p>
            <input type="submit" value="登錄">
            <input id="cannel" type="button" value="取消" >
        </p>
    </form>
</div>
<script src="jquery-3.2.1.min.js"></script>

<script> $("#b1").click(function () { // 一點擊就去點cover和modal 中的hide
        $('.cover').removeClass('hide'); $('.modal').removeClass('hide'); }); // 如今點擊取消按鈕，是沒有任何效果的。因此爲取消按鈕綁定事件
    $("#cannel").click(function () { $(".cover").addClass("hide"); $(".modal").addClass("hide") }) </script>





</body>
</html>
jQuery版自定義模態框

屬性選擇器

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

例子

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

表單經常使用篩選

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

例子

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

表單對象屬性　　


:enabled     //  可用    $("input:enabled")找到可用的input標籤
:disabled    // 不可用 
:checked 　　// 選擇 
:selected 　　// 該選擇器不適用於複選框或單選按鈕。請使用:checked選擇器代替。

例子

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

$(":selected")  // 找到全部被選中的option

 

　　3.1.2篩選器

下一個元素

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一個元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父親元素

$("#id").parent()
$("#id").parents()  // 查找當前元素的全部的父輩元素
$("#id").parentsUntil() // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止。

兒子和兄弟元素

$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們

查找元素

$("#id").find()// 搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

補充

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

示例：左側菜單

<!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="title">菜單一</div>
    <div class="items">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    <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 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 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"); }); </script>
左側菜單示例

　　3.2 操做標籤

　　3.2.1 樣式操做

    • 樣式操做　　
addClass();// 添加指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，若是有就移除，若是沒有就添加。

示例：開關燈和模態框

CSS

css("color","red")//DOM操做：tag.style.color="red"

示例：

$("p").css("color", "red"); //將全部p標籤的字體設置爲紅色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS樣式修改</title>
</head>
<body>
<p>今日內容jQuery</p>
<p>的一部分</p>
<script src="jquery-3.2.1.min.js"></script>
<!--把當前點擊的標籤變綠-->
<script>
<!--先找到p標籤,綁定事件--> $('p').click(function () { $(this).css('color','red') $(this).css("font-size", "24px"); }) </script>
</body>
</html> 等價於 $(this).css({"color": "pink", "font-size": "48px"});
小練習字體變紅

位置：

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

　　.offset()方法容許咱們檢索一個元素相對於文檔（document）的當前位置

　　.position()的差異在於：.position()是相對於父級元素的位移

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>返回頂部</title>
    <style>
        /*設置返回按鈕的屬性*/ .c2{ width: 50px; height: 50px; position: fixed;  /* fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動*/ bottom: 15px; right: 15px; background-color: #2b669a;
    } .hide{ display:none ;
    }
    </style>
</head>
<body>
<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="btn2 c2">返回頂部</button>

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

<script>
    /*設置窗口滾動欄*/ $(window).scroll(function () { if ($(window).scrollTop()>100){ $('#b2').removeClass("hide"); }else{ $('#b2').addClass('hide'); } }); /*點擊返回按鈕就距離頂部0*/ $('#b2').click(function () { $(window).scrollTop(0); }) </script>
</body>
</html>
返回頂部 
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>尺寸示例</title>
    <style> .c1 { height: 100px; width: 200px; padding: 10px; margin: 20px; background-color: red; border: 5px solid green;
        }
    </style>
</head>
<body>

<div>
    <div class="c1">div</div>
</div>
<script src="jquery-3.2.1.min.js"></script> //=============================== <script> $('.c1').height() $('.c1').width() $('.c1').innerHeight() $('.c1').innerWidth() $('.c1').outerHeight() $('.c1').outerWidth() </script> //=============================== </body>
</html> Q:100/200/120/220/130/230
尺寸示例

　　3.2.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()
<!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>jQuery val示例</title>
</head>
<body>


<label for="s1">城市</label>
<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">廣州市</option>
  <option value="shenzhen">深圳市</option>
</select>
<hr>
<label for="s2">愛好</label>
<select id="s2" multiple="multiple">
  <option value="basketball" selected>籃球</option>
  <option value="football">足球</option>
  <option value="doublecolorball" selected>雙色球</option>
</select>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // 單選下拉框
 $("#s1").val("shanghai"); // 多選下拉框
 $("#s2").val(["basketball", "football"]); </script>
</body>
</html>
jQuery val賦值示例 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文檔操做</title>
    <style> .error { color: red;
        }
    </style>
</head>
<body>
<form id="f1">
        <p>
            <label>用戶名: <input class="need" name="username" type="text">
                <span class="error"></span>
            </label>
        </p>
        <p>
            <label>密碼: <input class="need" name="password" type="password">
                <span class="error"></span>
            </label>
        </p>
        <p>
            <input id="b1" type="submit" value="登陸">
            <input id="cancel" type="button" value="取消">
        </p>
    </form>
<script src="jquery-3.2.1.min.js"></script>
<script> $("#b1").click(function () { /*找到b1*/
        var $needEles = $(".need");/*找到need賦值給$needEles*/
        for (var i=0;i<$needEles.length;i++){ if ($($needEles[i]).val().trim().length === 0) { /*賦值labelName是用戶名和密碼這兩個詞*/
                                                /*找父類的文本去空格去冒號*/
                var labelName = $($needEles[i]).parent().text().trim().slice(0,-1);/*去掉冒號*/
                /* 用戶名下面的內容就是文本框，添加一個內容***不能爲空*/ $($needEles[i]).next().text( labelName +"不能爲空!"); } } return false;/*提交按鈕有自動提交的功能，寫這句話就是爲了避免提交*/ }) </script>
</body>
</html>
自定義登陸校驗示例

　　3.2.3 屬性操做

　　 用於ID等或自定義屬性：

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

　　attr的使用

<input id="chk1" type="checkbox" />是否可見 <input id="chk2" type="checkbox" checked="checked" />是否可見 <script>

//對於HTML元素自己就帶有的固有屬性，在處理時，使用prop方法。 //對於HTML元素咱們本身自定義的DOM屬性，在處理時，使用attr方法。 //像checkbox，radio和select這樣的元素，選中屬性對應「checked」和「selected」，這些也屬於固有屬性，所以 //須要使用prop方法去操做才能得到正確的結果。 // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // false // ---------手動選中的時候attr()得到到沒有意義的undefined----------- // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // true
 console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>
attr的使用

　　示例：全選、反選、取消

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <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>小東北</td>
        <td>二人轉演員</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>夏娜</td>
        <td>xx演員</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>涉及</td>
        <td>導演</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.2.1.min.js"></script>
<script>
    // 點擊全選,表格中全部的checkbox都選中 // 1. 找checkbox // 2. 所有選中 --> prop("checked", true);
    $("#b1").click(function () { $(":checkbox").prop("checked", true); }); // 點擊取消 // 1. 找checkbox // 2. 所有取消選中 --> prop("checked", false);
   $("#b3").click(function () { $(":checkbox").prop("checked", false); }); // 反選 // 1. 找到全部的checkbox // 2. 判斷 // 2.1 原來沒選中的,要選中 // 2.2 原來選中的,要取消選中
       $("#b2").click(function () { // 找到全部的checkbox,把它們保存在一個名叫 $checkboxEles 的變量中,方便後面使用
           var $checkboxEles = $(":checkbox"); // 遍歷全部的checkbox,根據每個checkbox的狀態作不一樣的操做
           for (var i=0;i<$checkboxEles.length;i++){ // 把每個checkbox包成jQuery對象
               var $tmp = $($checkboxEles[i]); // 若是 checkbox是選中的
               if ($tmp.prop("checked")){ // 取消選中
                   $tmp.prop("checked", false); }else { // 不然就選中
                   $tmp.prop("checked", true); } } }); </script>
</body>
</html>

　　3.2.4 文檔處理

　　

//建立一個標籤對象
    $("<p>")


//內部插入
　　　//添加到指定元素內部的後面
    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");       // 把"<b>Hello</b>"追加到 ‘p’ 
　　 $("").appendTo(content)       ----->$("p").appendTo("div");             // 把 div 追加到 p
　　//添加到指定元素內部的前面
　　$("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");      // 把 b標籤 前置於 p
    $("").prependTo(content)      ----->$("p").prependTo("#foo");            // 把#foo 前置於p

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");         // 把 b 放在 p 後面
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");        // 把 b 放在 p 前面
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");           // 把 #foo 放在 p 後面
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");          // 把 #foo 放在 p 前面

//替換
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
　　 $("").replaceAll()            ----->$("p")replaceAll("#foo")

//刪除

    $("").empty()           // 刪除匹配的元素集合中的全部的子節點                              
    $("").remove([expr])    // 從DOM中刪除全部匹配的元素

//克隆

    $("").clone([Even[,deepEven]])

　

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>點擊在表格最後添加一條記錄</title>
</head>
<body>
<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>愛好</th>
        <th>操做</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>強</td>
        <td>吃冰激凌</td>
        <td>
            <button class="delete">刪除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>哥</td>
        <td>Girl</td>
        <td>
            <button class="delete">刪除</button>
        </td>
    </tr>

    </tbody>
</table>

<button id="b1">添加一行數據</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 綁定事件
    $("#b1").click(function () { // 生成要添加的tr標籤及數據
        var trEle = document.createElement("tr"); $(trEle).html("<td>3</td>" +
            "<td>小東北</td>" +
            "<td>社會搖</td>" +
            "<td><button class='delete'>刪除</button></td>"); // 把生成的tr插入到表格中
        $("#t1").find("tbody").append(trEle); }); // 每一行的=刪除按鈕綁定事件
    $(".delete").click(function () { $(this).parent().parent().remove(); }); </script>
</body>
</html>
表格最後添加一條記錄

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>克隆示例</title>
</head>
<body>

<button id="b1">屠龍寶刀,點我就送!</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // clone方法不加參數true，克隆標籤但不克隆標籤帶的事件
    $("#b1").click(function () { $(this).clone().insertAfter(this); }); </script>
</body>
</html>
clone方法不加參數true

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clone方法-參數-加（true）(runoob.com)</title>
<script src="jquery.min.js">
</script>
<script> $(document).ready(function(){ $("button").click(function(){ $("body").append($("p:first").clone(true)); }); $("p").click(function(){ $(this).animate({fontSize:"+=1px"}); }); }); </script>
</head>
<body>

<p>單擊段落增長文本的大小。</p>
<p>這是另外一個段落。</p>
<button>複製第一個p元素(包括事件處理程序),並附加到body元素中</button>
連同屬性一塊兒clone

4、事件

　　4.1 經常使用事件

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

　　keydown和keyup事件組合示例：　　

<!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.2.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>
按住shift鍵批量操做

　　實時監聽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.2.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值變化事件

　　4.2 頁面載入

ready(fn)  // 當DOM載入就緒能夠查詢及操縱時綁定一個要執行的函數。
$(document).ready(function(){}) -----------> $(function(){})　
<!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 id="myForm">
  <label for="name">姓名</label>
  <input type="text" id="name">
  <span class="error"></span>
  <label for="passwd">密碼</label>
  <input type="password" id="passwd">
  <span class="error"></span>
  <input type="submit" id="modal-submit" value="登陸">
</form>

<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script> function myValidation() { // 屢次用到的jQuery對象存儲到一個變量，避免重複查詢文檔樹
    var $myForm = $("#myForm"); $myForm.find(":submit").on("click", function () { // 定義一個標誌位，記錄表單填寫是否正常
      var flag = true; $myForm.find(":text, :password").each(function () { var val = $(this).val(); if (val.length <= 0 ){ var labelName = $(this).prev("label").text(); $(this).next("span").text(labelName + "不能爲空"); flag = false; } }); // 表單填寫有誤就會返回false，阻止submit按鈕默認的提交表單事件
      return flag; }); // input輸入框獲取焦點後移除以前的錯誤提示信息
    $myForm.find("input[type!='submit']").on("focus", function () { $(this).next(".error").text(""); }) } // 文檔樹就緒後執行
 $(document).ready(function () { myValidation(); }); </script>
</body>
</html>
登陸校驗示例　

　　4.2 事件綁定

//語法:  標籤對象.事件(函數)    
$("p").click(function(){})

　　4.3 事件委託[data]

$("").on(eve,[selector],[data],fn)  // 在選擇元素上綁定一個或多個事件的事件處理函數。

　　4.4 阻止後續事件執行

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');
});

　　

4.5 移除事件

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

5、動畫效果

// 基本
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="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script> $(document).ready(function() { $("#hide").click(function () { $("p").hide(1000); }); $("#show").click(function () { $("p").show(1000); }); //用於切換被選元素的 hide() 與 show() 方法。 $("#toggle").click(function () { $("p").toggle(); }); }) </script>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>


    <p>hello</p>
    <button id="hide">隱藏</button>
    <button id="show">顯示</button>
    <button id="toggle">切換</button>

</body>
</html>
顯示隱藏

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script> $(document).ready(function(){ $("#slideDown").click(function(){ $("#content").slideDown(1000); }); $("#slideUp").click(function(){ $("#content").slideUp(1000); }); $("#slideToggle").click(function(){ $("#content").slideToggle(1000); }) }); </script>
    <style>

        #content{
            text-align: center; background-color: lightblue; border:solid 1px red; display: none; padding: 50px; } </style>
</head>
<body>

    <div id="slideDown">出現</div>
    <div id="slideUp">隱藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>
</html>
滑動

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script> $(document).ready(function(){ $("#in").click(function(){ $("#id1").fadeIn(1000); }); $("#out").click(function(){ $("#id1").fadeOut(1000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(1000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); }); }); </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>
淡入淡出

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>

</head>
<body>
  <button>hide</button>
  <p>helloworld helloworld helloworld</p>



 <script> $("button").click(function(){ $("p").hide(1000,function(){ alert($(this).html()) }) }) </script>
</body>
</html>
回調函數

　

<!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.2.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>
點贊特效簡單示例

 

6、補充each

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程