My Name is Kay....

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

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
A to Z
2013.04.05 23:36

jQuery Learning Center - 공부 공부

kay
조회 수 4236 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

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


 

이하 계속 추가.. 

?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
14 etc XML 파싱 kay 2013.03.02 6337
13 UI 객체 초기화 kay 2013.04.04 4958
12 etc 기본값 가져오기 get default value kay 2014.10.19 2323
11 UI 동적으로 추가된 객체에 datepicker() 적용하기 kay 2013.11.06 10145
10 PlugIn 스크롤 따라 다니는 배너 file kay 2013.09.14 4517
9 UI 스크롤 탑 컨트롤 - scrolltop control kay 2013.05.29 18965
8 etc 에러 리포팅 , Ajax 디버깅 ( JS , ASP ) - 오류메시지 확인하기 kay 2013.03.08 30638
7 etc 우클릭 , 셀 선택 , 드래그 방지 스크립트 kay 2014.02.17 7916
6 etc 자동 Submit 방지 및 Enter Key 체크하기 kay 2013.08.12 7826
5 PlugIn 자동 롤링 배너 Jquery 2 file kay 2013.08.07 13883
4 UI 특정 객체가 화면에 보이는지 여부 확인 kay 2015.12.14 4899
3 etc 페이지 또는 객체에서 특정 키워드 강조하기 2 kay 2014.06.14 2716
2 etc 페이지 로딩 속도 개선 - 이미지 로딩처리 kay 2013.03.02 6533
1 etc 한글/영어 byte 체크해서 자르기 1 kay 2013.11.30 9705
Board Pagination Prev 1 2 3 Next
/ 3