jquery 定位
jQuery 定位方法
jQuery 提供了多种方法来定位和选择 DOM 元素。以下是一些常用的定位方法:
基本选择器
通过元素标签、类名或 ID 进行定位:
$('div') // 选择所有 <div> 元素
$('.className') // 选择所有 class 为 "className" 的元素
$('#idName') // 选择 ID 为 "idName" 的元素
层级选择器
通过父子或兄弟关系定位元素:
$('parent > child') // 选择 parent 的直接子元素 child
$('ancestor descendant') // 选择 ancestor 的所有后代元素 descendant
$('prev + next') // 选择紧跟在 prev 后面的 next 元素
$('prev ~ siblings') // 选择 prev 之后的所有兄弟元素 siblings
属性选择器
通过元素的属性进行定位:
$('[attribute]') // 选择带有 attribute 属性的元素
$('[attribute="value"]') // 选择 attribute 属性值为 "value" 的元素
$('[attribute^="value"]') // 选择 attribute 属性值以 "value" 开头的元素
$('[attribute$="value"]') // 选择 attribute 属性值以 "value" 结尾的元素
$('[attribute*="value"]') // 选择 attribute 属性值包含 "value" 的元素
过滤选择器
通过过滤条件定位元素:
$('li:first') // 选择第一个 <li> 元素
$('li:last') // 选择最后一个 <li> 元素
$('li:even') // 选择偶数位置的 <li> 元素
$('li:odd') // 选择奇数位置的 <li> 元素
$('li:eq(2)') // 选择索引为 2 的 <li> 元素
$('li:gt(2)') // 选择索引大于 2 的 <li> 元素
$('li:lt(2)') // 选择索引小于 2 的 <li> 元素
$('li:not(.class)') // 选择不包含指定 class 的 <li> 元素
表单选择器
专门用于表单元素的定位:
$(':input') // 选择所有 input、textarea、select 和 button 元素
$(':text') // 选择所有 type="text" 的 input 元素
$(':password') // 选择所有 type="password" 的 input 元素
$(':radio') // 选择所有 type="radio" 的 input 元素
$(':checkbox') // 选择所有 type="checkbox" 的 input 元素
$(':submit') // 选择所有 type="submit" 的 input 元素
$(':reset') // 选择所有 type="reset" 的 input 元素
$(':button') // 选择所有 type="button" 的 input 元素
$(':file') // 选择所有 type="file" 的 input 元素
$(':image') // 选择所有 type="image" 的 input 元素
$(':enabled') // 选择所有启用的表单元素
$(':disabled') // 选择所有禁用的表单元素
$(':checked') // 选择所有被选中的复选框或单选框
$(':selected') // 选择所有被选中的下拉选项
遍历方法
通过遍历 DOM 树定位元素:
$('#id').children() // 选择所有子元素
$('#id').find('selector') // 选择所有匹配的后代元素
$('#id').parent() // 选择父元素
$('#id').parents() // 选择所有祖先元素
$('#id').siblings() // 选择所有兄弟元素
$('#id').next() // 选择下一个兄弟元素
$('#id').prev() // 选择上一个兄弟元素
$('#id').closest('selector') // 选择最近的匹配祖先元素
链式操作
jQuery 支持链式操作,可以在一个语句中连续调用多个方法:
$('#id').find('div').addClass('className').css('color', 'red');
通过以上方法,可以灵活地定位和操作 DOM 元素。







