jQuery Selector选择器小结

什么是jQuery Selector选择器？

jQuery是一个流行的JavaScript库，它可以轻松地对文档中的各种元素进行操作。其中，"Selector选择器"是jQuery的核心语法之一，它能够根据元素的特定属性或值来查找、选取HTML页面中特定的元素。

jQuery Selector选择器语法

基础语法

• 通过元素类型查找：
  使用元素的名称来查找元素，如 $('p') 将选中所有 <p> 元素。

• 通过 id 查找：
  使用元素的 id 属性来查找元素，如 $('#myId') 将选中 id 为 "myId" 的元素。

• 通过类名查找：
  使用元素的类名来查找元素，如 $('.myClass') 将选中所有类名为 "myClass" 的元素。

• 通过子选择器来查找：
  可以通过子元素的类型、类名、id 或属性来查找元素，如 $('div p') 将选中所有 <div> 中的 <p> 元素。

• 通过属性选择器查找：
  通过元素的属性值来查找元素，如 $('input[name="username"]')将选中 name 属性值为 "username" 的所有 <input> 元素。

实战应用

通过以下两个例子来演示jQuery Selector选择器：

<div>
  <p id="intro">This is a paragraph.</p>
  <p class="intro">This is another paragraph.</p>
  <p class="intro">This is a third paragraph.</p>
</div>

1. 通过元素类型和类名选择元素，给元素添加样式

$('p.intro').css('font-size', '20px');

上述代码将选中 class 为 "intro" 的所有 <p> 元素，并将它们的字体大小设置为 20px。

2. 通过属性选择器来选择元素

$('p[id="intro"]').css('color', 'red');

上述代码将选中 id 为 "intro" 的 <p> 元素，并将它们的文字颜色设置为红色。

总结

本文介绍了jQuery Selector选择器的基础语法，包括元素类型、id、类名、子选择器和属性选择器的使用方法。同时，通过两个实例演示了如何使用Selector选择器对HTML元素进行操作。学习掌握了这些基础知识，你就可以在日常工作中更高效地使用jQuery来操作和管理文档中的HTML元素了。