jQuery 使用筆記
jQuery 是一個功能豐富、簡單易學的 JS 類別庫，jQuery 對選擇器、屬性操作、樣式操作、DOM 操作、事件處理、Ajax、影片等都做了很好的封裝，能夠讓不精于前端的后端人員也可以寫出內容豐富的頁面
jQuery 基礎
-
jQuery 介紹
- 一個快速、輕量、豐富的 JavaScript 類別庫
- jQuery 官方網站：https://jquery.com
- jQuery 開發檔案：http://www.bejson.com/apidoc/jquery
-
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>"); }) -
獲取 jQuery
-
官網下載所需版本
-
從 CDN 服務器上參考，如 www.bootcdn.cn/jquery
<script src=https://www.cnblogs.com/pgjett/p/"https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -
npm 中運行
npm install jquery命令自動下載
-
-
jQuery 版本
- jQuery 2.0 及以上版本，不兼容 IE 8
- jQuery 2.0 以下版本兼容 IE 8
- jQuery 開發版本：jquery.js，有詳細的注釋，幫助開發者學習和理解
- jQuery 壓縮版本：jquery.min.js，經過壓縮，體積小，加載快
-
jQuery 的兼容性引入
<!--使用 IE 瀏覽器的條件注釋--> <!--chrome、firefox、safari、opera、ie9 及以上--> <!--[if gt IE 8]>--> <script src=https://www.cnblogs.com/pgjett/p/"https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -
jQuery 的使用
// jQuery 入口函式 $(document).ready(function () { // code... }); $(function () { // code... });$(document).ready() 和 window.onload 功能相似，但存在差異
- ready 在 dom 繪制完畢后執行
- onload 在圖片以及其他外部檔案全部加載完畢后執行
-
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
-
-
jQuery 全域物件
- jQuery，別名 $
- $ 的功能
- 引數為 js dom object，將其轉換為 jquery dom object
- 引數為 選擇器，獲取 jquery dom object
- 引數為以
<開頭的標簽，創建元素，可使用appendTo加入到頁面中
jQuery 選擇器
-
基本選擇器
$("#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 標簽 -
層級選擇器
$("ul li") // 選擇 ul 后代元素中的 li $("ul>li") // 選擇 ul 子元素中的 li $("#item+li") // 選擇 #item 后一個兄弟元素 $("#item~li") // 選擇 #item 后所有兄弟元素 -
篩選選擇器
$("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 -
內容選擇器
$("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 -
可見性選擇器
$(":visible") // 選擇可見元素 $(":hidden") // 選擇不可見元素 -
屬性選擇器
$("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 標簽 -
子元素選擇器
// -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 標簽 -
表單選擇器
// 表單控制元件選擇器 $(":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 屬性與樣式
-
屬性操作
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=https://www.cnblogs.com/pgjett/p/"" testAttr="str"> <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> -
樣式操作
// 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() //設定或獲取盒子尺寸 -
文本操作
html([str]) // 設定或獲取 html 代碼，innerHTML text([str]) // 設定或獲取文本內容，innerText val([str]) // 獲取或設定文本框、文本域，相當于 attr("value")
jQuery 篩選
-
過濾
// 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 的子元素的物件集合 -
查找
$("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]) // 選取所有兄弟元素 -
串聯
$("ul").find("li").add("p") // 將選中元素加入到當前物件集合 $("ul").find("li").addBack("p") // 將呼叫者加入當前物件集合 $("ul").find("li"),end() // 回傳最后一次破壞性操作之前的集合 -
遍歷
$("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 操作
-
創建
var $img = $("<img src='https://www.cnblogs.com/pgjett/p/...'>") // 創建 img 標簽元素 -
插入
// 成為子元素最后一個 $("#box").append($img) $("#box").append("<img src='https://www.cnblogs.com/pgjett/p/...' />") $("<img>").appendTo("#box") // 成為子元素的第一個 $("#box").prepend($img) $("#box").prepend("<img src='https://www.cnblogs.com/pgjett/p/...' />") $("<img>").prependTo("#box") // 成為后一個兄弟元素 $("#box").after($img) $("<img>").insertAfter("#box") // 成為前一個兄弟元素 $("#box").before($img) $("<img>").insertbefore("#box") -
包裹
$("#box img").warp("<li>") // 每個 img 都被 li 包裹 $("#box img").warpAll("<li>") // 使用一個 li 包裹 img $("#box").warpInner("<li>") // 用 li 包裹所有子元素 $("#box img").unwarp(); // 去掉 img 的父元素 -
替換
$("#item").replaceWith($("<img src='https://www.cnblogs.com/pgjett/p/...' />")) $("<img src='https://www.cnblogs.com/pgjett/p/...' />").replaceAll("#item") -
洗掉
$("#box").empty() // 清空所有內容 $("#box").remove() // 洗掉呼叫者 $("#box").detach() // 洗掉呼叫者 // 將 romove() 和 detach() 回傳值重新 append 到指定位置，可以實作恢復 // 區別是 detach() 保留事件，remove() 不保留 -
克隆
$("#box").clone() // 回傳完整復制的 jq dom object
jQuery 事件處理
-
事件系結
// 事件名方法 支持鏈式操作 $("#btn").click(function(){}) $("#btn").mouseover(function(){}).mouseout(function(){}) // on 方法 可以用 {} 系結多個事件 $("#btn").on("click",function(){}) // one 方法 只會系結一次，觸發后失效 $("#btn").one("dblclick"function(){}) // 解除事件 $("#btn").off("click") // 不指定事件名則解除全部事件 -
事件委派
// jquery 中許多事件委派方法都被棄用了，可以使用 on() 代替 $("#box").on("click","li",function(){}) // 給 div#box 中的每一個 li 添加 click 方法，包括新 append 進去的 li -
事件物件
$("#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 影片
-
基本效果
// 變化：透明度、大小相關的屬性、外邊距 // 引數：speed：normal，fast，slow 或數值（毫秒數）|| callback：回呼方法 hide(); // 顯示 show(); // 隱藏 toggle(); // 顯示和隱藏切換 -
滑動
// 變化：垂直方向上的屬性 // 引數：speed || callback slideUp(); // 展開 slideDown(); // 收起 slideToggle(); // 展開和收起切換 -
淡出淡入
// 變化：透明度 // 引數：speed || callback fadeIn(); // 淡入 fadeOut(); // 淡出 fadeToggle(); // 狀態切換 -
自定義影片
// 引數：{} || speed || caback animate({"width":500,"padding":20},3000,function(){ // callback... })
jQuery Ajax
-
get/post 方法
// get 請求 資料包含在 url $.get(url,function(){ // callback... },dataType) // post 請求 不指定 data 則不傳遞資料 // data 格式：{name:"Jett",password:"1234"} || name=Jett&&password=1234 $.post(url,data,function(){ // callback... },dataType) -
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 } }) -
serialize()
$("#myForm").serilaze() // 回傳 form 中 指定 name 的控制元件內容組成的字串
jQuery 工具方法
-
陣列
// $.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 }) -
函式
// 相當于原生 js bind() 方法 function test(){ // this -> window } $.proxy(test,{name:"Jett"}); //將 test 函式內部 this 指向 {name:"Jett"} 物件 -
判斷
$.type(); // 回傳型別 $.isFunction(); // 是否是方法 $.isWindow(); // 是否是 window 物件 $.isNumberic(); // 是否是數字（不一定是數字型別，NaN 回傳 false） -
字串
$.trim(); // 去掉字串兩邊空格 $.param({name:"Jett",age:"22"}); // 物件 -> 字串 name=Jett&&age=22
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7142.html
標籤：jQuery
上一篇：方法中this指向的問題