posted by 방랑군 2012. 1. 8. 21:36

출처 : http://snowple.tistory.com/355

+ 이벤트 등록(live)
.live() 은 .bind()를 기초로 엘리먼트에 이벤트 핸들러 함수를 연결할 때 몇가지 기능을 추가한 함수.
보통 Ajax등으로 동적으로 생성된 엘리먼트에 대해서는 .bind()함수를 통해 이벤트를 추가해 주지 못한다. 따라서 live() 함수는 동적으로 생성된 엘리먼트에 대해서도 이벤트를 추가해 주는 기능을 가지고 있다.

$('#id').live('click', function(e) {

/* TODO */

});


등록할 수 있는 이벤트 타입
- click
- dblclick
- keydown
- keypress
- keyup
- mousedown
- mousemove
- mouseout
- mouseover
- mouseup


+ 이벤트 등록(bind)

$('#id').bind('click', function(e) {

/* TODO */

});




jQuery 셀렉터 정리


+ 선택

$('div') /* 문서 안의 모든 div를 선택 */
$('#myid') /* id="myid" 인 유일한 엘리먼트를 선택 */
$('.myclass') /* 클래스가 class="myclass" 인 엘리먼트를 선택 */
$('p#myid') /* id가 myid 이면서 p 태그인 유일한 엘리먼트를 선택 */
$('a img') /* <a> 엘리먼트의 하위 엘리먼트들 중에서 <img> 를 가진 엘리먼트를 선택 */
$('#main p') /* id가 main인 하위 엘리먼트들 중에서 <p> 태그를 가진 엘리먼트를 선택 */
$('li > ul') /* <li> 엘리먼트의 하위 엘리먼트들 중에서 <ul>인 엘리먼트들을 선택 */
$('[name=myname]') /* name의 속성값이 myname인 엘리먼트를 선택 */
$('a[href=address]') /* <a>를 가진 엘리먼트에서 속성 href가 address인 것을 선택 */



+ 폼 셀렉터

$(':input') /* 모든 폼 엘리먼트(<input>, <select>, <textarea>, <button>)을 선택 */
$(':text') /* 모든 텍스트 필드(<input type="text">) 를 선택한다. */
$(':radio') /* 모든 라디오버튼 필드(<input type="radio">) 를 선택한다. */
$(':checkbox') /* 모든 체크박스 필드(<input type="checkbox">) 를 선택한다. */
$(':checked') /* 체크된 체크박스 또는 라디오버튼 엘리먼트를 선택 */



+ 사용자 정의 셀렉터

$('li').filter(':even').css('background-color', 'red') /* <li> 태그 중에서 짝수번째 라인은 빨간색 배경 지정 */
$('li:eq(2)') /* 3번째 <li>를 선택 */
$('.myclass:eq(1)') /* 클래스명이 myclass인 엘리먼트 가운데 2번째 엘리먼트를 선택 */
$('li').eq(2).css('background-color', 'red') /* <li> 태그중에서 2번째 태그에 배경을 빨간색을 지정 */



+ 찾기

$('#conditions').find('li') /* id가 conditions인 하위 모든 엘리먼트들 중에서 <li> 태그를 가진 것 선택 */
$('li').prev() / $('li').prevAll()
$('li').next() / $('li').nextAll()



+ 체크박스의 값을 콤마(,)로 만들기

$(':checkbox').map(function() {

return this.id;

}).get().join(',');
>> 4,5,8




DOM 처리


+ 기본속성 설정

$('#check_input').attr('checked', false) /* 체크해제 */
$('#check_input').attr('title', 'mytitle') /* id가 check_input인 엘리먼트의 title 속성을 "mytitle"로 변경 */
$('#check_input').attr({

alt: 'test',
title: 'test'

});
if ($('#save').prop('checked') == true) {

/* id가 save인 엘리먼트가 체크된 상태 */

}
.width() /* 길이 설정 */



+ 객체 생성

var odv = $(document.createElement('div'));
odv.attr('id', 'test');
odv.addClass('ui-state-condition');



+ 입력과 선택

.html()
.text()
.val()

$('input:text.item').val(function() {

return this.value;

});
.index() /* 몇번째 엘리먼트인지 숫자로 반환 */




AJAX


+ ajax

$.ajax({

type: "POST",

url: "histogram.php",
data: {key : value, key1: value1},
dataType: "html",
beforeSend: function() { },
success: function(res, textStatus) {

$('#id').html(res);

}

});



+ load

$('#id').load('condition.php', {key: value, key1: value1}, function() {

/* 로딩 성공했을 때 */

}); 
posted by 방랑군 2012. 1. 8. 21:28
1. jQuery 개요
라이브러리다운로드 - www.JQuery.com
특징 : DOM 엘리먼트 셀렉터
       DOM : HTML, XML을 제어
       Ajax지원
       Plugin 지원
       단순화된 이벤트처리
       브라우저별 호환성


사용법
헤드태그안에 삽입
<script type="text/javascript" src="<%=cp%>/data/js/jquery-1.6.2.min.js"></script>
//src=라이브러리를 추가한 곳
<script type="text/javascript">
//작성

</script>






2. Core

태그접근 : $("a"), $("div")
클래스접근 : $(".클래스명), $("태그.클래스명")
ID접근 : $("#id")   ---> document.getElementById("id")  와 같음
중첩구조 : $("#id").find("li") => $("#id li")으로 가능



3. Selectors(선택자)

기본선택자
* 모든 요소와 매칭
E 모든 E요소와 매칭
E F E의 자손이고 F인 요소와 매칭
E>F E의 자식이고 F인 요소와 매칭
E+F E의 바로 다음형제인 F요소와 매칭
E~F E가 바로 이전형제인 F요소와 매칭
E:has(F) F를 최소 하나의 자손으로 가지고 있는 E요소와 매칭
E.c c라는 클래스를 가진 E요소와 매칭 (*.c나 .c와 같음)
E#i i라는 아이디를 가진 E요소와 매칭 (*#i나 #i와 같음)
E[@a]
a라는 속성을 가진 E요소와 매칭
E[@a=v] a속성값이 v인 E요소와 매칭
E[@a^=v]  a속성값이 v로 시작하는 E요소와 매칭
E[@a$=v] a속성값이 v로 끝나는 E요소와 매칭
E[@a*=v] a속성값이 v를 포함하는 E요소와 매칭

위치형선택자 : 기본선택자뒤에 쓰인다.
B:first 첫번째 B요소와 매칭
B:last 마지막 B요소와 매칭
B:first-child 첫번째 B요소와 매칭
B:last-child 마지막 B요소와 매칭
B:only-child B요소가 하나일 경우 B요소와 매칭
B:nth-child(n) n번째 B요소와 매칭(n:one-based)
B:nth-child(odd|even) 홀/짝수 B요소와 매칭
B:nth-child(Xn+Y) X배수 + Y인 B요소와 매칭(n:zero-based)
B:even 짝수 B요소와 매칭
B:odd 홀수 B요소와 매칭
B:eq(n) n+1번째 B요소와 매칭(n:zeno-based)
B:gt(n) n+1번째 초과 B요소와 매칭
B:lt(n) n이하 B요소와 매칭


사용자정의형 선택자
B:animated jQuery 애니메이션 메서드로 애니메이션이 활성화된 B요소와 매칭
B:button 버튼 형태(button, input[@type=submit], input[@type=reset], input[@type=button])의 B요소와 매칭
B:checkbox input[@type=checkbox]인 B요소와 매칭
B:enabled 활성화 상태인 B요소와 매칭
B:file input[@type=file]인 B요소와 매칭
B:header h1~h6인 B요소와 매칭
B:hidden 비가시 상태 또는 input[@type=hidden]인 B요소와 매칭
B:image input[@type=image]인 B요소와 매칭
B:input 입력 요소(input, select, textarea)인 B요소와 매칭
B:not(f) :(콜론)으로 시작하는 f를 제외한 B요소와 매칭
B:parent 자식요소가 있는 B요소와 매칭
B:password input[@type=password]인 B요소와 매칭
B:radio input[@type=radio]인 B요소와 매칭
B:reset input[@type=reset]인 B요소와 매칭
B:selected option요소 중 현재 선택된 B인요소와 매칭
B:submit input[@type=submit]인 B요소와 매칭
B:text input[@type=text]인 B요소와 매칭
B:visible 가시 상태인 B요소와 매칭


 ###$( html ) 
    태그를 바디안에 삽입하기
       $("<div><i>안녕하세요</i></div>").appendTo("body");

 ###eq(pos)
    선택된  pos번째 태그 선택.
    $("tr:eq(6)").css("color", "silver"); // 6번째 tr태그 색깔변경 

 ###gt(pos)
    선택된 pos이후의 모든 태그선택
    $("tr:gt(3)").css("color", "red");  // 인덱스가 3이후인것들 모두 색깔변경

 ###lt(pos)
    선택된 JQuery 오브젝트중  pos보다 앞에있는 오브젝트들을 선택.
    $("tr:lt(3)").css("color", "red");  // 인덱스가 3이전인것들 모두 색깔변경 


 ###index(subject)
    subject의 위치.
    var index = $("div").index($("div:contains('jquery')"));  //div안에서 jquery라는 element 찾기


 ###each(callback)
    
    매치되는 모든 요소에 대하여 callback 메소드 실행(루프)
    $("div").each(function(args){           <!-- div에 해당되면 -->
if(this.style.color!='blue')
this.style.color='blue';
else
this.style.color='';
    });


 ###length
    선택된 요소의 갯수.
    var n = $("div").length;  //div태그의 개수리턴

 ###size()
    선택된 요소의 갯수.
    alert( 'Size: ' + $('li').size() ); // <li>의 개수를 리턴한다.

 ###$.fn.extend( prop ) 
  플러그인만들기.
  //check, uncheck함수를 이용한 플러그인
$.fn.extend({   
check:function(){
return this.each(function(){  //each
this.checked=true;
});
},
uncheck:function(){
return this.each(function(){
this.checked=false;
});
}
});


 $("li:first").css("background", "#CCCCCC");

 $("li:first-child").css("background", "#CCCCCC");





4. Attributes(속성)
.attr() 
속성값 가져오기 : .attr(attributeName)
속성값 병경하기 : .attr(attributeName, value)
$("img").attr("src", "img/ii.jpg"); //img 요소의 src속성을 img/ii.jpg으로 변경


.removeAttr()
속성값제거
$("#name").removeAttr("disabled");


.val() 선택된 요소값 가져오기
var name = $(“#txtName”).val(); //입력된 값 가져오기
$(“#txtName”).val(“새로운 값 입력”); //값 입력하기






5. Manipulation(조작)

내용변경관련
html()        일치된 요소의 html 내용을 가져옴
html(val)      일치된 요소의 html 본문을 val 값으로 설정
text()        일치된 모든 요소의 텍스트를 가져옴.
text(val)      모든 일치된 요소의 텍스트를 val 값으로 설정
예)var text = $("div").text();
   var html = $("div").html();   

추가관련(내부) 
append(content)         일치된 요소의 내부에 content를 추가
appendTo(selector) 일치된 요소를 selector에 의해 일치된 모든 요소들 내부에 추가 
prepend(content) append(content)와 동일하며, 다만, 내부 앞쪽에 추가
prependTo(selector) appendTo(selector)와 동일하며, 다만, 내부 앞쪽에 추가

예)$("b.link").append("(클릭)");

추가관련(외부)
after(content) 일치된 요소 뒤에 content를 삽입
efore(content) 일치된 요소 앞에 content를 삽입
insertAfter(selector) 일치된 요소를 selector에 의해 일치된 모든 요소들 뒤쪽에 삽입
insertBefore(selector) insertBefore(selector)와 같으나, 요소 앞쪽에 삽입

예)$("a").after("<font>(클릭)</font>");
-><a href="http://naver.com">네이버</a><font>(클릭)</font>






6. Events

bind : 이벤트 추가
unbind : 이벤트 제거
click : 마우스 클릭시...
change : <input />, <textarea />, <select /> 요소의 값 변경시 발생하는 이벤트
dbclick : 마우스를 더블클릭 했을 경우 발생하는 이벤트
focus : 요소에 포커스 되었을 때 발생하는 이벤트
keydown : 키 입력 시 발생되는 이벤트이며, 모든 키에 대해 적용
keyup : 키 입력 후 발생되는 이벤트 입니다.
keypress : keydown 이벤트와 동일하게 키 입력 시 발생이 되지만 enter, tab등의 특수키에는 이벤트가 발생되지 않음
mousedown : 마우스 클릭 시 발생하는 이벤트
mouseenter :  선택한 요소의 영역에 마우스가 위치했을 때 발생되는 이벤트
mouseleave : 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트
mousemouse : 선택한 요소에 마우스를 클릭하면 발생하는 이벤트
mouseout : 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트
mouseover : 마우스를 올려놓으면 발생
mouseup : 마우스 클릭 후 발생되는 이벤트
scroll : HTML 문서가 스크롤 되었을 때 발생하는 이벤트ㅋ
select : 선택한 개체를 마우스를 통해 선택 하였을 때 발생하는 이벤트
submit : Submit이 일어날 때 발생하는 이벤트
hover() : 마우스가 요소 위에 위치했을 때 발생하는 이벤트
blur() : 요소에서 포커스를 잃을 경우에 발생하는 이벤트

'PP > Jquery' 카테고리의 다른 글

jQuery 이벤트 정리  (0) 2012.01.08
다른 라이브러리와 같이 쓰기  (0) 2012.01.08
jQuery Core  (0) 2012.01.08
[Jquery,CoffeeScript] 모질라 파이어폭스 Ajax. 한글 키 이벤트 처리.  (0) 2012.01.08
jQuery UI 테스트 2  (0) 2012.01.08
posted by 방랑군 2012. 1. 8. 21:27

출처 :  http://findfun.tistory.com/entry/jQuery-%EC%89%BD%EA%B2%8C%ED%95%98%EA%B8%B0-%EB%8B%A4%EB%A5%B8-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%99%80-%EA%B0%99%EC%9D%B4-%EC%93%B0%EA%B8%B0 

Javascript Library 들이 출현하면서 자바스크립트의 중요성은 비약적으로 높아졌습니다. Rich UI 를 구현함에 있어서 이 라이브러리들의 기여도는 결정적이였습니다. 풍부해진 사용자 경험(UX)을 바탕으로 웹 어플리케이션이란 용어도 등장하기 시작했습니다. 아마 앞으로는 웬만한 어플리케이션은 웹 기반이 되지 않을까 합니다.

많아진 Javascript Library 들을 같이 사용해야 하는 경우가 있습니다. 이에 jQuery는 다음과 같은 권고 사항을 제시하고 있습니다.

원문을 보시려면 여기를 클릭하세요.

GENERAL : 개요

jQuery 라이브러리와 Plugin 들은 jQuery 네임스페이스안에 종속되어 있습니다. 만약 여러분이 jQuery 외의 Prototype, MooTools, YUI 등과 같은 다른 라이브러리와 같이 사용하길 원하면 jQuery의 "전역(global)" 객체들은 jQuery 네임스페이스 안에서 사용해야 합니다.

jQuery 에서는 다음과 같이 경고(권고) 합니다. jQuery의 '$' 를 'jQuery' 로 바꿔 사용하십시요.

완전 직역이네요. ^^;; 쉽게 설명드리자면 jQuery하고 Prototype을 같이 쓰실 경우가 생기시면 jQuery의 $ 를 jQuery 라고 바꿔 쓰라는 얘기입니다. Prototype에도 $ 가 있으니까요. 아래 구체적인 예시들이 있습니다.

 

OVERRIDING THE $-FUNCTION : $ 함수를 재정의 하세요.

jQuery.noConflict() 함수를 사용한 후 그 이후부터는 $ 대신 jQuery 사용할 수 있습니다. 아래는 예제코드입니다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
  <script src="prototype.js"></script>
  <script src="jquery.js"></script>
  <script>
    jQuery.noConflict();
     
    // Use jQuery via jQuery(...)
    jQuery(document).ready(function(){
      jQuery("div").hide();
    });
     
    // Use Prototype with $(...), etc.
    $('someid').hide();
  </script>
</head>
<body></body>
</html>

6라인 이후에는 $ 대신에 jQuery 라고 사용하신 것을 보실 수 있습니다. 14라인의 $ 는 Prototype의 $ 가 됩니다. $를 Prototype에게 양보한다는 거네요. 참 착한 jQuery입니다. ^^

그런데 $ 라고 쓰다가 jQuery 라고 쓰려니 타자의 압박이 있습니다. 그래서 jQuery 는 아래와 같이 대체어(alternate names)를 사용할 수 있게 했습니다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
  <script src="prototype.js"></script>
  <script src="jquery.js"></script>
  <script>
    var $j = jQuery.noConflict();
     
    // Use jQuery via $j(...)
    $j(document).ready(function(){
      $j("div").hide();
    });
     
    // Use Prototype with $(...), etc.
    $('someid').hide();
  </script>
</head>
<body></body>
</html>

6라인을 보시면 $j 라고 변수선언을 했습니다. 그 아래 부터 jQuery 가 아닌 $j 로 사용하실 수 있습니다. $j 말고도 사용하고 싶은 대체어를 만드시면 됩니다. $findfun 이나 $jq 와 같이 말이죠.

그럼에도 불구하고 "아~ 나는 무조건 $를 써야겠다" 라고 하시는 분들을 위해서 jQuery는 또 하나의 방법을 제시합니다.(이 방법은 별로인거 같습니다.)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
  <script src="prototype.js"></script>
  <script src="jquery.js"></script>
  <script>
    jQuery.noConflict();
     
    // Put all your code in your document ready area
    jQuery(document).ready(function($){
      // Do jQuery stuff using $
      $("div").hide();
    });
     
    // Use Prototype with $(...), etc.
    $('someid').hide();
  </script>
</head>
<body></body>
</html>

9라인과 같이 jQuery 네임스페이스 안에 속한 내용들은 이전 처럼 $ 를 사용하실 수 있습니다. 11라인을 보세요. 그대로 $ 를 사용했습니다. 하지만 썩 좋은 코드는 아닌 것 같습니다.

jQuery.noConflict() 함수가 기억이 나지 않거나 실수로 기술하지 않았을 경우에는 에러를 찾기 힘들 수 있습니다. 아래 내용을 보시면 해결 방법이 있습니다.

 

INCLUDING JQUERY BEFORE OTHER LIBRARIES : jQuery 라이브러리 인클루드를 다른 라이브러리 보다 위쪽에 하세요.

jQuery 라이브러리 인클루드를 항상 제일 위쪽에 하시면 jQuery.noConflict() 함수를 기억하지 않으셔도 됩니다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
  <script src="jquery.js"></script>
  <script src="prototype.js"></script>
  <script>
    // Use jQuery via jQuery(...)
    jQuery(document).ready(function(){
      jQuery("div").hide();
    });
     
    // Use Prototype with $(...), etc.
    $('someid').hide();
  </script>
</head>
<body></body>
</html>

3,4 라인을 보시면 jquery.js 가 위쪽입니다. 그리고 코드 상에 jQuery.noConflict() 가 없는 것을 보실 수 있습니다.

 

결론적으로 jQuery 라이브러리와 다른 라이브러리들 같이 사용하시려면 아래와 같이 사용하시는 것을 적극 권장합니다.

  •  jQuery 라이브러리 인클루드를 다른 라이브러리 보다 위쪽에다 할 것.
  •  
  •  var $j = jQuery; 와 같이 대체어를 사용할 것.

 

두 가지 이상의 라이브러리를 동시에 같은 프로젝트에 사용할 일은 거의 없어 보입니다. 하지만 그런 일이 없으란 법은 없겠죠. 그런 경우를 대비해서 한번 읽고 넘어가는 것도 좋겠네요. jQuery 의 세심한 배려에 박수를 보냅니다.

자 이번 포스팅은 여기 까지입니다. 그럼 모두들 즐프하세요~. 
posted by 방랑군 2012. 1. 8. 21:23

출처 :  http://findfun.tistory.com/67 

API(Application Program Interface, 응용프로그램 인터페이스)란 어떤 응용프로그램에서 제공한 메소드들의 모음입니다. 사전적으로 해석을 해보자면 "응용 프로그램과 대화하기" 가 되겠습니다. 사람사이의 대화방법은 몸짓, 말, 글을 사용합니다. 이것들을 인터페이스라고 할 수 있습니다. 단, 서로 의미가 통해야 합니다. 즉, 사전에 정의된 해석방법으로만 대화가 가능하죠. 고개 숙여 인사를 하는 박찬호를 보고 이상하게 생각했다는 미국인들과 같이 해석의 방법이 미리 정의되지 않은 대화방법으로는 오해 또는 소통이 불가하게 됩니다.

프로그램에서도 어떤 응용프로그램에 접근하기 위해 사전에 정의된 함수들의 모음이 존재하고, 이 모음을 외부에 노출하기 위해 정리한 것이 API 라고 할 수 있습니다. 즉, API 는"내가 만든 프로그램을 사용하고 싶으면 이런저런 약속을 지켜서 사용하고, 어떤 행동을 일으키고 싶을때 사용하는 함수들을 알려줄테니 그걸로 써라"라는 문서가 됩니다.

jQuery 와 같이 잘 정리된 라이브러리는 개발자들에게 천국입니다. API 가 어렵지 않으며 관련 자료도 많은 jQuery는 문제가 발생했을 때 빠른 시간안에 해결을 할 수 있게 됩니다. 일전에 잘 사용하지 않은 산업용 PDA 에 Windows-CE 기반 프로그램을 하다가 아주 고생했던 기억이 납니다. 다시 겪고 싶지 않은 경험입니다. ^^;.

사설이 길었네요. 자~ 이제 드디어 API 를 할 수 있게 되었네요. API 에 대해 모두 쓸 예정이지만 때에 따라서는 생략도 하게 될 것 같습니다. 그나저나 얼마나 길어지게 될지.. 좀 두렵기도 한데요 ^^;;. 자 시작합니다.

Core

jQuery 의 핵심입니다. 우리가 $() 로 사용하고 있는 것에 대한 설명입니다. 실제로는 jQuery() 라고 사용해야 하지만 축약어로 $() 로 사용하고 있는 jQuery 코어에 대한 설명입니다.

원문 링크  http://api.jquery.com/category/core/

함수 목록

  • 일치하는 요소들(elements)를 사용하기 위해 CSS 선택자(selector)와 같은 문자열을 사용합니다.
  • jQuery 의 $ 변수 사용을 포기합니다.

jQuery()

함수들

 jQuery( selector, [ context ] )
  • jQuery( selector, [ context ] )
  • jQuery( element )
  • jQuery( elementArray )
  • jQuery( jQuery object )
  • jQuery()
 jQuery( html, [ ownerDocument ] )
  • jQuery( html, [ ownerDocument ] )
  • jQuery( html, props )
 jQuery( callback )
  • jQuery( callback )

jQuery( selector, [ context ] )Returns : jQuery

개요 : CSS 선택자(selector)와 일치하는 요소들(elements)을 사용하기 위한 문자열을 사용합니다.

  • jQuery( selector, [ context ] )
  • selector 선택자(selector)를 문자열로 표현
  • context DOM 요소, 문서(Document) 또는 문맥상에서 사용되는 jQuery
  • jQuery( element )
  • element jQuery 객체에 속한 DOM 요소
  • jQuery( elementArray )
  • elementArray jQuery 객체에 속한 DOM 요소들의 배열
  • jQuery( jQuery object )
  • jQeury object 복사를 위한 jQuery 객체
  • jQuery()

jQuery() - $() 로 사용하고 있는 - 는 제공된 선택자(selector)를 검색하고 그 요소(elements)를 jQuery 객체화 합니다. 직역이 어렵네요. 즉, 우리가 제시한 선택자를 문서상에서 찾아서 jQuery() 객체로 만들어 줍니다. 그래야 jQuery 의 함수와 속성들을 사용할 수 있으니까요. 아래와 같이 선택자(selector)를 문자열로 적어주면 해당 문서에서 이 문자열과 일치하는 요소들(elements)을 찾아 jQuery 객체로 만들어 준다는 얘기입니다.

$('div.foo');

 Selector Context : 선택자 사용방법

기본적으로 선택자를 찾기 위해서 문서의 처음부터 검색을 합니다. 하지만 때에 따라서는 원하는 부분만 찾을 필요도 있습니다. 성능이 최우선이기 때문이죠. 이런 경우를 위해서 $() 함수의 2번째 인자를 이용할 수가 있습니다. 아래 예제는 div.foo 가 클릭되었고 그 요소의 태그가 span 일 경우 bar 라는 클래스를 span 에 추가하는 구문입니다.

$('div.foo').click(function() {
  $('span', this).addClass('bar');
});

원하는 부분만 선택해서 검색할 수 있는 기능이 있다는 얘기입니다. 위 예제 중 $('span', this) 는 $(this).find('span') 과 같은 의미입니다. 즉, find() 함수를 사용하여 원하는 요소를 찾아서 어떤 일을 진행할 수 있습니다. 실제로 전체 문서를 다 찾아서 처리하는 방식은 지양해야 하는 방식입니다. 하지만 꼭 써야 할 경우도 생길수도 있지만 가급적이면 다른 방법을 강구해야 할 것 같습니다.

 Using DOM elements : DOM 요소 사용하기

이미 찾은 DOM 요소(element) 또는 요소들(elements)을 이용하여 jQuery 객체를 만드는 방법은 2~3가지 방법을 사용할 수 있습니다. 시스템 이벤트에 의해 호출되는 함수(callback function)를 통해 전달된 그 요소(an element)를 이용하여 jQuery 함수들을 쉽게 사용하려면 "this" 키워드를 사용하면 됩니다. 아~ 영어 무지 딸립니다. 죽겠습니다. ㅜ,.ㅡ;; 유추해 보자면, 기본적으로 DOM 요소가 가진 특정 콜백함수들이 호출되면 그 이벤트를 전달한 요소(element)를 알아낼 수 있는데요. 그 요소(element)로 jQuery 함수를 사용하고 싶다면 "this" 키워드를 사용하면 된다라는 얘기인 것 같습니다. 그럴 듯 한가요? ㅎㅎ;;; 아래 예제를 보시죠.

$('div.foo').click(function() {
  $(this).slideUp();
});

위 예제는 'div.foo' 요소 클릭이라는 시스템 콜백함수가 호출되면 그 요소를 slideUp() 이라는 jQuery 함수를 사용해서 표현하라 라는 의미입니다. slideUp() 이 뭐하는 함수인지는 일단 제껴두고, 이 클릭 이벤트가 발생된 요소를 그 slideUp() 을 하기 위해서 $(this) 를 사용했다는 점을 봐달라는 겁니다. 여기에서 this 가 바로 $('div.foo') 로 찾아낸 DOM 요소의 jQuery 객체가 된다는 얘기입니다. 와~ 말 무지 어렵습니다. 에혀~. 원문에서는 아래의 부가 설명이 있습니다.

이 예제는 어떤 요소가 클릭(clicked) 되었을 때 슬라이딩 에니메이션(sliding animation)을 발생시킨다는 의미가 내포되어 있습니다. 이 조정자(handler receives : 클릭된 요소를 의미)는 순수한 DOM 요소(element)이며 이 요소를 $(this)를 이용하여 jQuery 객체화를 하게 됩니다. 이 요소(위에서 조정자)가 jQuery 의 함수를 사용하기 위해서는 jQuery 객체화가 되어야 합니다. 즉, 순수 DOM 요소는 jQuery 함수를 사용할 수 없기 때문이죠.

또한, XML 데이터를 Ajax 를 통해서 전달 받은 뒤, $() 함수를 이용해서 쉽게 jQuery 객체화가 가능합니다. jQuery 객체화가 이루진 후에는 이 XML 구조(structure)에서 우리는 찾고자 하는 요소를 jQuery 의 .find() 함수나 DOM 의 검색 함수들을 이용해서 쉽게 찾아 낼 수 있습니다.

예 제
p 태그를 하위 요소로 가지고 있는 div 를 찾아서 테두리에 선을 그린다.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <p>one</p> <div><p>two</p></div> <p>three</p>
<script>$("div > p").css("border", "1px solid gray");</script>

</body>
</html>

미리보기

jQuery( html, [ ownerDocument ] )Returns : jQuery

개요 : 순수한 HTML(raw HTML) 문자열을 이용하여 동적인(on the fly) DOM 요소를 만듭니다.

  • jQuery( html, [ ownerDocument ] )
  • html 동적인 HTML 문자열입니다. XML 이 아닌 HTML 만 분석합니다.
  • ownerDocument 만들어진 새 요소(new elements)가 위치한 문서
  • jQuery( html, props )
  • html 단독, 독립적인 HTML 요소로 정의할 수 있는 HTML 태그 문자열 (예 : <div/> 또는 <div></div>)
  • props 만들어진 새 요소의 속성, 이벤트, 함수들

HTML 문자열을 가지고 DOM 요소를 만들어 낼 수 있습니다.

 Creating New Elements : 새 요소 만들기

만약 당신이 $() 함수에 문자열을 전달했다면, jQuery 는 그 문자열에 태그의 요소(<tag...> 와 같은)가 있는지 확인해 봅니다. 없다면 위의 예처럼 선택자 표현(selector expression)이라 판단하고 처리를 하게 됩니다. 하지만 문자열에 HTML 태그가 있다면 jQuery 는 그 태그에 해당하는 DOM 요소를 만들어 문서에 추가하게 됩니다. 추가된 요소(elements)는 jQuery 객체 형태를 유지하기 때문에 jQuery 의 많은 함수들을 쉽게 사용할 수 있게 됩니다. 아래 예제와 같은 구문도 jQuery 객체로 인식하여 jQuery 함수들을 사용할 수 있게 됩니다.

$('<p id="test">My <em>new</em> text</p>').appendTo('body');

위 예제와 같이 속성이 없는 하나의 태그가 아닌 복잡한 수준이라면 마치 innerHTML 을 사용하는 것과 같이 동적으로 요소를 추가하게 됩니다. 더 들여다 보자면, jQuery 는 전달된 HTML 태그들을 <div>를 만들어서 그 안에 innerHTML 을 이용하여 위치(sets) 시키게 됩니다. 즉, div 태그를 임의로 만들고 그 안에 전달된 태그 문자열을 DOM 요소로 추가한다는 얘기입니다. 만일 단순한 하나의 태그로 구성된 문자열 - $('<img />> 또는 $(<a></a>) 와 같은 - 이라면 jQuery 는 JavaScript의 createElement() 함수를 이용하여 새 요소를 만들어 내게 됩니다.

복잡한 수준의 HTML 태그를 추가해야 할 일이 생기기도 하지만 HTML 소스가 정확하게 복사되지 않는 브라우져들도 있습니다. 예를 들어 인터넷 익스플로러 8 이전의 버젼들은 모든 절대 경로(absolute URLs)를 href 속성으로 만들어 버리고 IE 9 이전 버젼들은 HTML5 의 신규 요소들을 정확하게 처리하지 못합니다.

따라서 안전하게 크로스 브라우징이 되려면 웹 표준(well-formed)을 지켜야만 합니다. 태그들은 반드시 닫는 태그와 함께 사용해야 합니다.

$('<a href="http://jquery.com"></a>');

반드시 위와 같이 사용하거나 아래와 같이 사용해야 합니다.

$('<a/>');

jQuery 1.4 이후부터는 두번째 인자를 통해서 속성들을 부여할 수 있습니다. 이 인자에는 .attr() 함수에서 전달할 수 있는 인자를 포함한 속성 집합을 모두 사용할 수 있습니다. 게다가 사용자 이벤트 외에도 val, css, html, text, data, width, height, offset 과 같은 jQuery 의 함수도 추가할 수 있습니다. 참고로 인터넷 익스플로러에 input 태그를 추가한 후에 그 타입을 속성으로 변경 처리할 수는 없습니다. 즉, 체크박스를 추가하고 싶다면 반드시 '<input type="checkbox" />'와 같이 사용해야 합니다.(라고 되있지만 제가 테스트해 결과 모두 다 정상적으로 되더군요. 이 부분 해석을 발로 해서 뭔가 잘못된 것 같습니다. 혹시 관련해서 알려주실 분 있으시면 대 환영입니다. lol )

예 제
div 태그와 그 안의 모든 내용들이 동적으로 만들어 지고, body 요소에 추가됩니다. 내부적으로 이런 요소가 만들어지고 그 안에 innerHTML 속성을 사용해 마크업이 됩니다. 그러니까 이것은 꽤 유연하지만 한계도 같이 지니고 있습니다.(무슨 소리인지 모르겠습니다. ^^;;)

$("<DIV>
<P>Hello</P></DIV>").appendTo("body")

예 제
2번째 인자인 속성 맵을 이용하여 DOM 요소 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("<div/>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");
 
$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

미리보기

위 소스를 보시면 1라인에 <div/> 라고 되어 있는 걸 보실 수 있습니다. 이렇게 하던가 <div></div> 이렇게 사용해야 한다는 겁니다. 그리고 속성들과 메소드들을 얼마든지 추가할 수 있습니다. 위 "Click me" 는 jQuery 의 toggleClass 함수를 사용하여 글자색을 클릭 시마다 변경하는 함수를 집어 넣었습니다. 아래 input 은 포커스가 들어오면 active 클래스를 토글하게 됩니다. 참 유용한 내용입니다.

jQuery( callback )Returns : jQuery

개요 : 문서가 모두 읽혀지면(finished loading) 호출될 함수를 지정합니다.

  • jQuery( callback )
  • callback 이 함수는 DOM 이 준비가 되면 실행됩니다.

이 함수는 $(document).ready() 와 같은 동작을 합니다. 혹시 $() 함수가 잘 동작되지 않을 때를 대비하여 사용하면 좋습니다. 즉, $(document).ready() 함수가 동작하지 않았을 때를 대비하여 jQuery( function($) {}); 와 같이 사용하시면 됩니다.

jQuery.noConflict()

이 함수는 jQuery() 의 별칭인 $() 의 사용을 더 이상 하지 않을 때 사용하게 됩니다. 이 내용은 이전 포스팅으로 대체하겠습니다.

http://findfun.tistory.com/entry/jQuery-쉽게하기-다른-라이브러리와-같이-쓰기  [새창으로] [바로이동]

 

우와 이번 포스팅 진짜 깁니다. 게다가 이 글을 쓰는 동안 베타버젼의 메소드가 하나 더 추가되었더 군요. ㅡ,.ㅡ;; jQuery.addClass() 라는 녀석입니다. 아직 베타여서 기술하지 않았습니다. 힘들어서 안한거 아닙니다. 절대로. 너무 길어서 나누어 할까 하다가 같은 페이지에서 볼 수 있어야 겠다고 생각이 들었습니다. 너무 길어져 버려서 스크롤 내리는 데만도 한참이네요. ㅡㅡ;;

어찌됬든 jQuery 의 핵심(core)를 들여다 봤습니다. 실제 사용하는데 있어서 이 내용을 몰라도 관계 없습니다. 그래도 관심있게 본 거랑은 다르겠죠. 휴우~ 다음번 부터는 내용이 좀 짧았으면 하네요.

그럼 즐프하세요. 
posted by 방랑군 2012. 1. 8. 20:56

출처 :   http://www.dorajistyle.pe.kr/2011/12/jquerycoffeescript-ajax.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+DelightOnTheSimpleLife+%28%EC%9B%94%ED%92%8D%EB%8F%84%EC%9B%90%28%E6%9C%88%E9%A2%A8%E9%81%93%E9%99%A2%29+-+Delight+on+the+Simple+Life.%29 

[Jquery,CoffeeScript] 모질라 파이어폭스 Ajax. 한글 키 이벤트 처리.

모질라 파이어폭스에서 Ajax 한글 키 이벤트를 처리하는 Jquery,커피스크립트 코드입니다.

모질라 파이어폭스 Ajax. 한글 키 이벤트 처리.(Jquery Mozilla Force Keyup CoffeeScript module)

저는 주 브라우저로 모질라 파이어폭스를 사용합니다.
Ajax 모듈을 만드는데, 한글을 입력하면 못 알아듣더군요.
http://javascript.info/tutorial/keyboard-events에서 키 이벤트 체크를 해 봤습니다.
한글 키가 눌리면 Keydown(Keycode=229) 이벤트가 한 번만 발생하고,
Keyup 이벤트는 발생하지 않습니다.
중국어,일본어를 테스트 해보니 이 역시 같은 현상이군요.
한글과 다름없이 229키 코드가 딱 한번 발생합니다.
아마도 다른 블록형 문자 또한 같은 이벤트를 발생 시킬 거라 예상됩니다.
모질라에서 한글 키 이벤트를 부드럽게 처리하는 커피 스크립트 모듈을 만들었어요.
모질라 파이어폭스 이용자도 한글을 편하게 쓸 권리가 있으니까요.
필요하신 분은 마음껏 가져다 쓰세요.

커피스크립트 버전(Jquery Mozilla Force Keyup module  - Coffeescript version)



  
# Mozilla Force Keyup CoffeeScript module
# by 月風(http:://dorajistyle.pe.kr)
# How to use
# mozillaForceKeyup(”inputid”)
# in HTML.
# <input id=”input
id”>
mozillaForceKeyup = (targetId) ->
  if jQuery.browser.mozilla
    isIntervalRunning = null
    target = '#'+targetId
    $(target).bind 'keydown',(e) ->
      if e.which == 229
        forceKeyup = () ->
          $(target).trigger('keyup')
        if not isIntervalRunning
          isIntervalRunning = setInterval forceKeyup, 100

    $(target).bind 'blur',(e) ->
      if isIntervalRunning
        clearInterval isIntervalRunning
        isIntervalRunning = null



자바스크립트 버전(Jquery Mozilla Force Keyup module - Javascript version)



// Mozilla Force Keyup Javascript module
// by 月風(http:://dorajistyle.pe.kr)
// How to use
// mozillaForceKeyup(”inputid”)
// in HTML.
// <input id=”input
id”>

mozillaForceKeyup = function(targetId) {
var isIntervalRunning, target;
if (jQuery.browser.mozilla) {
isIntervalRunning = null;
target = '#' + targetId;
$(target).bind('keydown', function(e) {
var forceKeyup;
if (e.which === 229) {
forceKeyup = function() {
return $(target).trigger('keyup');
};
if (!isIntervalRunning) {
return isIntervalRunning = setInterval(forceKeyup, 100);
}
}
});
return $(target).bind('blur', function(e) {
if (isIntervalRunning) {
clearInterval(isIntervalRunning);
return isIntervalRunning = null;
}
});
}
};

 

'PP > Jquery' 카테고리의 다른 글

다른 라이브러리와 같이 쓰기  (0) 2012.01.08
jQuery Core  (0) 2012.01.08
jQuery UI 테스트 2  (0) 2012.01.08
jQuery 이벤트 테스트 2  (0) 2012.01.08
jQuery 이벤트 테스트 1  (0) 2012.01.08
posted by 방랑군 2012. 1. 8. 20:54

1. test8.jsp

01 <%@ page contentType="text/html; charset=UTF-8"%>
02 <%
03 String cp = request.getContextPath();
04 %>
05 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
06 <html>
07 <head>
08 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
09 <title>Insert title here</title>
10
11 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
12 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
13 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
14
15 <script>
16 $(document).ready(function() {
17 $("#accordion").accordion();
18 });
19 </script>
20
21 </head>
22 <body style="font-size:62.5%;">
23 <h1>jQuery 테스트</h1>
24
25 <div id="accordion">
26 <h3><a href="#">Section 1</a></h3>
27 <div>
28 <p>
29 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
30 ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
31 amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
32 odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
33 </p>
34 </div>
35 <h3><a href="#">Section 2</a></h3>
36 <div>
37 <p>
38 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
39 purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
40 velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
41 suscipit faucibus urna.
42 </p>
43 </div>
44 <h3><a href="#">Section 3</a></h3>
45 <div>
46 <p>
47 Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
48 Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
49 ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
50 lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
51 </p>
52 <ul>
53 <li>List item one</li>
54 <li>List item two</li>
55 <li>List item three</li>
56 </ul>
57 </div>
58 <h3><a href="#">Section 4</a></h3>
59 <div>
60 <p>
61 Cras dictum. Pellentesque habitant morbi tristique senectus et netus
62 et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
63 faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
64 mauris vel est.
65 </p>
66 <p>
67 Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
68 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
69 inceptos himenaeos.
70 </p>
71 </div>
72 </div>
73 </body>
74 </html>

실행 결과

[출처] jQuery UI 테스트 1|작성자 엄보

'PP > Jquery' 카테고리의 다른 글

jQuery Core  (0) 2012.01.08
[Jquery,CoffeeScript] 모질라 파이어폭스 Ajax. 한글 키 이벤트 처리.  (0) 2012.01.08
jQuery 이벤트 테스트 2  (0) 2012.01.08
jQuery 이벤트 테스트 1  (0) 2012.01.08
jQuery UI 테스트 2  (1) 2012.01.08
posted by 방랑군 2012. 1. 8. 20:49

1. test2.jsp

01 <%@ page contentType="text/html; charset=UTF-8"%>
02 <%
03 String cp = request.getContextPath();
04 %>
05 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
06 <html>
07 <head>
08 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
09 <title>Insert title here</title>
10
11 <!-- jQuery 사용시 jquery-1.X.X.min.js 파일 연결 필수 -->
12 <script type="text/javascript" src="<%=cp%>/js/jquery-1.6.1.min.js" ></script>
13
14 <script type="text/javascript">
15 //jQuery는 $(선택자) 또는 jQuery(선택자)로 시작한다.
16 //$() 또는 $(document).ready()는
17 //문서가 사용 가능한 시점에 자동으로 인식해서 실행됨.
18 //$(function() { })와
19 //$(document).ready(function() { })는 같은 표현
20 $(document).ready(function() {
21 alert("Hello, JavaScript");
22 });
23 $(document).ready(function() {
24 alert("Hello, jQuery");
25 });
26 </script>
27
28 </head>
29 <body>
30 <h1>jQuery 테스트</h1>
31 jQuery에서 동일한 이벤트 등록시 둘 다 실행됨.
32 </body>
33 </html>

실행 결과



posted by 방랑군 2012. 1. 8. 20:48
01 <%@ page contentType="text/html; charset=UTF-8"%>
02 <%
03 String cp = request.getContextPath();
04 %>
05 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
06 <html>
07 <head>
08 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
09 <title>Insert title here</title>
10
11 <!-- jQuery 사용시 jquery-1.X.X.min.js 파일 연결 필수 -->
12 <script type="text/javascript" src="<%=cp%>/js/jquery-1.6.1.min.js" ></script>
13
14 <script type="text/javascript">
15 //익명 함수
16 //동일한 이벤트가 동시에 있는 경우 나중에 작성한 부분만 실행됨.
17 window.onload=function() {
18 alert("Hello, JavaScript");
19 };
20 window.onload=function() {
21 alert("Hello, jQuery");
22 };
23 </script>
24
25 </head>
26 <body>
27 <h1>jQuery 테스트</h1>
28 자바스크립트에서 동일한 이벤트 등록시 나중에 작성한 부분만 실행됨.
29 </body>
30 </html>

실행 결과

posted by 방랑군 2012. 1. 8. 20:46
01 <%@ page contentType="text/html; charset=UTF-8"%>
02 <%
03 String cp = request.getContextPath();
04 %>
05 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
06 <html>
07 <head>
08 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
09 <title>Insert title here</title>
10
11 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
12 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
13 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
14
15 <script>
16 $(document).ready(function() {
17 $("#dialog").dialog();
18 });
19 </script>
20
21 </head>
22 <body style="font-size:62.5%;">
23 <h1>jQuery 테스트</h1>
24
25 <div id="dialog" title="Dialog Title">A dialog is a floating window that contains a title bar and a content area.
26 The dialog window can be moved, resized and closed with the 'x' icon by default.
27 If the content length exceeds the maximum height, a scrollbar will automatically appear.
28 A bottom button bar and semi-transparent modal overlay layer are common options that can be added.
29 A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default.
30 If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).
31 dialog('open'). To close it, use $(foo).dialog('close'). A more in-depth explanation with a full demo is available on the Nemikor blog.
32 </div>
33
34 </body>
35 </html>

실행 결과

[출처] jQuery UI 테스트 2|작성자 엄보

posted by 방랑군 2012. 1. 4. 04:02
jQuery로 Textbox에 값을 가져오고 채우기 위해서는 .val() 함수를 이용한다.


1. 채우기
jQuery("#textbox id").val("abcd");

2. 가져오기
jQuery("#textbox id").val(); 

출처 : http://blog.naver.com/tjjoker?Redirect=Log&logNo=100121652807

ASP.NET 컨트롤 ID제어하기 

============================================================

참고 : * jQuery JavaScript Library v1.4.4
 * http://jquery.com/

내용 : $("[id$='subject']").eq(1)  사용법 인지

 
 $(#"아이디풀네임") 을 적어서 접근을 하지만,

 id$='아이디일부명' 으로 접근이 가능하다.  단 이름이 AA 면  1_AA 등은 가능하지만 AA_ 식으로는 안된다는것이다.

즉, *AA는 되지만 AA* 는 같은 이름으로 인지를 못한다.

일단 같은이름으로 인지가 되면, jQuery은 .eq(인덱스) 를 통해 해당 컨트롤에 접근이 가능하다.

 

 

 

[참고] 컨트롤 존재여부 판단

$("[id$='chk_ItemId']").length 식으로 length 를 하면 없는 객체도 0으로 반환을하므로

존재 여부 판단 가능하다.

======================================================================================

<%@ Page Language="C#" %>

<script src="/jQuery/jquery.js" type="text/javascript"></script>
 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>제목 없음</title>
<script type="text/javascript">
    
    // TEST일 :  2011 - 02 - 09
    // 참고 URL http://cafe.naver.com/jquerymytour.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=64
     function test()
     {     
        //id$='형식으로 적으면' 해당 리스트가 속해있는 이름들을 찾는다. 
        
        //1.서버 텍스트 박스 값 가져오기 
        alert("1. 서버 텍스트 박스 값 >>" +$("[id$='_subject']").val());
        
        //2. 서버 텍스트 박스 값 변경
        $("[id$='_subject']").val("변경"); // 2개다 변경됨 (txt_subject1 변화없음) 
        // _subject2 면 제외댐, 앞은 아무거나 상관없음. 뒤에가 동일한 이름인 모든것을 검색함 ,동일한이름은 배열로저장되어접근가능
        
        //////////////////////////////////////////////////////////////////              
        
        alert("2. 서버 텍스트 박스 값 >>" +$("[id$='_1_TextBox']").val());// _1_TextBox 의값 
        alert("3. 서버 텍스트 박스 값- 배열 1번째값  >>" +$("[id$='_TextBox']").eq(0).val())
        alert("4. 서버 텍스트 박스 값- 배열 2번째값 >>" +$("[id$='_TextBox']").eq(1).val())
        
        //////////////////////////////////////////////////////////////////              
        alert("5. 서버 텍스트 박스 값- 배열 2번째값  >>" +$("[id$='subject']").eq(1).val()) //변경나옴
        alert("6. 서버 텍스트 박스 값- 배열 3번째값>>" +$("[id$='subject']").eq(2).val()) //undefined 나옴 (txt_subject1은 배열로 인식이안됨)
        alert("7. 서버 텍스트 박스 값- 배열 0번째값  >>" +$("[id$='subject']").val() + "=" + $("[id$='subject']").eq(0).val())
        
        var a = $("[id$='subject']");
        alert("배열갯수" + a.length);
        
        // $("#<%=txt_subject.ClientID%>").val();로 작업해도 무방
     }
        </script>
        
</head>
<body>
    <form id="form1" runat="server">

    <asp:Button ID="Button1" OnClientClick="test()"  runat = "server"/>
    s<br />
    <asp:TextBox ID="txt_subject" runat="server"  class="intstyle1" style="width:310px;" ></asp:TextBox>
    <asp:TextBox ID="tx2t_subject" runat="server"  class="intstyle1" style="width:310px;" ></asp:TextBox>
    <asp:TextBox ID="txt_subject1" runat="server"  class="intstyle1" style="width:310px;" Text = "아무변화없음" ></asp:TextBox>
    <br />
    <asp:TextBox ID="_1_TextBox"  runat="server"  class="intstyle1" style="width:310px;" Text = "1" ></asp:TextBox>
    <asp:TextBox ID="_2_TextBox" runat="server"  class="intstyle1" style="width:310px;" Text = "2"></asp:TextBox>
    
    </form>
</body>
</html>

 

'PP > Jquery' 카테고리의 다른 글

[Jquery,CoffeeScript] 모질라 파이어폭스 Ajax. 한글 키 이벤트 처리.  (0) 2012.01.08
jQuery UI 테스트 2  (0) 2012.01.08
jQuery 이벤트 테스트 2  (0) 2012.01.08
jQuery 이벤트 테스트 1  (0) 2012.01.08
jQuery UI 테스트 2  (1) 2012.01.08