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!"); }
이하 계속 추가..