前端基礎之jQuery

来源:https://www.cnblogs.com/wangyueping/archive/2019/07/25/11225289.html
-Advertisement-
Play Games

前端基礎之jQuery 一、jQuery介紹 1. jQuery是一個輕量級的、相容多瀏覽器的JavaScript庫。 2. jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：“Wr ...


前端基礎之jQuery

一、jQuery介紹

  1. jQuery是一個輕量級的、相容多瀏覽器的JavaScript庫。
  2. jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：“Write less, do more.“


二、jQuery的優勢

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

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

  3. 鏈式表達式。jQuery的鏈式操作可以把多個操作寫在一行代碼里，更加簡潔。

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

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

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

  7. 插件擴展開發。jQuery有著豐富的第三方的插件，例如：樹形菜單、日期控制項、圖片切換插件、彈出視窗等等基本前端頁面上的組件都有對應插件，並且用jQuery插件做出來的效果很炫，並且可以根據自己需要去改寫和封裝插件，簡單實用。


三、jQuery內容

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

下載鏈接：jQuery官網

中文文檔：jQuery AP中文文檔


四、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對象

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的方法


六、查找標簽

  1. 基本選擇器

    • id選擇器：

      $("#id")

    • 標簽選擇器

      $("tagName")

    • class選擇器：

      $(".className")

    • 配合使用：

      $("div.c1")  // 找到有c1 class類的div標簽

    • 所有元素選擇器：

      $("*")

    • 組合選擇器：

      $("#id, .className, tagName")


  2. 層級選擇器

    x和y可以為任意選擇器

    $("x y");// x的所有後代y（子子孫孫）
$("x > y");// x的所有兒子y（兒子）
$("x + y")// 找到所有緊挨在x後面的y
$("x ~ y")// x之後所有的兄弟y


  3. 基本篩選器

    :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標簽


  4. 屬性選擇器

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

    例子：

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


  5. 表單篩選器

    :text
:password
:file
:radio
:checkbox

:submit
:reset
:button

    表單對象屬性:

    :enabled
:disabled
:checked
:selected

    例子：

    找到可用的input標簽

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

$("input:enabled")  // 找到可用的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


七、篩選器方法

下一個元素：

$("#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")

等價於$("div p")

篩選

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

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

等價於 $("div.c1")

補充：

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


八、操作標簽

  1. 樣式操作

    樣式類

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

    示例：

    $("p").css("color", "red"); //將所有p標簽的字體設置為紅色


  2. 位置操作

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

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

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

    例子：返回頂部

    <script>
  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>


  3. 尺寸

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


  4. 文本操作

    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()


  5. 屬性操作

    用於ID等或自定義屬性：

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

    用於checkbox和radio：

    prop() // 獲取屬性
removeProp() // 移除屬性

    註意：

    在1.x及2.x版本的jQuery中使用attr對checkbox進行賦值操作時會出bug，在3.x版本的jQuery中則沒有這個問題。為了相容性，我們在處理checkbox和radio的時候儘量使用特定的prop()，不要使用attr("checked", "checked")。

    prop和attr的區別：

    attr全稱attribute(屬性)

    prop全稱property(屬性)

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

    總結：

    1. 對於標簽上有的能看到的屬性和自定義屬性都用attr
    2. 對於返回布爾值的比如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()// 刪除匹配的元素集合中所有的子節點。

    替換

    replaceWith()
replaceAll()

    克隆

    clone(true)
// clone方法加參數true，克隆標簽並且克隆標簽帶的事件
// clone方法不加參數true，克隆標簽但不克隆標簽帶的事件


九、事件

  1. 常用事件

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


  2. 事件綁定

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

    • events： 事件

    • selector: 選擇器（可選的）

    • function: 事件處理函數


  3. 移除事件

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


  4. 阻止事件後續執行

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

    註意：

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

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

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


  5. 阻止事件冒泡

    e.stopPropagation();


  6. 頁面載入

    當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數，因為它可以極大地提高web應用程式的響應速度。

    兩種寫法：

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

    簡寫：

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

    與window.onload的區別：

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


  7. 事件委托

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

    示例：

    表格中每一行的編輯和刪除按鈕都能觸發相應的事件。

    $("table").on("click", ".delete", function () {
  // 刪除按鈕綁定的事件
})


十、動畫效果

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


十一、each和data

  1. 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);//i是索引，v是每次迴圈的具體元素。
})


  2. jQuery obj.each

    .each(function(index, Element))：

    描述：遍歷一個jQuery對象，為每個匹配元素執行一個函數。

    .each() 方法用來迭代jQuery對象中的每一個DOM元素。每次回調函數執行時，會傳遞當前迴圈次數作為參數(從0開始計數)。由於回調函數是在當前DOM元素為上下文的語境中觸發的，所以關鍵字 this 總是指向這個元素

    // 為每一個li標簽添加c1類
$("li").each(function(){
  $(this).addClass("c1");
});

    註意: jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素 - 被稱為隱式迭代的過程。當這種情況發生時，它通常不需要顯式地迴圈的 .each()方法：

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

    $("li").addClass("c1");  // 對所有標簽做統一操作

    註意：

    在遍歷過程中可以使用 return false提前結束each迴圈。

    終止each迴圈：

    return false；


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






您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Flutter學習筆記（10）--容器組件、圖片組件
    上一篇Flutter學習筆記（9）--組件Widget我們說到了在Flutter中一個非常重要的理念"一切皆為組件"，在Flutter中，所有的元素皆由組件組成，比如說我們常用的文本、圖片、按鈕、動畫等等，接下來說一下在Flutter中最常用到的幾類組件。容器組件（Container）可以理解為在A... ...
  • 更改Android studio中SDK，AVD的預設路徑
    對於大部分首次下載android studio開發android的人來說， 由於Android Studio將會預設把SDK，AVD下載到我們的C盤，造成大量記憶體的占用，那麼如何更改SDK，AVD的路徑呢？ 首先附上SDK，AVD 的預設路徑，在window7中SDK的預設路徑是 C:\Users\ ...
  • 推薦一個Emoji框架
    表情的需求很常見。有的可以看看，沒有的可以先收藏以備不時之需。 這個框架的反應速度很快，界面簡潔漂亮，功能完備。 而且代碼簡潔易懂，便於學習。 GitHub： "https://github.com/negier/EmojiView" ...
  • 如何開發優質的 Flutter App：Flutter App 軟體調試指南
    本次博主帶來的是《深入 Flutter 系列課程》第三講，主要聊聊如何進行 Flutter App 代碼的調試。本次課程將在GitChat平臺上免費進行，通過本場 Chat，您將獲得以下技能： 本場 Chat 依然會結合具體的代碼展開討論。 鏈接：https://gitbook.cn/gitchat ...
  • Java-環境搭建（Mac版）
    對於開發人員來說，電腦的性能很重要，所以換了Mac後需要重新配置開發環境，網上對Windows系統的Java環境配置有很多，所以，這裡就不多介紹。現在記錄一下在Mac電腦上的Java環境配置。 眾所周知，Java開發需要安裝JDK（Java Development Kit），下麵我們就從下載開始一步 ...
  • 微信小程式踩坑日記1——調用微信授權視窗
    0. 引言 微信小程式為了優化用戶體驗，取消了在進入小程式時立馬出現授權視窗。需要用戶主動點擊按鈕，觸發授權視窗。 那麼，在我實踐過程中，出現了以下問題。 1. 具體實現 app.js的onLaunch()函數中，添加獲取用戶個人信息的代碼段。實現在用戶已經授權的情況（例如第二次打開小程式時）下，自 ...
  • Android Studio項目/Flutter 案例中Gradle報錯通用解決方案（包括Unable to tunnel through proxy問題）
    [TOC] Step 1：修改Gradle版本為本地版本     將項目下Android / Gradle / gradle wrapper.properties 文件中的 distributionUrl 修改為本地存在的gradle版本。 如：distri ...
  • 完全卸載Android Studio(卸載得乾乾凈凈)
    步驟其實很簡單，一共三步，但是每一步都需要完成，步驟如下： 打開控制面板或騰訊軟體管家等執行常規的卸載操作。 找到SDK的安裝目錄手動刪除SDK。 進入“C:\Users\<你的用戶名下>”目錄下，手動刪除".android"、".AndroidStudioX.X"、".gradle"目錄（比如我登 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類