jQuery第二章選擇器

t5555666發表於2020-09-23
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>

相關文章