jq入门选择器

最新推荐文章于 2023-03-29 18:52:35 发布

li3196672779

最新推荐文章于 2023-03-29 18:52:35 发布

阅读量400

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			//抓元素名字
//			$('div').css({'color':'red'});
			//抓ID
			$('#p').css({'color':'purple'});
			//抓类名
			$('.p').css({'color':'yellow'});
			//群组选择器,可以填类名id名混合
			$('b,i').css({'color':'pink'});
			//*选择器
//			$('body *').css({'background':'grey'});
//------------------------------------------------------------
			
			//后代选择器
			$('#CengCi p').css({'color':'red'});
			
			//子代选择器
			$('#CengCi>p').css({'background':'yellow'});
			
			//兄弟选择器,选择后面所有是p的兄弟  、、 兄弟
			$('#second ~p').css({'color':'green'});
			
			//相邻选择器
			$('#second + p').css({'color':'brown'});
//-----------------------属性选择器---------------------------
			//这里可以填$('#lvye') == $('[id = "lvye"]'); 类也一样
			$('#list input[type="checkbox"]').attr('checked','true');

		})
	</script>
</head>
<body>
	<div>绿叶学习网</div>
	<p id="p">绿叶学习网</p>
	<p class="p">绿叶学习网</p>
	<span>绿叶学习网</span>
	<div>绿叶学习网</div>
	<b>绿叶学习网</b>
	<i>绿叶学习网</i>
	
	<hr />
	<h1>层次选择器</h1>
	
	<div id="CengCi">
		<p>lvye的子元素</p>
        <p>lvye的子元素</p>
        <div id="second">
            <p>lvye子元素的子元素</p>
            <p>lvye子元素的子元素</p>
        </div>
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
	</div>
	
	<hr />
	<h1>属性选择器</h1>
	<h3>你喜欢的水果是：</h3>
    <div id="list">
        <label><input type="checkbox" />：苹果</label>
        <label><input type="checkbox" />：西瓜</label>
        <label><input type="checkbox" />：蜜桃</label>
        <label><input type="checkbox" />：梨子</label>
        <label><input type="checkbox" />：香蕉</label>
    </div>
</body>
</html>

li3196672779

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq入门选择器

Document $(function(){ //抓元素名字// $('div').css({'color':'red'}); //抓ID $('#p').css({'color':'purple'}); //抓类名 $('.p').css({'color':'yellow'}); //群组选择器,可以填类名id名混合 $('b,i').
复制链接

扫一扫

专栏目录