jQuery 选择器全解析

最新推荐文章于 2022-07-11 18:43:42 发布
最新推荐文章于 2022-07-11 18:43:42 发布
阅读量387 收藏 11
点赞数 3
分类专栏： jQuery 文章标签： jQuery selector
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/redzealot2007/article/details/106339292
版权

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规范中找到。

剑若成风
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery-选择器
ImmortalSYM的博客
11-13 883
jQuery-选择器 jQuery选择器 —选择器本身只是一个有特定语法规则的字符串，没有实质用处；用于查找页面中特定元素； —他的基本语法规则为CSS选择器语法，并进行扩展； —只用调用$()，并将选择器作为参数传入才能起作用； —$(selector)：根据选择器规则在整个文档中查找所有匹配的标签的伪数组，并封装jQuery对象返回； —选择器分类：基本选择器、层次选择器、过滤选择器、表单选择器； 基本选择器 id选择器：$('#id名')； 元素选择器：$('元素名') 属性选择器：$
jQuery选择器
weixin_62232726的博客
03-16 357
jQuery单词解析 j代表JS query查询的意思 JQuery写得少，做的事情更多 1.3W1H 1.1是什么 1.2为什么要学习 1.3哪些情况下使用 1.4怎么用 工具：HBuilderX 案例1：点击按钮获取输入框中的值（JS对比jQuery） <!--javaScript --> <script type="text/javascript"> window.onload = function(){ ...
Jquery选择器完全总结
热门推荐
anxpp的博客
05-24 2万+
基本的选择器 元素选择器element ID选择器#id 类选择器.class 匹配所有元素通常用于结合上下文搜索* 根据多个规则获取元素selector1,selector2,selectorN 层次结构中选取 选取指定元素内所有匹配的元素ancestor descendant 选择指定父元素下匹配的子元素parent>child 选择所有紧接在指定元素后指定的匹配元素prev+next 选择指定元素之后的所有指定的
jquery选择器项目实例分析
weixin_30938149的博客
08-02 88
首先废话一句，jQuery选择器真心很强大！ 在项目中遇到这么一个问题easyui的问题 如图所示，当前页面显示的是“原始报文查询”的页面，当时左侧导航栏却选中的是“重发报文查询”。如何让右侧的菜单和左侧的导航实现联动即：左侧点击“原始报文查询”，那么右侧的“补发运抵报文”展开，并选中“原始报文查询”，“后台管理”关闭？ 实现方式如下： 1、右侧的“原始报文查询...
jQuery选择器总结
duxiaoxie123的博客
03-26 206
目录基本选择器标签选择器：$("标签名")id选择器：$("#id的属性值")类选择器：$(".class的属性值")通配符选择器：$("*")属性选择器属性名称选择器：$("[属性名]")属性选择器$("[属性名='值']")$("[属性名!='值']")$("[属性名^='值']")$("[属性名 $='值']")$("[属性名*='值']")$("[属性名|='值']")$("[属性名~='值']")$("[属性名='值'][ ]...")层级选择器后代选择器：$("选择器1 选择器2")子选择器
jQuery选择器详解
Zijeak的博客
03-29 527
jQuery选择器返回jQuery对象，类似于数组，每个元素都是一个引用了DOM结点的对象。 不会返回undefined或者null 1.基本选择器 1.1 id选择器 $('#id') 1.2 element标签名选择器 $('div') 1.3 class选择器 $('.className') 1.4 通配符选择器 选择所有元素 $('*') 2.多项选择器 $('selector1,...
【前端】jQuer选择器小结
Louis Lee's Blog
12-31 1549
1 摘要工欲善其事必先利其器，要想用好jQuery，就要做好自己的基本功。本篇博客对于jQuery中的选择器进行了一个小结，对于基本选择器、层次选择器、过滤选择器和表单选择器进行了分别列表和解释。2 什么是jQuery选择器顾名思义，选择器即选择某个对象或事物的器具。而jQuery选择器的操作对象则是DOM树的某个元素，例如HTML元素中的某个div块、button按钮和a链接，当然也可以是其中的d
jquery选择器的实现原理
现在学习也不晚
11-03 4738
html部分 Document 1 2 var result = $("div"); console.log(result); alert($('div').size()); js js部分 (function(){ //暴露外部的引用 var jQuery = window.jQuery = window.$ = function(selector){
jQuery选择器&基本操作
m0_62168050的博客
07-11 2507
jQuery选择器&基本操作
详解jQuery选择器正则表达式
mole的专栏
02-02 6611
1、空白 whitespace = "[\\x20\\t\\r\\n\\f]", 在字符串中，斜杠是用于转义的，若想输出斜杠，必须采用双斜杠来表示。上述字符串若直接用正则表达式对象来表示，如下： whitespace = /[\x20\t\r\n\f]/, 之所以将五种字符定义为空白，出此CSS3标准，其原话：Only the characters "space" (U+002
分类解析jQuery选择器
10-21
本篇文章将深入解析jQuery选择器的分类和使用，帮助读者理解和掌握这一关键技能。 1. **基本选择器**： - `#id`：通过ID匹配唯一的一个元素，如`$("#myID")`。 - `.class`：根据类名匹配元素，如`$(".myClass")`...
jQuery选择器用法实例详解
10-23
本文将深入讲解jQuery选择器的用法，结合实例解析其具体使用技巧和注意事项。 1. **ID选择器** ID选择器通过在元素名称前添加`#`来指定元素的唯一ID。例如，`$("#msg")`会选取具有ID "msg"的元素。以下是一个简单...
jQuery之日期选择器的深入解析
10-27
本篇文章是jQuery中的日期选择器进行了详细的分析介绍，需要的朋友参考下
jQuery多级联动选择器
06-01
jQuery多级联动选择器是一种常见的前端交互功能，用于在网页上实现级联下拉菜单的效果。这种技术在网站设计中非常实用，特别是在处理地区选择、类别分类或者层级结构数据时。用户选择一个选项后，会根据所选内容动态...
jiaoyanguizeduibi
07-10
jiaoyanguizeduibi
戴师兄数据分析启蒙课_Tableau练习.twbx
07-10
戴师兄数据分析启蒙课_Tableau练习.twbx
2024年欧洲酒精测试仪和药物测试设备市场主要企业市场占有率及排名.docx
07-09
2024年欧洲酒精测试仪和药物测试设备市场主要企业市场占有率及排名.docx
理工科考研自动控制知识点大全
最新发布
07-10
理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全
福州市建筑物矢量数据（Shp格式+带高度）.txt
07-09
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值