先看整体代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>05jQuery中的基本的选择器学习C</title>

		<script type="text/javascript" src="js/jquery-1.9.1.js" charset="UTF-8"></script>

		<style>

			div{

				width: 300px;

				height: 300px;

				border: 2px solid darkred;

			}

		</style>

		<script>

		$(function(){

			$("ul li:first").css("color","aqua");只有第一行变色

			$("ul li").first().css("color","aqua");只有第一行变色

			$("ul li:last").css("color","aqua");只有最后一行变色

			$("ul li").first().css("color","aqua");只有最后一行变色

			$("ul li:odd").css("color","aqua");//只有奇数行变色，从下标0开始

			$("ul li:even").css("color","royalblue");//只有偶数行变色,从下标0开始

			$("ul li:eq(3)").css("color","aqua");按照索引下标从0开始，第三个元素变色

			/*************子选择器********************/

			$("ul li:first-child").css("color","aqua");将所有列表的第一个元素变色

			$("ul li:last-child").css("color","aqua");将所有列表的最后一个一个元素变色

			$("ul li:only-child").css("color","aqua");将只有一个元素的改变

			$("ul li:nth-child(2)").css("color","aqua");将所有列表的第二个元素变色

		})

		</script>

	</head>

	<body>

		<div>

			<ul>

				<li>列表1</li>

				<li>列表2</li>

				<li>列表3</li>

				<li>列表4</li>

			</ul>

			<ul>

				<li>列表1</li>

				<li>列表2</li>

			</ul>

			<ul>

				<li>列表1</li>

			</ul>

		</div>

	</body>

</html>

我们对jQuery操作逐行分析：

1.将ul中的所有元素看做一个整体，对其进行整体操作（这是jQuery的俩种操作方式）：

$("ul li:first").css("color","aqua");

$("ul li").first().css("color","aqua");

所以只有第一行会变色：

2.和第一个相似，是将最后一个变色：

$("ul li:last").css("color","aqua");

$("ul li").first().css("color","aqua");

3.奇偶数行变色，可以认为是隔行变色（索引下标为0开始的）：

$("ul li:odd").css("color","aqua");

$("ul li:even").css("color","royalblue");

4. 按照索引的方式去将元素改变颜色：

$("ul li:eq(3)").css("color","aqua");

由此可见，这个方法，是以索引下标为0开始的。

这些都是将ul看做是一个整体，我们的子选择器将是li与li之间分开的。

$("ul li:first-child").css("color","aqua");

$("ul li:last-child").css("color","aqua");

$("ul li:only-child").css("color","aqua");

$("ul li:nth-child(2)").css("color","aqua");

jQuery中的基本的选择器学习(补充版)的更多相关文章

  1. jQuery中first-child与first选择器区别

    1.first-child first-child为每个父级元素匹配第一个子元素,可以匹配出多个元素: 示例代码: <!DOCTYPE html> <html lang=" ...

  2. JQuery中常用的 属性选择器

    jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1) $('#id') id选择器 2) $('.class') css选择器,class类名 3) $ ...

  3. jQuery中的基本过滤选择器（四、三）：:first、:last、:not() ... ...

    <!DOCTYPE html> <html> <head> <title>基本过滤选择器</title> <meta http-equ ...

  4. jQuery中哪几种选择器

    基本选择器:直接根据id,css类名,元素名返回dom元素: 层次选择器:也叫路径选择器: $("div span") 选取<div>里的所有<span>元 ...

  5. jquery中方法扩展 ($.fn & $.extend) 学习笔记

    A.$.fn 1.$.fn.method() 函数为jQuery对象扩展一个属性和方法(主要用于扩展方法) :method 为自定义方法名 ($.fn 等效 $.prototype) $.fn.bor ...

  6. JQuery 中三十一种选择器的应用

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的.用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  7. jQuery中的属性过滤选择器（四、五）：[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等

    <!DOCTYPE html> <html> <head> <title>属性过滤选择器</title> <meta http-equ ...

  8. python全栈开发day48-jqurey自定义动画，jQuery属性操作，jQuery的文档操作，jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  9. jQuery中的pushStack

    在学习jquery源码的时候,学到了其中的pushStack方法,在这里记录一下 源码为 // Take an array of elements and push it onto the stack ...

随机推荐

  1. Python文件打包exe教程——Pyinstaller（亲测有效）

    今天将要解决一个问题,如何打包Pyhon文件 众所周知,Python文件的后缀名为“.py” 所以执行Python文件的要求之一便是具有python环境. 偶尔特殊情况,或者运行一些比较简单的工具,但 ...

  2. python函数的基本语法<三>

    实参和形参: 定义函数括号里的一般叫形参 调用时括号里传递的参数一般叫实参 def students(age): print('my age is %s' % age) students(18) ag ...

  3. C语言I博客作业08

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 作业 我在这个课程的目标是 熟悉使用while和do-while结构解决问题 这个作业在那个具体方面帮助我实现目标 pta题目及查找的资料 ...

  4. 关于Pycharm的注册码

    最近安装pycharm,需要注册码,我在网上搜索了许多,这里一一记录下来,供大家参考: 在License server里面尝试输入下面任一地址:  http://elporfirio.com:1017 ...

  5. vue2获取dom节点

    vue2.*版本中 在标签中加上ref='dom',然后在代码中this.$refs.dom这样就拿到了页面元素 例如:<div class='box' ref='myBox'>你好< ...

  6. 第一个Hadoop程序-单词计数

    上一篇配置了Hadoop,本文将测试一个Hadoop的小案例 hadoop的Wordcount程序是hadoop自带的一个小的案例,是一个简单的单词统计程序,可以在hadoop的解压包里找到,如下: ...

  7. ZeroC ICE的远程调用框架 AMI与AMD -Why？

    在Ice有两种异步使用的方式,AMI和AMD.AMI是异步方法调用,AMD是异步方法调度(分派).前者用在代理端,后者用在饲服实现端. AMI其实就是在代理端,使用Future机制进行异步调用,而不阻 ...

  8. 【algo&ds】8.最小生成树

    1.最小生成树介绍 什么是最小生成树? 最小生成树(Minimum spanning tree,MST)是在一个给定的无向图G(V,E)中求一棵树T,使得这棵树拥有图G中的所有顶点,且所有边都是来自图 ...

  9. 宋宝华： Linux内核编程广泛使用的前向声明(Forward Declaration)

    本文系转载,著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:宋宝华 来源: 微信公众号linux阅码场(id: linuxdev) 前向声明 编程定律 先强调一点:在一切可 ...

  10. IT人该如何未雨绸缪，不断提升自己的竞争力?同时尽量避免风险？

    人会慢慢变老,变老后精力,记忆力乃至身体会慢慢变差,这是无法逆转的自然规律.随之会产生的是对中年危机的忧虑乃至恐惧,比如担心能力精力不及年轻人,从而导致收入锐减乃至失业. 对此我有如下三点不解.第一, ...