当前位置:首页 > jquery

jquery 定位

2026-01-15 16:36:00jquery

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 支持链式操作,可以在一个语句中连续调用多个方法:

jquery 定位

$('#id').find('div').addClass('className').css('color', 'red');

通过以上方法,可以灵活地定位和操作 DOM 元素。

标签: jquery
分享给朋友:

相关文章

jquery中

jquery中

jQuery 基础概念 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。其核心特点是“写得更少,做得更多”(Write L…

jquery 添加

jquery 添加

jQuery 添加元素的方法 动态添加 HTML 内容 使用 append()、prepend()、after() 或 before() 方法可以在 DOM 中插入新元素。 // 在元素内部末尾…

jquery数组

jquery数组

jQuery 数组操作 jQuery 提供了多种方法来操作数组或类数组对象(如 jQuery 对象集合)。以下是常见的数组操作方法: 遍历数组 使用 $.each() 方法可以遍历数组或对象: v…

jquery 加载

jquery 加载

jQuery 加载方法 使用jQuery需要先将其库文件加载到网页中。以下是几种常见的加载方式: 通过CDN加载 推荐使用官方或公共CDN(内容分发网络)加载jQuery,速度快且可能被浏览器缓存:…

jquery隐藏

jquery隐藏

jQuery 隐藏元素的方法 使用 jQuery 隐藏元素可以通过多种方式实现,以下是几种常见的方法: hide() 方法hide() 是最简单的隐藏元素方法,它会将元素的 display 属性设置…

jquery菜单

jquery菜单

以下是关于使用jQuery创建交互式菜单的几种常见方法及实现示例: 基础下拉菜单实现 通过jQuery的slideToggle和toggleClass实现简单下拉效果: $('.menu-item…