前端之JQuery

目錄

• jQuery介紹
  • jQuery內容
• jQuery 基礎語法
• jQuery 查找標籤
  • 基本選擇器
  • 層級選擇器
  • 基本篩選器
  • 屬性選擇器
  • 表單篩選器
• JQuery篩選器方法
  • 查找下一個元素
  • 上一個元素
  • 父親元素
  • 兒子和兄弟元素
  • 查找find
  • 篩選filter
• JQuery操做標籤
  • 樣式操做
  • 位置操做
  • 尺寸
  • 文本操做
  • 屬性操做
  • 文檔處理
• JQuery事件
  • 經常使用事件
  • 事件綁定
  • 移除事件
  • 阻止後續事件執行
  • 阻止事件冒泡
  • 頁面載入
  • 事件委託
• jQuery動畫效果
• JQuery補充方法
  • each
  • .data()
• 幾個小例子
  • 菜單欄展現
  • 校驗用戶註冊
  • 屠龍寶刀克隆

jQuery介紹

JQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。

JQuery 是目前最流行的 JS 框架，並且提供了大量的擴展。

jQuery 是一個 JavaScript 庫。

jQuery 極大地簡化了 JavaScript 編程。

jQuery 很容易學習。

jQuery內容

1. 選擇器
2. 樣式操做
3. 文本操做
4. 屬性操做
5. 文檔處理
6. 事件
7. 動畫效果
8. 插件
9. each、data、Ajax

使用Jquery

須要引入js文件

至關於python後端的模塊，須要提早導過來。

jQuery 基礎語法

經過 jQuery，您能夠選取（查詢，query） HTML 元素，並對它們執行"操做"（actions）。

基礎語法： $(selector).action()

實例:

• $(this).hide() - 隱藏當前元素
• $("p").hide() - 隱藏全部

  元素

• $("p.test").hide() - 隱藏全部 class="test" 的

  元素

• $("#test").hide() - 隱藏全部 id="test" 的元素

jQuery 查找標籤

基本選擇器

id選擇器

$("#id")

標籤選擇器

$("p")

class選擇器

$(".classname")

配合使用

$("div.c1") 找到class屬性爲c1的div標籤

全部元素選擇器

$("*")

組合選擇器

$("#id,.classname,p")

<script>
    $(document).ready(function (){
    $("#hide").click(function () {
        $("p").hide()
    })

    $("#show").click(function () {
        $("p").show()
    })
    $("input").click(function () {
        $("p").toggle()
    })
    })
</script>

<button id="hide">隱藏</button>
<button id="show">顯示</button>
<input type="button" value="隱藏/顯示">
<p>dadlhasduas</p>

層級選擇器

$("x y")    //x的全部後代y，子子孫孫
$("x>y")    //x的全部兒子y
$("x+y")    //找到緊挨着在x後面的
$("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標籤

屬性選擇器

[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
:disabled
:checked
:selected

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

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

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

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

JQuery篩選器方法

查找下一個元素

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

上一個元素

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

父親元素

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

兒子和兄弟元素

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

查找find

搜索全部與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

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

等價於$("div p")

篩選filter

篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表達式。

$("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的

等價於 $("div.c1")

補充：

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

JQuery操做標籤

樣式操做

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

示例：開關燈和模態框

CSS

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

示例：

$("p").css("color", "red"); //將全部p標籤的字體設置爲紅色

<style>
        .bg_red {
            border: 3px solid whitesmoke;
            background-color: red;
            width: 400px;
            height: 400px;
            border-radius: 50%;
        }

        .bg_green {
            border: 3px solid whitesmoke;
            background-color: green;
            width: 400px;
            height: 400px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<p class="bg_red bg_green">p標籤的字體</p>
</body>

動態對CSS樣式和類操做：

$("p").toggleClass("bg_green")

位置操做

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

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

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

獲取當前頁面的滾動條與頂部距離的偏移量

$(window).scrollTop()

尺寸

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

例子

$("p").height()
21
$("p").width()
1138
$("p").innerHeight()
61

$("p").innerWidth()
1198
$("p").outerHeight()
67
$("p").outerWidth()
1204

文本操做

HTML代碼：

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

文本值：

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

值：

val()// 取得第一個匹配元素的當前值
val(val)// 設置全部匹配元素的值
val([val1, val2])// 設置多選的checkbox、多選select的值

例子：

不加參數就是獲取值
加了參數就是設置值

$("input").val()
""
$("input").val("dsadas")
k.fn.init [input, prevObject: k.fn.init(1)]

$("input").val()
"dsadas"

示例：

獲取被選中的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()

屬性操做

用於ID等或自定義屬性：

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

例子：

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

prop和attr的區別：

attr全稱attribute(屬性)

prop全稱property(屬性)

雖然都是屬性，但他們所指的屬性並不相同，attr所指的屬性是HTML標籤屬性，而prop所指的是DOM對象屬性，能夠認爲attr是顯式的，而prop是隱式的。

舉個例子：

<input type="checkbox" id="i1" value="1">

針對上面的代碼，

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

能夠看到attr獲取一個標籤內沒有的東西會獲得undefined，而prop獲取的是這個DOM對象的屬性，所以checked爲false。

若是換成下面的代碼：

<input type="checkbox" checked id="i1" value="1">

再執行：

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

這已經能夠證實attr的侷限性，它的做用範圍只限於HTML標籤內的屬性，而prop獲取的是這個DOM對象的屬性，選中返回true，沒選中返回false。

接下來再看一下針對自定義屬性，attr和prop又有什麼區別：

<input type="checkbox" checked id="i1" value="1" me="自定義屬性">

執行如下代碼：

$("#i1").attr("me")   // "自定義屬性"
$("#i1").prop("me")  // undefined

能夠看到prop不支持獲取標籤的自定義屬性。

總結一下：

1. 對於標籤上有的能看到的屬性和自定義屬性都用attr
2. 對於返回布爾值的好比checkbox、radio和option的是否被選中都用prop。

文檔處理

添加到指定元素內部的後面

$(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()// 參數

JQuery事件

經常使用事件

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

事件綁定

.on( events [, selector ],function(){})`

• events： 事件
• selector: 選擇器（可選的）
• 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>
<span>貪玩藍月，是兄弟就來砍我</span>

<script>
    $("span").hover(
        // 當只有一個函數的時候，第一個函數觸發兩次
        function () {
            alert("來了老弟")
        },
        // 當有兩個函數的時候，兩個函數依次被觸發
        function () {
            alert("走了老弟")
        }
    )
</script>
</body>
</html>

移除事件

1. .off( events [, selector ][,function(){}])

off() 方法移除用 .on()綁定的事件處理程序。

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

阻止後續事件執行

1. return false; // 常見阻止表單提交等
2. e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默認事件</title>
</head>
<body>

<form action="">
    <button id="b1">點我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

像click、keydown等DOM中定義的事件，咱們均可以使用.on()方法來綁定事件，可是hover這種jQuery中定義的事件就不能用.on()方法來綁定了。

想使用事件委託的方式綁定hover事件處理函數，能夠參照以下代碼分兩步綁定事件：

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

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>點我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

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

頁面載入

兩種寫法：

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

簡寫：

$(function(){
// 你在這裏寫你的代碼
})

文檔加載完綁定事件，而且阻止默認事件發生：

與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>
<button>按鈕</button>
<button>按鈕</button>


<script>
    $("body").on("click","button",function () {
        alert("123")
    })
    // $("button").click(function () {
    //     alert("123")
    // })
</script>
</body>
</html>

jQuery動畫效果

// 基本
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])

JQuery補充方法

each

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循環。

終止each循環

return false；

伏筆...

.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對應的數據

幾個小例子

菜單欄展現

<!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>
        .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>
    $(".title").click(function () {
        // JQuery鏈式操做
        // 當用戶點擊菜單的時候去掉class hide的樣式
        $(this).next().removeClass("hide").parent().siblings().find(".items").addClass("hide")
    })
</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>
<h1>註冊頁面</h1>
<form action="">
    <p>
        username：<input type="text" id="d1">
        <span style="color: red;" class="errors"></span>
    </p>

    <p>
        username：<input type="text" id="d2">
        <span style="color: red;" class="errors"></span>
    </p>
    <input type="button" id="submit" value="提交">
</form>

<script>
    $("#submit").click(function () {
        // 獲取用戶輸入的用戶名 密碼
        var userNameVal = $("#d1").val()
        var passWordVal = $("#d2").val()
        if (userNameVal.length ===0 ){
            $(".errors").first().text("用戶名不能爲空")
        }
        if (passWordVal.length ===0 ){
            $(".errors").last().text("密碼不能爲空")
        }
    })

    // 獲取到input輸入框的焦點
    var inputEleList = $("input");
    for (let i=0;i < inputEleList.length;i++){
        $(inputEleList[i]).focus(function () {
            // alert("123")
            $(this).next().text("")
        })
    }

    // 原生JS事件
    // var inputEleList = $('input');
    // for(let i=0;i < inputEleList.length;i++){
    //     inputEleList[i].onfocus = function () {
    //         // alert("123")
    //         $(this).next().text('')
    //     }
    // }

</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>
    <style>
        button {
            border: 3px solid darkgray;
            color: white;
            background-color: red;
            height: 50px;
            width: 100px;
        }
    </style>
</head>
<body>

<button>屠龍寶刀，點擊就送</button>

<script>
    $("button").on("click",function () {
        $(this).clone(true).insertAfter(this)
    })
</script>
</body>
</html>