<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>10.6DOM对象转化成jQuery对象</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1.获取DOM对象
var oDiv = document.getElementsByTagName('div');
//2.转化成jQuery对象
var $Div = $(oDiv);
//$(参数)，参数可以是DOM对象
//3.设置样式
$Div.css('width','200px');
$Div.css('height','100px');
$Div.css('background-color','#CCC');
$Div.css('border','solid 2px #999');
//如何查找每个元素
$Div.first().css('color','red');//第一元素
$Div.last().css('color','green');//最后一个元素
$Div.eq(1).css('color','blue');//第二个元素
//.eq(index),index取值从0开始
$Div.eq(1).css('padding','10px')
//4.用标准的JS实现元素居中
var i;
var size = oDiv.length;
for(i=0;i<size;i++)
{
oDiv[i].style.textAlign = 'center';
}
});
//$Div.css('textAlign','center');
</script>
</head>
<body>
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
</body>
</html>
