使用 jQuery 选择元素
使用 jQuery 选择元素
使用 jQuery 选择元素 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 1 节课，共 1 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 1 节课。
简介
您好：
jQuery 使用 XPath 语法选择 DOM 元素。
因此，如果您正在使用 CSS，或者曾经使用 XPath 选择 XML 中的节点，那么您已经知道如何使用 jQuery 选择元素了！
让我们在 jQuery 中使用它们吧 🚀
类选择器
类选择器
使用点号（.）运算符，可以选中具有指定类的元素。
在下面的示例中，程序会选中所有具有 title 类的元素，并更改它们的颜色。
<p class="title">Hello</p>
<p class="title">CoddyKit</p>
<p class="title">Learning</p>
<p class="title">jQuery</p>
<script>
$('.title').css('color','pink')
</script>WARNING
我们将在后续课程中介绍 css() 方法。
目前只需了解，css() 方法用于设置元素的样式。
ID 选择器
ID 选择器
使用#（井号）运算符，可以选中具有指定 ID 的元素。正如我们所知，the same id value can be given to only one element in the HTML page.
在下面的示例中，程序会选中具有 title ID 的元素，并更改其颜色。
<p id="title">Hello</p>
<p id="title1">CoddyKit</p>
<p id="title2">Learning</p>
<p id="title3">jQuery</p>
<script>
$('#title').css('color','pink')
</script>标签选择器
标签选择器
可以使用指定标签中的元素，方法是直接使用标签名称。
在下面的示例中，程序会选中具有 span 标签的元素，并更改其颜色。
<p>Hello</p>
<span>Hello</span>
<span>CoddyKit</span>
<script>
$('span').css('color','pink')
</script>子元素选择器
子元素选择器
如果要选中某个元素的子元素，可以使用大于号（>）运算符。
在下面的示例中，程序会选中指定元素的所有子元素。
<p>
<span>Hello</span>
<span>CoddyKit</span>
</p>
<script>
$('p>span').css('color','pink')
</script>属性选择器
属性选择器
我们可以检查元素的属性是否具有某个值，从而选中指定元素。
在下面的示例中，程序会选中具有 <a> 标签且 target 属性值为 _blank 的元素。
<a target="_blank"
href="http://coddykit.com">
CoddyKit
</a>
<script>
$ ('a[target = "_blank"]').css('color','pink')
</script>jQuer 选择方法
jQuery 除了提供 XPath 选择器之外，还提供了一些方法，让我们更容易在 DOM 中进行选择。
让我们来了解这些方法。
父元素方法
parent() 方法
我们可以使用 jQuery 提供的 parent() 方法，选中指定元素的父元素。
在下面的示例中，程序会选中该元素的父元素，并更改父元素的文本颜色。
<div>
Parent Element Text
<a target="_blank" href="http://coddykit.com">
CoddyKit
</a>
</div>
<script>
$ ('a').parent().css('color','pink')
</script>children 方法
children() 方法
我们可以使用 jQuery 提供的 children() 方法，选中指定元素的所有子元素。
在下面的示例中，程序会选中该元素的所有子元素，并更改子元素的文本颜色。
<div>
<a target="_blank" href="http://coddykit.com">
CoddyKit
</a>
<span>Children Element Text</span>
</div>
<script>
$ ('div').children().css('color','pink')
</script>parents 方法
parents() 方法
我们可以使用 jQuery 提供的 parents() 方法，选中指定元素的祖先元素。
在下面的示例中，程序会选中该元素的祖先元素，并更改父元素的文本颜色。
与我们学过的其他方法相比，此方法的区别在于它可以接收参数。
因此，我们可以将 XPath 选择器作为参数传入，以指定要选择的祖先元素。
<div class="wrapper">
Hello
<p>
<span>CoddyKit</span>
<p>
</div>
<script>
$ ('span').parents('.wrapper').css('color','pink')
</script>next 方法
next() 方法
next() 方法会选中指定元素的下一个同级元素。
在下面的示例中，程序会选中 a 标签元素后面的第一个同级元素。
<a href="http://coddykit.com">CoddyKit</a>
<span>I am first sibling of a element</span>
<script>
$ ('a').next().css('color','pink')
</script>nextAll 方法
nextAll() 方法
nextAll() 方法用于选中指定元素后面的同级元素。
在下面的示例中，程序会选中 div 标签元素后面的所有同级元素。
<span>I'm previous sibling<span>
<div></div>
<span>I'm next sibling<span>
<span>I'm next sibling too<span>
<script>
$ ('div').nextAll().css('color','pink')
</script>同级元素方法
siblings() 方法
您可以使用 siblings() 方法选中指定元素的所有同级元素。
在下面的示例中，程序会选中 p 标签元素的所有同级元素。
<p>Hello</p>
<div>jQuery</div>
<div>Methods</div>
<script>
$ ('p'). siblings().css('color','pink')
</script>prev
prev() 方法
prev() 方法用于选中元素的前一个同级元素。
程序会选中 a 标签元素前面的第一个同级元素。
<span>Hello Coddy</span>
<div class="test"></div>
<script>
$ ('.test').prev().css('color','pink')
</script>prevAll 方法
prevAll() 方法
prevAll() 方法用于选中指定元素前面的同级元素。
在下面的示例中，程序会选中 div 标签元素前面的所有同级元素。
<span>I'm previous sibling</span>
<span>I'm previous sibling too</span>
<div></div>
<span>I'm next sibling</span>
<script>
$('div').prevAll().css('color','pink')
</script>恭喜
恭喜您 🎉
本节课教会了我们如何选择 DOM 元素。
在下一节中，我们将继续学习 DOM 操作。
常见问题解答
「使用 jQuery 选择元素」课时是免费的吗？
是的 — 「使用 jQuery 选择元素」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 1 节课。
「使用 jQuery 选择元素」这节课中我会学到什么？
使用 jQuery 选择元素 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 jQuery Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 1 节。
「使用 jQuery 选择元素」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 jQuery Academy 课中编写并运行代码吗？
能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。