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. poi完美word转html(表格、图片、样式)

    直入正题,需求为页面预览word文档,用的是poi3.8,以下代码支持表格.图片,不支持分页,只支持doc,不支持docx: /** * */ import java.io.BufferedWrite ...

  2. 【Codeforces Round #450 (Div. 2) B】Position in Fraction

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找循环节就好. ->其实可以不用找出来整个循环节. 有找到c就直接输出. 找到了循环节还没找到的话,直接输出无解. [代码] ...

  3. 【iOS开发系列】颜色渐变

    记录: //Transparent Gradient Layer - (void) insertTransparentGradient { UIColor *colorOne = [UIColor c ...

  4. amazeui学习笔记--css（常用组件14）--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  5. __INLINE

  6. NVL与NVL2

      一.NVL函数是一个空值转换函数   NVL(表达式1,表达式2)   如果表达式1为空值,NVL返回值为表达式2的值,否则返回表达式1的值. 该函数的目的是把一个空值(null)转换成一个实际的 ...

  7. ITFriend网站内测公测感悟

    4月份做出网站Demo,就开始让用户使用了. 最初的黄色版界面,被吐槽得比较厉害. 关于界面,每个人都有自己的看法,只是喜欢和不喜欢的人比例不一样. 后来,花3400元请了个设计师,设计了一套界面,整 ...

  8. 移动端 h5 开发相关内容总结——JavaScript 篇

    1.改变页面标题的内容 有时候我们开发 h5页面的时候须要动态的去更新title 的名字,这个时候使用 document.title='改动后的名字'; 就行解决我们的问题. 或者使用 //当前fir ...

  9. storm编程指南

    目录 storm编程指南 (一)创建spout (二)创建split-bolt (三)创建wordcount-bolt (四)创建report-bolt (五)创建topo storm编程指南 @(博 ...

  10. 12、USB设备驱动程序

    linux-3.4.2\driver\hid\usbhid\usbmouse.c 内核只带USB驱动程序 (hub和usb是两个不同的设备,hub在内核上电的过程中在usb_hub_init函数中调用 ...