<!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. 项目Beta冲刺（团队1/7）

    项目Beta冲刺(团队1/7) 团队名称: 云打印 作业要求: 项目Beta冲刺(团队) 作业目标: 完成项目Beta版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 陈宇 ...

  2. linux下提示command not found

    首先就要考虑root 的$PATH里是否已经包含了这些环境变量. 主要是这四个:/bin ,/usr/bin,/sbin,/usr/sbin. 四个主要存放的东东: ./bin: bin为binary ...

  3. ajax 提交所有表单内容及上传图片（文件），以及单独上传某个图片（文件）

    我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...

  4. Hadoop MapReduce基本原理

    一.什么是: MapReduce是一种编程模型,用于大规模数据集(大于1TB)的并行运算.概念"Map(映射)"和"Reduce(归约)",是它们的主要思想,都 ...

  5. (linux)INIT_WORK和INIT_DELAYED_WORK详解

      朋友,你相信,一只蝴蝶在北京拍拍翅膀,将使得纽约几个月后出现比狂风还厉害的龙卷风吗?看过那部经典的影片蝴蝶效应的朋友们一定会说,这不就是蝴蝶效应吗.没错.蝴蝶效应其实是混沌学理论中的一个概念.它是 ...

  6. poj 1789 Truck History 解题报告

    题目链接:http://poj.org/problem?id=1789 题目意思:给出 N 行,每行7个字符你,统计所有的 行 与 行 之间的差值(就是相同位置下字母不相同),一个位置不相同就为1,依 ...

  7. codeforces 447C. DZY Loves Sequences 解题报告(446A)

    题目链接:http://codeforces.com/problemset/problem/447/C 题目意思:给出 一个 包含 n 个数的序列你,从中需要找出这个序列的最长子串,满足在里面只修改其 ...

  8. hdu 4763 Theme Section（next数组找串中三段相等）

    题意:在一个串中找 EAEBE 的形式的最长的E,其中E为一个字符串,也就是说找到前缀与后缀相同,并且串中还存在相同的一段,它们不能重复. 思路:利用next数组,next[len]代表的即是最大的相 ...

  9. uses-permission和permission详解

    1.<uses-permission>: 官方描述: If an application needs access to a feature protected by a permissi ...

  10. CodeForces985F：Isomorphic Strings （字符串&hash）

    题意:取出字符串Str里的两个串S,T,问对应位置的的字符在否有一一映射关系. hash:对于每个字符s=‘a’-‘z’,我们任意找一个i,满足Si==s,(代码里用lower_bound在区间找到最 ...