如何从 jQuery 选择器获取 DOM 元素？

在 Web 开发过程中，我们经常需要获取和操作 HTML 页面中的 DOM 元素。而 jQuery 是一种十分流行的 JavaScript 库，它提供了强大的选择器来帮助我们快速定位页面上的元素。

下面将介绍如何使用 jQuery 选择器来获取 DOM 元素。

1. jQuery 选择器的基础用法

可以使用 $ 或 jQuery 函数来创建一个 jQuery 对象，并使用选择器来选定相应的 DOM 元素。选择器可以使用 CSS 选择器的语法来定位元素。

// 选中 id 为 "my-div" 的元素
var $myDiv = $('#my-div');

// 选中 class 为 "my-class" 的元素
var $myClass = $('.my-class');

// 选中标签名为 "p" 的所有元素
var $p = $('p');

// 也可以组合使用选择器，选中同时满足多个条件的元素
var $divWithClassAndId = $('div.my-class#my-div');

这里 $ 符号是 jQuery 函数的别名，可以互换使用。

2. 对 jQuery 对象的操作

获取到 jQuery 对象之后，我们可以对其进行一系列的操作，例如修改元素的 CSS 样式、绑定事件、修改内容等等。

下面是一些 jQuery 对象的基本操作：

// 修改元素的 CSS 样式
$myDiv.css('background-color', 'red');

// 绑定点击事件
$myDiv.on('click', function() {
  alert('Clicked!');
});

// 修改元素的内容
$myDiv.text('New Content');

3. 获取 DOM 元素对象

如果需要获取原生的 DOM 元素对象，可以使用 jQuery 对象的 get 方法或者数组下标的方式。这里需要注意的是，获取到的是 DOM 元素，而不是 jQuery 对象。

// 获取 DOM 元素对象
var myDiv = $myDiv.get(0);
var myClass = $myClass[0];

4. 总结

使用 jQuery 选择器来获取 DOM 元素是一种简单、快捷而且实用的方式。掌握了基本用法之后，还可以深入学习 jQuery 的高级功能，例如过滤器、表单元素等等，可以帮助我们更方便地操作网页中的元素。