【jQuery入门】jQuery基础课程-CSDN博客

本文链接：https://blog.csdn.net/u013058618/article/details/50610343

【前言】　　

　　今天小编将带领大家一起来学习jQuery，关于jQuery的介绍大家可以看一下小编的另一片博客：【拨开云雾】应怜屐齿印苍苔，小扣柴扉久不开——表露初心。本篇博客小编跟大家一起来学习jQuery的基础选择器部分，希望大家能够喜欢，同时也希望大家能够多多提出宝贵意见。

【正文】

　　本次我们将讲解两大类选择器：基础选择器和层次选择器。首先我们来看一下基础选择器，对于基础选择器部分我们将用到的代码如下：

【基础选择器】

<span style="font-family:KaiTi_GB2312;font-size:24px;"><!DOCTYPE html>
<html>
    <head>
        <title>基础选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

	<div id="test"></div>
	<button id="btntest">点我</button>
	<p class="Name"></p>
	<div2>
		<span></span>
		<p></p>
		<label></label>
	</div2>

        <script type="text/javascript">
            //这里就是放置我们JQuery代码的地方
        </script>
    </body>
</html></span>

1-1 #id选择器

在jQuery中我们使用时的写法是:$("#id"),其中#id表示根据id选择器获取页面中指定的标签元素，并且返回唯一一个元素。

例如我们将id="test"的元素内容设置为：我是id选择器。

<span style="font-family:KaiTi_GB2312;font-size:24px;">$("#test").html("我是id选择器");</span>

1-2 element 选择器

在jQuery中我们使用时的写法是:$("element"),其中element就是元素的名称，通过元素名找到元素就可以对它进行操作了。

例如我们将element="span"的背景颜色设置为红色。

<span style="font-family:KaiTi_GB2312;font-size:24px;">$("button").css('color', '#FF0000');</span>

1-3 .class选择器

在jQuery中我们使用时的写法是:$(“.class”),其中.class参数表示元素的CSS类别(类选择器)名称。

例如我们将class='Name'的内容设置为：我是class选择器。

<span style="font-family:KaiTi_GB2312;font-size:24px;">$(".Name").html("我是class选择器");</span>

1-4 *选择器

这个选择器是一个我们用的比较少的选择器，但是很实用，在jQuery中的写法是:$("*"),选择器中的参数就一个“*”，既没有“#”号，也没有“.”号。由于该选择器的特殊性，它常与其他元素组合使用，表示获取其他元素中的全部子元素。

例如我们将 div 标签下的所有元素内容设置为：我们是一个团队。

<span style="font-family:KaiTi_GB2312;font-size:24px;">$("div2 *").html("我们是一个团队。");</span>

1-5 sele1,sele2,seleN选择器

　　有时需要精确的选择任意多个指定的元素，就需要调用sele1,sele2,seleN选择器，它的调用格式如下：$(“sele1,sele2,seleN”)，其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的各种类型选择器，如$(“#id”)、$(“.class”)、$(“selector”)选择器等。

例如我们将前三种选择器对应的标签中的字体大小设置为15px。

<span style="font-family:KaiTi_GB2312;font-size:24px;">$('#test,button,.Name').css('font-size', '15px');</span>

　　我们将这五个语句放置到代码中会产生如下效果，图比较简陋，如下：

【层次选择器】　　

　　接着我们来学习一下层次选择器，同样层次选择器用到的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>层次选择器</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div1>ance desc选择器            
		<p1>
			<label1></label1>
		</p1>
		<label></label>
		</div1>
	<div2>parent > child选择器
		<p2>
			<label2></label2>
		</p2>
		<label2></label2>
		<label2></label2>
		</div2>
	<div3>prev + next选择器
		<label3></label3>
		<p3></p3>
		<label3></label3>
		<label3></label3>
	</div3>
	<div4>prev ~ siblings选择器
		<label4></label4>
		<p4></p4>
		<label4></label4>
		<label4></label4>
	</div4>
<style type="text/css">
	div1, p1, label1
	{
		float: left;
		border: solid 1px #666;
		margin: 5px;
		padding: 5px;
	}
	label1
	{
		width: 30px;
		height:30px
	}
	div2, p2, label2
	{
		float: left;
		border: solid 1px #ccc;
		margin: 5px;
		padding: 5px;
	}
	label2
	{
		width: 30px;
		height:30px;
	}
	div3, p3, label3
	{
		float: left;
		border: solid 1px #ccc;
		margin: 5px;
		padding: 5px;
	}
	p3,label3
	{
		width:230px;
		height:30px;
	}
	p3
	{
		border: solid 1px red;
	}
	div4, p4, label4
	{
		float: left;
		border: solid 1px #ccc;
		margin: 5px;
		padding: 5px;
	}
	p4,label4
	{
		width:230px;
		height:30px;
	}
	p4
	{
		border: solid 1px red;
	}
</style>
    <script type="text/javascript">
        $("div1 label1").css("background-color", "blue");
        $("div2>label2").css("border", "solid 5px red");
        $("p3+label3").css("background-color", "red");
        $("p4~label4").css("border", "solid 1px red");
    </script>
</body>
</html>

2-1 ance desc选择器

在实际应用开发中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：$("ance desc")，其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。需要注意的是，通过该选择器会选取出父元素下所有同名的后代元素，无论是子节点还是孙结点或者更深层次的结点。
例如使用该选择器，获取<div>元素下的全部<label>元素，并改变它们的背景色。

<span style="font-family:KaiTi_GB2312;font-size:24px;">$("div1 label1").css("background-color","blue");</span>

2-2 parent > child选择器

与上一个介绍的ance desc选择器相比，parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈，它的调用格式如下：$(“parent > child”)，child参数获取的元素都是parent选择器的子元素，它们之间通过“>”符号来表示一种层次关系。

例如使用该选择器，获取<div2>元素下的<label>子元素，并改变它们的边框格式。

<pre name="code" class="javascript"><span style="font-family:Arial;font-size:24px;">$("div2>label2").css("border", "solid 5px red");</span>

2-3 prev + next选择器

俗话说“远亲不如近邻”，而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素，格式如下：$(“prev + next”)，其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。例如使用该选择器选择<div3>元素下<p>标签以及写一个<label>标签，同时将背景颜色设置成红色。

$("p3+label3").css("background-color","red");

2-4 prev ~ siblings选择器

与上一节中介绍的prev + next层次选择器相同，prev ~ siblings选择器也是查找prev 元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻的元素，它的调用格式如下：$(“prev ~ siblings”)，其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。
例如使用该选择器选择<div4>元素下的<p>标签以及后面同辈的<label>标签，同时将边框设置为红色。

$("p4~label4").css("border", "solid 1px red");

　　同样我们也将最后的效果图展示一下：

【结语】　　

　　选择器我们在今后的开发中会经常用到，这里讲解的只是最基本的知识点，真正的实战中我们用到的将会高级很多，不过这些知识作为入门还是很不错的。今天我们jQuery的选择器部分就结束了，大家在阅读中如果发现错误还请斧正。