<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>10.4jQuery对象与DOM对象</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
//DOM:文档对象模型，HTML的元素，DOM对象就是单独的DOM元素
//jQuery对象:是类数组对象（类有属性和方法，集合）
$(function(){
//js
var oDiv1 = document.getElementById('div1');//DOM对象
//1.通过CSS添加边框样式
//2.通过js添加类样式
oDiv1.className = 'active';
//3.追加类样式static
oDiv1.className += ' static';//空格不能少
//2和3加在一起等价于 oDiv1.className = 'active static';
//4.设置样式
oDiv1.setAttribute('style','width:200px');
//5.增加样式
oDiv1.style.cssText +='height:100px';
//6.直接为样式中的属性赋值
oDiv1.style.color = 'red';
oDiv1.style.lineHeight = '100px';
//jQuery
var $div2 = $('#div2');//jQuery对象
$div2.css('color','blue');//css(属性,属性值)
$div2.css('border','#00F solid 2px');
$div2.css('width','200px');
$div2.css('height','100px');
$div2.css('text-align','center');
$div2.css('lineHeight','100px');
$div2.css('background-color','#FF9');
});
</script>
<style>
#div1{ border:#00F solid 2px;}
.active{ background-color:#CCC;}
.static{ text-align:center;}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
