jQuery 選擇器全解析

原創 剑若成风 2020-05-25 23:59

jQuery 提供了一套功能強大的工具來匹配文檔中的一組元素。

要將任何元字符（例如 !"#$%&’()*+,./:;<=>?@[\]^`{|}~）用作名稱的文字部分，必須使用兩個反斜槓對它進行轉義：\\ 。例如，元素 id=“foo.bar” 可以使用選擇器 $("#foo\\.bar")。

基本選擇器

  • jQuery( “*” )：選擇所有元素。

  • jQuery( “.class” )：選擇具有給定類的所有元素。

  • jQuery( “element” )：元素選擇器。選擇具有給定標籤名稱的所有元素。

  • jQuery( “#id” )：選擇具有給定 id 屬性的單個元素。

    每個id值在文檔中只能使用一次。如果爲多個元素分配了相同的 ID，則使用該 ID 的查詢將僅選擇 DOM 中的第一個匹配元素。但是，不應依賴這種行爲。

    如果 id 包含句點或冒號等字符，則必須使用反斜槓對這些字符進行轉義。

  • jQuery( “selector1, selector2, selectorN” )：選擇所有指定選擇器的合併結果。

屬性選擇器

  • jQuery(" [attribute | =‘value’]")：屬性包含前綴選擇器。選擇具有指定屬性的元素，該元素的值等於給定字符串，或者以該字符串開頭，後跟連字符（-）。

    例：查找具有 hreflang 屬性爲英語的所有鏈接。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContainsPrefix demo</title>
  <style>
  a {
    display: inline-block;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>
 
<script>
$( "a[hreflang|='en']" ).css( "border", "3px dotted green" );
</script>
 
</body>
</html>

  • jQuery( “[attribute*=‘value’]” )：屬性包含選擇器。選擇具有指定屬性且其值包含給定子字符串的元素。這是與值匹配的最慷慨的 jQuery 屬性選擇器。如果選擇器的字符串出現在元素屬性值內的任何位置，它將選擇一個元素。將此選擇器與“屬性包含單詞”選擇器（例如[attr~=“word”]）進行比較，這在許多情況下更爲合適。

    例：查找名稱屬性包含“man”的所有輸入，並使用一些文本設置值。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContains demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">
 
<script>
$( "input[name*='man']" ).val( "has man in it!" );
</script>
 
</body>
</html>

  • jQuery( “[attribute~=‘value’]” )：屬性包含單詞選擇器。選擇具有指定屬性的元素，該元素的值包含給定單詞，以空格分隔。

    例：查找具有包含單詞“ man”的name屬性的所有輸入，並使用一些文本設置值。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeContainsWord demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input name="man-news">
<input name="milk man">
<input name="letterman2">
<input name="newmilk">
 
<script>
$( "input[name~='man']" ).val( "mr. man is in it!" );
</script>
 
</body>
</html>

  • jQuery( “[attribute^=‘value’]” )：選擇具有指定屬性的元素，該元素的值完全以給定字符串開頭。

    此選擇器對於標識由服務器端框架生成的頁面中的元素很有用，該服務器端框架生成具有系統元素 ID 的 HTML。但是，它比使用類選擇器要慢，因此，如果可以的話，請利用類將相似的元素分組。

  • jQuery( “[attribute$=‘value’]” )：選擇具有指定屬性且其值完全以給定字符串結尾的元素。比較是區分大小寫的。

    例：查找所有以“字母”結尾的屬性名稱的輸入，並在其中輸入文本。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attributeEndsWith demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<input name="newsletter">
<input name="milkman">
<input name="jobletter">
 
<script>
$( "input[name$='letter']" ).val( "a letter" );
</script>
 
</body>
</html>

  • jQuery( “[attribute=‘value’]” )：選擇具有指定屬性且其值完全等於某個值的元素。

  • jQuery( “[attribute!=‘value’]” )：選擇不具有指定屬性或具有指定屬性但沒有特定值的元素。此選擇器等效於:not([attr='value'])。

    因爲[name!="value"]是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢[name!="value"]無法利用本機DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用$("your-pure-css-selector").not("[name='value']")。

  • jQuery( “[attribute]” )：選擇具有指定屬性且具有任何值的元素。

  • jQuery( “[attributeFilter1][attributeFilter2][attributeFilterN]” )：多屬性選擇器。匹配與所有指定的屬性過濾器匹配的元素。

表單選擇器

  • jQuery( “:button” )：選擇所有按鈕元素和按鈕類型的元素。此選擇器等效於$("button, input[type='button']")。

    因爲:button是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:button無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:button選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":button")。

  • jQuery( “:checkbox” )：選中所有類型爲複選框的元素。$(":checkbox")等同於$("[type=checkbox]")。與其他僞類選擇器（以 “:” 開頭的選擇器）一樣，建議在其前面加上標籤名稱或其他選擇器。否則，暗示通用選擇器（"*"）。換句話說，裸露$(':checkbox')等效於$("*:checkbox")，因此應改用$("input:checkbox")。

    因爲:checkbox是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:checkbox無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用[type="checkbox"]。

  • jQuery( “:checked” )：匹配所有選中的元素。在:checked選擇適用於複選框，單選按鈕和選項select的元素。要僅檢索select元素的選定選項，請使用:selected選擇器。

  • jQuery( “:disabled” )：選擇所有禁用的元素。

    與其他僞類選擇器（以 “:” 開頭的選擇器）一樣，建議在其前面加上標籤名稱或其他選擇器。否則，暗示通用選擇器（"*"）。換句話說，$(':disabled')等效於$('*:disabled')，因此應改用$('input:disabled')或類似的符號。

    儘管選擇的結果通常是相同的，但:disabled選擇器與[disabled]屬性選擇器有細微的不同。:disabled選擇實際上禁用的元素，而[disabled]選擇設置了禁用屬性的元素。

    :disabled選擇器只應用於選擇支持disabled屬性的 HTML 元素（<button>, <input>, <optgroup>, <option>, <select>, <textarea>, <menuitem>, <fieldset>）。

  • jQuery( “:enabled” )：選擇所有啓用的元素。

    與其他僞類選擇器（以 “:” 開頭的選擇器）一樣，建議在其前面加上標籤名稱或其他選擇器。否則，暗示通用選擇器（"*"）。換句話說，$(":enabled")等效於$("*:enabled")，因此應改用$("input:enabled")或類似的符號。

    儘管選擇的結果通常相同，但是:enabled選擇器與:not([disabled])選擇器有細微的差別。:enabled選擇實際上啓用的元素，而:not([disabled])選擇未設置禁用屬性（無論其值如何）的元素。

    :enabled選擇器只應用於選擇支持disabled屬性的 HTML 元素（<button>, <input>, <optgroup>, <option>, <select>, <textarea>, <menuitem>, <fieldset>）。

  • jQuery( “:file” )：選擇文件類型的所有元素。

    :file等同於[type="file"]。與其他僞類選擇器（以 “:” 開頭的選擇器）一樣，建議在其前面加上標籤名稱或其他選擇器。否則，暗示通用選擇器（"*"）。換句話說，$( ":file" )等效於$("*:file" )，因此應改用$( "input:file" )。

    因爲:file是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:file無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用[type="file"]。

  • jQuery( “:image” )：選擇圖像類型的所有元素。:image 相當於 [type="image"]。

    因爲:image是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:image無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用[type="image"]。

  • jQuery( “:input” )：選擇所有input，textarea，select和button元素。:input選擇器基本上選擇所有表單控件。

    因爲:input是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:input無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:input選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":input")。

  • jQuery( “:password” )：選擇所有密碼類型的元素。

    $(":password")等同於$("[type=password]")。與其他僞類選擇器（以 “:” 開頭的選擇器）一樣，建議在其前面加上標籤名稱或其他選擇器。否則，暗示通用選擇器（"*"）。換句話說，$(":password")等效於$("*:password")，因此應改用$("input:password")。

    因爲:password是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:password無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用[type="password"]。

  • jQuery( “:radio” )：選擇所有單選類型的元素。

    $(":radio")等同於$("[type=radio]")。與其他僞類選擇器（以 “:” 開頭的選擇器）一樣，建議在其前面加上標籤名稱或其他選擇器。否則，暗示通用選擇器（"*"）。換句話說，$(":radio")等效於$("*:radio")，因此應改用$("input:radio")。

    要選擇一組相關的單選按鈕，可以使用$("input[name=gender]:radio")。

    因爲:radio是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:radio無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用[type="radio"]。

  • jQuery( “:reset” )：選擇所有類型爲 reset 的元素。:reset 相當於 [type="reset"]。

    因爲:reset是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:reset無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用[type="reset"]。

  • jQuery( “:selected” )：選擇所有選定的元素。:selected選擇適用於<option>元素，不適用於複選框或單選框（使用:checked）。

    因爲:selected是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:selected無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:selected選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":selected")。

    例：將 change 事件附加到 select 上，該事件獲取每個選定選項的文本並將其寫入 div 中。然後，它將觸發事件以進行初始文本繪製。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>selected demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<select name="garden" multiple="multiple">
  <option>Flowers</option>
  <option selected="selected">Shrubs</option>
  <option>Trees</option>
  <option selected="selected">Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>
<div></div>
 
<script>
$( "select" )
  .change(function() {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .trigger( "change" );
</script>
 
</body>
</html>

  • jQuery( “:submit” )：選擇所有類型爲 submit 的元素。

    :submit選擇器通常適用於 button 或 input。請注意，某些瀏覽器將<button>元素type="submit"隱式處理，而其他瀏覽器（例如Internet Explorer）則不然。爲了確保標籤在所有瀏覽器中都能一致地工作，並確保可以一致地選擇提交表單的按鈕，請始終指定type屬性。

    因爲:submit是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:submit無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用input[type="submit"], button[type="submit"]。

  • jQuery( “:text” )：選擇所有文本類型的 input 元素。

    $(":text")允許我們選擇所有<input type="text">元素。與其他僞類選擇器（以 “:” 開頭的選擇器）一樣，建議在其前面加上標籤名稱或其他選擇器。否則，暗示通用選擇器（"*"）。換句話說，$(":text")等效於$("*:text")，因此應改用$("input:text")。

    **注意：**從 jQuery 1.5.2 開始，:text選擇input沒有指定type屬性的元素（在這種情況下隱含type="text"屬性）。

    $(":text")和$("[type=text]")之間的行爲差異如下所示：

    $("<input>").is("[type=text]"); // false
$("<input>").is(":text"); // true

    因爲:text是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:text無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用[type="text"]。

層級選擇器

  • jQuery( “parent > child” )：子選擇器。選擇指定父元素指定的所有直接子元素。

  • jQuery( “ancestor descendant” )：後代選擇器。一個元素的後代可以是該元素的子代，孫代，曾孫代，等等。

    例：用虛線藍色邊框標記屬於表單後代的所有輸入。爲作爲表單後代的字段集的後代的輸入框提供黃色背景。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>descendant demo</title>
  <style>
  form {
    border: 2px green solid;
    padding: 2px;
    margin: 0;
    background: #efe;
  }
  div {
    color: red;
  }
  fieldset {
    margin: 1px;
    padding: 3px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <div>Form is surrounded by the green border.</div>
 
  <label for="name">Child of form:</label>
  <input name="name" id="name">
 
  <fieldset>
    <label for="newsletter">Grandchild of form, child of fieldset:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
Sibling to form: <input name="none">
 
<script>
$( "form input" ).css( "border", "2px dotted blue" );
$( "form fieldset input" ).css( "backgroundColor", "yellow" );
</script>
 
</body>
</html>

  • jQuery( “prev + next” )：選擇所有匹配 “prev（任何有效的選擇器）” 並且緊隨其後的是 “next（任何有效的選擇器）” 的元素。prev + next和prev ~ siblings選擇器都需要考慮的重要一點是，組合器兩側的元素必須共享同一父級。

    例：查找 label 旁邊的所有 input 元素。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>next adjacent demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<form>
  <label for="name">Name:</label>
  <input name="name" id="name">
  <fieldset>
    <label for="newsletter">Newsletter:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
<input name="none">
 
<script>
$( "label + input" ).css( "color", "blue" ).val( "Labeled!" );
</script>
 
</body>
</html>

  • jQuery( “prev ~ siblings” )：選擇所有匹配 “prev（任何有效的選擇器）” 並且其後的是 “siblings（任何有效的選擇器）” 的元素。prev + next和prev ~ siblings之間的區別是作用範圍不同，前者僅到達緊隨其後的同級元素，而後者則將其延伸至所有其後的同級元素。

    例：選擇以 id 爲 #prev 的元素之後的所有同級 div。請注意，沒有選擇 span，因爲它不是 div，沒有選擇 “niece”，因爲它是同級的子級，而不是同級。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>next siblings demo</title>
  <style>
  div, span {
    display: block;
    width: 80px;
    height: 80px;
    margin: 5px;
    background: #bfa;
    float: left;
    font-size: 14px;
  }
  div#small {
    width: 60px;
    height: 25px;
    font-size: 12px;
    background: #fab;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
 
<script>
$( "#prev ~ div" ).css( "border", "3px groove blue" );
</script>
 
</body>
</html>

過濾選擇器

  • jQuery( “:contains(text)” )：選擇包含指定文本的所有元素。區分大小寫。匹配的文本可以直接出現在所選元素中，該元素的任何後代或其組合中。與屬性選擇器一樣，括號內的文本:contains()可以寫爲裸詞，也可以用引號引起來。文本必須具有匹配的大小寫才能選擇。

    例：查找包含“ John”的所有div並在其下劃線。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contains demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

<script>
$( "div:contains('John')" ).css( "text-decoration", "underline" );
</script>
</body>
</html>

  • jQuery( “:animated” )：選擇動畫進行中的所有元素。

    如果使用不帶effects模塊的自定義jQuery構建，則:animated選擇器將拋出錯誤。

    因爲:animated是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:animated無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:animated選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":animated")。

    例：更改任何動畫進行中的 div 的顏色。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animated demo</title>
  <style>
  div {
    background: yellow;
    border: 1px solid #AAA;
    width: 80px;
    height: 80px;
    margin: 0 5px;
    float: left;
  }
  div.colored {
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="run">Run</button>
 
<div></div>
<div id="mover"></div>
<div></div>
 
<script>
$( "#run" ).click(function() {
  $( "div:animated" ).toggleClass( "colored" );
});
 
function animateIt() {
  $( "#mover" ).slideToggle( "slow", animateIt );
}
 
animateIt();
</script>
 
</body>
</html>

  • jQuery( “:empty” )：選擇所有沒有子元素（包括文本節點）的元素。與:parent相反。W3C 建議<p>元素至少具有一個子節點，即使該子節點僅僅是文本（請參見https://www.w3.org/TR/html401/struct/text.html#edef-P）。另一方面，根據定義，其他一些元素爲空（即沒有子元素）：例如<input>，<img>，<br>和<hr>。

  • jQuery( “:eq(index)” )：選擇匹配結果集中索引（從 0 開始）爲 index 的元素。

    jQuery( “:eq(-index)” )：選擇匹配結果集中索引（從 0 開始）爲 index 的元素。從最後一個元素開始倒數。

    從 jQuery 3.4 開始，:eq不推薦使用。從選擇器中將其刪除，然後使用過濾結果.eq()。

    在 jQuery 1.8 之前，:eq(index)選擇器不接受負值index。

    因爲:eq()是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:eq()無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用$("your-pure-css-selector").eq(index)。

  • jQuery( “:gt(index)” )：選擇匹配結果集中索引（從 0 開始）大於 index 的元素。

    jQuery( “:gt(-index)” )：選擇匹配結果集中索引（從 0 開始）大於 index 的元素。從最後一個元素開始倒數。

    從 jQuery 3.4 開始，:gt不推薦使用。從選擇器中將其刪除，然後使用過濾結果.slice()。例如，:gt(3)可以用調用.slice( 4 )代替（所提供的索引需要加一）。

    在 jQuery 1.8 之前，:gt(index)選擇器不接受負值index。

    因爲:gt()是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:gt()無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用$("your-pure-css-selector").slice(index)。

  • jQuery( “:lt(index)” )：選擇匹配結果集中索引（從 0 開始）小於 index 的元素。

    jQuery( “:lt(-index)” )：選擇匹配結果集中索引（從 0 開始）小於 index 的元素。從最後一個元素開始倒數。

    從 jQuery 3.4 開始，:lt不推薦使用。從選擇器中將其刪除，然後使用過濾結果.slice()。例如，:lt(3)可以替換調用.slice(0, 3)。

    在 jQuery 1.8 之前，:lt(index)選擇器不接受負值index。

    因爲:lt()是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:lt()無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用$("your-pure-css-selector").slice(0, index)。

    例：將小於 4 索引（TD＃4）的 TD 的背景設爲黃色，將小於 -2 索引的 TD 設爲紅色。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lt demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
 
<script>
$( "td:lt(4)" ).css( "backgroundColor", "yellow" );
$( "td:lt(-2)" ).css( "color", "red" );
</script>
 
</body>
</html>

  • jQuery( “:odd” )：選擇索引（從 0 開始）爲奇數的元素。

    從 jQuery 3.4 開始，:odd不推薦使用。從選擇器中將其刪除，然後使用過濾結果.odd()（在 jQuery 3.5.0 或更高版本中可用）。

    因爲:odd是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:odd無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:odd選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":odd")。

  • jQuery( “:even” )：選擇索引（從 0 開始）爲偶數的元素。

    從 jQuery 3.4開始，:even不推薦使用。從選擇器中將其刪除，然後使用過濾結果.even()（在 jQuery 3.5.0 或更高版本中可用）。

    因爲:even是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:even無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:even選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":even")。

  • jQuery( “:first-child” )：選擇第一個子元素。雖然.first()僅匹配一個元素，但是:first-child選擇器可以匹配多個元素：每個父元素一個。等效於:nth-child(1)。

    例：在每個匹配的 div 中找到第一個 span 加下劃線並添加懸停狀態。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>first-child demo</title>
  <style>
  span {
    color: #008;
  }
  span.sogreen {
    color: green;
    font-weight: bolder;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph</span>
</div>
 
<script>
$( "div span:first-child" )
  .css( "text-decoration", "underline" )
  .hover(function() {
    $( this ).addClass( "sogreen" );
  }, function() {
    $( this ).removeClass( "sogreen" );
  });
</script>
 
</body>
</html>

  • jQuery( “:last-child” )：選擇最後一個子元素。雖然.last()僅匹配一個元素，但:last-child可以匹配多個元素：每個父元素一個。

  • jQuery( “:first-of-type” )：選擇所有具有相同元素名稱的同級元素中的第一個元素。

  • jQuery( “:last-of-type” )：選擇所有具有相同元素名稱的同級元素中的最後一個元素。

    例：在每個匹配的 div 中找到最後一個 span，並添加一些 CSS 以及懸停狀態。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>last-of-type demo</title>
  <style>
  span.solast {
    text-decoration: line-through;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <span>Corey,</span>
  <span>Yehuda,</span>
  <span>Adam,</span>
  <span>Todd</span>
</div>
<div>
  <span>Jörn,</span>
  <span>Scott,</span>
  <span>Timo,</span>
  <b>Nobody</b>
</div>
 
<script>
$( "span:last-of-type" )
  .css({ color:"red", fontSize:"80%" })
  .hover(function() {
    $( this ).addClass( "solast" );
  }, function() {
    $( this ).removeClass( "solast" );
  });
</script>
 
</body>
</html>

  • jQuery( “:first” )：選擇第一個匹配的DOM元素。

    從 jQuery 3.4 開始，:first不推薦使用。從選擇器中將其刪除，然後使用過濾結果.first()。

    :first相當於:eq(0)。也可以寫成:lt(1)。:first僅匹配一個元素，但：first-child可以匹配多個：每個父元素一個。

    因爲:first是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:first無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:first選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":first")。

  • jQuery( “:last” )：選擇最後一個匹配的元素。

    從 jQuery 3.4 開始，:last不推薦使用。從選擇器中將其刪除，然後使用過濾結果.last()。

    因爲:last是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:last無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:last選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":last")。

  • jQuery( “:focus” )：選擇處於焦點狀態的元素。

    與其他僞類選擇器（以 “:” 開頭的選擇器）一樣，建議在其前面加上標籤名稱或其他選擇器。否則，暗示通用選擇器（"*"）。換句話說，$( ":focus" )等於$( "*:focus" )。如果您正在尋找當前關注的元素，$(document.activeElement)則無需搜索整個 DOM 樹即可對其進行檢索。

    例：將 focused 類添加到具有焦點的任何元素中

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>focus demo</title>
  <style>
  .focused {
    background: #abcdef;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="content">
  <input tabIndex="1">
  <input tabIndex="2">
  <select tabIndex="3">
    <option>select menu</option>
  </select>
  <div tabIndex="4">
    a div
  </div>
</div>
 
<script>
$( "#content" ).delegate( "*", "focus blur", function() {
  var elem = $( this );
  setTimeout(function() {
    elem.toggleClass( "focused", elem.is( ":focus" ) );
  }, 0 );
});
</script>
 
</body>
</html>

  • jQuery( “:has(selector)” )：選擇包含至少一個與指定選擇器匹配的元素的元素。

    $("div:has(p)")匹配後代中存在<p>元素的<div>，而不僅僅匹配直接子代。

    因爲:has()是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:has()無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改用$("your-pure-css-selector").has(selector/DOMElement)。

  • jQuery( “:header” )：選擇所有標頭元素，例如h1，h2，h3等。

    因爲:header是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:header無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:header選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":header")。

  • jQuery( “:hidden” )：選擇所有隱藏的元素。

    可以將元素視爲隱藏的原因有幾個：

    • CSS display值爲none。
    • 表單元素type="hidden"。
    • 寬度和高度明確設置爲 0。
    • 祖先元素被隱藏，因此該元素未顯示在頁面上。

    帶有visibility: hidden或opacity: 0的元素被視爲可見，因爲它們仍然佔用佈局中的空間。

    在隱藏元素的動畫期間，該元素被視爲可見，直到動畫結束。

    文檔中未包含的元素不視爲可見；jQuery 無法確定將它們附加到文檔後是否可見，因爲它取決於適用的樣式。

    該選擇器與:visible選擇器相反。

    在動畫顯示元素期間，該元素被認爲在動畫開始時是可見的。

    如何確定:hidden在 jQuery 1.3.2 中已更改。如果元素或其任何父元素不佔用文檔中的空間，則假定該元素是隱藏的。不考慮 CSS 可見性（因此$(elem).css("visibility", "hidden").is(":hidden") == false）。該發行說明勾勒出更詳細的變化。

    jQuery 3 略微修改了:hidden（以及:visible）的含義。從此版本開始，如果元素沒有任何佈局盒子，則認爲是:hidden。例如，沒有內容的br元素和內聯元素將不會被:hidden選擇器選擇。

    因爲:hidden是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:hidden無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:hidden選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":hidden")。

    大量使用此選擇器可能會對性能產生影響，因爲它可能會迫使瀏覽器在確定可見性之前重新渲染頁面。通過其他方法（例如，使用類）跟蹤元素的可見性可以提供更好的性能。

  • jQuery( “:visible” )：選擇所有可見的元素。

    如果元素佔用了文檔中的空間，則認爲它們是可見的。可見元素的寬度或高度大於零。

    帶有visibility: hidden或的元素opacity: 0被視爲可見，因爲它們仍然佔用佈局中的空間。

    文檔中沒有的元素被認爲是隱藏的；jQuery 無法確定將它們附加到文檔後是否可見，因爲它取決於適用的樣式。

    與:hidden選擇器相反。

    option無論其selected狀態如何，所有元素均被視爲隱藏。

    在隱藏元素的動畫過程中，該元素被視爲可見，直到動畫結束。在動畫顯示元素期間，該元素在動畫開始時被視爲可見。

    如何確定:visible在 jQuery 1.3.2中已更改。該發行說明勾勒出更詳細的變化。

    jQuery 3 略微修改了:visible（以及:hidden）的含義。從此版本開始，如果元素具有任何佈局盒子（包括寬度和/或高度爲零的佈局盒子），則認爲是:visible。例如，沒有內容的br元素和內聯元素將會被:visible選擇器選擇。

    因爲:visible是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:visible無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:visible選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":visible")。

    大量使用此選擇器可能會對性能產生影響，因爲它可能會迫使瀏覽器在確定可見性之前重新渲染頁面。通過其他方法（例如，使用類）跟蹤元素的可見性可以提供更好的性能。

  • jQuery( “:lang(language)” )：選擇指定語言的所有元素。

    :lang()選擇具有 lang 屬性並且值等於所提供的語言代碼以所提供的語言代碼開頭緊接着 “-”。例如，選擇器$("div:lang(en)")將匹配<div lang="en">和<div lang="en-us">（及其任何後代<div>），但不匹配<div lang="fr">。

    對於HTML元素，語言值由lang屬性以及可能來自meta元素或 HTTP 標頭的信息 確定。

    有關此用法的進一步討論可以在W3C CSS規範中找到。

    例：根據語言爲div元素上色。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lang demo</title>
  <style>
  body {
    background-color: #ccc;
  }
  h3 {
    margin: .25em 0;
  }
  div {
    line-height: 1.5em
  }
  .usa {
    background-color: #f00;
    color: #fff;
  }
  .usa .usa {
    background-color: #fff;
    color: #000;
  }
  .usa .usa .usa {
    background-color: #00f;
    color: #fff;
  }
  .spain {
    background-color: #f00;
    color: #ff0;
  }
  .spain .spain {
    background-color: #ff0;
    color: #f00;
    line-height: 3em;
  }
  .spain .spain .spain {
    background-color: #f00;
    color: #ff0;
    line-height: 1.5em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<h3>USA</h3>
<div lang="en-us">red
  <div>white
    <div>and blue</div>
  </div>
</div>
<h3>España</h3>
<div lang="es-es">rojo
  <div>amarillo
    <div>y rojo</div>
  </div>
</div>
 
<script>
$( "div:lang(en-us)" ).addClass( "usa" );
$( "div:lang(es-es)" ).addClass( "spain" );
</script>
 
</body>
</html>

  • jQuery( “:not(selector)” )：選擇與給定選擇器不匹配的所有元素。

    例：查找所有未選中的 input，並突出顯示下一個同級 span。請注意，由於未鏈接任何單擊事件，因此單擊複選框時沒有任何變化。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <input type="checkbox" name="a">
  <span>Mary</span>
</div>
<div>
  <input type="checkbox" name="b">
  <span>lcm</span>
</div>
<div>
  <input type="checkbox" name="c" checked="checked">
  <span>Peter</span>
</div>
 
<script>
$( "input:not(:checked) + span" ).css( "background-color", "yellow" );
$( "input").attr( "disabled", "disabled" );
</script>
 
</body>
</html>

  • jQuery( “:nth-child(index/even/odd/equation)” )：選擇其父級的第 n 個子元素。索引從1開始，還可以是字符串even或odd，方程式（例如:nth-child(even)，:nth-child(4n)）。

    因爲 jQuery 的:nth-選擇器的實現嚴格遵從 CSS 規範，所以從 1 開始索引。 .first()或.eq()之類的方法從0 開始索引。給定一個<ul>包含兩個<li>，$("li:nth-child(1)")選擇第一個，而 $("li").eq(1)選擇第二個。

    更多用法的進一步討論可以在W3C CSS規範中找到。

    例：在這裏可以看到選擇器如何與不同的字符串一起使用。請注意，even和odd不考慮父項，只是將匹配的元素列表過濾。但是，:nth-child會計算子項相對其父項的索引。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child demo</title>
  <style>
  button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size: 18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>:nth-child(even)</button>
  <button>:nth-child(odd)</button>
  <button>:nth-child(3n)</button>
  <button>:nth-child(2)</button>
</div>
<div>
  <button>:nth-child(3n+1)</button>
  <button>:nth-child(3n+2)</button>
  <button data-method="even">.even()</button>
  <button data-method="odd">.odd()</button>
</div>
 
<div>
  <table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Sam</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table>
</div>
 
<span>tr<span id="inner"></span></span>
 
<script>
$( "button" ).click(function() {
  var str = $( this ).text();
  var method = $( this ).attr( "data-method" );
  $( "tr" ).css( "background", "white" );
  if ( method ) {
    $( "tr" )[ method ]().css( "background", "#ff0000" );
  } else {
    $( "tr" + str ).css( "background", "#ff0000" );
  }
  $( "#inner" ).text( str );
});
</script>
 
</body>
</html>

  • jQuery( “:nth-last-child(index/even/odd/equation)” )：從最後一個元素（索引 1）開始倒數，選擇其父級的第 n 個子元素。索引從1開始，還可以是字符串even或odd，方程式（例如:nth-last-child(even)，:nth-last-child(4n)）。

    例：在這裏可以看到選擇器如何與不同的字符串一起使用。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-last-child demo</title>
  <style>
  button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size:18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>:nth-last-child(even)</button>
  <button>:nth-last-child(odd)</button>
  <button>:nth-last-child(3n)</button>
  <button>:nth-last-child(2)</button>
</div>
<div>
  <button>:nth-last-child(3n+1)</button>
  <button>:nth-last-child(3n+2)</button>
</div>
<div>
  <table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Sam</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table>
</div>
<span>tr<span id="inner"></span></span>
 
<script>
$( "button" ).click(function() {
  var str = $( this ).text();
  $( "tr" ).css( "background", "white" );
  $( "tr" + str ).css( "background", "#ff0000" );
  $( "#inner" ).text(str);
});
</script>
 
</body>
</html>

  • jQuery( “:nth-last-of-type(index/even/odd/equation)” )：從最後一個元素（索引 1）倒數，選擇其父元素的第 n 個同級子元素。索引從1開始，還可以是字符串even或odd，方程式（例如:nth-last-of-type(even), :nth-last-of-type(4n) )。

    更多用法的進一步討論可以在W3C CSS規範中找到。

    例：在這裏可以看到選擇器如何與不同的字符串一起使用。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-last-of-type demo</title>
  <style>
  button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size: 18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>:nth-last-of-type(even)</button>
  <button>:nth-last-of-type(odd)</button>
  <button>:nth-last-of-type(3n)</button>
  <button>:nth-last-of-type(2)</button>
</div>
<div>
  <button>:nth-last-of-type(3n+1)</button>
  <button>:nth-last-of-type(3n+2)</button>
</div>
 
<div>
  <table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Sam</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table>
</div>
 
<span>tr<span id="inner"></span></span>
 
<script>
$( "button" ).click(function() {
  var str = $( this ).text();
  $( "tr" ).css( "background", "white" );
  $( "tr" + str ).css( "background", "#ff0000" );
  $( "#inner" ).text( str );
});
</script>
 
</body>
</html>

  • jQuery( “:nth-of-type(index/even/odd/equation)” )：選擇其父元素的第 n 個同級子元素。索引從1開始，還可以是字符串even或odd，方程式（例如:nth-of-type(even)，:nth-of-type(4n) )。

  • jQuery( “:only-child” )：選擇其父元素的唯一子元素。如果父級具有其他子元素，則不會匹配。

    例：選擇只有一個 button 子元素的 div 中的 button 元素，修改其文本並添加邊框。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>only-child demo</title>
  <style>
  div {
    width: 100px;
    height: 80px;
    margin: 5px;
    float: left;
    background: #b9e;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
 
<div>
  None
</div>
 
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
 
<script>
$( "div button:only-child" ).text( "Alone" ).css( "border", "2px blue solid" );
</script>
 
</body>
</html>

  • jQuery( “:only-of-type” )：選擇所有沒有相同元素名稱同級元素的元素。如果父級的其他子元素具有相同的元素名稱，則不會匹配。

    例：選擇作爲其父元素的唯一子元素的 button 元素，修改其文本並添加邊框。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>only-of-type demo</title>
  <style>
  div {
    width: 100px;
    height: 80px;
    margin: 5px;
    float: left;
    background: #b9e;
  }
  span {
    padding: 2px;
    margin: 3px;
    line-height: 1.4;
    border: 1px solid #000;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
 
<div>
  <button>Sibling!</button>
</div>
<div>
  None
</div>
 
<div>
  <button>Sibling!</button>
  <span>Sibling!</span>
  <span>Sibling!</span>
</div>
 
<div>
  <button>Sibling!</button>
</div>
 
<script>
  $( "button:only-of-type" ).text( "Alone" ).css( "border", "2px blue solid" );
</script>
 
</body>
</html>

  • jQuery( “:parent” )：選擇具有至少一個子節點（元素或文本）的所有元素。

    與:empty相反。

    要獲取現有 jQuery 集的父母或祖先，請參見.parent()和.parents()方法。

    因爲:parent是 jQuery 擴展而不是 CSS 規範的一部分，所以使用的查詢:parent無法利用本機 DOM querySelectorAll()方法提供的性能提升。爲了在:parent選擇元素時獲得最佳性能，請先使用純 CSS 選擇器選擇元素，然後使用.filter(":parent")。

  • jQuery( “:root” )：選擇作爲文檔根目錄的元素。在 HTML 中，文檔的根以及$(":root")選擇的元素始終是<html>元素。

  • jQuery( “:target” )：選擇由文檔 URI 的片段標識符指示的目標元素。

    如果文檔的 URI 包含片段標識符或哈希，那麼:target選擇器將使用與標識符匹配的 ID 來匹配元素。例如，給定 URI爲 https://example.com/#foo 的文檔，$("p:target")將選擇<p id="foo">元素。

    更多用法的進一步討論可以在W3C CSS規範中找到。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

web前端小白經常出現“四”個錯誤，關乎你是否能成爲一個優秀的前端工程師

錯誤一轉件所謂“應該能行”的代碼 錯誤：無論是JavaScript，還是在服務器上運行的代碼，開發人員都需要測試並確認它是否可以正常工作，而不是在部署了之後，就認爲它應該就能從一而終地運行。 影響：不經過適當錯誤檢查的網站就是對最終用戶耍

原創 2023-10-10 11:11:44

JavaScript 本地存儲

本地存儲簡介 在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作爲本地存儲來使用的 web 應用程序能夠在用戶瀏覽器中對數據進行本地的存儲 解決了cookie存儲空間不足的問題（cookie的存儲

OliGit 2020-07-08 12:27:32

微信alert去除默認的提示

原文鏈接：https://blog.csdn.net/qq_32307891/article/details/98953960 微信下alert會多顯示個標題欄，會顯示當前網址。用jQuery下的彈出框，在顯示軟鍵盤情況下點不到“確認”按

felix 2020-07-08 09:14:02

標籤點擊事件後的操作

其實，也不知道怎麼去給文章命名，就簡單的記錄下我遇到的問題吧，不多說，上代碼。 <a id="tab1" href="https://www.baidu.com">測試連接</a> <br/>

just_coming_here 2020-07-08 02:54:27

自用省市級聯及定位

省市二級級聯===========================***///初始化省級聯==============================

iteye_3912 2020-07-08 01:01:43

複製剪貼板功能

複製剪貼板功能 html代碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stri

athrunzero 2020-07-07 22:29:39

@RequestBody 參數是對象數組列表，前後臺傳參

後臺 @Data public class OrderMap { private Long id;//訂單標識 private Long pId;//商品標識 private Long sId;//規格id

我爱圆溜溜 2020-07-07 20:22:56

jQuery ajax請求json數據

一、數組類型json數據 html部分： <table id="table" border="1" cellspacing="0" cellpadding="5"> <tr> <th>訂單號</th> <th>購買產品</th

soosgo 2020-07-07 17:29:53

jquery AJAX應用

load(url[,data][,callback])------------->通常用來從WEB服務器上獲取靜態的數據文件 url: string類型 請求HTML頁面的URL地址 data(可選): object 發送至服務器的key

wangbaojun52024029 2020-07-07 16:09:04

JQuery的基礎知識和選擇器

JQUERY官方網站   http://jquery.com/ jquery-1.4.min.js和jquery-1.4.js的區別？ jquery-1.4.min.js--》如果服務器開啓GZip壓縮後，大小將變爲18KB，主要應用於產

wangbaojun52024029 2020-07-07 15:27:16

jq 全選，全不選 ，反選 獲取選取項的值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>反選、全選、全不選</title> <script type="text/javascri

望月归乡 2020-07-07 14:36:15

EasyUI Datagrid 數據網格

網絡示例一： 擴展自 $.fn.panel.defaults。通過 $.fn.datagrid.defaults 重寫默認的 defaults。 數據網格（datagrid）以表格格式顯示數據，併爲選擇、排序、分組和編輯數據提供了豐富的

-水中月- 2020-07-07 14:08:41

kafka更新元數據失敗問題研究

現象 kafka-admin-client-thread線程打印: AdminMetadataManager.updateField Metadata update failed: org.apache.kafka.common.error

原創 2024-04-24 23:18:37

項目配置之道：優化Scrapy參數提升爬蟲效率

前言 在當今信息時代，數據是無處不在且無比重要的資源。爲了獲取有效數據，網絡爬蟲成爲了一項至關重要的技術。Scrapy作爲Python中最強大的網絡爬蟲框架之一，提供了豐富的功能和靈活的操作，讓數據採集變得高效而簡單。本文將以爬取豆瓣網

原創 2024-03-23 12:11:26

Vue3.X的深度選擇器的變化及舊語法被廢棄

在Vue3.X版本中使用以前的深度選擇器::v-deep會報錯: :: v - deep usage as a combinator has been deprecated . Use : deep ( < inner - sel

原創 2024-03-05 23:45:08