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. ListView Item 点击展开隐藏问题

    public class ListAdapter extends BaseAdapter {     private Context mContext;     private View mLastV ...

  2. 【习题 6-5 UVA-1600】Patrol Robot

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 设dis[x][y][z]表示到(x,y)连续走了z个墙的最短路 bfs一下就ok [代码] /* 1.Shoud it use l ...

  3. CODEVS——T 1993 草地排水 USACO

    http://codevs.cn/problem/1993/  时间限制: 2 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 De ...

  4. WCF REST （二）

    今天主要写下  POST等其他方式 发送请求 以及 流方式 文件的上传与下载 一.Post 提交数据 先来想下 POST和Get 的不同   Get 方式 我们直接通过 url  来传递参数   先来 ...

  5. 关于jsonp跨域的问题以及解决方法(跨域、同源与非同源)

    什么是跨域? 想要了解跨域,首先需要了解下浏览器的同源机制: JSONP和AJAX相同,都是客户端向服务器端发送请求:给服务器端传递数据 或者 从服务器端获取数据 的方式 JSONP属于非同源策略(跨 ...

  6. pdf.js安装步骤和使用

    从github下载的源码不能直接使用,最好使用命令行下载安装 1.下载源码 git clone git://github.com/mozilla/pdf.js.git cd pdf.js 2.安装no ...

  7. 如何把传统写法改成框架形式 es6

    每天思考的问题: 1.什么是组件 2.什么是插件 3.如何把传统写法改成框架形式 4.前端为什么要使用框架,使用框架的好处是什么? Image.png http://www.zhihu.com/que ...

  8. 关于LWIP断开网线后重连问题（热插拔问题）

    近期在弄STM32+LWIP协议.在网络拔掉网线情况下.无法又一次连接. 网上找了好多方法都没有实现,着实郁闷! 后来无意间看到了临时解决这一问题的方法.尽管不是那么完美,但最算能解决这个问题.分享给 ...

  9. 8.1 Android灯光系统_总体框架

    1.框架 APP(java语言实现) ------------------------------- JNI(c++语言实现)     向上提供Java执行c函数的接口  向下访问HAL ------ ...

  10. VIM使用说明

    [vim 命令-移动光标]:h 的鍵位于左邊,每次按下就會向左移動.l 的鍵位于右邊,每次按下就會向右移動.j 鍵看起來很象一支尖端方向朝下的箭頭.k朝上移动. [vim 命令-启动和退出]:1. 請 ...