<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>基本筛选器</h2>

    <h3>:first/:last/:even/:odd</h3>

    <div class="left">

        <div class="div">

            <p>div:first</p>

            <p>:even</p>

        </div>

        <div class="div">

            <p>:odd</p>

        </div>

        <div class="div">

            <p>:even</p>

        </div>

        <div class="div">

            <p>:odd</p>

        </div>

        <div class="div">

            <p>:even</p>

        </div>

        <div class="div">

            <p>div:last</p>

            <p>:odd</p>

        </div>

    </div>

    <script type="text/javascript">

    //找到第一个div

    $(".div:first").css("color", "#CD00CD");

    </script>

    <script type="text/javascript">

    //找到最后一个div

    $(".div:last").css("color", "#CD00CD");

    </script>

    <script type="text/javascript">

    //:even 选择所引值为偶数的元素，从 0 开始计数

    $(".div:even").css("border", "3px groove red");

    </script>

    <script type="text/javascript">

    //:odd 选择所引值为奇数的元素，从 0 开始计数

    $(".div:odd").css("border", "3px groove blue");

    </script>

    <h3>:eq/:gt/:lt</h3>

    <div class="left">

        <div class="aaron">

            <p>:lt(3)</p>

        </div>

        <div class="aaron">

            <p>:lt(3)</p>

        </div>

        <div class="aaron">

            <p>:eq(2)</p>

        </div>

        <div class="aaron">

        </div>

        <div class="aaron">

            <p>:gt(3)</p>

        </div>

        <div class="aaron">

            <p>:gt(3)</p>

        </div>

    </div>

    <script type="text/javascript">

    //:eq

    //选择单个

    $(".aaron:eq(2)").css("border", "3px groove blue");

    </script>

    <script type="text/javascript">

    //:gt 选择匹配集合中所有索引值大于给定index参数的元素

    $(".aaron:gt(3)").css("border", "3px groove blue");

    </script>

     <script type="text/javascript">

    //:lt 选择匹配集合中所有索引值小于给定index参数的元素

    //与:gt相反

    $(".aaron:lt(2)").css("color", "#CD00CD");

    </script>

    <h3>:not</h3>

    <div class="left">

        <div>

            <input type="checkbox" name="a" />

            <p>Aaron</p>

        </div>

        <div>

            <input type="checkbox" name="b" />

            <p>慕课</p>

        </div>

        <div>

            <input type="checkbox" name="c" checked="checked" />

            <p>其他</p>

        </div>

    </div>

    <script type="text/javascript">

        //:not 选择所有元素去除不匹配给定的选择器的元素

        //选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色

        $("input:not(:checked) + p").css("background-color", "#CD00CD");

    </script>

</body>

</html>

　　

实验课：

<!DOCTYPE html>

<html>

<head>

	<script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>

	<title>使用jQuery子元素过滤选择器</title>

	<style type="text/css">

	 body{font-size:12px;text-align:center}

	 ul{width:241px;list-style-type:none;padding:0px}

	 ul li{height:23px;width:60px;line-height:23px;

	 	float:left;border-top:solid 1px #eee;

	 	border-bottom:solid 1px #eee;margin-bottom:5px

	 		}

	 	.GetFocus{width:58px;border:solid 1px #666;

	 		background-color:#eee}

	  </style>

	  <script type="text/javascript">

	  	$(document).ready(function(){

	  		$("#button1").click(function(){

	  			//增加每个父元素下的第二个子元素类别

	  			$("li:nth-child(2)").addClass("GetFocus");

	  		})

	  		$("#button2").click(function(){

	  			//增加每个父元素下的第一个子元素类别

	  			 $("li:nth-child(1)").addClass("GetFocus");

	  		})

	  		$("#button3").click(function(){

	  			//增加每个父元素下的最后一个子元素类别

	  			 $("li:last-child").addClass("GetFocus");

	  		})

	  		$("#button4").click(function(){

	  			//增加每个父元素下只有一个子元素类别

	  			 $("li:only-child").addClass("GetFocus");

	  		})

	  	})

	  </script>

</head>

<body>

	 <ul>

	 	<li>Item 1-0</li>

	 	<li>Item 1-1</li>

	 	<li>Item 1-2</li>

	 	<li>Item 1-3</li>

	 </ul>

	 <ul>

	 	<li>Item 2-0</li>

	 	<li>Item 2-1</li>

	 	<li>Item 2-2</li>

	 	<li>Item 2-3</li>

	 </ul>

	 <ul>

	 	<li>Item 3-0</li>

	 </ul>

	<button id="button1">增加每个父元素下的第二个子元素类别</button>

    <button id="button2">增加每个父元素下的第一个子元素类别</button>

    <button id="button3">增加每个父元素下的最后一个子元素类别</button>

    <button id="button4">增加每个父元素下只有一个子元素类别</button>

</body>

</html>

　　

Jquery | 基础 | 慕课网 | 基本筛选选择器的更多相关文章

  1. Jquery | 基础 | 慕课网 | 层级选择器

    选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-e ...

  2. Jquery | 基础 | 慕课网 | 类选择器

    原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较: <!DOCTYPE html> <html> <head> < ...

  3. Jquery | 基础 | 慕课网 | （*选择器）

    原生JS var elements1 = document.getElementsByTagName('*'); JQ var elements2 = $("*"); <!D ...

  4. Jquery | 基础 | 慕课网 | 元素选择器

    getElementsByTagName方法得到页面所有的<div>元素 var divs = document.getElementsByTagName('div'); 与 同样的效果, ...

  5. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  6. 【总结整理】JQuery基础学习---样式篇

    进入官方网站获取最新的版本 http://jquery.com/download/    中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScr ...

  7. JQuery基础修炼-样式篇

    jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能.我们可 ...

  8. Web前端JQuery基础

    JQuery知识汇总 一.关于Jquery简介          jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaS ...

  9. 慕课网4-2 编程练习：jQuery祖先后代选择器小案例

    4-2 编程练习 结合所学的祖先后代选择器,实现如下图所示效果 任务 (1)使用祖先后代选择器将第二段文字背景色变成红色 (2)使用jQuery的.css()方法设置样式,语法css('属性 '属性值 ...

随机推荐

  1. MySQL中给自定义的字段查询结果添加排名的方法

    我正在用 MySQL 客户端的时候,突然想到如果可以给查询结果添加排名该多好啊,然后就找到了一个简单的解决办法. 下面是一个示例表的数据:  然后我们要根据 Roll_No 字段进行排序并给出排名,我 ...

  2. Python开发【2.3 模块】

    1.模块导入 import 模块名 from 模块名 import 函数/类/变量 2.模块路径 import sys sys.path 3.模块重新导入 Python3若想在同一次会话中再次运行文件 ...

  3. HDOJ1004 数组还要自己初始化

    #include <iostream> #include <stdio.h> #include "string.h"using namespace std; ...

  4. mysql表分区 partition

    表分区 partition 当一张表的数据非常多的时候,比如单个.myd文件都达到10G, 这时,必然读取起来效率降低. 可不可以把表的数据分开在几张表上? 1: 从业务角度可以解决.. (分表,水平 ...

  5. spring mvc带参数重定向

    http://blog.csdn.net/jackpk/article/details/19121777/ https://isudox.com/2017/02/16/spring-mvc-redir ...

  6. Hihocoder #1077 : RMQ问题再临-线段树(线段树：结构体建树+更新叶子往上+查询+巧妙使用father[]+线段树数组要开大4倍 *【模板】)

    #1077 : RMQ问题再临-线段树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到:小Hi给小Ho出了这样一道问题:假设整个货架上从左到右摆放了N种商品,并 ...

  7. 探讨Ajax中有关readyState（状态值）和status（状态码)的问题

    先看下面一段代码,然后给大家详细介绍,Ajax中有关readyState(状态值)和status(状态码)的问题,具体内容如下所示: var getXmlHttpRequest = function ...

  8. js操作创建和操作外部样式的例子

    兼容IE8及以上的IE浏览器1. [代码][HTML]代码 <!DOCTYPE html><html lang="en">    <head>  ...

  9. oracle：对Index重建、分析

    对index进行分析,index_stats 表很有用.下面例子就结合index相关操作及 index_stats 的使用,对index进行分析. SQL> select count(*) fr ...

  10. 转:Oracle客户端NLS_LANG参数的设置详解

    原文:http://database.51cto.com/art/201107/279361.htm 我们知道,Oracle客户端语言支持可以通过NLS_LANG参数的设置来完成,不同的系统平台上NL ...