jQuery第二章选择器

标题

1:基础选择器

id  	#
class	.
标签		div
*		通配符
群组		#box,p
css()	一个值的时候是找这个元素的值,两个值的时候是设置样式
		举例 找元素的值:
		alert($('p').css('color'))
		举例 设置元素的样式:
		$('#txt').css('color','red');
size()  返回的元素个数
		举例:
		alert($('p').size())
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				/*color: red;*/
				font-size: 100px;
			}
		</style>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<p id="txt" class="t">今天真冷</p>
		<p>是啊,真冷!!</p>
	</body>
	<script type="text/javascript">
		$(function(){
//			$('#txt').css('color','red');
//			$('.t').css('color','yellow').css('font-size','100px')
			
//			alert($('p').css('color'))
//			alert($('p').size())
		})
	</script>
</html>

2:层次选择器

$('p>span') 子选择器
$('p span a') 后代选择器
$('div+p') 同级下一个节点选择器
$('div~p') 下面所有的同级节点选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	</head>
	<body>
		<div>
			<p>是不是傻</p>
			<h1>不是,不傻!!</h1>
			<h2>好吧</h2>
			<h2>好吧</h2>
			<h2>好吧</h2>
			<h2>好吧</h2>
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
//			$('div>p').css('border','1px solid red');
//			$('p+h1').css('margin','500px')
//			$('p~h2').css('color','red')
		})
	</script>
</html>

3:过滤选择器

:first  选中第一个元素
:last	选中最后一个元素
:not()	不选中某一个元素
:even   选中是偶数的元素(从零开始计算,第一个元素是0)
:odd	选中是奇数的元素
:eq(数字) 选中相等数字的元素(从零开始计算,第一个元素是0)
:gt(index)  选中大于数字的元素
:lt(index)  选中小于数字的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul>
			<li>来啊0</li>
			<li>快来啊1</li>
			<li>快点来啊2</li>
			<li id="ss">赶快快点来啊3</li>
			<li class='a'>赶快快点来啊,不然饭凉了4</li>
			<p>坎坎坷坷扩扩扩</p>
		</ul>
	</body>
	<script type="text/javascript">
		$(function(){
//			$('li:first').css('fontSize','100px')
//			$('li:last').css('fontSize','100px')
//			$('li:not(#ss,.a)').css('fontSize','100px')
//			$('li:even').css('fontSize','100px')
//			$('li:odd').css('fontSize','100px')
//			$('li:eq(1)').css('border','1px solid red')
//			$('li:gt(2)').css('border','1px solid red')
//			$('li:lt(2)').css('border','1px solid red')
		})
	</script>
</html>

4:内容过滤选择器

p:contains('文本')  匹配包含给定文本的元素(找到p标签中包含指定文本内容的p标签)
p:has('.red')	有没有包含特定属性值的元素(找到p标签中包含指定文本内容的p标签)
p:parent()		返回该元素的父元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul>
			<li>你好</li>
			<li class="a">我好</li>
			<li>他好你</li>
			<li>大家好</li>
			<li>才是真的好</li>
		</ul>
		<div>
			<p class="a">坎坎坷坷扩扩</p>
		</div>
		<div>
			<span class="a">吞吞吐吐拖拖</span>
		</div>
		<p>一月又一月晕晕晕晕晕晕晕晕晕晕晕晕晕晕晕晕晕晕</p>
	</body>
	<script type="text/javascript">
		$(function(){
//			$('li:contains(你)').css('color','red').css('fontSize','100px')
//			$('div:has(p)').css('color','blue')
//			$('div:has(.a)').css('color','blue').css('fontSize','100px')
			
		})
	</script>
</html>

5:属性选择器

[attrbute]	匹配包含给定属性的元素
[attribute=value]  匹配input框里属性
选取 所有被选中的元素 $('input:checked')
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<p class="a">111111111111111111111111</p>
		<p class="a">2222222222222222222222222</p>
		<h1 class="a">3333333333333333333333</h1>
		<h1>4444444444444444444444444</h1>
		<h1 class="b">5555555555555555555555</h1>
		<input type="checkbox" name="" id="" value="" checked="checked"/>
		<input type="checkbox" name="" id="" value="" />
		<input type="checkbox" name="" id="" value="" />
	</body>
	<script type="text/javascript">
		$(function(){
//			$('[class]').css('color','red')
//			$('[class=b]').css('color','#ccc')
//			$('input:checked').css('width','200px').css('height','200px')
			
		})
	</script>
</html>

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页