jQuery选择器之ID选择器
上一节
下一节
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11.1jQuery选择器之ID选择器</title>
<style>
div{
width:200px;
height:200px;
border:2px solid #000;
margin:5px;
float:left;
}
</style>
<script src="../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="js">
<h2>JavaScript</h2>
<p>选中</p>
</div>
<div id="js">
<h2>JavaScript</h2>
<p>未选中</p>
</div>
<div id="jq">
<h2>jQuery</h2>
<p>选中</p>
</div>
<div id="jq">
<h2>jQuery</h2>
<p>未选中</p>
</div>
<script>
//ID选择器：通过ID的值查找元素，ID的值应该唯一
//JQ的格式：$('#ID')
//jQuery中的实现
var $divJQ = $('#jq');
$divJQ.css('background-color','#CCC');
//注意：只有第一ID被选中
//JavaScript中的实现
var divJS = document.getElementById('js');
divJS.style.backgroundColor = 'yellow';
</script>
</body>
</html>
运行截图
