JavaScript：jQuery類庫

阿新 • • 發佈：2022-12-08

jQuery類庫
一、jQuery簡介
二、jQuery查詢標籤
三、操作標籤
四、jQuerty事件
五、jQuery的簡單的動畫效果
- 1.點贊+1

jQuery類庫

一、jQuery簡介

1.特點

載入速度更快

一款輕量級的JS框架。jQuery核心js檔案才幾十kb，不會影響頁面載入速度。

選擇器更多更好用

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

一行程式碼搞定更簡介

鏈式表示式。jQuery的鏈式操作可以把多個操作寫在一行程式碼裡，更加簡潔。

支援ajax請求(重點)

jQuery簡化了AJAX操作，後端只需返回一個JSON格式的字串就能完成與前端的通訊。

相容多瀏覽器

jQuery基本相容了現在主流的瀏覽器，不用再為瀏覽器的相容問題而傷透腦筋。

外掛擴充套件開發

jQuery有著豐富的第三方的外掛

2.使用jQuery的不同方式

下載核心檔案到本地引入（本地環境，沒有網路也可以使用）
CDN網路資源載入

3.jQuery底層本質

jQuery封裝了JS程式碼，讓編寫更簡單，但是沒有原生JS程式碼執行的更快

JS程式碼

let pEle = document.getElementsByTagName('p')[0]
undefined

pEle.style.color = 'red'
'red'

pEle.nextElementSibling.style.color = 'green'

jQuery程式碼

$('p').first().css('color','yellow').next().css('color','blue')

4.標籤物件與jQuery物件

不同的物件能呼叫的方法是不同的，在編寫程式碼的時候一定要知道正在操作的是jQuery物件還是標籤物件
標籤物件與jQuery物件互相轉換

可以把jQuery物件看成一個特殊的列表，通過jQuery物件索引取值的方式來獲取標籤物件

二、jQuery查詢標籤

1.基本選擇器

id選擇器

$('#d1')

class選擇器

$('.c1')

標籤選擇器

$('div')

2.組合選擇器

尋找id是d1的div標籤

$('div#d1')

查詢含有c1樣式類的span標籤

$('span.c1')

查詢div或者span或者p標籤

$('span,div,p')

查詢id是d1，或者class中包含為c1，或者span標籤

$('#d1,.c1,span')

3.層級選擇器

$('div p')   查詢含有div中所有的後代p標籤
$('div>p')   查詢div裡面的兒子p標籤
$('div+p')   查詢div同級別下面緊挨著的p標籤
$('div~p')   查詢div同級別下面所有的p標籤

4.屬性選擇器

$('[username]')  查詢含有username屬性名的標籤
$('[username="duoduo"]')  查詢含有username屬性名且值為“duoduo”的標籤
$('div[username="duoduo"]')   查詢含有username屬性名且值為“duoduo”的div標籤

5.基本篩選器

篩選器	作用
`:first`	第一個
`:last`	最後一個
`:eq(index)`	索引等於index的那個元素
`:even`	匹配所有索引值為偶數的元素，從 0 開始計數
`:odd`	匹配所有索引值為奇數的元素，從 0 開始計數
`:gt(index)`	匹配所有小於給定索引值的元素
`:lt(index)`	匹配所有小於給定索引值的元素
`:not(元素選擇器)`	移除所有滿足not條件的標籤
`:has(元素選擇器)`	選取所有包含一個或多個標籤在其內的標籤(指的是從後代元素找)

例子：通過jQuery程式碼操作返回的都是jQuery物件

$('span')
jQuery.fn.init(6) [span, span, span, span#d2, span, span, prevObject: jQuery.fn.init(1)]

$('span:first')
jQuery.fn.init [span, prevObject: jQuery.fn.init(1)]0: spanlength: 1prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)

$('span:even')
jQuery.fn.init(3) [span, span, span, prevObject: jQuery.fn.init(1)]0: span1: span2: spanlength: 3prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)

$('span:gt(3)')
jQuery.fn.init(2) [span, span, prevObject: jQuery.fn.init(1)]

$('span:not(#d1)')
jQuery.fn.init(6) [span, span, span, span#d2, span, span, prevObject: jQuery.fn.init(1)]0: span1: span2: span3: span#d24: span5: spanlength: 6prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)

$('span:has(#d2)')
jQuery.fn.init [prevObject: jQuery.fn.init(1)]

6.表單篩選器

僅限於表單標籤內部使用

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

表單標籤屬性

:enabled
:disabled
:checked
:selected

:checked除了查詢到checked的標籤，還會查詢到selected標籤

:selected只會查詢到selected的標籤

7.篩選器方法

下一個元素：

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

上一個元素：

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

父親元素：

$("#id").parent()
$("#id").parents()  // 查詢當前元素的所有的父輩元素
$("#id").parentsUntil() // 查詢當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。

兒子和兄弟元素：

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

查詢

搜尋所有與指定表示式匹配的元素。這個函式是找出正在處理的元素的後代元素的好方法。

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

8.鏈式操作的本質

為什麼在jQuery中為什麼可以通過點的操作不斷的點屬性這種鏈式操作在python中用程式碼模擬

通過每次操作之後返回了操作的物件，這樣就可以通過物件點方法後繼續點方法了，進行鏈式操作了

class MyClass(object):
    def func1(self):
        print('執行了func1')
        return self

    def func2(self):
        print('執行了func2')
        return self

obj = MyClass()
obj.func1().func2()   # None.func2()

三、操作標籤

1.class操作

addClass();// 新增指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，如果有就移除，如果沒有就新增。

2.位置操作

$(window).scrollTop()

$(window).scrollTop()
6618.5

3.文字操作

text()        innerText
html()        innerHTML
val()         value
jQuety物件[0].files   files[0]

4.建立標籤

document.createElement()   $('<a>')

5.屬性操作

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

attr對於動態變化的屬性，獲取會失真

prop和attr的區別：

attr全稱attribute(屬性)

prop全稱property(屬性)

雖然都是屬性，但他們所指的屬性並不相同，attr所指的屬性是HTML標籤屬性，而prop所指的是DOM物件屬性，可以認為attr是顯式的，而prop是隱式的

prop('value') // 獲取value屬性的值
prop('checked',true); // 設定屬性
removeProp('value') // 移除value屬性

這已經可以證明attr的侷限性，它的作用範圍只限於HTML標籤內的屬性，而prop獲取的是這個DOM物件的屬性，選中返回true，沒選中返回false。

總結一下：

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

6.文件處理

新增到指定元素內部的後面

$(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()// 刪除匹配的元素集合中所有的子節點

四、jQuerty事件

1.JS繫結事件與jQuery繫結事件

（1）JS繫結事件

標籤物件.on事件名 = function () {
  this
}

（2）jQuery事件繫結

方式一：

jQuery物件.事件名(function(){
 
})

方式二

jQuery物件.on('事件名', function(){
  
})

2.常用事件

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

3.input框實時監聽事件

<input type="text">

<script>
    $(":text").on('input',function(){
        // alert(123)
        console.log($(this).val())
    })
</script>

4.克隆事件

clone() 預設不克隆事件，加true就可以

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

例子

<button id="d1" style="border: 3px solid dodgerblue">沒有克隆的影分身</button>
<hr>
<button id="d2" style="border: 3px solid orange">真正的影分身</button>
<script>
    $('#d2').on('click',function (){
        $('body').append($(this).clone(true))
    })
    $('#d1').on('click',function (){
        $('body').append($(this.clone()))
    })
</script>

5.事件相關補充

（1）阻止後續功能

事件本身有功能了，如何取消本身預設的功能

在事件函式的最後return false

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

取消form表單提交資料的預設功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<form action="">
    <p>使用者名稱：
        <input type="text">
    </p>
    <p>
        <input type="submit" id="d1">
    </p>
</form>

<script>
    $('#d1').click(function (event) {
        alert('彈出警告框')
        return false
        // event.preventDefault()
    })

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

（2）事件冒泡

多個標籤互相巢狀，並且有相同的功能要執行的時候，會發生事件冒泡的現象

當只想點選span標籤發生彈出警告框事件的時候，繫結p標籤和div標籤的彈出警告框事件也會發生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

</head>
<body>
    <div>
        <p>
            <span>點選span</span>
        </p>
    </div>


    <script>
        $('span').click(function (){
            alert('span')
        })
        $('p').click(function (){
            alert('p')
        })
        $('div').click(function (){
            alert('div')
        })

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

阻止事件冒泡

（3）等待頁面載入完畢再執行JS程式碼

完整寫法

$(document).ready(function(){
// 在這裡寫你的JS程式碼...
})

簡寫

$(function(){
// 你在這裡寫你的程式碼
})

（4）事件委託

事件委託是通過事件冒泡的原理，讓父標籤去捕獲子標籤的事件

將body中的所有的點選事件委託給button標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
    <button>點我</button>

    <script>
        // $('button').click(function () {
        //     alert('速度一定要快!!!')
        // })
        $('body').on('click','button',function () {
            alert('哈哈哈')
        })
    </script>
</body>
</html>

五、jQuery的簡單的動畫效果

1.點贊+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>
    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>

點贊特效簡單示例