jQuery Selector 是jQuery库中非常重要的一个组成部分。
jQuery Selector 用来选择某个HTML元素，其基本语句和CSS的选择器（Selector）是一样的，所有jQuery selector 都是以$()开始。
选择HTML标记
选择某个HTML元素的方法是直接使用该元素的标记名称，比如选择所有<p>元素
$("p")
下面的例子当用户点击一个按钮时，隐藏所有的<p>元素
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id 选择
jQuery #id 选择器用来选择定义了id 属性的元素，网页上元素的id应保证是唯一的，你可以使用id来选择单个唯一的元素。
比如下面的例子，当点击按钮时，只会隐藏id为test 的元素。
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
.class 选择器
jQuery .class 选择器选择所有定义了class属性为制定值的所有元素，比如下面的例子 隐藏所有类名称为test的元素：
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
更多的例子
| 语法 |
说明 |
| $(“*”) |
选择所以元素 |
| $(this) |
选择当前元素 |
| $(“p.intro”) |
选项所有class=intro的p元素 |
| $(“p:first”) |
选择第一个p元素 |
| $(“ul li:first”) |
选择第一个<ul>元素的第一个<li>元素 |
| $(“ul li:first-child”) |
选择每个<ul>的第一个 元素 |
| $(“[href]“) |
选择所有带href的元素 |
| $(“a[target='_blank']“) |
选择所有target=_blank的a元素 |
| $(“a[target!='_blank']“) |
选择所有target！=_blank的a元素 |
| $(“:button”) |
选择所有button元素及input类型为button的元素 |
| $(“tr:even”) |
选择所有偶数行<tr>元素 |
| $(“tr:odd”) |
选择所有单数行<tr>元素 |
分享到：
相关推荐
**jQuery入门指南教程** jQuery，一个轻量级的JavaScript库，是前端开发中不可或缺的工具，因其简洁的API和强大的功能而备受青睐。本教程专为初学者设计，旨在帮助你快速掌握jQuery的基础知识和常见操作，从而提高...
本篇教程是针对初学者设计的，旨在帮助新手快速入门jQuery框架。 **jQuery核心概念** 1. **选择器（Selectors）**：jQuery的选择器类似于CSS选择器，用于在文档中找到特定的HTML元素。例如，`$("#myID")`选择具有...
本篇将作为jQuery入门的起点，带领初学者逐步理解并掌握这个强大的工具。 ### 1. jQuery 的安装与引入 在开始学习jQuery之前，首先需要在项目中引入jQuery库。最常见的方式是通过CDN（内容分发网络）链接，这样...
**jQuery中文入门教程实例** jQuery 是一款非常流行的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互和DOM操作变得更加便捷。这个“jQuery中文入门教程实例”是为初学者设计的，旨在帮助你快速...
**jQuery 中文教程** ...本教程提供的《jQuery入门教程.pdf》将深入浅出地讲解以上各个知识点，帮助读者快速上手jQuery，提升Web开发技能。通过学习，你将能够熟练运用jQuery创建交互性强、用户体验良好的网页应用。
《锋利的jQuery》是一本非常适合初学者入门的jQuery教程，它深入浅出地讲解了jQuery库的基础知识和实用技巧。jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务，极大地...
本教程将通过一系列入门级的代码示例，帮助初学者快速掌握jQuery的基本用法。 1. **选择器（Selectors）**：jQuery的选择器类似于CSS，用于选取页面上的HTML元素。例如，`$("#id")`选取ID为"id"的元素，`$(".class...
- **"How jQuery Works"**: 这是一个基础教程，介绍jQuery的工作原理和基本用法，适合初学者入门。 - **"15 Days Of jQuery"**: 该教程旨在15天内帮助用户从零开始掌握jQuery，包括基础和进阶内容。 - **"Learning...
2. **jQuery教程**：网上有许多免费的jQuery教程，如W3School、MDN等，适合初学者入门。 3. **jQuery实践项目**：通过实际项目练习，可以更好地理解和掌握jQuery的用法。 4. **jQuery书籍**：《jQuery实战》等专业...
二、15天学会jQuery入门教程 该教程分为5个阶段，每个阶段包括3天的学习内容： 1. **第1-3天**：理解jQuery基本概念，学习选择器和DOM操作，实现简单的元素选取和操作。 2. **第4-6天**：深入学习事件处理，包括...
3. **事件处理（Event Handling）**：jQuery简化了事件绑定和触发。例如，`$(selector).click(function() {...})`用于绑定点击事件，`$(selector).on('mouseover', function() {...})`绑定鼠标悬停事件，`$(selector...
1. **jQuery 入门** jQuery 的引入通常通过在HTML文档的`<head>`部分插入`<script>`标签，引用CDN或者本地的jQuery库。例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``...
1. **选择器（Selectors）**: jQuery 的核心在于强大的选择器机制，允许开发者通过CSS样式选择页面上的元素，如 `$("#id")` 选择ID为id的元素，`$(".class")` 选择所有class为class的元素。 2. **DOM操作（DOM ...
1. **选择器（Selectors）**：jQuery的核心功能之一是高效的选择器，它支持CSS1至CSS3的选择器，如`$("#id")`用于选取ID为id的元素，`$(".class")`用于选取所有class为class的元素，以及`$("tag")`用于选取所有特定...
1. **选择器（Selectors）**：jQuery的选择器类似于CSS选择器，用于在DOM（文档对象模型）中选取元素。例如，`$("#id")`选择ID为"id"的元素，`$(".class")`选择所有class为"class"的元素。 2. **链式操作（Chaining...
jQuery入门知识点概述： 1. jQuery概述： jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，是目前Web开发领域中使用极为广泛的库之一。它不仅受到专业Web开发者的青睐，...
- **教程（Tutorials）**：新手入门指南，通过实例教学如何开始使用jQuery。 - **示例（Examples）**：提供大量代码示例，展示jQuery在实际场景中的应用。 - **兼容性表（Compatibility）**：记录了各个版本对不同...
1. **入门**：首先了解jQuery的基本语法和常用API，通过编写简单的脚本熟悉其工作方式。 2. **进阶**：深入学习选择器、事件和DOM操作，尝试实现复杂的页面交互。 3. **Ajax和动画**：掌握异步数据请求和动画效果，...
1. **选择器（Selectors）**：jQuery提供了丰富的CSS选择器，如ID选择器 (#id)、类选择器 (.class)、元素选择器 (tag) 等，使你能够轻松地选取页面中的DOM元素。 2. **DOM操作（DOM Manipulation）**：jQuery简化了...