1. 基本选择器:
- 元素选择器:
$("p") // 选择所有 <p> 元素
- ID 选择器:
$("#myId") // 选择 ID 为 "myId" 的元素
- 类选择器:
$(".myClass") // 选择类名为 "myClass" 的元素
2. 层次选择器:
- 后代选择器:
$("div p") // 选择所有 <p> 元素,但只在 <div> 元素内
- 子元素选择器:
$("ul > li") // 选择所有 <li> 元素,但只在 <ul> 元素的直接子元素中
- 相邻兄弟选择器:
$("h2 + p") // 选择紧接在 <h2> 元素后的所有 <p> 元素
3. 过滤选择器:
- :first 选择器:
$("p:first") // 选择文档中第一个 <p> 元素
- :last 选择器:
$("p:last") // 选择文档中最后一个 <p> 元素
- :even/:odd 选择器:
$("tr:even") // 选择表格中偶数行
4. 属性选择器:
- [attribute] 选择器:
$("[href]") // 选择带有 href 属性的所有元素
- [attribute=value] 选择器:
$("[name='username']") // 选择 name 属性值为 'username' 的所有元素
- [attribute^=value] 选择器:
$("[class^='btn']") // 选择 class 属性值以 'btn' 开头的所有元素
5. 表单选择器:
- :input 选择器:
$(":input") // 选择所有表单元素(input、textarea、select 等)
- :checked/:selected/:disabled 选择器:
$(":checked") // 选择所有被选中的复选框或单选按钮
这只是 jQuery 选择器的一小部分。选择器的组合和使用方法非常灵活,你可以根据实际需要选择合适的选择器来定位和操作页面元素。深入了解 jQuery 选择器将有助于更有效地使用这个强大的库。
转载请注明出处:http://www.zyzy.cn/article/detail/4607/jQuery