不是 jQuery 中的类选择器

在 jQuery 选择器中，我们经常使用类选择器 . 来选取带有特定类名的元素。但是，有些时候我们需要用到的类选择器并不是 jQuery 内置的，本文将介绍一些常见的不是 jQuery 中的类选择器。

1. 属性选择器

属性选择器可以通过元素的属性来选取元素，常见的有以下几种：

• [attr]：选取带有 attr 属性的元素；
• [attr=value]：选取 attr 属性值为 value 的元素；
• [attr*=value]：选取 attr 属性值中包含 value 的元素；
• [attr^=value]：选取 attr 属性值以 value 开头的元素；
• [attr$=value]：选取 attr 属性值以 value 结尾的元素。

举个例子，我们可以用以下的选择器选取所有带有 href 属性且以 https 开头的链接：

<a href="https://www.google.com">Google</a>
<a href="https://www.baidu.com">Baidu</a>

<script>
  $('a[href^="https"]');
</script>

2. 伪类选择器

伪类选择器可以选取一些不同状态的元素，常见的有以下几种：

• :hover：当鼠标悬停在元素上时，选取该元素；
• :checked：选取选中的表单元素；
• :not(selector)：选取不符合 selector 的元素；
• :first-child：选取其父元素下第一个子元素；
• :last-child：选取其父元素下最后一个子元素。

举个例子，我们可以用以下的选择器选取所有未被选中的复选框的兄弟元素：

<input type="checkbox" name="language" value="JavaScript" checked>
<label for="JavaScript">JavaScript</label>
<input type="checkbox" name="language" value="Python">
<label for="Python">Python</label>
<input type="checkbox" name="language" value="Java" checked>
<label for="Java">Java</label>

<script>
  $('input[name="language"]:not(:checked)+label');
</script>

3. 伪元素选择器

伪元素选择器可以选取一些不同状态的元素的子元素，常见的有以下几种：

• ::before：在元素之前插入内容；
• ::after：在元素之后插入内容；
• ::first-letter：选取第一个字母；
• ::first-line：选取第一行。

举个例子，我们可以用以下的选择器为文章中的首字母加上样式：

<p>This is the first line of the article.</p>

<style>
  p::first-letter {
    font-size: 2em;
    color: red;
    float: left;
    margin-right: 5px;
  }
</style>

结语

以上介绍了一些不是 jQuery 中的常见选择器，希望对大家有所帮助。在使用这些选择器的时候，注意浏览器兼容性和语法正确性。