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. android:一个Open键引发的问题！！

    1.问题简单介绍 首先描写叙述一下问题.当我们安装完APP的时候,界面会显示两个button,一个完毕键,一个Open键,点击Open键之后.进入应用.此时.我们点击HOME键.程序将会后台.然后再点 ...

  2. 强连通分量分解 Kosaraju算法 (poj 2186 Popular Cows)

    poj 2186 Popular Cows 题意: 有N头牛, 给出M对关系, 如(1,2)代表1欢迎2, 关系是单向的且能够传递, 即1欢迎2不代表2欢迎1, 可是假设2也欢迎3那么1也欢迎3. 求 ...

  3. 目标跟踪系列十一：Exploiting the Circulant Structure of Tracking-by-detection with Kernels代码思路

    Tracking学习系列原创,转载标明出处: http://blog.csdn.net/ikerpeng/article/details/40144497 这篇文章非常赞啊!非常有必要将其好好的学习, ...

  4. Dell shareplex 与HVR数据复制软件

    今天大体了解了一下Dell shareplex 数据复制软件,网址为:http://software.dell.com/products/shareplex/ 从该网址能够看到. shareplex作 ...

  5. CentOS搭建xfce桌面+VNC教程

    CentOS搭建xfce桌面+VNC教程 Linux的安全与性能向来为开发者所称道,你可以轻松地在搜索引擎中找到各种Linux优越性的说辞,其中不乏Linux的激进者.特别是当你步入VPS领域,更多地 ...

  6. 含有打印、统计DataGridView(2)

    /// <summary>        /// 导出数据到Excel                /// </summary>        public void loa ...

  7. Python 极简教程（五）输入输出

    输入函数,用于接收键盘输入.主要用于在学习和练习过程中,增加练习的乐趣.让我们的程序相对完整和具备简单的交互能力. 输出函数,将代码运行结果打印在控制台上,同样也能让我们观察程序运行的结果.也是为了增 ...

  8. NYOJ448_寻找最大数【贪心】

    寻找最大数 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 请在整数 n 中删除m个数字, 使得余下的数字按原次序组成的新数最大, 比方当n=920813467185 ...

  9. POJ 1325 Machine Schedule(zoj 1364) 最小覆盖数

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=364 http://poj.org/problem?id=1325 题目大意: ...

  10. sql for xml query sample

    sample 1: declare @x xml select @x='<ArrayOfScheduledTime> <ScheduledTime> <Recurrenc ...