<!DOCTYPE html>
<html>
<head>
	<title>	jquery</title>
	<style type="text/css">
		body{
			padding-bottom: 1000px;
		}
		ul{
			width: 500px;
			margin: 0;
			padding:0;
			list-style: none;
		}
		li{
			padding:20;
			margin-top: 10px;
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
<!-- 基础选择器 -->
<ul id="list1">
	<li>red</li>
	<li class="red">blue</li>
	<li>yellow</li>
</ul>
<ul id="list2">
	<li>pink</li>
	<li>black</li>
	<li class="red ">whitel</li>
</ul>
<p class="red">我是p标签----基础选择器</p>

<!-- 层级选择器 -->
<div>
	<a href="#" class="link">链接1</a>

	<a href="#">链接2</a>
	<a href="#">链接3</a>
	<a href="#">链接4</a>
	<p>
		<a href="#">链接5</a>
	</p>

</div>



<!-- 属性选择器 -->
<ul id="ulColor">
	<li class="red">color1</li>
	<li title="blue">color2</li>
	<li title="css-1">color3</li>
	<li id="color1-green">color4</li>
	<li id="red-1color">color5</li>
	<li lang="encnhk">color6</li>
	<li lang="en cn">color7</li>
	<li class="cl" name="kaivon">color8</li>
</ul>

<!-- 基础过滤选择器 -->
<ol id="olCorlor">
	<li>1</li>
	<li>1</li>
	<li>1</li>
	<li>1</li>
	<li lang="cn">1</li>
	<li id="tar">1</li>
	<li>1</li>
	<li>1</li>
	<li>1</li>
</ol>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>

<!-- 子元素过滤器 -->
<div id="paragraph">
	<p>段落</p>
	<p>段落</p>
	<span>段落1</span>
	<p>段落</p>
	<span>段落1</span>
	<p>段落</p>
	<p>段落</p>
	<span>段落1</span>
	<p>段落</p>
</div>
<div id="only">
	<p>唯一一个子元素</p>
</div>
<div id="only-two">
	<span>span</span>
	<p>两个子元素</p>
</div>


<!-- 内容过滤器 -->
<div id="content">kaivon</div>
<div></div>
<div id="has">
	<div><p>段落</p></div>
</div>
<div>
	<h1 id="title">大标题</h1>
</div>

 <script src="D:\JAVA相关资料包\jquery-3.2.1.js"></script>
<script >
	//选择器的使用--选择器选中的是一个集合
	/** 基础选择器**/
	//id选择器
	$('#list1').css('background','green')
	//类选择器
	$('.red').css('background','red');
	//标签选择器
	$('li').css('border','2px solid pink');
	//通配符选择器
	//$('*').css('border','4px solid green');
	//群组选择器(多个标签一起选择
	$('li,p').css('font-size','40px');
	//层级选择器 ---选中的是div 下的 所有 a标签
	$('div a').css('color','green');
	//层级选择器 ---选中的是div 下的 儿子元素 不包含孙子元素,即第一层及
	$('div>a').css('font-size','60px');
	//选择 div下面的所有a标签中带有类选择器link的后面(统一层级)紧跟(中间不能有其他标签)的一个a标签
	$('div a.link + a').css('color','purple');
	//选择 div下面的所有a标签中带有类选择器link的后面(统一层级)紧跟(中间不能有其他标签)的同一层级的所有a标签
	$('div a.link ~ a').css('color','blue');

	//属性选择器
	//先用id选择器定位 在用标签属性来选择
	$('#ulColor li[class]').css('background','pink');
	//先用id选择器定位 在用标签属性和属性值来选择
	$('#ulColor li[title=blue]').css('background','blue');
	//先用id选择器定位 在用标签的属性值不等于某个值来选择
	$('#ulColor li[title!=blue]').css('background','yellow');
	//属性值的前缀是CSS css-abc有-隔开的才是前缀,没有就不是
	$('#ulColor li[title|=css]').css('background','hotpink');
	//^以color开头的属性值 可以有- 也可以没有  ^ 以xxx开头的属性值
	$('#ulColor li[id^=color]').css('background','darkgreen');
	//$以color为结尾的属性值 可以有- 也可以没有 $ 以xxx结尾的属性值
	$('#ulColor li[id$=color]').css('background','purple');
	//属性值含有lang且属性值含有cn字符串的 * 包含字符串的属性值
	$('#ulColor li[lang*=cn]').css('background','olive');
	//属性值含有lang且属性值含有cn单词,单词有空格隔开 ~单词的属性值
	$('#ulColor li[lang~=cn]').css('background','skyblue');
	//多个属性同时满足
	$('#ulColor li[class=cl][name=kaivon]').css('background','teal');

	//基础过滤选择器
	//通过#olCorlor定位 再通过标签索引来选择 eq等于 gt大于 lt小于
	$('#olCorlor li:eq(1)').css('border','10px solid pink');
	$('#olCorlor li:gt(3)').css('border','10px solid green');
	$('#olCorlor li:lt(3)').css('border','10px solid yellowgreen');
	//排除  not(#olCorlor li:lt(3))后面可以跟所有选择器
	$('#olCorlor li:not(#olCorlor li:lt(3))').css('border','10px solid darkgreen');
	//选择 even偶数 和odd基数
	$('#olCorlor li:even').css('border','10px solid hotpink');
	$('#olCorlor li:odd').css('border','10px solid purple');
	//第一个 最后一个
	$('#olCorlor li:first').css('border','10px solid olive');
	$('#olCorlor li:last').css('border','10px solid skyblue');
	//属性选择
	$('#olCorlor li:lang(cn)').css('border','10px solid black');
	//锚点 在浏览器地址后面拼接 #tar
	$('#olCorlor li:target(tar)').css('border','10px solid yellow');
	//	根标签
	$(':root').css('border','20px solid blue');
	//header-标题标签
	$(':header').css('border','15px solid darkgreen');


	// 子元素过滤器 
	//通过div定位  p:first-child  #paragraph后面必须是p标签,
	$('#paragraph p:first-child').css('color','pink');
	//通过div定位  span:first-of-type  #paragraph后面可以插入其他标签,
	$('#paragraph span:first-of-type').css('color','yellowgreen');
	//通过div定位  p:last-child  #paragraph的最后一个子元素必须是p标签,
	$('#paragraph p:last-child').css('color','hotpink');
	//通过div定位  span:last-of-type  #paragraph的最后一个span标签,可以是不在最后,
	$('#paragraph span:last-of-type').css('color','hotpink');
	//选择第二个子元素,且第二个子元素必须为p标签,否则无效
	$('#paragraph p:nth-child(2)').css('color','blue');
	//选择#paragraph中的第二个span标签,索引可以不是2 ,位置随意
	$('#paragraph span:nth-of-type(2)').css('color','olive');
	//选择到只有一个子元素的标签 只含有一个p,不能在含有其他标签
	$('#only p:only-child').css('color','olive');
	//选择到#only-two 只含有一个span,可以含有其他标签
	$('#only-two span:only-of-type').css('font-size','20px');

	// 内容过滤器
	//#content中是否包含kaivon
	$('#content:contains(kaivon)').css('color','blue');
	//寻找div下面是否有空标签
	$('div:empty').css({
		width:'100px',
		height:'100px',
		background:'green'
	}); 
	//#has中是否包含p标签 只要包含就行
	$('#has:has(p)').css('border','1px solid #000');
	//#title的父级标签
	$('#title:parent').css('border','1px solid #f00');


</script>



</body>
</html>
版权声明:本文为快乐的小杨吖原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/yang2280539387/p/16414210.html