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选择器大全