Javaweb基础-jQuery选择器

最新推荐文章于 2022-04-18 13:56:37 发布

coder_aji

最新推荐文章于 2022-04-18 13:56:37 发布

阅读量338

点赞数

分类专栏： # Javaweb 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_46899412/article/details/122796735

版权

Javaweb 专栏收录该内容

20 篇文章 4 订阅

订阅专栏

jQuery引入

打开jQuery官网，右键另存为把jQuery存到本地。

使用script标签，把jQuery引入到HTML中
<script src="/MyFirstServletDemo/resource/js/Jquery.js"></script>
//scr里面是jQuery在电脑中位置

jQuery文档就绪

文档就绪事件：
<script type="text/javascript">
	$(document).ready(function(){
		//
	})
</script>
简介书写形式：
<script type="text/javascript">
	$( function(){
		//
	})
</script>
【注意】效果一样，一般使用简写形式。

jQuery选择器

1.基本选择器

元素选择器：$("元素名")

<script type="text/javascript">
	$(document).ready(function(){
		$("div").css("color","red");
        //选择所有div元素，把标签内字的眼色改成红色
	})
</script>

id选择器：$("#id名")

<script type="text/javascript">
	$(document).ready(function(){
		$("#first").css("color","red");
        //把id为first的标签内部的字的颜色改成红色
	})
</script>

class选择器：$(".class名")

<script type="text/javascript">
	$(document).ready(function(){
		$(".first").css("color","red");
        //把class为first的标签内部的字的颜色改成红色
	})
</script>

群组选择器：$("元素名/#id名/.class名,...")。括号里面可以填写多个选择条件，以英文逗号隔开。

<script type="text/javascript">
	$(document).ready(function(){
		$(".first,#third,span").css("color","red");
        //把class为first的标签，id为third的标签和span标签内部的字的颜色改成红色
	})
</script>

2.层次选择器

后代选择器：$("M N"),M可以是元素，id，class选择器中的任何一个，N也可以取群组选择器。$("M N")等价于$("M").find(N)。

【注意】选择的是M选择器内部的所有N选择器

<script type="text/javascript">
	$(document).ready(function(){
		$("#first span").css("color","red");
        //$("#first").find("span").css("color","red");
        //id为first的标签内的所有span标签内的字的颜色改成红色

        $("#first span,div").css("color","red");
        //$("#first").find("span,div").css("color","red");
        //id为first的标签内的所有span,div标签内的字的颜色改成红色
	})
</script>

子代选择器:$("M>N"),M可以是元素，id，class选择器中的任何一个，N也是。$("M>N")等价于$("M").children("N")。

【注意】选择的是M选择器内部的一级N选择器

<script type="text/javascript">
	$(document).ready(function(){
		$("#first>div").css("color","red");
		//$("#first").children("div").css("color","red");
        //把id为first的标签内的一级div元素内部的字改成红色

        $("#first>div").css("color","red");
        $("#first>span").css("color","red");
		//$("#first").children("div,span").css("color","red");
        //把id为first的标签内的一级div,span元素内部的字改成红色
	})
</script>

兄弟选择器：$("M~N"),M可以是元素，id，class选择器中的任何一个，N也是。$("M~N")等价于$("M").nextAll("N")。

【注意】选择的是与M选择器同一级的N选择器

<script type="text/javascript">
	$(document).ready(function(){
		$("#third~div").css("color","red");
        //$("#third").nextAll("div").css("color","red");
        //选择id为third的元素下面的，同一级的div元素

        $("#third~div").css("color","red");
        $("#third~span").css("color","red");
        //$("#third").nextAll("div,span").css("color","red");
		//选择id为third的元素下面的，同一级的div,span元素
	})
</script>

相邻选择器：$("M+N"),M可以是元素，id，class选择器中的任何一个，N也是。$("M+N")等价于$("M").next("N")。

【注意】如果M选择器同一级的，M下面的第一个选择器是N选择器，那么执行指定的操作

<script type="text/javascript">
	$(document).ready(function(){
		$("#third+div").css("color","red");
        //$("#third").next("div").css("color","red");
		//选择id为third的元素下面的第一个元素，如果是div那么颜色改成红色
		
	})
</script>

3.属性选择器：$("标签[属性 <条件> '值']")。支持自定义属性。

条件：$("标签[属性 = '值']")。属性的值等于左边的值。

<script type="text/javascript">
	$(document).ready(function(){
		$("div[class='cls1']").css("color","red");
        //所有div中class属性的值等于cls1的div内部的字的颜色改成红色
	})
</script>

条件：$("标签[属性 != '值']")。属性的值不等于左边的值。

<script type="text/javascript">
	$(document).ready(function(){
		$("div[index!='cls1']").css("color","red");
        //把index属性值不等于cls1的所有div元素内部的字的颜色换成红色
        //index自定义属性，没有定义index属性的div也算是属性值不等于cls1的div标签
	})
</script>

条件：$("标签[属性 ^= '值']")。属性的值以左边的值为开头。

<script type="text/javascript">
	$(document).ready(function(){
		$("span[class^='cls']").css("color","red");
        //选择所有class属性的值以cls开头的span标签，把标签内部的字的颜色改成红色
	})
</script>

条件：$("标签[属性 $= '值']")。属性的值以左边的值为结尾。

<script type="text/javascript">
	$(document).ready(function(){
		$("span[class$='s1']").css("color","red");
         //选择所有class属性的值以s1结尾的span标签，把标签内部的字的颜色改成红色
	})
</script>

条件：$("标签[属性 *= '值']")。属性的值包含左边的值。

<script type="text/javascript">
	$(document).ready(function(){
		$("span[class*='cls']").css("color","red");
        //选择所有class属性的值包含cls的span标签，把标签内部的字的颜色改成红色
	})
</script>

条件：$("标签[属性1][属性2 <条件2> '值2'][属性3 <条件3> '值3']...")。选择有属性1，满足条件2，条件3的标签。

<script type="text/javascript">
	$(document).ready(function(){
		$("span[class][class!='cls2']").css("color","red");
        //选择有class属性，但是class属性的值不等于cls2的span标签，把标签内部的字的颜色改成红色

        $("span[id][class!='cls2']").css("color","red");
        //选择有id属性并且class属性的值不等于cls2的span标签，把标签内部的字的颜色改成红色

	})
</script>

伪类选择器

1.位置选择器

first：$("E:first")。选择一组E中的第一个。E可以是任何一个选择器。

<script type="text/javascript">
	$(document).ready(function(){
		$("span:first").css("color","red");
        //选择一组span标签中的第一个，把标签内部的字的颜色改成红色

        $(".cls2:first").css("color","red");
        //class等于cls2的标签中，选择第一个标签，把标签内部的字的颜色改成红色
	})
</script>

nth()/eq(n)：$("E:nth(n)")或者$("E:eq(n)")。选择一组E中的第n+1个。n从零开始。:first等于:nth(0)。

<script type="text/javascript">
	$(document).ready(function(){
		$("span:nth(2)").css("color","red");
        //选择一组span中的第3个，把标签内字的颜色改成红色
	})
</script>

last：$("E:last")。选择一组E中的最后一个。

<script type="text/javascript">
	$(document).ready(function(){
		$("span:last").css("color","red");
        //选择一组span标签中的最后一个，把标签内部的字的颜色改成红色
	})
</script>

lt(n): $("E:lt(n)")。选择一组E中的前n+1个。

<script type="text/javascript">
	$(document).ready(function(){
		$("span:lt(2)").css("color","red");
        //选择一组span中第3之前的（不包含3），把标签内字的颜色改成红色
	})
</script>

gt(n): $("E:gt(n)")。选择一组E中的第n+1之后的。

<script type="text/javascript">
	$(document).ready(function(){
		$("span:gt(2)").css("color","red");
        //选择一组span中第3之后的（不包含3），把标签内字的颜色改成红色
	})
</script>

even：$("E:even")。选择一组E中的序号为偶数的。序号从0开始。

<script type="text/javascript">
	$(document).ready(function(){
		$("span:even").css("color","red");
        //选择一组span标签中序号为偶数的，把标签内字的颜色改成红色
	})
</script>

odd：$("E:odd")。选择一组E中的序号为奇数的。序号从0开始。

<script type="text/javascript">
	$(document).ready(function(){
		$("span:odd").css("color","red");
        //选择一组span标签中序号为奇数的，把标签内字的颜色改成红色
	})
</script>

2.子元素伪类选择器

first-child：$("E:first-child")。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery训练</title>
<script src="/Jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#id1 div:first-child").css("color","red");
        //id为id1的标签内的第一个div标签以及所有标签内部的第一个div标签的颜色改成红色
        //1-1，2-1，2-2-1都变红
	})
</script>
</head>
<body>
	<div id="id1">
		<div class="cls2">
			<div class="cls2">1-1</div>
		</div>
		<div class="cls2">
			<div class="cls2">2-1</div>
			<div class="cls2">
				<div class="cls2">2-2-1</div>
			</div>
		</div>
		<span class="csls1">span1</span> 
		<div class="cls2">2</div>
		<div class="cls2">3</div>
	</div>
	<div class="cls2">1</div>
</body>
</html>

nth-child(n)：$("E:nth-child(n)")。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1 div:nth-child(2)").css("color","red");
        //id为id1的标签内的第二个div标签以及所有标签内部的第二个div标签的颜色改成红色
	})
</script>

last-child：$("E:last-child")。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1 div:last-child").css("color","red");
        //id为id1的标签内的最后一个div标签以及所有标签内部的最后一个div标签的颜色改成红色
	})
</script>

only-child：$("E:only-child")。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1 div:only-child").css("color","red");
         //id为id1的标签内的唯一一个div标签或者所有标签内部的唯一一个div标签的颜色改成红色
	})
</script>

3.可见性伪类选择器

visible：$("E:visible")。选择可见元素E。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1 div:visible").css("color","red");
        //id为id1的标签内的可见div的内部的颜色换成红色
	})
</script>

hidden：$("E:hidden")。选择不可见元素E。

<script type="text/javascript">
	$(document).ready(function(){
		$("#id1 div:hidden").css("display","block");
        //id为id1的标签内部的不可见div设置成可见
        //不可见就是style="display:none;"
	})
</script>