zoukankan      html  css  js  c++  java
  • js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全

    一、总结

    一句话总结:和css选择器很像

    二、JQuery选择器

    原生javaScript中,只能使用getELementById()、getElementByName、getElementByTagName()等几种有限的方法来获取元素,JQuery为我们提供了大量的选择器,极大地方便了我们快速选择元素来进行各种操作。

    JQuery的选择器完全是继承了css选择器的风格,大家在学习JQuery选择器的时候,一定要先联系CSS选择器进行对比记忆。

    虽然选择器很多,但是并不要求大家一下子全记住。可以先记住常用的几种,其他的等到需要的时候查阅下资料。因为这些选择器,我们是必须通过真正的开发实践才能够真正的熟练掌握

    1. 基本选择器
    • id选择器:$("#id名")
    • 元素选择器:$("元素名")
    • 类选择器:$(".类名")
    • 群组选择器:$("选择器1,选择器2,.......,选择器n")
    • *选择器:$("*")选择所有元素
    2.层级选择器

    层次选择器,就是能过元素之间的层次关系来获取元素.常见的层次关系包括:父子、后代、兄弟、相邻。

    • $("M N")后代选择器,选择M元素内部后代N元素
    • $("M>N")子代选择器,选择M元素内部子代N元素
    • $("M~N")兄弟选择器,选择M元素后所有的同级N元素
    • $("M+N")相邻选择器,选择M元素相邻的下一个元素
    3. 属性选择器

    HTML元素通常包含很多属性,JQuery的属性选择器就是把各种属性作为选择器。

    • $("selector[attr]")选择包含给定属性的元素
    • $("selector[attr='value']")选择给定的属性是某个特定值的元素
    • $("selector[attr!='value']")选择所有含有指定的属性,但属性不等于特定值的元素
    • $("selector[attr*='value']")选择给定的属性是以包含某些值的元素
    • $("selector[attr^='value']")选择给定的属性是以某些值开始的元素(比较少用)
    4. 伪类选择器

    伪类选择器也称作过滤选择器。

    JQuery伪类选择器都是以英文冒号“:”开头,和css中的伪类选择器用法相似,使得我们可以快速地选择我们想要获取的元素。

    • 简单伪类选择器元素
      • :not(selector)选择除了某个选择器之外的所有元素
      • :first或first()选择某元素的第一个元素(非子元素)
      • :last或last()选择某元素的最后一个元素(非子元素)
      • :odd选择某元素的索引值为奇数的元素
      • :even选择某元素的索引值为偶数的元素
      • :eq(index)选择给定索引值的元素,索引值index是一个整数,从0开始
      • :lt(index)选择所有小于索引值的元素,索引值index是一个整数,从0开始
      • :header选择h1~h6的标题元素:focus选取当前具有焦点的元素
      • :root选择页面的根元素
      • :animated选择所有正在执行动画效果的元素
    • 子元素伪类选择器
      • :first-child选择父元素的第1个子元素
      • :last-child选择父元素的最后1个子元素
      • :nth-child(n)选择父元素下的第n个元素或奇偶元素,n的值为"整数|odd|vevn
      • :only-child选择父元素中唯一的子元素(该父元素只有一个子元素)
      • :first-of-type选择同元素类型的第1个同级兄弟元素
      • :last-of-type选择同元素类型的最后1个同级兄弟元素
      • :nth-of-type选择同元素类型的第n个同级兄弟元素,n的值可以是"整数|odd|even"
      • :onlt-of-type匹配父元素中特定类型的唯一子元素(但是父元素可以有多个子元素)
    • 可见性伪类选择器
      • :hidden选取所有不可见元素

        “:hidden”选择器选择的不仅包括样式为display:none所有元素,而且还包括属性type=”hidden”和样式为visibility:hidden的所有元素。

      • :visible选取所有可见元素
    • 内容伪类选择器

      内容伪类选择器,就是根据元素中的文字内容或所包含的子元素特征来选择元素,其文字内容可以模糊或绝对匹配进行元素定位。

      • :contains(text)选择包含给定文本内容的元素
      • :has(selector)选择含有选择器所匹配元素的元素
      • :empty选择所有不包含子元素或者不包含文本的元素
      • :parent选择含有子元素或者文本的元素(跟:empty相反)
    • 表单伪类选择器
      • : Input选择所有input元素
      • :button选择所有type="button"的input元素
      • :submit选择所有type="submit"的input元素
      • :reset选择所有type="reset"的input元素
      • :text选择所有单选文本框
      • :textarea选择所有多行文本框
      • :password选择所有密码文本框
      • :radio选择所有单选按钮
      • :checkbox选择所有复选框
      • :image选择所有图像域
      • :hidden选择所有隐藏域
      • :file选择所有文件域
    • 表单属性伪类选择器
      • :enabled选择所有可用input元素
      • :disabled所有禁用的input元素
      • :selected选择所有被选中的option元素
      • :checked选择所被选中的表单元素,一般用于radio和checkbox
     

    js 进阶 10 js选择器大全

     
  • 相关阅读:
    ASP.NET编程的十大技巧
    C#学习心得(转)
    POJ 1177 Picture (线段树)
    POJ 3067 Japan (树状数组)
    POJ 2828 Buy Tickets (线段树)
    POJ 1195 Mobile phones (二维树状数组)
    HDU 4235 Flowers (线段树)
    POJ 2886 Who Gets the Most Candies? (线段树)
    POJ 2418 Cows (树状数组)
    HDU 4339 Query (线段树)
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9194365.html
Copyright © 2011-2022 走看看