jQuery第二章选择器

最新推荐文章于 2022-03-17 14:12:16 发布

starry__sty

最新推荐文章于 2022-03-17 14:12:16 发布

阅读量103

点赞数

分类专栏： jQuery内容文章标签： jquery

本文链接：https://blog.csdn.net/starry__sty/article/details/108865004

版权

jQuery内容专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1：基础选择器

```bash
	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">
			#box{
				color: red;
				font-size: 100px;
				background: yellow;
				
			}
		</style>
	</head>
	<body>
		<div id="box">123</div>
		<div class="box">456</div>
		<div>789</div>
	</body>
	<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>-->
	<script type="text/javascript">
		$(function(){
			//找到div元素，通过css方法改变字体的颜色
//			$('div').css('color','red')
//			$('#box').css('font-size','100px');
//			$('.box').css('font-family','宋体').css('font-size','100px');
//			$('*').css('font-weight','900');
//			$('#box,.box').css('color','red').css('font-size','100px');
//------------------------------------------------------------------------------
//			如果css方法里面是一个值的话表示获取该属性的值
//			alert($('#box').css('color'))//rgb(255, 0, 0)
//			另一种css样式的写法
//			$('.box').css({
//				'font-size':'100px',
//				'color':'yellow',
//				'font-weight':'900',
//				'width':'300px',
//				height:'400px',
//				background:'#ccc'
//			})

//			alert($('div').size());
			alert($('div').length)
		})
	</script>
</html>

2：层次选择器

$('p>span') 子选择器
	$('p span a') 后代选择器
	$('div+p') 同级下一个节点选择器
	$('div~p') 下面所有的同级节点选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>123</li>
			<li>456
				<span>哈哈哈</span>
			</li>
			<li>789</li>
		</ul>
		<div>
			<p>哈哈哈</p>
			<h1>啦啦啦</h1>
			<h1>啦啦啦</h1>
			<h1>啦啦啦</h1>
			<h2>呵呵呵</h2>
		</div>
		<div>
			<p>哈哈哈1</p>
			<h1>啦啦啦1</h1>
			<h1>啦啦啦1</h1>
			<h1>啦啦啦1</h1>
			<h2>呵呵呵1</h2>
		</div>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
//			$('ul>li').css({
//				color:'red',
//				//如果属性用横线链接，需要引号包裹
//				'font-size':'100px'
//			})


//			$('ul li span').css({
//				color:'red'
//			})

//			$('p+h1').css('color','blue')
//			$('div+div').css('color','blue')

//			$('p~h1').css('color','yellow')
		})
	</script>
</html>

3:过滤选择器

:first  选中第一个元素
:last	选中最后一个元素
:not()	不选中某一个元素
:even   选中是偶数的元素（从零开始计算,第一个元素是0）
:odd	选中是奇数的元素
:eq(数字) 选中相等数字的元素（从零开始计算,第一个元素是0）
:gt(index)  选中大于数字的元素
:lt(index)  选中小于数字的元素

4：内容过滤选择器

p:contains('文本')  匹配包含给定文本的元素（找到p标签中包含指定文本内容的p标签）
	p:has('.red')	有没有包含特定属性值的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li>111111111111111</li>
			<li>222222222222222</li>
			<li>333333333333333</li>
			<li>444444444444444</li>
			<li class="oli">555555555555555</li>
			<li>666666666666666</li>
			<li>777777777777777</li>
			<li>888888888888888</li>
			<li>999999999999999</li>
		</ul>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
//			$('li:first').css('color','red')
//			$('li:last').css('color','red')
//			$('li:even').css('color','blue')
//			$('li:odd').css('color','blue')
//-------------------------------------------------------------
//			$('li:eq(5)').css('color','pink')
//			$('li:gt(4)').css('color','pink')
//			$('li:lt(4)').css('color','pink')
//			$('li:not(.oli)').css('color','green')
		})
	</script>
</html>

5：属性选择器

[attrbute]	匹配包含给定属性的元素
[attribute=value]  匹配input框里属性
选取 所有被选中的元素 $('input:checked')

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>哈哈哈</p>
		<p>呵呵呵</p>
		<p>还好还
			<span class="red">坎坎坷坷</span>
		</p>
		<ul>
			<li>000000000000</li>
			<li>111111111111</li>
			<li class="a">222222222222</li>
			<li class="b">333333333333</li>
			<li class="c">444444444444</li>
			<li>555555555555</li>
			<li>666666666666</li>
		</ul>
		
		<input type="radio" name="" id="" value="" checked="checked"/>
		<button>点击</button>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>-->
	<script type="text/javascript">
		$(function(){
//			$('p:contains("哈哈哈")').css('color','red')
//			去找到p标签中含有span标签的元素，把字体颜色改成黄色
//			$('p:has("span")').css('color','yellow');
//			$('p:has(".red")').css('color','blue');
//----------------------------------------------------------------
//			找到所有有class属性的的标签，把字体变成100像素
//			$('[class]').css('font-size','100px')
//			$('[class=a]').css('font-size','100px')
//------------------------------------------------------------------
//			$('input:checked').css('width','100px').css('height','100px')

//			$('button').click(function(){
//				$('input').prop('checked',false);
//			})
			
		})
	</script>
</html>

starry__sty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery第二章选择器

1：基础选择器```bash id # class . 标签 div * 通配符群组 #box,p css() 一个值的时候是找这个元素的值，两个值的时候是设置样式举例找元素的值： alert($('p').css('color')) 举例设置元素的样式： $('#txt').css('color','red'); size() 返回的元素个数举例： alert($('p').size())<!DOCTYPE html&g
复制链接

扫一扫