Jquery 함수 사용법, onload, css컨트롤
Jquery 함수 사용법, onload, css컨트롤
http://docs.jquery.com/Main_Page
사이트에서 파일2개를 다운받고 소스코드에서 임포트해야 한다.
결과화면
.소스
<html>
<head>
<title>JQuery첫번째~</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
function Test()
{
//1. Javascript DOM
//document.getElementById("div1").style.backgroundColor = "yellow";
//2. jQuery
//jQuery("#div1").css("background-color", "red");
//$("#div1").css("background-color", "red");
//a. 태그선택자
//$("input").css("background-color", "red");
//b. id선택자
//$("#div1").css("background-color", "red");
//c. class선택자
//$(".test").css("background-color", "red");
/*
var list = document.getElementsByTagName("div");
for (i = 0; i < list.length; i++)
{
if (list[i].className == "test")
list[i].style.backgroundColor = "red";
}
*/
//d. 계층 선택자
//$(".test > span").css("background-color", "blue");
//e. 자바스크립트 객체
var temp1 = document.getElementById("div1");
//temp1.
var temp2 = $("#div1");
//temp2.
//순수 자바스크립트 객체 -> jQuery객체 형변환
$(document.getElementById("div1")).css("color", "yellow");
//jQuery객체 -> 순수 자바스크립트 객체
$("#div1")[0].title = "도움말";
}
</script>
</head>
<body>
<input type="button" value=" 테스트 " onclick="Test();" />
<div id="div1">문자열입니다..</div>
<div id="div2" class="test"><span>문자열</span>입니다..</div>
<div id="div3"><span>문자열</span>입니다..</div>
<div id="div4" class="test">문자열입니다..</div>
<div id="div5">문자열입니다..</div>
</body>
</html>
.결과화면
<html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
<style type="">
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->
<!-- 네트워크상 느릴순 있다 주소가 변경될때 가동이 안될수도 있다.-->
<!-- 10000라인을 코딩한것이나 다름없다. -->
<script type="text/javascript">
//자바스크립트 = > 객체 핸들링
//1. 문서 로드될때..onload이벤트
//2. div1을 찾아서..getElementById함수
//3. css 변경 style속성
function Init()
{
document.getElementById("div1").style.backgroundColor = "yellow";
}
//1. 문서 로드 될때..jquery함수
//body onload 이벤트
$(document).ready(
function ()
{
//alert("안녕");
//$(CSS셀렉터)
//2. div1을 찾아서..
//3. css속성 변경
$("#div1").css("background-color", "blue");
//document.getElementById("div1").style.backgroundColor="blue"; 이구문과 같다.
$("div").css("font-size", "20px");
$(".test").css("font-weight", "bold");
}
);
</script>
</head>
<body onload="//Init();">
<div id="div1">문자열</div>
<div class="test">문자열</div>
<div>문자열</div>
<p class="test">문단</p>
<p class="test">문단</p>
<p>문단</p>
</body>
</html>