jQuery Learning Center - 공부 공부 - Jquery API

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 순으로 실행됨.

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 )

<!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!");
}

이하 계속 추가..

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

jQuery Learning Center - 공부 공부

단축키

단축키

jQuery Formatnumber , 콤마처리

기본값 가져오기 get default value

페이지 또는 객체에서 특정 키워드 강조하기

FadeIn , FadeOut 을 이용한 간단한 메인 배너 이미지 노출.

Jquery 로 defaultValue 읽어오기

$.trim(str) trim...

readonly , disabled 지정하기