jQuery选择器

LetLY
159 阅读1分钟

jQuery语法

$(selector).action()
$('p').html('内容')
p.innerHTML = '内容'

jQuery选择器

在原生JavaScript中，如果想要选取元素，只能使用getElementById()、getElementsByName、getElementsByTagName()等几种有限的方法来获取，
让人有一种力不从心、抓襟见肘的感觉。
但是jQuery为我们提供了大量的选择器，极大地方便了我们快速选择元素来进行各种操作。

  • 基本选择器

      （1）元素选择器；$('p').action()
  （2）id选择器；    $('#id').action()
  （3）class选择器；  $('.class').action()
  （4）群组选择器； $('#id,.class,p').action()
  （5）*选择器  $('*').action()

  • 层次选择器

      选择器       说明
  $("M N")      后代选择器，选择M元素内部后代N元素（所有N元素）
  $("M>N")     子代选择器，选择M元素内部子代N元素（所有第1级N元素，若N为*表示M元素内部所有元素）
  $("M~N")     兄弟选择器，选择M元素后所有的同级N元素
  $("M＋N")    相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素,若下一个元素相同也会被选中）

  • 属性选择器

      选择器                                         说明
  $("selector[attr]")                        选择包含给定属性的元素
  $("selector[attr='value']")              选择给定的属性是某个特定值的元素
  $("selector[attr != 'value']")            选择所有含有指定的属性，但属性不等于特定值的元素
  $("selector[attr *= 'value']")          选择给定的属性是以包含某些值的元素
  $("selector[attr ^= 'value']")          选择给定的属性是以某些值开始的元素（比较少用）
  $("selector[attr $= 'value']")           选择给定的属性是以某些值结尾的元素（比较少用）
  $("selector[selector1][selector2]…[selectorN]") 复合属性选择器，需要同时满足多个条件时使用

  • 伪类选择器

    • 简单伪类

      QQ图片20220309130707.png

    • 子元素伪类选择器

      QQ图片20220309130816.png

    • 可见伪类选择器

      QQ图片20220309130859.png

    • 表单属性伪类

      QQ图片20220309130921.png

  • 查找（筛选）方法

    • 查找元素集合中第一个和最后一个元素 first() last()
    • 查找祖先元素 parent()、parents()、parentsUntil()
    • 查找后代元素 children()、find()
    • 向前查找兄弟元素 prev()、prevAll()、prevUntil()
    • 向后查找兄弟元素 next()、nextAll()、nextUntil()
    • 查找所有兄弟元素 siblings()
    • 选择元素集合中指定下标的元素 eq(n) 注:下标从0开始
    • 查找元素在父元素里面索引位置 index()
avatar
文章
阅读
粉丝