<!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>
