JQuery常用选择器

最新推荐文章于 2023-09-24 22:35:15 发布
最新推荐文章于 2023-09-24 22:35:15 发布
阅读量605 收藏
点赞数
分类专栏： javaWEB基础 文章标签： JQuery常用选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HYJ940228/article/details/102743787
版权

基本选择器

分类

  • 1. 基本选择器

    • 1. 标签选择器（元素选择器）

      • 语法： $(“html标签名”) 获得所有匹配标签名称的元素
      描述:
查找一个 DIV 元素。

HTML 代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代码:
$("div");
结果:
[ <div>DIV1</div>, <div>DIV2</div> ]

    • 2. id选择器
      * 语法： $("#id的属性值") 获得与指定id属性值匹配的元素

      描述:
查找 ID 为"myDiv"的元素。
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码:
$("#myDiv");
结果:
[ <div id="myDiv">id="myDiv"</div> ]

    • 3. 类选择器
      * 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素

      描述:
查找所有类是 "myClass" 的元素.

HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码:
$(".myClass");
结果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

    • 4. 并集选择器：
      * 语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素

      描述:
找到匹配任意一个类的元素。

HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery 代码:
$("div,span,p.myClass")
结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
jQuery 参考书

  • 2. 层级选择器

    • 1. 后代选择器
      * 语法： $("A B ") 选择A元素内部的所有B元素

      描述:
找到表单中所有的 input 元素

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]

    • 2. 子选择器
      * 语法： $(“A > B”) 选择A元素内部的所有B子元素

      描述:
匹配表单中所有的子级input元素。

HTML 代码:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]

  • 3. 属性选择器

    • 1. 属性名称选择器
      * 语法： $(“A[属性名]”) 包含指定属性的选择器

      描述:
查找所有含有 id 属性的 div 元素

HTML 代码:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
jQuery代码:
$("div[id]")
结果:
[ <div id="test2"></div> ]

    • 2. 属性选择器
      * 语法： $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器

      描述:
查找所有 name 属性是 newsletter 的 input 元素

HTML 代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name='newsletter']").attr("checked", true);
结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, 
<input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

    • 3. 复合属性选择器
      * 语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器

      描述:
找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

HTML 代码:
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
jQuery代码:
$("input[id][name$='man']")
结果:
[ <input id="letterman" name="new-letterman" /> ]

  • 4. 过滤选择器

    • 1. 首元素选择器
      * 语法： :first 获得选择的元素中的第一个元素

      描述:
获取匹配的第一个元素

HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
jQuery 代码:
$('li').first()
结果:
[ <li>list item 1</li> ]

    • 2. 尾元素选择器
      * 语法： :last 获得选择的元素中的最后一个元素

      描述:
获取匹配的最后个元素

HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
jQuery 代码:
$('li').last()
结果:
[ <li>list item 5</li> ]

    • 3. 非元素选择器
      * 语法： :not(selector) 不包括指定内容的元素

      描述:
查找所有未选中的 input 元素

HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery 代码:
$("input:not(:checked)")
结果:
[ <input name="apple" /> ]

    • 4. 偶数选择器
      * 语法： :even 偶数，从 0 开始计数

      描述:
查找表格的1、3、5...行（即索引值0、2、4...）

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery代码:
$("tr:even")
结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

    • 5. 奇数选择器
      * 语法： :odd 奇数，从 0 开始计数

      描述:
查找表格的2、4、6行（即索引值1、3、5...）

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:odd")
结果:
[ <tr><td>Value 1</td></tr> ]

    • 6. 等于索引选择器
      * 语法： :eq(index) 指定索引元素

      描述:
查找第二行

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery代码:
$("tr:eq(1)")
结果:
[ <tr><td>Value 1</td></tr> ]

    • 7. 大于索引选择器
      * 语法： :gt(index) 大于指定索引元素

      描述:
查找第二第三行，即索引值是1和2，也就是比0大

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:gt(0)")
结果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

    • 8. 小于索引选择器
      * 语法： :lt(index) 小于指定索引元素

      描述:
查找第一第二行，即索引值是0和1，也就是比2小

HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:lt(2)")
结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

    • 9. 标题选择器
      * 语法： :header 获得标题（h1~h6）元素，固定写法

      描述:
给页面内所有标题加上背景色

HTML 代码:
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
jQuery代码:
$(":header").css("background", "#EEE");
结果:
[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">
Header 2</h2> ]

  • 5. 表单过滤选择器

    • 1. 可用元素选择器
      * 语法： :enabled 获得可用元素

      描述:
查找所有可用的input元素

HTML 代码:
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>
jQuery代码:
$("input:enabled")
结果:
[ <input name="id" /> ]

    • 2. 不可用元素选择器
      * 语法： :disabled 获得不可用元素

      描述:
查找所有不可用的input元素

HTML 代码:
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>
jQuery 代码:
$("input:disabled")
结果:
[ <input name="email" disabled="disabled" /> ]jQuery 参考书

    • 3. 选中选择器
      * 语法： :checked 获得单选/复选框选中的元素

      描述:
查找所有选中的复选框元素

HTML 代码:
<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
jQuery 代码:
$("input:checked")
结果:
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />,
 <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

    • 4. 选中选择器
      * 语法： :selected 获得下拉框选中的元素

      描述:
查找所有选中的选项元素

HTML 代码:
<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>
jQuery 代码:
$("select option:selected")
结果:
[ <option value="2" selected="selected">Gardens</option> ]
TheBestBadGuy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
查找html的第三个input元素,获取HTML元素的3个方法
weixin_29388659的博客
06-08 545
Smile41126551.该元素一个id属性，为它指定一个(在文档中)唯一的名称，然后就可以用该ID查找想要的元素。functiongetValue(){varx=document.getElementById("myHeader")alert(x.innerHTML)}ThisisaheaderClickontheheadertoalertitsvalue2.该...
jQuery常用选择器
Gu200084的博客
08-08 512
什么是选择器？ 就是选中到我们的dom节点 或者说 选中我们页面中的元素的工具 不管是你的css选择器也好 还是jq选择器也好都是为了选中我们页面中的元素 一.基础选择器 标签选择器: $(“p”)选中所有的p标签 id选择器：$("#test1")选中id是test1的标签 类选择器: $(".test2")选中类名是test2的标签 交集选择器: $(“p.test3”)选中的就是类名为test3的p标签 分组选择器: $(“h1,h2,h3”)选中的是我们所有的h1,h2,h3标签 后代选.
前端面试HTML部分（二）
yxorg的博客
08-23 388
前端面试HTML部分（二） Label的作用是什么？是怎么用的？ label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。 <label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label&g
html语言测试,HTML测试题(笔试题库).doc
weixin_36198878的博客
05-30 583
HTML测试题(笔试题库)1.据以下的HTML代码表格123对以上代码，以下描述正确的是()。(选择两项)A.该网页内容的第一行显示“表格”B.1和2的表格在同一行C.1和2的表格在同一列D.1和3的表格在同一列3.要在网页中显示下列的内容:售票员说：“定价：￥68”；下面的语句正确的是()。(选择一项)A.售票员说： 定价：&yuan;68 & quot;B.售票员说： &amp...
JavaScript 获取 input 输入框内容有以下6种方式
最新发布
2201_75463016的博客
09-24 3240
获取id名称的元素，单个元素注意：以下方法 2、3、4 和 6 返回元素的集合, 通过索引来获取制定元素，第一个元素使用，第二个元素使用，以此类推…
html查找元素的常用方法,jQuery选择器总结之常用元素查找方法
weixin_39622587的博客
06-26 300
选择器并没有一个固定的定义，在某种程度上说，jQuery的选择器和样式表中的选择器十分相似。选择器具有如下特点：1．简化代码的编写2．隐式迭代3．无须判断对象是否存在jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("d...
JQuery常用选择器基础
小狐狸和小兔子
10-15 102
JQuery选择器基础 附上常用选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有class="intro" 的元素 element $("p") 所有 <p> 元素 .class.class $(".test.demo") 所有class="test" 且 class="demo" 的元素 :first $("p:first") 第一
jQuery常用选择器详解
10-19
以下是对jQuery常用选择器的详细解释： 1. **基本选择器**： - `#id`：通过ID选取元素，如`$('#div1')`。 - `.class`：通过类名选取元素，如`$('.w100')`。 - `tag`：通过标签名选取元素，如`$('div')`。 - `*`...
JQuery常用选择器功能与用法实例分析
10-15
在jQuery中，选择器是其强大功能的核心之一，它们允许开发者高效地选取页面上的特定元素，进而进行进一步的处理。 一、基础选择器 1. ID选择器：`$("#id")` 用于选取具有指定ID的唯一元素。 2. 类选择器：`$("....
常用jQuery选择器总结
10-25
jQuery选择器是jQuery库的核心功能之一，用于高效地定位并操作网页中的DOM元素。通过使用jQuery选择器，开发者可以轻松地选取需要的HTML元素，并执行一系列的DOM操作，如添加样式、修改内容或绑定事件等。 1. **...
(25)HTML标签详解之<form><input><label><fieldset><legend>
yangli_world的博客
07-28 799
HTML标签详解之           标签用于为用户的输入创建 HTML 表单，用于向服务器传输数据。它是块级元素。 表单能够包含  标签" style="margin:0px; padding:0px; border:0px; color:rgb(144,11,9); background:transparent">input 元素，比如文本字段、复选框、单选框、提交按钮等等。
＜ span ＞标签的使用
qq_43764148的博客
04-30 4862
< span >标签的使用 span标签可以为< p >标签中的部分文字添加样式且不会改变文字的显示方向 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><span>标签的应用</title> <style type="text/css"> p{font-size: 14px;}
form表单中的label标签
CTI技术与呼叫中心设计
10-28 1101
小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。 label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。 语法：
jQuery学习总结01-选择器
weixin_30493321的博客
07-09 161
下面简单介绍一个常用的jQuery使用方法，其他详细的猛戳这里 一、选择器 1.parent > child 说明：在给定父类的情况下匹配所有的子类 示例： 描述：匹配表单中所有的的子级input元素 HTML代码： <form> <label>Name:</label> <input name="name" ...
html form 表单
且听风吟的博客
07-15 5948
html form 表单
C1认证学习笔记3--Web基础
weixin_47734224的博客
02-13 346
https://tasking.csdn.net/study?guid=815eb3f2379011ecb83400163e17b59d
jQuery层次选择器用法
weixin_45747278的博客
10-20 287
2：jQuery层次选择器 2.1： ancestor descendant选择器 概念： ancesdor descendant选择器中ancestor代表祖先，descendant代表子孙，用于在给定的祖先元素下匹配所有的后代元素 HTML代码： <form> <label>Name:</label> <input name="name"...
jQuery选择器
柯晓楠
01-15 446
概念 官方概念： Query 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头：$()。 个人理解： jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属...
html页面获取元素,JavaScript中获取HTML元素值的三种方法
weixin_36295555的博客
06-03 4056
JavaScript中取得元素的方法有三种：分别是：1、getElementById() 方法：通过id取得HTML元素。2、getElementsByName()方法：通过name取得元素，是一个数组。3、getElementsByTagName()方法：通过HTML标签取得元素，是一个数组。如果要取得值可以使用value，如：var x=document.getElementById("id"...
"jQuery常用选择器分类及用法总结
jQuery是一个非常流行的JavaScript库，它简化了DOM操作和事件...以上就是jQuery常用的选择器分类及其用法的介绍，通过灵活运用这些选择器，我们可以轻松地操作DOM元素，实现丰富多彩的交互效果。希望本文对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值