jQuery 使用筆記

来源:https://www.cnblogs.com/pgjett/archive/2020/02/23/12348633.html
-Advertisement-
Play Games

jQuery 使用筆記 jQuery 基礎 1. jQuery 介紹 一個快速、輕量、豐富的 JavaScript 類庫 jQuery 官方網站：https://jquery.com jQuery 開發文檔：http://www.bejson.com/apidoc/jquery 2. jQuery ...


jQuery 使用筆記

jQuery 基礎

  1. jQuery 介紹

  2. jQuery 優點

    • 開源、免費、易學
    • 相容性好
    • 強大的選擇器
    • 鏈式操作
    • 便捷的的 dom 操作
    • 可靠的事件機制
    • 簡單的 ajax
    • 豐富的動畫和特效插件
    $(document).ready(funtion(){
                  $("#box").html("Hello").width(400).height(300).css("border","1px solid #ccc").css("padding","10px").append("<p>Hello</p>");
})

  3. 獲取 jQuery

    • 官網下載所需版本

    • 從 CDN 伺服器上引用，如 www.bootcdn.cn/jquery

      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    • npm 中運行 npm install jquery 命令自動下載

  4. jQuery 版本

    • jQuery 2.0 及以上版本，不相容 IE 8
    • jQuery 2.0 以下版本相容 IE 8
    • jQuery 開發版本：jquery.js，有詳細的註釋，幫助開發者學習和理解
    • jQuery 壓縮版本：jquery.min.js，經過壓縮，體積小，載入快

  5. jQuery 的相容性引入

    <!--使用 IE  瀏覽器的條件註釋-->
<!--chrome、firefox、safari、opera、ie9 及以上-->
<!--[if gt IE 8]>-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!--<![endif]-->

<!--ie8 及以下-->
<!--[if lte IE 8]>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<![endif]-->

  6. jQuery 的使用

     // jQuery 入口函數
    $(document).ready(function () {
        // code...
    });
    $(function () {
        // code...
    });

    $(document).ready() 和 window.onload 功能相似，但存在差異

    • ready 在 dom 繪製完畢後執行
    • onload 在圖片以及其他外部文件全部載入完畢後執行

  7. jQuery Dom 對象

    • querySelector("#box")：原生 js dom 對象

    • $("#box")：jquery dom 對象，不能使用原生方法

    • 相互轉換

      let jsBox = document.querySelector("#box");
$(jsBox).html("Hello");// 使用 $()，js dom object -> jq dom object
let jqBox=$("#box");// 獲取到的是一個 dom object 的集合
jqBox[0].innerHTML="Hello";// 使用 [下標]，jq dom object -> js dom object

  8. jQuery 全局對象

    • jQuery，別名 $
    • $ 的功能
      • 參數為 js dom object，將其轉換為 jquery dom object
      • 參數為 選擇器，獲取 jquery dom object
      • 參數為以 < 開頭的標簽，創建元素，可使用 appendTo 加入到頁面中

jQuery 選擇器

  1. 基本選擇器

    $("#box") // id selector 選擇 id 為 box 的標簽
$(".item") // class selector 選擇 class 為 item 的標簽
$("li") // tag name selector 選擇全部 li 標簽
$("*") // gloal selector 選擇全部標簽
$("li.item") // combo selector 選擇 clss 為 item 的 li 標簽
$("li,p") // multi selector 選擇所有 li 和 p 標簽

  2. 層級選擇器

    $("ul li") // 選擇 ul 後代元素中的 li
$("ul>li") // 選擇 ul 子元素中的 li
$("#item+li") // 選擇 #item 後一個兄弟元素 
$("#item~li") // 選擇 #item 後所有兄弟元素

  3. 篩選選擇器

    $("ul li:first") // 選擇 li 中的第一個 li 標簽
$("ul li:last") // 選擇 li 中的最後一個 li 標簽
$("ul li:eq(i)") // 選擇 li 中第 i 個，從 0 開始
$("ul li:lt(i)") // 選擇 li 中小於 i 的，從 0 開始
$("ul li:gt(i)") // 選擇 li 中大於 i 的，從 0 開始
$("ul li:odd") // 選擇奇數次序的元素，從 0 開始
$("ul li:even") // 選擇偶數次序的元素，從 0 開始
$("ul li:not(.item)") // 選擇 li 中 class 不是 item 的元素
$(":header") // 選擇所有標題標簽
$(":focus") // 選擇獲取焦點的元素
$(":target") // 選擇 url 指向的錨點元素，錨點可以是 a 標簽，也可以是 id

  4. 內容選擇器

    $("li:contains(str)") // 選擇內部包含 str 的 li 標簽
$("li:has(.item)") // 選擇包含 class 是 item 的後代元素的 li 標簽
$("ul li:empty") // 選擇沒有內容的 li，innerHTML.length = 0
$("ul li:parent") // 選擇有內容（文本或子元素）的 li，innHTML.length != 0

  5. 可見性選擇器

    $(":visible") // 選擇可見元素
$(":hidden") // 選擇不可見元素

  6. 屬性選擇器

    $("img[alt]") // 選擇有 alt 屬性的 img 標簽
$("img[alt='str']") // 選擇有 alt = 'str' 的 img 標簽
$("img[alt!='str']") // 選擇有 alt != 'str' 的 img 標簽
$("img[alt^='s']") // 選擇有 alt 以 s 開頭的 img 標簽
$("img[alt$='r']") // 選擇有 alt 以 r 結尾的 img 標簽
$("img[alt][title]") // 選擇同時具有 alt、title 屬性的 img 標簽

  7. 子元素選擇器

    // -child 對所有兄弟元素排序，從 1 開始
$("li:first-child") // 選擇是 li 且排在所有兄弟元素第一個的 li 標簽
$("li:last-child") // 選擇是 li 且排在所有兄弟元素最後一個的 li 標簽
$("li:nth-child(i)") // 選擇是 li 且排在所有兄弟元素第 i 個的 li 標簽
$("li:nth-last-child(i)") // 選擇 li 且排在所有兄弟元素倒數第 i 個 li 標簽
$("li:only-child") // 選擇沒有兄弟元素的 li 標簽
// -of-type 對指定標簽元素排序，從 1 開始
$("li:first-of-type") // 選擇是 li 且排在所有兄弟 li 第一個的 li 標簽
$("li:last-of-type") // 選擇是 li 且排在所有兄弟 li 最後一個的 li 標簽
$("li:nth-of-type(i)") // 選擇是 li 且排在所有兄弟 li 第 i 個的 li 標簽
$("li:nth-last-of-type(i)") // 選擇是 li 且排在所有兄弟 li 倒數第 i 個的 li 標簽
$("li:only-of-type") // 選擇可以有兄弟元素，但同標簽元素只有它一個的 li 標簽

  8. 表單選擇器

    // 表單控制項選擇器
$(":input") //選擇所有表單控制項 input/select/textarea/button...
$(":text") // 選擇文本框
$(":password") // 選擇密碼框
$(":radio") //選擇單選按鈕
$(":checkbox") // 選擇多選按鈕
$(":file") //選擇文本域
$(":submit") // 選擇 input（type=submit）、button（不指定 type 或 type=submit）
$(":reset") // 選擇 input（type=reset）、button（type=reset）
$(":button") // 選擇 button、input（type=button）
// 表單對象選擇器
$(":disabled") // 選擇不可用元素
$(":enabled") // 選擇可用元素
$(":checked") // 選擇 radio、checkbox 被選中的元素
$(":selected") // 選擇下拉列表被選中的元素

jQuery 屬性與樣式

  1. 屬性操作

    attr(attrName[,attrValue]) // 操作所有屬性，包括自定義屬性
prop(attrName[,attrValue]) //操作符合規範的屬性
removeAttr((attrName) // 刪除屬性
removeProp((attrName) // 刪除通過 prop() 添加的屬性
attr("class",value) // 屬性設置
hasClass(className) // 判斷是否有相應 class
addClass(className) // 添加 class
removeClass(className) // 移除 class
toggleClass(className) // 該 class 存在就移除，沒有就添加

    for example

    <img id="img-item" src="" testAttr="str"></img>
<script src="/lib/jQuery-3.4.1.js"></script>
<script type="text/javascript">
    // 獲取屬性
    $("#img-item").attr("src"); // 獲取 src
    $("#img-item").prop("src"); // 獲取 src
    $("#img-item").attr("testAttr"); // 獲取 testAttr
    $("#img-item").prop("testAttr");// 獲取不到不符合規範的屬性，undefined
    // 設置屬性
    $("#img-item").attr("src", "..."); // 設置 src
    $("#img-item").prop("src", "..."); // 設置 src
</script>

  2. 樣式操作

    // css
css("background-color","#ccc") // 設置或獲取 css 屬性
css({"width":"400px","height":"200px"}) // 一次設置多個 css 屬性
// 位置
offset() // 獲取或設置元素在文檔中的坐標 (top,left)
position() // 元素在定位的祖先元素中的坐標 (top,left)
srollTop() // 獲取或設置 Y 滾動條位置
scrollLeft() // 獲取或設置 X 滾動條位置
// 尺寸
width(),height() // 設置或獲取內容尺寸
innerWidth(),innerHeight() // 設置或獲取 內容尺寸與 padding 的和
outerWidth(),outHeight() //設置或獲取盒子尺寸

  3. 文本操作

    html([str]) // 設置或獲取 html 代碼，innerHTML
text([str]) // 設置或獲取文本內容，innerText
val([str]) // 獲取或設置文本框、文本域，相當於 attr("value")

jQuery 篩選

  1. 過濾

    // jq dom object function
$("ul li").first() // 返回第一個 jq dom object
$("ul li").last() // 返回最後一個 jq dom object
$("ul li").eq(i) // 返回第 i 個 jq dom object
$("ul li").not(".itme") // 排除滿足 class = item 的對象後，返回集合
$("ul li").filter(".item") // 返回滿足 class = item 條件的對象集合
$("ul li").slice(a[,b]) // 返回 a 到最後一個元素或 a 到 b（左閉右開）的對象集合
$("ul li").has('.item') // 返回有 class 為 item 的子元素的對象集合

  2. 查找

    $("ul").children([selector]) // 選取滿足條件的子元素
$("ul").find("li") // 選取滿足條件的後代元素
$("ul").parent([selector]) // 選取滿足條件的父元素
$("ul").parents([selector]) // 選取滿足條件的祖先元素
$("ul").parentsUntil([selector]) // 選取所有祖先元素直到 selector（不包括 selector）
$("ul").offsetParent() // 選取第一個定位的祖先元素，沒有則選中 html 標簽
$(".item").next([selector]) // 選取滿足條件的後一個兄弟元素
$(".item").nextAll([selector]) // 選取滿足條件的後面所有兄弟元素
$(".item").nextUntil([selector]) // 選取後面所有兄弟元素直到 selector（不包括 selector）
$(".item").prev([selector]) // 選取滿足條件的前一個兄弟元素
$(".item").prevAll([selector]) //  選取滿足條件的前面所有兄弟元素
$(".item").prevUntil([selector]) // 選取前面所有兄弟元素直到 selector（不包括 selector）
$(".item").siblings([selector]) // 選取所有兄弟元素

  3. 串聯

    $("ul").find("li").add("p") // 將選中元素加入到當前對象集合
$("ul").find("li").addBack("p") // 將調用者加入當前對象集合
$("ul").find("li"),end() // 返回最後一次破壞性操作之前的集合

  4. 遍歷

    $("ul li").each(function(index,ele){
    // 對序號 index 和 元素對象 ele 進行處理 
})
$("ul li").map(function(index,ele){
    // 對序號 index 和 元素對象 ele 進行處理
    // 並產生新的集合
    return $(ele).html();
})
$("ul li").length // 返回集合元素個數
$("ul li").index() // 返回元素在兄弟元素中的索引
$("ul li").get([i]) // 返回集合中對應索引的原生 dom 對象，不給參數則返回原生對象數組
$("ul li").eq(i) // 返回集合中對應索引的 jquery dom 對象

jQuery DOM 操作

  1. 創建

    var $img = $("<img src='...'>") // 創建 img 標簽元素

  2. 插入

    // 成為子元素最後一個
$("#box").append($img) 
$("#box").append("<img src='...' />")
$("<img>").appendTo("#box")
// 成為子元素的第一個
$("#box").prepend($img) 
$("#box").prepend("<img src='...' />")
$("<img>").prependTo("#box")
// 成為後一個兄弟元素
$("#box").after($img) 
$("<img>").insertAfter("#box")
// 成為前一個兄弟元素
$("#box").before($img)
$("<img>").insertbefore("#box")

  3. 包裹

    $("#box img").warp("<li>") // 每個 img 都被 li 包裹
$("#box img").warpAll("<li>") // 使用一個 li 包裹 img 
$("#box").warpInner("<li>") // 用 li 包裹所有子元素
$("#box img").unwarp(); // 去掉 img 的父元素

  4. 替換

    $("#item").replaceWith($("<img src='...' />"))
$("<img src='...' />").replaceAll("#item")

  5. 刪除

    $("#box").empty() // 清空所有內容
$("#box").remove() // 刪除調用者
$("#box").detach() // 刪除調用者
// 將 romove() 和 detach() 返回值重新 append 到指定位置，可以實現恢復
// 區別是 detach() 保留事件，remove() 不保留

  6. 克隆

    $("#box").clone() // 返回完整複製的 jq dom object

jQuery 事件處理

  1. 事件綁定

    // 事件名方法 支持鏈式操作
$("#btn").click(function(){})
$("#btn").mouseover(function(){}).mouseout(function(){})
// on 方法 可以用 {} 綁定多個事件
$("#btn").on("click",function(){})
// one 方法 只會綁定一次，觸發後失效
$("#btn").one("dblclick"function(){})
// 解除事件
$("#btn").off("click") // 不指定事件名則解除全部事件

  2. 事件委派

    // jquery 中許多事件委派方法都被棄用了，可以使用 on() 代替
$("#box").on("click","li",function(){})
// 給 div#box 中的每一個 li 添加 click 方法，包括新 append 進去的 li

  3. 事件對象

    $("#box").on("click",function(event){
    console.log(event.type); // 事件名稱
 console.log(event.pageX); // 滑鼠在文檔橫坐標
    console.log(event.pageY); // 滑鼠在文檔眾坐標
    console.log(event.target) // 觸發事件的元素
    console.log(event.which) // 按下鍵盤的 ascii 碼
    event.prevent(); // 阻止預設操作，如 a 標簽的 href
    event.stopPropagation(); // 阻止事件冒泡，即不會觸發父級元素的事件
    // return false 既可以阻止事件冒泡，又可以阻止預設操作
})

jQuery 動畫

  1. 基本效果

    // 變化：透明度、大小相關的屬性、外邊距
// 參數：speed：normal，fast，slow 或數值（毫秒數）|| callback：回調方法
hide(); // 顯示
show(); // 隱藏
toggle(); // 顯示和隱藏切換

  2. 滑動

    // 變化：垂直方向上的屬性
// 參數：speed || callback
slideUp(); // 展開
slideDown(); // 收起
slideToggle(); // 展開和收起切換

  3. 淡出淡入

    // 變化：透明度
// 參數：speed || callback
fadeIn(); // 淡入
fadeOut(); // 淡出
fadeToggle(); // 狀態切換

  4. 自定義動畫

    // 參數：{} || speed || caback
animate({"width":500,"padding":20},3000,function(){
    // callback...
})

jQuery Ajax

  1. get/post 方法

    // get 請求 數據包含在 url
$.get(url,function(){
    // callback...
},dataType)
// post 請求 不指定 data 則不傳遞數據
// data 格式：{name:"Jett",password:"1234"} || name=Jett&&password=1234
$.get(url,data,function(){
    // callback...
},dataType)

  2. ajax 方法

    $.ajax({
    url:"...",
    type:"get",
    asny:true,
    dataType:"json" // 指定為 json，會自動轉換成 js object
    data:{name:"Jett",password:"1234"} // 或 "name=Jett&&password:1234"
    success:function(){
        // callback...
    }
    error:function(){
        // callback
    }
})

  3. serialize()

    $("#myForm").serilaze()
// 返回 form 中 指定 name 的控制項內容組成的字元串

jQuery 工具方法

  1. 數組

    // $.each()：遍曆數組和類數組
var list = [1,2,3,4];
$.each(,funtion(index,item){
 console.log(index,item);
})
// $.map：操作數組和類數組，返回新的集合
list = $.map(,funtion(index,item){
    return item + 1; // 將 list 每個元素 +1
})

  2. 函數

    // 相當於原生 js bind() 方法
function test(){
    // this -> window
}
$.proxy(test,{name:"Jett"}); //將 test 函數內部 this 指向 {name:"Jett"} 對象

  3. 判斷

    $.type(); // 返回類型
$.isFunction(); // 是否是方法
$.isWindow(); // 是否是 window 對象
$.isNumberic(); // 是否是數字（不一定是數字類型，NaN 返回 false）

  4. 字元串

    $.trim(); // 去掉字元串兩邊空格
$.param({name:"Jett",age:"22"}); // 對象 -> 字元串 name=Jett&&age=22

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

-Advertisement-
Play Games
更多相關文章
  • vuex知識筆記，及與localStorage和sessionStorage的區別
    Vuex和localStorage、sesstionStorage的區別，應用場景。vuex的State、Getter、Mutation、Action、Module等技術知識點掌握。 ...
  • css常用元素通用樣式表
    @charset "utf-8";html,body,a,h1,h2,h3,h4,h5,h6,p,a,b,i,em,s,u,dl,dt,dd,ul,ol,li,strong,span,table,th,tr,td,img,div,form,fieldset,legend,input,button,s ...
  • JavaScript之DOM基礎
    DOM(Document Object Model)文檔對象模型，針對Html和XML的文檔的對象API，是一項 W3C (World Wide Web Consortium) 標準。文檔對象模型（DOM）是中立於平臺和語言的介面，它允許程式和腳本動態地訪問、更新文檔的內容、結構和樣式。本文主要以一... ...
  • css3新增邊框、陰影、邊框、背景、文本、字體
    css3和css有什麼區別？簡單來講css3是css的升級版本，css3新增樣式有圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定製字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄佈局、媒體查詢等。下麵是該節總結練習：邊框... ...
  • 數據請說話
    |這個作業屬於哪個課程| "軟體工程" | | | | |這個作業要求在哪裡| "第一次結對作業" | |這個作業的目標|數據可視化| |作業正文|見下方| |其他參考文獻|無| 壹 天大地大友誼最大 ================== 魏忠傑 學號: 211706203 博客地址: "魏忠傑" ...
  • 學習CSS之用CSS實現時鐘效果
    一、機械時鐘 1.最終效果 用 CSS 繪製的機械時鐘效果如下： HTML 中代碼結構為： <body> <div class="clock"> <ul class="min"></ul> <ul class="hour"></ul> <ul class="numbers"></ul> <ul cl ...
  • 頭部佈局，搜索驗證和AJAX自動搜索提示，並封裝成組件，提高代碼復用性
    index.html 頭部區結構和樣式 效果圖 靜態樣式 index.html中的部分 <!-- 頭部 --> <div class="header"> <div class="container"> <!-- h1標簽是為了搜索引擎優化，表示重要 但是頁面內不要出現太多 --> <h1 class ...
  • jQuery 源碼解析(三十一) 動畫模塊 便捷動畫詳解
    jquery在$.animate()這個介面上又封裝了幾個API，用於進行匹配元素的便捷動畫，如下: $(selector).show(speed,easing,callback) ;如果被選元素已被隱藏，則顯示這些元素 $(selector).hide(speed,easing,callback) ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類