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. [Javascript] Different ways to create an new array/object based on existing array/object

    Array: 1. slice() const newAry = ary.slice() 2. concat const newAry = [].concat(ary) 3. spread oprea ...

  2. 《机器学习实战》基于朴素贝叶斯分类算法构建文本分类器的Python实现

    ============================================================================================ <机器学 ...

  3. teamviewer连接不上的原因及解决方法有哪些

    teamviewer连接不上的原因及解决方法有哪些 一.总结 一句话总结:这里说的就是版本问题,高版本可以连接低版本,低版本无法连接高版本. 1.TeamViewer官方检测使用环境是否为商用的标准是 ...

  4. 洛谷 P1599 结算日

    洛谷 P1599 结算日 题目描述 “不放债不借债”,贝西多么希望自己可以遵循这个忠告.她已经和她的N(1 <= N <= 100,000)个朋友有了债务关系,或者借债了,或者放债了.她的 ...

  5. zeromq and jzmq

    install c test install jzmq java test Storm UI Cluster Summary Version Nimbus uptime Supervisors Use ...

  6. 从大整数乘法的实现到 Karatsuba 快速算法

    Karatsuba 快速乘积算法是具有独特合并过程(combine/merge)的分治算法(Karatsuba 是俄罗斯人).此算法主要是对两个整数进行相乘,并不适用于低位数(如 int 的 32 位 ...

  7. tomcat的classloader机制

    本系列博客打算分析一下tomcat7.x的源码,其中可能会穿插一些java基础知识的介绍  读tomcat的源码的时候,我建议和官方的User Guide一起阅读,明白tomcat做某件事情的目的之后 ...

  8. 判断Bigdecimal类型是否等于0的方法

    1.我之前用来判断Bigdecimal类型是否等于0的方法 b.equals(BigDecimal.ZERO); 用equals方法和BigDecimal.ZERO进行比较. 2.上面方法存在的问题 ...

  9. 【47.76%】【Round #380B】Spotlights

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  10. [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)

    Here is the defulat tab header template: <ng-template #defaultTabHeader let-tabs="tabsX" ...