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. Elasticsearch入门系列~通过Java一系列操作Elasticsearch

    Elasticsearch索引的创建.数据的增删该查操作 上一章节已经在Linux系统上安装Elasticsearch并且可以外网访问,这节主要通过Java代码操作Elasticsearch 1.创建 ...

  2. iOS多语言(国际化)开发(尾随系统 + APP内手动设置)

    一:尾随系统切换语言 1>创建好项目project后, 新建一个多语言文件: 2>加入要设置的语言类型: 3>加入成功 细心的朋友可能会发如今English后面写的是3 Files ...

  3. ORACLE10g R2【RAC+ASM→单实例FS】

    ORACLE10g R2[RAC+ASM→单实例FS] 10g R2 RAC+ASMà单实例FS的DG,建议禁用OMF. 本演示案例所用环境:   primary standby OS Hostnam ...

  4. ios 推断是qq,银行卡,手机号等等公用的方法。

    #import <Foundation/Foundation.h> typedef enum  {     IdentifierTypeKnown = 0,     IdentifierT ...

  5. zookeeper分布式协调服务的使用一

    Zookeeper是一个高性能,分布式的应用协调服务. 提供服务: 1.集群成员的管理(Group Membership) 2.分布式锁(Locking) 3.选主(Leader Election) ...

  6. Docker使用Dockerfile创建Centos(tomcat+jdk)镜像

    原文链接:https://blog.csdn.net/qq_37936542/article/details/80824389 Docker构建镜像的方法主要有两种:    (1)使用docker c ...

  7. 【Codeforces Round #443 (Div. 2) C】Short Program

    [链接] 我是链接,点我呀:) [题意] 给你一个n行的只和位运算有关的程序. 让你写一个不超过5行的等价程序. 使得对于每个输入,它们的输出都是一样的. [题解] 先假设x=1023,y=0; 即每 ...

  8. App.js和App.css(用于移动应用的js和css)

    App.js和App.css(用于移动应用的js和css) 一.App.js和App.css(用于移动应用的js和css) App.js 是一个轻量级的 JavaScript UI 库,用来创建移动的 ...

  9. simple-word-Highlighter 支持网址正则表达式匹配

  10. [慕课笔记] node+mongodb建站攻略

    如何利用node+mongodb来快速搭建一个电影网站? 一:后端部分 整个网站的后端是由node.js来驱动的,所以在后端需要安装node.js,以及在这个基础之上的框架express,它能够帮助我 ...