jQuery选择器详解-优快云博客

本文详细介绍了jQuery中的选择器符号及其用途，例如使用#选择ID，.选择class等，并解释了特殊符号如+、~、*、!、^、$的作用及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在jQuery中我们借助一些特殊字符来实现查询，它们就象是编程语言里面的关键字，为方便记忆总结如下#;&,.+*~':"!^$[]()=>|/

# 表示选择id，如

$("#div1").html()

& 表示

. 表示选择class属性，用样式查找如

$(".selected").removeClass("selected")

~ 表示一个有效选择器[color=red]跟着[/color]第一个选择器

+ 表示一个有效选择器并且[color=red]紧接[/color]着第一个选择器,如


<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery代码$("label + input")，表示选择所有[color=red]紧跟[/color]在label元素后面的input元素,结果<input name="name" />,<input name="newsletter" />，[color=red]不包括<input name="none" />[/color], 如果改成用~,那么<input name="none" />就包括在内

* 表示包含某些字符，如

$("input[name*='man']")

查找所有name属性包含'man'的input元素

! 表示非不是，如

$("input[name!='man']")

查找所有name属性不等于'man'的input元素

^ 表示以...开始，如

$("input[name^='man']")

查找所有name属性以'man'开头的input元素

$ 表示以...结尾，如

$("input[name^='man']")

查找所有name属性以'man'结尾的input元素

: 和jQuery关键字组成选择器,如

$("tr:hidden")

查找所有隐藏的tr

[] 常用在选择器里面，表示某个元素的属性，如


<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
$("div[id]")     匹配 <div id="test2"></div>

> 常用在选择器里面表示父子关系，如

$("form > input") 匹配form里面所有input元素

| 表示或者

javascript中的字符,；",() =

在使用这些特殊字符的时候，如果不加上转义符"\",可能会有错误

jQuery特殊字符总结