js进阶 10-7 简单的伪类选择器可以干什么

一、总结

一句话总结：伪类选择器是冒号。

1、学而不用，有什么用？

多用啊，在项目中多用

2、简单的伪类选择器可以干什么？

除某元素以外，某元素的一切索引相关（奇偶，开始最后，大于小于等于）

除某元素以外，某元素的第一个，最后一个，以及某元素所有和索引相关的操作

3、伪类选择器的关键性符号是什么？

冒号，以英文冒号“：”开头

4、如何选取某一个元素中的其他元素？

用后代选择器

$('ul :not(#one)').css('color','blue');

5、如何给选择器限定内容？

加上限定的标签即可

33             // $('li:first').css('color','red');

二、简单的伪类选择器可以干什么

1、相关知识点：

伪类选择器

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

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

  • 简单伪类选择器元素

    • ：not(selector)选择除了某个选择器之外的所有元素
    • ：first或first()选择某元素的第一个元素（非子元素）
    • ：last或last()选择某元素的最后一个元素（非子元素）
    • ：odd选择某元素的索引值为奇数的元素
    • ：even选择某元素的索引值为偶数的元素
    • ：eq(index)选择给定索引值的元素，索引值index是一个整数，从0开始
    • ：gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始
    • ：lt(index)选择所有小于索引值的元素，索引值index是一个整数，从0开始
    • ：header选择h1~h6的标题元素
    • ：focus选取当前具有焦点的元素
    • ：root选择页面的根元素
    • ：animated选择所有正在执行动画效果的元素

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>

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

             <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>:root    选择页面的根元素</li>

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

             </ul>

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

         </li>

     </div>

     <script>

         $(function(){

             //$('li:not(#one)').css('color','blue');

             // $('li:first').css('color','red');

             // $('li:last').css('color','red');

             //$('li:odd').css('color','red');

             //$('li:even').css('color','blue');

             $('li:eq(3)').css('color','red');

             $('li:lt(3)').css('color','blue');

             $('li:gt(3)').css('color','orange');

         })

     </script>

 </body>

 </html>

js进阶 10-7 简单的伪类选择器可以干什么的更多相关文章

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

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

  2. CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

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

    js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...

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

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

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

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

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

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

  7. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  8. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  9. css3 巧用结构性伪类选择器

    最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式: <style type="text/css" ...

随机推荐

  1. java 并发原子性与易变性 来自thinking in java4 21.3.3

    java 并发原子性与易变性  具体介绍请參阅thinking in java4 21.3.3 thinking in java 4免费下载:http://download.csdn.net/deta ...

  2. graphicview和widgets没本质区别。它只是更轻量级，更灵活，性能更高的widgets

    graphicview和widgets没本质区别.它只是更轻量级,更灵活,性能更高的widgets.核心就是把widgets变成了更轻量级的graphicitem,把QWidget的各种事件转换成了g ...

  3. setting.system-全局属性的设定

    SystemProperties跟Settings.System 1 使用 SystemProperties.get如果属性名称以“ro.”开头,那么这个属性被视为只读属性.一旦设置,属性值不能改变. ...

  4. elasticsearch节点间通信的基础transport

    在前一篇中我们分析了cluster的一些元素.接下来的章节会对cluster的运作机制做详细分析.本节先分析一些transport,它是cluster间通信的基础.它有两种实现,一种是基于netty实 ...

  5. Vue自定义组件

  6. JAVA 水题

    纯粹是让我来掌握熟练度的. 1.金蝉素数 某古寺的一块石碑上依稀刻有一些神秘的自然数. 专家研究发现:这些数是由1,3,5,7,9 这5 个奇数字排列组成的5 位素数,且同时去掉它的最高位与最低位数字 ...

  7. Java核心技术 卷Ⅰ 基础知识（7）

    第13章 集合 集合接口 具体的集合 在表中,除了Map结尾的类之外,其他类都实现了Collection接口,而以Map结尾的类实现了Map接口. 链表 数组列表 散列集 树集 双端队列 优先级队列 ...

  8. MySql开发之函数

    1,在mySql常见的文本函数中常见的文本函数例如以下表所看到的: 2,数字函数例如以下: 3,日期和时间函数: 4,格式化日期和时间 使用的函数例如以下DATE_FORMAT()和TIME_FORM ...

  9. cmake配置c++可调用的文件路径参数

    一.目的 在程序中使用一个路径配置,因为在svn服务器的测试数据,测试数据成为了本地路径,在程序中使用了绝对路径来处理文件的输入,这个令人头疼啊. 每次下完代码,我得挨个地方去找,谁在用本地路径,有点 ...

  10. springboot下静态资源的处理（转）

    在SpringBoot中有默认的静态资源文件相关配置,需要通过如下源码跟踪: WebMvcAutoConfiguration-->configureResourceChain(method)-- ...