jQuery 选择器

最新推荐文章于 2020-09-29 18:55:32 发布
最新推荐文章于 2020-09-29 18:55:32 发布
阅读量418 收藏 5
点赞数 1
分类专栏： jQuery 选择器 前端 jQuery 文章标签： jQuery 选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RONG51920/article/details/101392847
版权

jQuery 选择器

  • 基本选择器

    • #id：根据给定的ID匹配一个元素

    HTML：

    <div id="notMe">1</div>
<div id="myDiv">2</div>

    jQuery：

    $("#myDiv");
    • .class：根据给定的类名称匹配元素

    HTML：

    <div class="myDiv">1</div>
<div class="notMe">2</div>

    jQuery：

    $(".myDiv");
    • *：匹配所有元素

    HTML：

    <div class="myDiv">1</div>
<div class="notMe"><span>2</span></div>

    jQuery：

    $("*");
    • selector1,selector2：将每一个选择器匹配到的元素合并后一起返回

    HTML：

    <div class="nav">1</div>`
<div class="nav1"><span id="text">2</span></div>

    jQuery：

    $(".nav,.nav1,#text");

  • 层级选择器

    • ancestor descendant：在给定的祖先元素下匹配所有的后代元素

    HTML：

     <ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 </ul>

    jQuery：

    $("ul li");
    • parent > child：在给定的父元素下匹配所有的子元素

    HTML：

    <ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 	<p>4</p>
 </ul>

    jQuery：

    $("ul>li");
    • prev + next：匹配所有紧接在 prev 元素后的 next 元素

    HTML：

    <div>
   <label>1+1</label>
   <span>2</span>
</div>

    jQuery：

    $("label+span");

  • 基本筛选器

    • :first：获取第一个元素

    HTML：

     <ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 </ul>

    jQuery：

    $("ul>li:first");
    • :last：获取最后一个元素

    HTML：

     <ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 </ul>

    jQuery：

    $("ul>li:last");
    • :not：去除所有与给定选择器匹配的元素

    HTML：

     <ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 </ul>

    jQuery：

    $("ul>li:not(ul>li:first):not(ul>li:last)");
    • :even：匹配所有索引值为偶数的元素，从 0 开始计数

    HTML：

     <ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 	<li>4</li>
 	<li>5</li>
 </ul>

    jQuery：

    $("ul>li:even");
    • :odd：匹配所有索引值为奇数的元素，从 0 开始计数

    HTML：

     <ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 	<li>4</li>
 	<li>5</li>
 </ul>

    jQuery：

    $("ul>li:odd");
    • :eq(index)：匹配一个给定索引值的元素

    HTML：

     <ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 	<li>4</li>
 	<li>5</li>
 </ul>

    jQuery：

    $("ul>li:eq(2)");
    • :gt：匹配所有大于给定索引值的元素

    HTML：

     <ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 	<li>4</li>
 	<li>5</li>
 </ul>

    jQuery：

    $("ul>li:gt(2)");
    • :lt：匹配所有小于给定索引值的元素

    HTML：

     <ul>
 	<li>1</li>
 	<li>2</li>
 	<li>3</li>
 	<li>4</li>
 	<li>5</li>
 </ul>

    jQuery：

    $("ul>li:lt(2)");

  • 内容选择器

    • :contains(text)：匹配包含给定文本的元素

    HTML：

     <ul>
 	<li>12345</li>
 	<li>1234</li>
 	<li>123</li>
 	<li>12</li>
 	<li>1</li>
 </ul>

    jQuery：

    $("ul>li:contains(5)");
    • :empty：匹配所有不包含子元素或者文本的空元素

    HTML：

     <ul>
 	<li>12345</li>
 	<li>1234</li>
 	<li>123</li>
 	<li></li>
 	<li></li>
 </ul>

    jQuery：

    $("ul>li:empty");
    • :has(selector)：匹配含有选择器所匹配的元素的元素

    HTML：

     <div><p>1</p></div>
 <div>2</div>

    jQuery：

    $("div:has(p)");
    • :parent：匹配含有子元素或者文本的元素

    HTML：

     <div><p>1</p></div>
 <div>2</div>

    jQuery：

    $("p:parent");

  • 可见性选择器

    • :hidden：匹配所有不可见元素，或者type为hidden的元素

    HTML：

     <div style="display:none"><p>1</p></div>
 <div>2</div>

    jQuery：

    $("div:hidden");
    • :visible：匹配所有的可见元素

    HTML：

     <div style="display:none"><p>1</p></div>
 <div>2</div>

    jQuery：

    $("div:visible");

  • 属性选择器

    • [attribute]：匹配包含给定属性的元素

    HTML：

     <div id="nav"><p>1</p></div>
 <div>2</div>

    jQuery：

    $("div[id]");
    • [attribute=value]：匹配给定的属性是某个特定值的元素

    HTML：

    <input type="checkbox" name="news" value="AS" />
<input type="checkbox" name="new" value="QW" />
<input type="checkbox" name="accept" value="AD" />

    jQuery：

    $("div[name='new']");
    • [attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素

    HTML：

    <input type="checkbox" name="news" value="AS" />
<input type="checkbox" name="new" value="QW" />
<input type="checkbox" name="accept" value="AD" />

    jQuery：

    $("div[name!='new']");
    • [attribute^=value]：匹配给定的属性是以某些值开始的元素

    HTML：

    <input type="checkbox" name="news" value="AS" />
<input type="checkbox" name="playable" value="QW" />
<input type="checkbox" name="accept" value="AD" />

    jQuery：

    $("div[name^='play']");
    • [attribute$=value]：匹配给定的属性是以某些值结尾的元素

    HTML：

    <input type="checkbox" name="news" value="AS" />
<input type="checkbox" name="playable" value="QW" />
<input type="checkbox" name="accept" value="AD" />

    jQuery：

    $("div[name$='able']");
    • [attribute*=value]：匹配给定的属性是以包含某些值的元素

    HTML：

    <input type="checkbox" name="news" value="AS" />
<input type="checkbox" name="playable" value="QW" />
<input type="checkbox" name="accept" value="AD" />

    jQuery：

    $("div[name*='lay']");
    • [selector1][selector2][selectorN]：复合属性选择器，需要同时满足多个条件时使用

    HTML：

    <input type="checkbox" name="news" value="AS" />
<input type="checkbox" name="playable" value="QW" />
<input id=“btn” type="checkbox" name="accept" value="AD" />

    jQuery：

    $("div[id][name*='ept']");

  • 子元素选择器

    • :first-child：匹配第一个子元素

    HTML：

    <ul>
   <li>John</li>
   <li>Karl</li>
   <li>Brandon</li>
   <li>Glen</li>
   <li>Tane</li>
   <li>Ralph</li>
</ul>

    jQuery：

    $("ul li:first-child");
    • :last-child：匹配最后一个子元素

    HTML：

    <ul>
   <li>John</li>
   <li>Karl</li>
   <li>Brandon</li>
   <li>Glen</li>
   <li>Tane</li>
   <li>Ralph</li>
</ul>

    jQuery：

    $("ul li:last-child");
    • :nth-child：匹配其父元素下的第N个子元素

    HTML：

    <ul>
   <li>John</li>
   <li>Karl</li>
   <li>Brandon</li>
   <li>Glen</li>
   <li>Tane</li>
   <li>Ralph</li>
</ul>

    jQuery：

    $("ul li:nth-child(3)");
    • :first-of-type：选择所有相同的元素名称的第一个兄弟元素

    HTML：

    <div>
   <span>1</span>
   <span>2</span>
   <span>3</span>
</div>

    jQuery：

    $("div:first-of-type");
    • :last-of-type：选择的所有元素之间具有相同元素名称的最后一个兄弟元素

    HTML：

    <div>
   <span>1</span>
   <span>2</span>
   <span>3</span>
</div>

    jQuery：

    $("div:last-of-type");
    • :nth-of-type：选择同属于一个父元素之下，并且标签名相同的子元素中的第n个

    HTML：

    <div>
   <p>0</p>
   <span>1</span>
   <span>2</span>
   <span>3</span>
</div>

    jQuery：

    $("span:nth-of-type(1)");
    • :only-of-type：选择所有没有兄弟元素，且具有相同的元素名称的元素

    HTML：

    <div>
   <p>0</p>
   <span>1</span>
   <span>2</span>
   <span>3</span>
</div>

    jQuery：

    $("p:only-of-type");

  • 表单选择器

    • :input：匹配所有 input, textarea, select 和 button 元素

    HTML：

    <form>
   <input type="button" value="Input Button"/>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option</option></select>
   <textarea></textarea>
   <button>Button</button>
</form>

    jQuery：

    $(":input");
    • :text：匹配所有的单行文本框

    HTML：

    <form>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option</option></select>
   <textarea></textarea>
   <button>Button</button>
</form>

    jQuery：

    $(":text");
    • :password：匹配所有密码框

    HTML：

    <form>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option</option></select>
   <textarea></textarea>
   <button>Button</button>
</form>

    jQuery：

    $(":password");
    • :radio：匹配所有单选按钮

    HTML：

    <form>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option</option></select>
   <textarea></textarea>
   <button>Button</button>
</form>

    jQuery：

    $(":radio");
    • :checkbox：匹配所有复选框

    HTML：

    <form>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option</option></select>
   <textarea></textarea>
   <button>Button</button>
</form>

    jQuery：

    $(":checkbox");
    • :submit：匹配所有提交按钮

    HTML：

    <form>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option</option></select>
   <textarea></textarea>
   <button>Button</button>
</form>

    jQuery：

    $(":submit");
    • :image：匹配所有图像域

    HTML：

    <form>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option</option></select>
   <textarea></textarea>
   <button>Button</button>
</form>

    jQuery：

    $(":image");
    • :reset：匹配所有重置按钮

    HTML：

    <form>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <select><option>Option</option></select>
   <textarea></textarea>
   <button>Button</button>
</form>

    jQuery：

    $(":reset");
    • :button：匹配所有按钮

    HTML：

    <form>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <input type="button" />
   <select><option>Option</option></select>
   <textarea></textarea>
   <button>Button</button>
</form>

    jQuery：

    $(":button");
    • :file：匹配所有文件域

    HTML：

    <form>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <input type="button" />
   <select><option>Option</option></select>
   <textarea></textarea>
   <button>Button</button>
</form>

    jQuery：

    $(":file");
    • :hidden：匹配所有不可见元素，或者type为hidden的元素

    HTML：

    <form>
   <input type="checkbox" />
   <input type="file" />
   <input type="hidden" />
   <input type="image" />
   <input type="password" />
   <input type="radio" />
   <input type="reset" />
   <input type="submit" />
   <input type="text" />
   <input type="button" />
   <select><option>Option</option></select>
   <textarea></textarea>
   <button>Button</button>
</form>

    jQuery：

    $(":hidden");

  • 表单对象属性

    • :enabled：匹配所有可用元素

    HTML：

    <form>
   <input name="email" disabled="disabled" />
   <input name="id" />
</form>

    jQuery：

    $("input:enabled");
    • :disabled：匹配所有不可用元素

    HTML：

    <form>
   <input name="email" disabled="disabled" />
   <input name="id" />
</form>

    jQuery：

    $("input:disabled");
    • :checked：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

    HTML：

    <form>
   <input name="email" disabled="disabled" />
   <input type="checkbox" checked="checked" name="id" />
</form>

    jQuery：

    $("input:checked");
    • :selected：匹配所有选中的option元素

    HTML：

    <select>
   <option value="1">Flowers</option>
   <option value="2" selected="selected">Gardens</option>
   <option value="3">Trees</option>
</select>

    jQuery：

    $("select option:selected");
RONG51920
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery-选择器
繁花落幕的博客
08-20 157
jQuery-选择器 选择器 解释 $(“p”) 选择标签 $(".test") 选择类 $("#test") 选择id $(“p.intro”) p标签里class为intro $(“p:first”) p的第一个 $(“ul li:first”) 第一个ul的第一个li $(“ul li:first-child”) 每一个ul的第一个li $("*"...
jQuery选择器详细介绍：基本选择器，层次选择器，属性选择器
最新发布
04-17 1211
(“li+li”).css(“border-top”, “2px solid red”)达到在两两li元素之间添加一个边框的效果。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。注：selector指的是选择器，attr指的是属性（attribute），value指的是属性值。说明：选择M元素后面（不包括前面）的（所有的）某一类兄弟元素N。说明：选择M元素后面（不包括前面）的（相邻的）某一类兄弟元素N。
JQuery选择器
hackcat的专栏
11-27 334
<br />jQuery 元素选择器<br />jQuery 使用 CSS 选择器来选取 HTML 元素。<br />$("p") 选取 <p> 元素。<br />$("p.intro") 选取所有 class="intro" 的 <p> 元素。<br />$("p#demo") 选取 id="demo" 的第一个 <p> 元素。<br />jQuery 属性选择器<br />jQuery 使用 XPath 表达式来选择带有给定属性的元素。<br />$("[href]") 选取所有带有 href 属性的元
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
jquery选择器简述
11-24
jQuery选择器使得获得页面元素变得更加容易、更加灵活，从而大大减轻了开发人员的压力。如同盖楼一样，没有砖瓦，就盖不起楼房，得不到元素谈何其他各种操作呢？可见,jQuery选择器的重要性。 jquery选择器大方向可以...
常用jQuery选择器汇总
12-08
学习【js DOM 编程艺术】，最后面有许多jQuery的选择器，每个都动手敲了一遍。 jQuery 提供了高级选择器的方法。 j s获取元素的三个基本方法分别是通过标签名，类名和id，即(getElementsByTagName, ...
jQuery的选择器
Matildan的博客
09-29 143
我们以前在CSS中学习的选择器有： 今天来学习一下jQuery 选择器。 jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。 1、jQuery 的基本选择器 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <bod
jquery选择器
06-01
jQuery选择器是一个功能强大的工具，用于选择HTML元素并对其进行操作。jQuery提供了多种选择器方法，以下是其中的一些： 1. ID选择器： 使用“#”符号，后跟ID名称，如下所示： ``` $("#myId") ``` 2. 类选择器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值