选择器

层次选择器(选择器的类型为任意合法的选择器)

  1. 后代选择器(子、孙...都会被选择)
    $"(选择器1 选择器2")
    选择器1为祖先元素,选择器2为后代元素,之间用空格隔开

  2. 选择子元素(只选儿子这一代)
    $("父元素 > 子元素")

  3. prev + next(所有跟在选择器1后面的标签)
    $("选择器1 + 选择器2")

  4. prev ~ siblings(跟在选择器1后面的第一个兄弟选择器2)
    $("选择器1~选择器2")

过滤选择器

  • 基本选择器
  1. 选择第一个元素【:first】
    $(div:first)

  2. 选择最后一个元素【:last】
    $(div:last)

  3. 不选某一个/种元素【:not】
    $(input:not(:checked))----选择未被选中的input

  4. 选择索引值为偶数的元素【:even】
    索引值从0开始
    $("li:even")

  5. 选择索引值为奇数的元素【:odd】
    $("li:odd")

  6. 选择一个给定索引值的元素【:eq(index)】
    $("li:eq(0)")-----第一行li标签

  7. 选择所有大于给定索引值的元素【:gt(index)】
    $("li:gt(0)")-----大于第一行的li标签

  8. 选择所有小于给定索引值的元素【:lt(index)】
    $("li:lt(5)")-----小于第五行的所有li标签

  9. 选择标题元素【:header】
    $(":header").css()----给所有标题标签设置样式

  10. 选择正在执行动画效果的元素【:animated】

过滤选择器支持多过滤,在后面继续:就行了

  • 内容选择器
  1. 选择包含给定文本的元素【:contains(text)】
    $("div:contains('abc')");

  2. 选择所有不包含子元素或者文本的空元素【:empty】
    $(tr:empty)

  3. 选择所有非空的元素【:parent】
    $("tr:parent")

  4. 选择含有·选择器所选择的元素·的元素【:has(选择器)】
    $("div:has(p)")-----选择带有p标签的div

  • 属性过滤器
  1. 选择包含给定属性的元素【[属性]】
    $("div[id]")------含有id属性的div

  2. 选择给定的属性是某个特定值的元素【[属性=xxx]】
    $("input[name='username']")

  3. 选择不含有指定属性,或者属性不等于特定值的元素【[属性!=xxx]】
    $("input[name!='username']")

  4. 选择给定的属性是以某些值开始的元素【[属性^=xxx]】
    $("input[name^=user]")----name属性以suer开头的元素

  5. 选择给定的属性以某些值结尾的元素【[属性$=xxx]】
    $("input[name$abc]")----name属性以abc结尾的元素

  • 表单过滤器
  1. 选择所有的单行文本框【:text】
    $(":text")-------只要type是text的

  2. password、radio、checkbox、submit、reset、button、file、hidden与text类似
    这些都是选择type为对应类型的元素

  • 表单对象属性选择
  1. 选择可用的元素 【:enable】
    $("div:enable")

  2. 选择不可用的元素【:disable】
    $("div:disable")

  3. 选择被选中的元素(单选、复选框不包括option)【:checked】
    $("input:chenked")

  4. 选择被选中的option元素
    $("input:option")

posted @ 2021-10-19 21:20  这个世界会好的  阅读(93)  评论(0编辑  收藏  举报