<!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. 初学c的一点体会

    自学C语言的一些体会1 从最初什么都不知道变成知道一点,一转眼就过去了三个多月,最开始只是刚进大学,感觉太闲了不太好就决定学点什么,于是就到图书馆逛了一圈找找看有什么有趣的书可以看看,刚好就在书架上看 ...

  2. Android 通过Application 传递数据

    </pre><pre> package com.example.ApplicationTest; import android.app.Application; /** * C ...

  3. c++string 输入换行符

    string 一次只能输入一行,不含换行符.可以自己添加换行符 和输入行数.例如:#include <iostream>#include <string>using names ...

  4. idea 破解注册方法总结

    注册码(无期限) JetbrainsCrack-2.6.2.jar适用于ideaIU-2017.2.之前版本,若版本较新适用 JetbrainsCrack-2.6.3_proc.jar. 其中Jetb ...

  5. Java 三大特性：封装、继承、多态

    一.封装: 对内 可封装自己的实现细节,使之信息隐藏不被其它类破坏: 对外 各个类之间分工明确, 其它类无需关心实现细节,类中细节发生改变,其它类也无需作出更改: 二.继承: 从已有的类中派生出新的类 ...

  6. Node安装及搭建简单HTTP服务器

    注:本文安装系统为mac,windows及其他系统下载对应安装包 ,mac下载后的安装包为apk文件,windows为msi文件. 安装 1.在网上下载node安装包,官方网站2.双击下载文件,按步骤 ...

  7. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

  8. HDU1560 DNA sequence —— IDA*算法

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1560 DNA sequence Time Limit: 15000/5000 MS (Java/Oth ...

  9. jsp重写url

    众所周知,使用java web编程出来的网站都是.jsp结尾的,而别人的网站都是以.html结尾的,那么这种效果是怎么实现的呢?就是这篇文章产生的原因,jsp重写url需要设计到第三方架包urlrew ...

  10. Android 不同阶段 Logo 显示

    /********************************************************************* * Android 不同阶段 Logo 显示 * 说明: ...