jQuery 选择器
jQuery 选择器是 jQuery 库中 最重要的 部分之一。
jQuery 选择器
jQuery 选择器让可以您选择和操作 HTML 元素。
jQuery 选择器用于根据 HTML 元素的名称、id、类、类型、属性、属性值等 "查找"（或选择）HTML元素。它基于现有的 CSS 选择器，此外，还有一些自己的自定义选择器。
jQuery 中的所有选择器都以美元符号和括号开头：$()。
元素选择器
jQuery 元素选择器根据元素名称选择元素。
您可以像这样选择页面上的所有 <p> 元素:
$("p")
实例
当用户单击按钮时，所有 <p> 元素都将隐藏:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").hide();});});</script></head><body><h2>这是一个标题</h2><p>这是一个段落</p><p>这是另一个段落</p><button>点击这里隐藏段落</button></body></html>
#id 选择器
jQuery #id 选择器使用 HTML 标记的 id 属性来查找特定元素。
id 在页面中应该是唯一的，所以当你想找到一个唯一的元素时，应该使用 #id 选择器。
要查找具有特定 id 的元素，请编写一个哈希字符，后跟 HTML 元素的 id:
$("#test")
实例
当用户单击按钮时，id="test" 的元素将被隐藏:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#test").hide();});});</script></head><body><h2>这是一个标题</h2><p>这是一个段落</p><p id="test">这是另一个段落</p><button>点击这里</button></body></html>
.class 选择器
jQuery .class 选择器查找具有特定样式类的元素。
要查找具有特定样式类的元素，请用点.字符，后跟样式类的名称:
$(".test")
实例
当用户单击按钮时，带有 class="test" 的元素将被隐藏:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$(".test").hide();});});</script></head><body><h2 class="test">这是一个标题</h2><p class="test">这是一个段落</p><p>这是另一个段落</p><button>点击这里</button></body></html>
更多 jQuery 选择器的实例
| 语法 | 描述 | 实例 |
|---|---|---|
| $("*") | 选择所有元素 | 试一试 |
| $(this) | 选择当前的 HTML 元素 | 试一试 |
| $("p.intro") | 选择所有 class="intro" 的元素 | 试一试 |
| $("p:first") | 选择第一个 <p> 元素 | 试一试 |
| $("ul li:first") | 选择第一个 <ul> 元素中的第一个 <li> 元素 | 试一试 |
| $("ul li:first-child") | 选择所有 <ul> 元素中的第一个 <li> 元素 | 试一试 |
| $("[href]") | 选择具有 href 属性的所有元素 | 试一试 |
| $("a[target='_blank']") | 选择所有具有 target 属性值等于 "_blank" 的 <a> 元素 | 试一试 |
| $("a[target!='_blank']") | 选择所有具有 target 属性值不等于 "_blank" 的 <a> 元素 | 试一试 |
| $(":button") | 选择所有具有 type="button" 的 <button> 与 <input> 元素 | 试一试 |
| $("tr:even") | 选择所有偶数 <tr> 元素 | 试一试 |
| $("tr:odd") | 选择所有奇数 <tr> 元素 | 试一试 |
有关所有 jQuery 选择器的完整参考，请访问本站的 jQuery 选择器参考。
将函数放于单独文件
如果您的网站包含大量页面，并且希望 jQuery 函数易于维护，那么可以将 jQuery 函数放在单独的页面中 .js 文件。
在本教程中演示 jQuery 时，是将函数直接添加到 <head> 部分。但是，有时最好将它们放在一个单独的文件中，比如这样（使用 src 属性来引用 .js 文件）:
实例
<head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script src="my_jquery_functions.js"></script></head>