<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
}</style>
<script type="text/javascript" src="./jquery-1.10.1.min.js"></script>
<script>
//核心:先html css执行完在执行这里.
/*window.οnlοad=function()
{
//获取要操作的元素.
var div1=document.getElementsByTagName("div")[0];
var div2=document.getElementsByClassName("box1")[0];
var div3=document.getElementById("box2");
//使用js的方式修改背景色.
div1.style.backgroundColor="red";
div2.style.backgroundColor="blue";
div3.style.backgroundColor="yellow";
*/
//以上,js方式操作.
//以下,jq操作.
//$是jQuery的别称.这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素, 函数作用之一获取各类选择器的的替代把.
//$();//获取什么?
$(function()
{
var $div1=$("div");
var $div2=$(".box1");
var $div3=$("#box2");
$div1.css({background:"red",width:"200px",height:"200px"});
$div2.css({background:"blue"});
$div3.css({background:"yellow"});
});
</script>
</head>
<body>
<div></div>
<div class="box1"></div>
<div id="box2"></div>
</body>
</html>