<!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>jq入门选择器
最新推荐文章于 2023-03-23 09:18:28 发布
扫一扫
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
