jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画效果和Ajax交互等操作,jQuery的选择器是其最强大的功能之一,它允许我们轻松地选取HTML元素并对它们进行操作,本文将详细介绍jQuery选择器的使用方法。
1、基本选择器
基本选择器是jQuery中最简单的选择器,它们可以直接选取HTML元素,以下是一些常用的基本选择器:
- $('element')
:选取一个元素。$('div')
将选取页面上所有的<div>
元素。
- $('#id')
:选取具有指定ID的元素。$('#myId')
将选取ID为myId
的元素。
- $('.class')
:选取具有指定类名的元素。$('.myClass')
将选取所有具有类名为myClass
的元素。
- $('*')
:选取页面上的所有元素,这个选择器很少使用,因为它会返回大量不必要的元素,影响性能。
2、层次选择器
层次选择器允许我们根据元素的嵌套关系来选取元素,以下是一些常用的层次选择器:
- ancestor descendant
:选取某个元素的后代元素。$('div span')
将选取所有<div>
元素的后代<span>
元素。
- parent > child
:选取某个元素的直接子元素。$('ul > li')
将选取所有<ul>
元素的直接子元素<li>
。
- prev + next
:选取紧邻的前一个或后一个兄弟元素。$('h1 + p')
将选取所有紧跟在<h1>
元素后面的<p>
元素。
- prev ~ siblings
:选取所有跟随在紧邻的前一个兄弟元素之后的元素。$('h1 ~ p')
将选取所有跟随在第一个<h1>
元素之后的<p>
元素。
3、过滤选择器
过滤选择器允许我们根据某些条件来筛选元素,以下是一些常用的过滤选择器:
- :first
:选取第一个匹配的元素。$('p:first')
将选取页面上第一个<p>
元素。
- :last
:选取最后一个匹配的元素。$('p:last')
将选取页面上最后一个<p>
元素。
- :not(selector)
:选取不匹配给定选择器的元素。$('div:not(.myClass)')
将选取所有不具有类名为myClass
的<div>
元素。
- :even
和 :odd
:选取索引为偶数或奇数的元素。$('tr:even')
将选取所有表格行中的偶数行。
- :eq(index)
:选取索引为给定值的元素。$('li:eq(2)')
将选取列表中索引为2的<li>
元素。
- :gt(index)
和 :lt(index)
:选取索引大于或小于给定值的元素。$('p:gt(2)')
将选取所有索引大于2的段落元素。
- :header
, :footer
, :animated
, :contains()
, :empty
, :has()
, :hidden
, :visible
, :parent
, :text
, :radio
, :checkbox
, :password
, :submit
, :image
, :button
, :file
, :reset
, :target
, :disabled
, :enabled
, :checked
, :selected
, :default
, :focus
, :hover
, :visited
, :active
, :link
, :focusin
, :focusout
, :blur
, :focus
, :deactivate
, :activate
, :before
, :after
, :each
, :first-child
, :last-child
, :nth-child(n)
, :nth-last-child(n)
, :only-child
, :first-of-type
, :last-of-type
, :nth-of-type(n)
, :nth-last-of-type(n)
, :only-of-type
, :empty
, :has()
, :matches()
, :not()
, :filter()
, 和 :is()
:这些是jQuery 1.9引入的新过滤选择器,它们提供了更多的筛选条件和更灵活的选择方式。
4、内容选择器
内容选择器允许我们根据元素的内部内容来选取元素,以下是一些常用的内容选择器:
- ':contains(text)'
:选取包含给定文本的元素。$('td:contains("John")')
将选取所有包含文本“John”的表格单元格。
- ':empty'
:选取没有任何内容的元素。$('p:empty')
将选取所有空的段落元素。
- ':has(selector)'
:选取包含特定子元素的元素。$('ul:has(li)')
将选取所有包含列表项的无序列表元素。
5、表单选择器
表单选择器允许我们根据表单元素的类型来选取元素,以下是一些常用的表单选择器:
- ':input'
:选取所有的表单输入元素,包括文本框、密码框、单选按钮、复选框、下拉列表等,`$('form :input')