<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11.3jQuery选择器之元素选择器</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>
<script>
//页面加载完毕执行下面程序
$(function(){
//元素选择器:标签选择器，通过标签名选择元素
//jQuery格式：$('标签名')
//用jQuery设置div背景为灰色
$('div').css('background-color','#CCC');
//用jQuery设置p标签中，文字颜色为红色
$('p').css('color','red');
//用JavaScript设置div内元素居中
var oDiv = document.getElementsByTagName('div');
var i;
for(i=0;i<oDiv.length;i++)
{
oDiv[i].style.textAlign = 'center';
}
//用JavaScript设置h2标签字体为30px
var oH2 = document.getElementsByTagName('h2');
for(i=0;i<oH2.length;i++)
{
oH2[i].style.fontSize = '30px';
}
});
</script>
</head>
<body>
<div class="js">
<h2>JavaScript</h2>
<p>选中</p>
</div>
<div class="js">
<h2>JavaScript</h2>
<p>选中</p>
</div>
<div class="jq">
<h2>jQuery</h2>
<p>选中</p>
</div>
<div class="jq">
<h2>jQuery</h2>
<p>选中</p>
</div>
</body>
</html>
效果图
