【jQuery】精細學習記錄

【jQuery】精細學習記錄

基礎

基本語法：

$(選擇器).action(回呼函式);
$/jQuery  //jQuery核心函式
$(選擇器) //獲得的jQuery物件

jQuery核心 - jQuery函式

$([選擇器, html, callback])
 - $("#id")
 - $("<div><p>Hello</p></div>")
 - $(function(){ });

jQuery.readyException(error)

當包裹在jQuery()或jQuery( document ).ready()，或等效的函式中的函式同步拋出錯誤的時候，這個方法就會被觸發，錯誤會記錄在控制臺中，并傳遞給window.onerror，如果你想以不同的方式處理這種錯誤，可以覆寫此方法，jQuery中原始碼：

工具

# jQuery.browser.version  //回傳瀏覽器版本號
# jQuery.each(object, [callback])  //遍歷object物件
  $.each( [0,1,2], function(i, n){  //i：鍵名，n：鍵值
     alert( "Item #" + i + ": " + n );
  }); //可以通過return提前結束遍歷
# jQuery.extend([deep], target, object1, [objectN])  
  var settings = { validate: false, limit: 5, name: "foo" };
  var options = { validate: true, name: "bar" };
  jQuery.extend(settings, options); //deep為false時，僅回傳值為合并值，target不變
  //deep為true時，合并target與objects到target,同jQuery.merge(..)
# jQuery.merge(first,second) //會改變first
# jQuery.grep(array, callback, [invert]) //過濾函式，當invert為false[默認]時，回傳為true的值
  $.grep( [0,1,2], function(n,i){
    return n > 0;
  }); //結果：[1, 2]
# jQuery.trim(str) //去除字串前后空格
# jQuery.type(obj) //檢測資料型別
  jQuery.type(true) === "boolean"
  jQuery.type(3) === "number"
# jQuery.param(obj,[traditional]) //將表單元素陣列或者物件序列化，
  var myObject = {
    a: {
      one: 1, 
      two: 2, 
      three: 3
    }, 
    b: [1,2,3]
  };
  var recursiveEncoded = $.param(myObject);
  var recursiveDecoded = decodeURIComponent($.param(myObject));
  alert(recursiveEncoded);
  alert(recursiveDecoded);
  //a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
  //a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3
  ···

jQuery物件

方法：
# length //jQuery物件內部Dom元素個數
  $("img").length //ima元素個數
# get([index]) //獲取指定位置Dom元素
  $("img").get(0)
# each(callback) //對每個Dom元素執行一次回呼函式
  $("div").each(function (index, domEle) { 
    // domEle == this 
    $(domEle).css("backgroundColor", "yellow");  
    if ($(this).is("#stop")) { 
    $("span").text("Stopped at div index #" + index); 
    return false; 
    } 
  });
# index([selector|element]) //回傳
 - html:
    <ul>
      <p></p>
      <li id="foo">foo</li>
      <li id="bar">bar</li>
      <li id="baz">baz</li>
    </ul>
 - jQuery:
    $('li').index(document.getElementById('bar')); //1，傳遞一個DOM物件，回傳這個物件在原先集合中的索引位置
    $('li').index($('#bar')); //1，傳遞一個jQuery物件
    $('li').index($('li:gt(0)')); //1，傳遞一組jQuery物件，回傳這個物件中第一個元素在原先集合中的索引位置
    $('#bar').index('li'); //1，傳遞一個選擇器，回傳#bar在所有li中的索引位置
    $('#baz').index(); //3，不傳遞引數，回傳這個元素在同輩中的索引位置， 
屬性：
# attr(name|properties|key,value|fn) //專門非bool值
  設定屬性：$("img").attr({ src: "test.jpg", alt: "Test Image" });
  獲取屬性：$("img").attr("src");
  # removeAttr(name) 洗掉對應屬性
     $("img").removeAttr("src");
# prop(name|properties|key,value|fn) //專門bool值
  設定屬性：$("input[type='checkbox']").prop({ disabled: true });
  獲取屬性：$("input[type='checkbox']").prop("checked");
  # removeProp(name) 洗掉對應屬性
     $("p").removeProp("luggageCode");
# $("p").append("The secret luggage code is: ") 添加內容
# addClass(class|fn)  添加類
  $("p").addClass("selected1 selected2");
   - $("p").removeClass("selected"); //洗掉類
# $("p").toggleClass("selected"); //切換屬性
# 獲取元素內容
 - .html()
   $('p').html(); //獲取
   $('p').html("Hello <b>world</b>!"); //設定
 - .text() 用法同.html()
 - .val() 獲取value值

檔案就緒事件：

$(document).ready(function(){
	jQuery···
});
$(function(){
	jQuery···
});

選擇器

同CSS選擇器，語法為$(選擇器)

$("*")              選取所有元素
$(this)             選取當前元素
$("#id", ".class")  復合選擇器
$(div p span)       層級選擇器 //div下的p元素中的span元素
$(div>p)            父子選擇器 //div下的所有p元素
$(div+p)            相鄰元素選擇器 //div后面的p元素(僅一個p)
$(div~p)            兄弟選擇器  //div后面的所有p元素(同級別)
$(.p:last)          類選擇器 加 過濾選擇器  第一個和最后一個（first 或者 last）
$("#mytable td:odd")      層級選擇 加 過濾選擇器 奇偶（odd 或者 even）
$("div p:eq(2)")    索引選擇器 div下的第三個p元素（索引是從0開始）
$("a[href='https://www.cnblogs.com/krnl-dpr/archive/2021/05/02/www.baidu.com']")  屬性選擇器
$("p:contains(test)")        // 內容過濾選擇器，包含text內容的p元素
$(":empty")        //內容過濾選擇器，所有空標簽（不包含子標簽和內容的標簽）parent 相反
$(":hidden")       //所有隱藏元素 visible 
$("input:enabled") //選取所有啟用的表單元素
$(":disabled")     //所有不可用的元素
$("input:checked") //獲取所有選中的復選框單選按鈕等
$("select option:selected") //獲取選中的選項元素
$("button") - $(":button")  //前者選擇button元素 - 后者選擇所有button（包括type為button的input）

事件

mouseover-mouseout: 子元素移入、出時也會觸發

mouseenter-mouseleave: 子元素移入、出時不會觸發

? hover: 即使用的是enter-leavek

$(window).keypress(function(event){
    //event.which是獲取ASCII碼，前面的函式是將ASCII碼轉換成字符，空格鍵和Enter鍵輸出均為空白，
    console.log(String.fromCharCode(event.which));
    //從event物件中key屬性獲取字符，但是Enter鍵的key值為"Enter"，空白鍵還是空白" "，
    console.log(event.key);
});

事件系結

eventName(function(){})
on(eventName, function(){})

事件解綁

off() //解除全部
off(eventName) //解除某個event

事件坐標

event.clientX\clientY //相對視口
event.pageX\pageY //相對頁面
event.offsetX\offsetY //相對事件元素左上角

阻止事件

event.stopPropagation()  //阻止事件冒泡
event.preventDefault()  //阻止默認事件行為，如超鏈接的默認事件是跳轉到鏈接

事件委托

delegate(selector,[type],[data],fn)
 - $("ul").delegate("li", "click", function(){})
undelegate(eventName) //解除事件委托

CSS

css(name|pro|[,val|fn])

$("p").css("color"); \\獲取css樣式
$("p").css({ "color": "#ff0011", "background": "blue" }); \\設定css樣式

位置

- offset([coordinates])  \\獲取匹配元素在當前視口的相對偏移，
$("p:last").offset({ top: 10, left: 30 }); \\設定
$("p:last").offset().left; \\獲取
- position()  \\獲取匹配元素相對父元素的偏移
$("p:last").position().top; \\僅獲取
- scrollTop([val])
  scrollLeft([val])  \\設定或獲取所選元素的垂直和水平滾動條，如果沒有則忽略
$("div.demo").scrollLeft(300); \\設定
$("div.demo").scrollLeft(); \\獲取

尺寸

height(): height
width(): width
innerHeight(): height+padding
innerWidth(): width+padding
outerHeight(bool): height+padding+border
outerWidth(bool): width+padding+border //bool為true，加上margin

元素篩選

過濾

回傳的jQuery物件的···
first() 第一個
last() ···
eq(n) 第n+1個
filter(selector) 僅保留···
not(selector) 濾除···
has(selector) 內含···
hasClass(··) 選擇標有某class的元素

查找

children(selector)  \\取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合，
find(selector)  \\取得一個包含匹配的元素集合中每一個元素的所有后代元素的元素集合，
parent() \\找到唯一父元素
parents([selector]) \\找到祖先元素
后面參考下圖：
next() //下方兄弟元素
prev() //上方兄弟元素
siblings() //所有兄弟元素

檔案處理

內部插入

append()  //插入到元素最后
appendTo()
 - $('#id').append('<p>1</p>')
   $('<p>1</p>').appendTo($('#id'))
prepend()  //插入到元素最前
prependTo()

替換

replaceAll(selector)
replaceWith(content|fn) //fn是直接移動位置，而不是復制一份

外部插入

after()
before()
insertAfter()
insertBefore()
 - <p>I would like to say: </p><div id="foo">Hello</div>
   $("p").insertAfter("#foo"); 或 $("#foo").after("p")
   <div id="foo">Hello</div><p>I would like to say: </p>

洗掉

empty() //元素內部置為空白
remove([selector]) //移除元素

效果

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])//元素顯示與隱藏
         實質：對display屬性進行操作
toggle([speed],[easing],[fn])
	用于系結兩個或多個事件處理器函式，以回應被選元素的輪流的 click 事件，
    如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的，
    如果有多個fn，則隨著點擊依次執行（回呼函式
---調整高度
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
---調整不透明度
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeTo([[speed],opacity,[easing],[fn]]) //調整
fadeToggle([speed,[easing],[fn]])

網路請求

更底層+靈活 - $.ajax()

- jQuery.ajax(url,[settings])
\\jQuery 底層 AJAX 實作，
\\簡單易用的高層實作見 $.get, $.post 等，
\\$.ajax() 回傳其創建的 XMLHttpRequest 物件，
\\你需要操作不常用的選項，以獲得更多的靈活性，

- 回呼函式
需要使用回呼函式處理$.ajax()得到的資料，
\\beforeSend、error、dataFilter、success、complete，
beforeSend 在發送請求之前呼叫，并且傳入一個XMLHttpRequest作為引數，
error 在請求出錯時呼叫，傳入XMLHttpRequest物件，描述錯誤型別的字串以及一個例外物件（如果有的話）
dataFilter 在請求成功之后呼叫，傳入回傳的資料以及"dataType"引數的值，并且必須回傳新的資料（可能是處理過的）傳遞給success回呼函式，
success 當請求之后呼叫，傳入回傳后的資料，以及包含成功代碼的字串，
complete 當請求完成之后呼叫這個函式，無論成功或失敗，傳入XMLHttpRequest物件，以及一個包含成功或錯誤代碼的字串，

- settings:選項
async:Boolean  (默認: true) 默認設定下，所有請求均為異步請求，
contentType:String  (默認: "application/x-www-form-urlencoded") 發送資訊至服務器時內容編碼型別，
context:Object  設定Ajax回呼函式的背景關系(this)，默認this就指向呼叫本次AJAX請求時傳遞的options引數，
  	就像這樣：
	$.ajax({ url: "test.html", context: document.body, success: function(){
	    $(this).addClass("done");
	}});
data:Object,String  發送到服務器的資料，
dataType:String  預期服務器回傳的資料型別，
error:Function  (默認: 自動判斷 (xml 或 html)) 請求失敗時呼叫此函式，有以下三個引數：XMLHttpRequest 物件、錯誤資訊、（可選）捕獲的例外物件，
headers:map  Header Default: {} 一個額外的"{鍵:值}"對映射到請求一起發送，
···見檔案

詳情可見中文檔案jQuery.Ajax

$.get()

jQuery.get(url, [data], [callback], [type])
\\通過 HTTP GET 請求載入資訊，
\\簡單的 GET 請求功能，復雜請使用 $.ajax() ，
引數含義同后面 $.post()

$.getJson()

同 $.get(·,·,·,json)

$.getScript()

同 $.get(·,·,·,script)

$.post()

jQuery.post(url, [data], [callback], [type])
\\通過 HTTP POST 請求載入資訊，簡單的 POST 請求功能，
\\復雜請使用 $.ajax()
url:發送請求地址，
data:待發送 Key/value 引數，
callback:發送成功時回呼函式，
type:回傳內容格式，xml, html, script, json, text, _default，

$(selector).load()

load(url, [data], [callback])
\\載入檔案代碼并插入至 DOM 中，
\\會覆寫Dom元素原有值

serialize()

\\序串列表格內容為字串，
$("form").serialize()

詳細中文檔案

標籤：其他

上一篇：【jQuery】精細學習記錄

下一篇：CSS新特性contain，控制頁面的重繪與重排