jQuery的选择器中的通配符[id^=’code’]或[name^=’code’]及jquery选择器总结

一、通配符选择器

通配符选择器是 jQuery 中的一种特殊选择器，用于匹配属性值符合某一特定模式的元素。

语法格式如下：

$('[attribute^="value"]');  // 以 value 开头的 attribute 属性值
$('[attribute$="value"]');  // 以 value 结尾的 attribute 属性值
$('[attribute*="value"]');  // 包含 value 的 attribute 属性值

以 [attribute^="value"] 为例，它用于匹配属性值以 value 开头的元素，其中 attribute 表示属性名，value 表示属性值的开头部分。下面是一个示例：

<div id="code-001">Code 001</div>
<div id="code-002">Code 002</div>
<div id="num-001">Number 001</div>
<div id="num-002">Number 002</div>

如果要选中 id 属性以 code 开头的元素，可以使用如下代码：

$('[id^="code"]');

这将会选中 id 属性为 code-001 和 code-002 的两个 div 元素。

类似地，如果要选中 name 属性以 code 开头的元素，可以使用如下代码：

$('[name^="code"]');

这将会选中 name 属性为 code-001 和 code-002 的两个元素。

二、jQuery 选择器总结

除了通配符选择器，jQuery 中还有许多其他的选择器，按照使用频率和常见程度，可以大致分为以下几类：

1. 基本选择器

基本选择器用于选取指定元素，包括：

• 标签选择器，如 $('div') 选取所有 div 元素；
• 类选择器，如 $('.class') 选取所有 class 为 class 的元素；
• ID 选择器，如 $('#id') 选取 id 为 id 的元素；
• 属性选择器，如 $('[attribute="value"]') 选取指定属性值等于 value 的元素；

• 通配符选择器，如 $('*') 选取所有元素。

• 组合选择器

组合选择器是将多个基本选择器组合起来使用，包括：

• 后代选择器，如 $('div span') 选取所有 div 元素下的 span 元素；
• 子代选择器，如 $('div > span') 选取所有 div 元素直接子元素中的 span 元素；
• 兄弟选择器，如 $('div + p') 选取所有紧贴在 div 元素后面的 p 元素；

• 属性筛选器，如 $('input[type="text"]') 选取所有 type 属性值为 text 的 input 元素。

• 表单选择器

表单选择器是用于选取表单元素的选择器，包括：

• :input，选取所有表单元素；
• :text，选取所有文本输入框；
• :password，选取所有密码输入框；
• :radio，选取所有单选框；
• :checkbox，选取所有复选框；
• :submit，选取所有提交按钮；
• :reset，选取所有重置按钮；
• :button，选取所有按钮；
• :image，选取所有图片型提交按钮；

• :file，选取所有文件上传框。

• 内容过滤选择器

内容过滤选择器可以基于元素的文本内容进行选择，包括：

• :contains(text)，选取所有包含指定文本内容的元素；
• :empty，选取所有不包含子元素或者文本的元素；
• :has(selector)，选取所有包含指定选择器所选元素的父元素；

• :not(selector)，选取不匹配指定选择器的元素。

• 属性过滤选择器

属性过滤选择器可以基于元素的属性进行选择，包括：

• [attribute]，选取所有具有指定属性的元素；
• [attribute=value]，选取指定属性值等于 value 的元素；
• [attribute^=value]，选取属性值以 value 开头的元素；
• [attribute$=value]，选取属性值以 value 结尾的元素；
• [attribute*=value]，选取属性值包含 value 的元素；

• [attribute!=value]，选取指定属性值不等于 value 的元素。

• 子元素过滤选择器

子元素过滤选择器可以基于元素的子元素进行选择，包括：

• :first-child，选取第一个子元素；
• :last-child，选取最后一个子元素；
• :nth-child(n)，选取第 n 个子元素；
• :odd，选取所有奇数位置的子元素；
• :even，选取所有偶数位置的子元素。

以上是常见的 jQuery 选择器，一些更高级的选择器，如表单选择器和内容过滤选择器，需要较深厚的 jQuery 知识和实际开发经验。