js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）

一、总结

一句话总结：自己不用，永远不是自己的。

0、学而不用，却是为何？

自己不用，永远不是自己的，有需求的时候要想到它，然后操作和练习

1、伪类选择器有哪几类？

6类，简单伪类选择器元素，子元素伪类选择器，可见性伪类选择器，内容伪类选择器，表单伪类选择器，表单属性伪类选择器

2、伪类选择器有多强大？

你想到的，没有它做不到的

3、:first（简单伪类选择器）和:first-child（子元素伪类选择器）的区别是什么？

和:first的区别：:first-child可以选择多个

4、如何熟练掌握伪类选择器？

练习的时候创造机会多用，有用的意识，用着用着就熟了

5、如何掌握为了选择器（长久）？

记住框架，

记住有几大类，记住每大类的功能，由大过渡到小，

二、伪类选择器有哪几类

1、相关知识点

伪类选择器

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

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

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script src="jquery-3.1.1.min.js"></script>

 </head>

 <body>

     <div>

         <div><h4>伪类选择器</h4></div>

             <p>伪类选择器都是以英文冒号“:”开头。jQuery参考css选择器的形式，为我们提供了大量的伪类选择器，使得我们可以快速地选择我们想要获取的元素。</p>

             <hr>

             <h5>简单伪类选择器</h5>

             <ul>

                 <li id="one">:not(selector)    选择除了某个选择器之外的所有元素</li>

                 <li>:first或first()    选择某元素的第一个元素（非子元素）</li>

                 <li>:last或last()    选择某元素的最后一个元素（非子元素）</li>

                 <li>:odd    选择某元素的索引值为奇数的元素</li>

                 <li>:even    选择某元素的索引值为偶数的元素</li>

                 <li>:eq(index)    选择给定索引值的元素，索引值index是一个整数，从0开始</li>

                 <li>:lt(index)    选择所有小于索引值的元素，索引值index是一个整数，从0开始</li>

                 <li>:gt(index)    选择所有大于索引值的元素，索引值index是一个整数，从0开始</li>

                 <li>:header    选择h1~h6的标题元素</li>

                 <li>:focus    选取当前具有焦点的元素</li>

                 <li>:root    选择页面的根元素</li>

                 <li>:animated    选择所有正在执行动画效果的元素</li>

             </ul>

             <h5>子元素伪类选择器</h5>

             <ul>

                 <li>:first-child    选择父元素的第1个子元素</li>

                 <li>:last-child    选择父元素的最后1个子元素</li>

                 <li>:nth-child(n)    选择父元素下的第n个元素或奇偶元素，n的值为“整数|odd|even</li>

                 <li>:only-child    选择父元素中唯一的子元素（该父元素只有一个子元素)</li>

                 <li>:first-of-type    选择同元素类型的第1个同级兄弟元素</li>

                 <li>:last-of-type    选择同元素类型的最后1个同级兄弟元素</li>

                 <li>:nth-of-type    选择同元素类型的第n个同级兄弟元素，n的值可以是“整数|odd|even”</li>

                 <li>:only-of-type    匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）</li>

             </ul>

             <input type="text" value="测试">

         </li>

     </div>

     <script>

         $(function(){

             // $(':header').css('color','red')

             // $('input').focus()

             // $(':focus').css('background-color','#ccc')

             // $(':root').css('background-color','#ccc')

             //和:first的区别：:first-child可以选择多个

             //$("li:first").css("background-color", "red");

             // $("li:first-child").css("background-color", "red");

             // $("ul:first li:first-child").css("background-color", "red");

              // $("li:nth-child(odd)").css("background-color", "red");

             $(":only-child").css("background-color", "red");

         })

     </script>

 </body>

 </html>

js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）的更多相关文章

  1. js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

    js进阶 10-10  可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是  四个  包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...

  2. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  3. js进阶 10-4 jquery中基础选择器有哪些

    js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...

  4. js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素

    js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...

  5. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

  6. js进阶 10-11/12 表单伪类选择器的作用

    js进阶 10-11  表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...

  7. CSS3中的伪类选择器详解

      类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...

  8. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  9. js进阶 10-9 -of-type型子元素伪类选择器

    js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...

随机推荐

  1. 终于研究出如何设置新版paypal付款时汇率损失方的问题了

    http://bbs.55haitao.com/thread-1686005-1-1.html 终于研究出如何设置新版paypal付款时汇率损失方的问题了 登录paypal后,选"设置&qu ...

  2. 关于laravel框架分页报错的问题

    因为laravel框架有自己的分页封装,所以与其他框架相比laravel框架的分页的实现要方便的多 只要分别在php脚本与视图中使用 $data=DB::table('index_pic')-> ...

  3. 洛谷——U10223 Cx大帝远征埃及

    https://www.luogu.org/problem/show?pid=U10223#sub 题目背景 众所周知,Cx是一个宇宙大犇.Cx能文善武,一直在为大一统的实现而努力奋斗着.Cx将调用他 ...

  4. C# exe文件 添加到windows 服务

    我们运行.net的发布工具installutil.exe来添加到windows服务里面(该工具默认在C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727目录下) ...

  5. Day1：循环语句（While，For）

    一.while循环 while 条件: 条件为真执行的语句 esle: 条件为假执行的语句 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author: ...

  6. P2P借款的几种情况

    借款,至少出现2种人,借款人和出借人.根据人的性质,企业和个人,分成4种情况. 企业-个人,企业-企业,个人-企业,个人-个人. P2P平台可能出现几种情况: 个人-个人 2种情况:   a. 借款人 ...

  7. OC学习篇之---Foundation框架中的其他类(NSNumber,NSDate,NSExcetion)

    1.NSNumber 这个类主要是用来封装基本类型的,说到这里,就不得不说一下了: OC中的集合是不允许存入基本类型的,所以NSNumber类就诞生了,需要将基本类型封装一下,然后存进去,这个类似于J ...

  8. shiro 静态页面资源不显示 解决方案（转）

    最近做一个ssm+shiro的框架整和 不加shiro之前ssm中css和图片显示正常.加上以后无法显示. 解决方案: shiro有静态资源过滤. 配置资源匿名访问即可 <property na ...

  9. @EnableAsync和@Async开始异步任务支持

    Spring通过任务执行器(TaskExecutor)来实现多线程和并发编程.使用ThreadPoolTaskExecutor可实现一个基于线程池的TaskExecutor.在开发中实现异步任务,我们 ...

  10. 在Qtcreator中，KDE的Hello World（安装kdelibs5-dev）

    我刚开始为KDE编程,我面临的问题是我不知道KDE项目的pro文件是什么,我有一个想法. 我还尝试了 file: 库 += -lkdeui 我还是找不到KApplication的问题 代码 main. ...