jq选择器-选中

<input type="radio" name="verified" value="1" id="verified-1">

<input type="radio" name="verified" value="2" id="verified-2" checked>

<input type="radio" name="verified" value="3" id="verified-3">

 

想得到checked元素:$("input[name='verified'][checked]").val();

想得到当前选中元素:$("input[name='verified']:checked").val();

 

[] 与 : 的区别! 

[] 属性值

:  状态值

---------------------------------  ---------------------------------

设置时:

$("#nnnn").prop("checked")

获取时:

$("#nnnn").prop("checked", true);

清除时:

$("#nnnn").removeAttr("checked");

---------------------------------  ---------------------------------

 

 

<think>好的,用户现在想了解jq选择器的分类和种类。根据用户之前的问题,他们之前询问过如何安装jq工具,但这里的jq似乎是指jQuery,而不是命令行工具jq。需要确认用户是否混淆了这两者。 首先,看看用户提供的站内引用,引用1和2讨论的是jQuery选择器,引用3中的代码示例也是关于jQuery的选择器使用。而用户之前的问题是关于安装命令行工具jq,可能在这里出现了混淆。但根据当前问题,用户明确提到“jq选择器”,结合引用内容,应该是指jQuery选择器,即通常所说的JQuery,简写为$或jQuery。 接下来,需要整理jQuery选择器的分类。根据引用1,分为基本选择器、层次选择器、属性选择器;引用2提到了表单相关选择器如:enabled、:checked等;引用3中的代码示例展示了类选择器、层次选择器的使用,比如$(".onclick")、$("h4+span")等。 需要将这些分类系统地组织起来,可能的分法包括基本选择器、层次选择器、属性选择器、过滤选择器(包括表单过滤和内容过滤)、子元素过滤选择器等。同时要注意引用中的内容,如并集选择器、交集选择器属于基本选择器,而层次选择器中的后代、子元素、相邻、同辈选择器需要分别说明。 还要注意用户可能存在的混淆,即jq可能指代两种不同的工具,需要明确区分。在回答中应指出这一点,避免误解。同时,用户提供的引用3中的代码可能存在错误,比如$("box,h4")中的box应该是.class选择器,可能需要指出正确的写法是$(".box, h4"),以帮助用户理解。 最后,生成相关问题时要结合用户之前的问题,可能涉及安装问题,但当前问题主要在选择器分类,所以相关问题可以围绕选择器的使用、常见错误、性能优化等展开。</think>### jQuery 选择器分类详解 根据你的需求,结合站内引用内容,jQuery 选择器可分为以下六大类(含代码示例): --- #### **1. 基本选择器** | 类型 | 语法 | 描述 | 示例 | |------|------|------|------| | **ID 选择器** | `$("#id")` | 通过元素 ID 选择 | `$("#username")` | | **类选择器** | `$(".class")` | 通过 class 属性选择 | `$(".btn-primary")` | | **标签选择器** | `$("tag")` | 通过 HTML 标签选择 | `$("div")` | | **全局选择器** | `$("*")` | 选择所有元素 | `$("*").css("margin",0)` | | **并集选择器** | `$("sel1, sel2")` | 多条件并列选择 | `$("h2, .box")`[^3] | | **交集选择器** | `$("sel1.sel2")` | 满足多个条件的选择 | `$("li.active")` | --- #### **2. 层次选择器** | 类型 | 语法 | 描述 | 示例 | |------|------|------|------| | **后代选择器** | `$("ancestor descendant")` | 选择祖先元素内的所有后代 | `$(".box span")`[^3] | | **子选择器** | `$("parent > child")` | 直接子元素选择 | `$("ul > li")` | | **相邻选择器** | `$("prev + next")` | 紧邻的下一个同级元素 | `$("h4 + span")`[^3] | | **同辈选择器** | `$("prev ~ siblings")` | 后续所有同级元素 | `$("strong ~ span")` | --- #### **3. 属性选择器** | 类型 | 语法 | 描述 | 示例 | |------|------|------|------| | **存在属性** | `$("[attr]")` | 选择包含某属性的元素 | `$("[href]")` | | **属性值等于** | `$("[attr=value]")` | 精确匹配属性值 | `$("[type='text']")` | | **属性值开头** | `$("[attr^=value]")` | 属性值以指定字符开头 | `$("[class^='btn']")` | | **属性值结尾** | `$("[attr$=value]")` | 属性值以指定字符结尾 | `$("[src$='.png']")` | | **属性值包含** | `$("[attr*=value]")` | 属性值包含指定字符 | `$("[alt*='logo']")` | | **复合属性** | `$("[attr1][attr2]")` | 同时满足多个属性条件 | `$("[id][data-toggle]")`[^1] | --- #### **4. 过滤选择器** ##### **表单相关** | 类型 | 语法 | 描述 | 示例 | |------|------|------|------| | **可用元素** | `$(":enabled")` | 选择可操作的表单元素 | `$("input:enabled")`[^2] | | **不可用元素** | `$(":disabled")` | 选择禁用的表单元素 | `$("select:disabled")` | | **选中状态** | `$(":checked")` | 选择被选中的单选框/复选框 | `$("input:checked")`[^2] | | **下拉框选中** | `$(":selected")` | 选择被选中的下拉选项 | `$("option:selected")`[^2] | ##### **内容过滤** | 类型 | 语法 | 描述 | 示例 | |------|------|------|------| | **包含文本** | `$(":contains(text)")` | 选择包含指定文本的元素 | `$("p:contains('Error')")` | | **空元素** | `$(":empty")` | 选择无子元素的元素 | `$("div:empty")` | | **非空元素** | `$(":parent")` | 选择有子元素的元素 | `$("td:parent")` | --- #### **5. 子元素过滤选择器** | 类型 | 语法 | 描述 | 示例 | |------|------|------|------| | **第一个子元素** | `$(":first-child")` | 选择父元素的第一个子元素 | `$("li:first-child")` | | **最后一个子元素** | `$(":last-child")` | 选择父元素的最后一个子元素 | `$("tr:last-child")` | | **第 N 个子元素** | `$(":nth-child(n)")` | 选择父元素的第 n 个子元素 | `$("ul li:nth-child(2)")` | --- #### **6. 可见性过滤** | 类型 | 语法 | 描述 | 示例 | |------|------|------|------| | **可见元素** | `$(":visible")` | 选择可见元素 | `$("div:visible")` | | **隐藏元素** | `$(":hidden")` | 选择隐藏元素(含 CSS `display:none` 或 `type="hidden"`) | `$("input:hidden")` | --- ### **代码示例解析** 结合引用[^3]中的代码: ```javascript $(".onclick").click(function(){ $(".box, h4").css("background","yellow"); // 并集选择器(注意类名前需加`.`) $("h4 + span").css("background","#F9F"); // 相邻选择器 $("strong ~ span").css("background","red"); // 同辈选择器 $(".li").css("background","#6FF"); // 类选择器 }); ``` --- ### **注意事项** 1. **选择器性能**:ID 选择器 > 类选择器 > 标签选择器,复杂选择器会降低查询效率[^1] 2. **转义特殊字符**:若属性值含 `.`、`#` 等符号,需用双反斜杠转义(如 `$("[name=name\\.value]")`) --- ### 相关问题 1. 如何优化 jQuery 选择器的性能? 2. 如何使用 jQuery 选择器动态过滤表格数据? 3. `$("input:not(:checked)")` 这种选择器的逻辑是什么? 4. 如何通过 jQuery 选择器实现父子菜单联动? [^1]: 类 CSS 选择器语法参考 : 表单状态过滤选择器分类 : 实际应用中的选择器组合案例
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值