jQuery Learning Center
모르겠다 싶은것만 고고싱.
$()
* 객체 지정
* 아래와 같이 일부 객체 또는 해당 조건의 객체 전체를 지정(?)할때 ...
* 가장 기본이 되는 함수.
TEST Url : http://www.uhoon.co.kr/test/870-1.html
* 아래와 같이 일부 객체 또는 해당 조건의 객체 전체를 지정(?)할때 ...
* 가장 기본이 되는 함수.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<script type="text/javascript">
<!--
function fnRemove() {
//$("H1").remove(); // H1(태그) 객체 모두 삭제
//$(".H1").remove(); // class 가 H1인 객체 모두 삭제
//$("#H1_id").remove(); // 아이디가 H1_id 인 객체 삭제
//$("form[name='frmTEST'] H1").remove(); // frmTEST 폼 안에 H1(태그명) 객체 모두 삭제
//$("form[name='frmTEST'] H1:eq(0)").remove(); // frmTEST 폼 안에 H1 객체배열중 0번배열 삭제(1번째)
//$("form[name='frmTEST'] H1:last").remove(); // frmTEST 폼 안에 H1 객체배열중 마지막 H1 삭제
}
//-->
</script>
<body>
<form method="GET" name="frmTEST">
<div>
<H1 id="H1_id">H1 test(0)</H1>
<H1 id="H2_id" class="H1">H1 test(1)</H1>
<H1 id="H3_id">H1 test(2)</H1>
</div>
<div>
<H2>H2 test</H1>
</div>
<div>
<H3>H3 test</H1>
</div>
</form>
<input type="button" value="H1 Remopve" onclick="Javascript:fnRemove();" />
</body></html>$( document ).ready()
* DOM 로드 완료 시 호출 되는 함수.
* window.onload 의 경우 중복 선언을 해도 마지막것만 실행되는것에 비해
* $( document ).ready(function() {}의 경우는 중복 선언 및 호출이 가능함.
* document 와 window 의 차이점.
$( document ).ready(function() {} 의 경우에는 DOM 로드 후 호출.
$( window ).load(function() {} 는 페이지 전체..(image , iframe 등..) 로드 후 호출 되는 차이가 있다.
document - window 순으로 실행됨.
* window.onload 의 경우 중복 선언을 해도 마지막것만 실행되는것에 비해
* $( document ).ready(function() {}의 경우는 중복 선언 및 호출이 가능함.
* document 와 window 의 차이점.
$( document ).ready(function() {} 의 경우에는 DOM 로드 후 호출.
$( window ).load(function() {} 는 페이지 전체..(image , iframe 등..) 로드 후 호출 되는 차이가 있다.
document - window 순으로 실행됨.
TEST Url : http://www.uhoon.co.kr/test/870-2.html
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<script>
$( document ).ready(function() { // DOM 로드 후 호출 됨.
alert("document loaded");
});
$( window ).load(function() { // DOM + 이미지 , iFrame 페이지 전체 로드 후 호출 됨.
alert("window loaded");
});
</script>
</head>
<body>
<iframe src="http://www.uhoon.co.kr"></iframe>
</body>
</html>
Attributes
* 속성 Get , Set
TEST Url : http://www.uhoon.co.kr/test/870-3.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<script type="text/javascript">
<!--
$(function() {
$("#getBtn").on("click", function(){
var height = $("img").attr("height");
var width = $("img").attr("width");
$("#result").html("height : " + height +"<br/>width : "+width);
});
$("#setBtn").on("click", function(){
var height = $("img").attr("height");
var width = $("img").attr("width");
$("img").attr("height",height*1.2);
$("img").attr("width",width*1.2);
});
$("#resetBtn").on("click", function(){
$("img").attr("height",140);
$("img").attr("width",200);
});
});
//-->
</script>
<body>
<div>
<img src="/files/attach/images/106/893/b0183fae643bfa50ebef8ce046e5abe8.jpg" width="200" height="140" alt="" />
</div>
<div>
<input id="getBtn" type="button" value="Get Attributes (width,height)" />
<input id="setBtn" type="button" value="Set Attributes (width,height)" />
<input id="resetBtn" type="button" value="Reset" />
</div>
<div id="result"></div>
</body>
</html>
Data Methods
$.data
test Url : http://www.uhoon.co.kr/test/138.html
요소에 값을 Get , Set
1. $.data( element, key, value )
1. $.data( element, key, value )
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>var div = $("div");
jQuery.data(div, "test", { first: 16, last: "pizza!" });
$("span:first").text(jQuery.data(div, "test").first);
$("span:last").text(jQuery.data(div, "test").last);</script>
</body>
</html> 2. $.data( element, key )
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
<script>
$("button").click(function(e) {
var value, div = $("div")[0];
switch ($("button").index(this)) {
case 0 :
value = jQuery.data(div, "blah");
break;
case 1 :
jQuery.data(div, "blah", "hello");
value = "Stored!";
break;
case 2 :
jQuery.data(div, "blah", 86);
value = "Stored!";
break;
case 3 :
jQuery.removeData(div, "blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});
</script>
</body>
</html>Utility Methods
$.trim
$.trim(" lots of extra whitespace ");$.inArray
var myArray = [ 1, 2, 3, 5 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
console.log("found it!");
}
이하 계속 추가..
