<!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. Nova虚拟机迁移

    这里根据我的配置环境只讲述冷迁移(Migrate Instance)需要进行的计算节点配置而不包含热迁移(Live Migrate Instance),后者需要共享存储及Hypervisor的支持. ...

  2. （转）OutOfMemory时抓取heap 快照

    转自:https://testerhome.com/topics/579 首先说一下,在程序没有崩溃的时候如何抓取heap快照.这个大家应该都知道,在ddms中自带此功能.   见上图首先我们选中一个 ...

  3. TopSelf安装Windows服务提示：执行未经授权的操作。。

    在一个项目中用到了八九个服务,服务的执行时间也是五花八门,有的年末执行一次,有的月中执行一次,有的月末最后一天执行一次,有的月初连续执行5天, 有的每天晚上执行,...还好各个服务并没有严格的关联关系 ...

  4. 关于Cascading

    Cascading是一个开源的Java库和应用程序编程接口(API),它为MapReduce提供了一个抽象层.它允许开发者构建出能在Hadoop集群上运行的复杂的.关键任务的数据处理应用. Casca ...

  5. [翻译]理解Unity的自动内存管理

    当创建对象.字符串或数组时,存储它所需的内存将从称为堆的中央池中分配.当项目不再使用时,它曾经占用的内存可以被回收并用于别的东西.在过去,通常由程序员通过适当的函数调用明确地分配和释放这些堆内存块.如 ...

  6. EasyUI+Python-flask实现CRUD应用

    1.需求分析 需求:应用easyui制作前端表格数据显示,flask制作后端路由 环境搭建略 2.easyui前端实现 2.1 easyui是前端实用的一个框架,这里我们要实现的是easyui的CRU ...

  7. bzoj4664: Count

    是bzoj4498: 魔法的碰撞的哥哥题,我只写了一种 不一样的地方在于贡献有负数,第三维要保存的不能仅仅是0~L,这样空间会炸裂 考虑如何把贡献变成正的 假如要求最优解,那么一定是按顺序排,混乱度为 ...

  8. 一步一步学Silverlight 2系列（19）：如何在Silverlight中与HTML DOM交互（上）

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  9. python-dev 安装错误

    /******************************************************************** * python-dev 安装错误 * 说明: * 今天在安 ...

  10. maven(一)创建一个maven的web项目

    一.创建项目 1.Eclipse中用Maven创建项目 上图中Next 2.继续Next 3.选maven-archetype-webapp后,next 4.填写相应的信息,Packaged是默认创建 ...