jquery filter() 메소드

jQuery/jQuery메소드 2010. 2. 19. 10:30

jquery filter() 메소드

filter()
filter()메소드는 영어 해석그대로 필터역할을 한다.선택한것에 접근 할때 그 입력값에 일치하는 엘리먼트를 가르킨다

나 말고

나를 집어주시요~

이 때 다음과 같이 사용하면

$('p').filter('#test').text();

나를집어주시오를 선택하게 된다. 순서는 다음과 같다.

  1. $('p') : p라는 엘리먼트에 접근
  2. .filter('#test') : 그중 test라는 아이디를 가진것을 선택
  3. .text() : 그리고 텍스트를 반환

설정

트랙백

댓글

jquery end() 메소드

jQuery/jQuery메소드 2010. 2. 18. 20:55

jquery end() 메소드

원문은 여기에서 볼 수있다http://api.jquery.com/end/

.end()
end() 메소드는 현재의 엘리먼트 바로 앞의 엘리먼트를 지칭한다. 다음예제를보자

Hm..

this is the test

$(document).ready(function() {
			alert($('p').filter('#test').end().text());
		});

스크립트 소스에서 접근순서를보자

  1. $('p') : p엘리먼트에 접근
  2. .filter('#test') : #test라는 아이디에 접근
  3. .end() : 한차례앞의 것에 접근한다 따라서 p에 접근하게 된다
  4. alert($('p').filter('#test').end().text()); 소스는 p에리먼트안의 텍스트 Hm..this is the test를 출력시킨다.

체이닝(chaining)

end 함수가 유용한 것은 여러번사용하여 어떤 엘리먼트를 재지정 할 필요없다는 점이다. 다음예제를보자

  
$('form ')
    .filter('.required').text( )
     .end().end()
    .filter('.conditional').text();

$('form ')에 대해서 end 함수를 사용하여 접근 하는 방법을 짜는 소스를 줄여주고있다. 위의 것이 의미하는 바는 다음과 같다.

  
$('form ')
    .filter('.required').text( );
$('form ')    
    .filter('.conditional').text();

아래 소스를 보면은 접근하기 위해 $('form ')를 두번이나 사용했다.end를 사용하면 이럴 필요없다. 또 여러번 사용가능하기에 바로 앞의것만 아닌 맨 앞의것도 선택할 수 있는것이다. 따라서 .end().end()$('form ') 를 지칭한다.

이런 end함수의 기능을 체이닝(chaining)이라하며 jQuery의 장점중 하나이다


설정

트랙백

댓글

jQuery 기능적 폼(form) 만들기

jQuery/DOM&jQuery 2010. 2. 18. 19:59

jQuery 기능적 폼(form) 만들기

jQuery 이용하여 좀더 기능적으로 form을 만들어보자.기본적인 폼의코드는 다음과 같다

이름을입력할 input엘리먼트는 클래스명을required 그리고 나머지들은 클래스명을 conditional로 주었다.이코드를 다음과 같이 수정할것이다.

  • legend엘리먼트를 다른 엘리먼트로 대체하여 좀더 편리하게 css로 꾸미게 한다
  • 반드시 입력할 이름란에 '*'를 또 다른 입력란에는 '**'를 필수, 선택 대신으로 대체시킨다
  • 필요한 선택입력 항목 박스를 클릭시 텍스트 입력 박스가 보이도록 또 감추도록한다.

엘리먼트 수정

legend엘리먼트는 css로 꾸미기 까다로운 것중하나다. 표준을 지키기위해선 써야하고 꾸미기위해서 바꾸자니 까다롭다. 따라서 스크립트를 이용해서 대체시켜보자

 $('legend').each(function(index) {
 //문서전체에서 legend에 접근하여
  $(this).replaceWith('

' + $(this).text() + '

'); //찾아낸것을 h3엘리먼트로 바꾸어준다. });

위의 소스는 legend엘리먼트를 h3에리먼트로 대체시켜주고 있다. 함수는.replaceWith()를 사용하고있다.each를 사용한것은 여기서는 하나의 폼만 사용해서보여주고있지만 여러개를사용할때 공통으로 검사하고 적용해 주기 때문이다. css로 바탕색은 분홍 글자색은 흰색으로 해보자

h3{ background:#fcc; color:#FFF;}

아스테리크로 대체

.replaceWith()함수로 대체시킬수도있지만 차후의 기능적 사용여부와 또 위에 별도표시를위해 변수로 지정하고 바꾸어줄것이다.

  var requiredFlag = ' * ';
  var conditionalFlag = ' ** ';
  $('form :input')
   .filter('.required')
   .next('span').text(requiredFlag)
   .end().end()
   .filter('.conditional')
   .next('span').text(conditionalFlag);

위의 소스는 먼저 아스테리크를 변수로지정해주고 그 다음바꾸어줄 텍스트를 찾아가고있다.주요시 볼점은 .end()함수이다.end함수는 다시 이전요소에 접근하는 함수이다.따라서 첫번째 end는 .filter('.required')에 접근 두번째end는$('form :input')접근하고있다. 따라서 '**'를 사용할 .conditional란 클래스를가진것에 접근시 처음부터 소스를 $('form :input').filter('.conditional')이런식으로 짜줄필요없이 단축시킬수있다.

이번에는 (필수), (선택)이란 텍스트에서 괄호를 때어주고 변수로 지정하고 아스테리크와 같이이어주도록 지정해준다.바라는 결과는 다음과 같다

필수*

선택**

이를위해 소스를보자

  var requiredKey = $('input.required:first')
                        .next('span').text();
  var conditionalKey = $('input.conditional:first')
                        .next('span').text();
    requiredKey = requiredFlag + 
             requiredKey.replace(/^\((.+)\)$/,'$1');
  conditionalKey = conditionalFlag + 
            conditionalKey.replace(/\((.+)\)/,'$1');

.replace()의 역할은 괄호를 떼어주는역할을 했다.마지막으로 이것을 맨위에 붙여주자

	$('

') .addClass('field-keys') .append(requiredKey + '
') .append(conditionalKey) .insertBefore('#contact');

이제까지 이블로그의 포스팅을 봐왔다면 쉽게 이해가능할것이다. 클래스를 지정한것은 단순히 좀더 꾸며주기위했을 뿐이다.

체크박스 클릭에 따라 보여주기 감추기

마지막으로 체크박스에 따라보여주거나 감추는 기능을 만들어보자.먼저 conditional명의 클래스의 텍스트박스를 모두감추어준다.

$('input.conditional').next('span').andSelf().hide()

다음은 페이지내에서 체크박스를 찾아가도록되어있다

$('input.conditional').next('span').andSelf().hide()
  .end().end()
  .each(function() {
    var $thisInput = $(this);
    var $thisFlag = $thisInput.next('span');
    $thisInput.prev('label').find(':checkbox')
    .attr('checked', false)
    //함수가 체크안된었다는초기값을 설정한것이다.
    .click(function() ;
    //이뒤에 실행되는 함수를 달아주면된다

마지막으로 박스가 체크된에 따라 바뀌는 소스를 만들어주자

  .click(function() {
      if (this.checked) {
      //만약 박스가 체크된다면
        $thisInput.show().addClass('required');
        $thisFlag.show();
        $(this).parent('label').addClass('req-label');
      } else {
      //반대라면
        $thisInput.hide().removeClass('required').blur();
        $thisFlag.hide();
        $(this).parent('label').removeClass('req-label');

아래는 최종 완성된 소스

완성된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/F_moreedite.html


설정

트랙백

댓글

jQuery DOM empty clone 메소드 복사하기

jQuery/DOM&jQuery 2009. 11. 28. 21:20

jQuery DOM clone 메소드

.clone()은 엘리먼트를 복사하는 메소드이다.

클론은 이벤트 또한 복제하는데 하나하나 살펴보자

아메바......

위의 엘리먼트를 복제해보자

$('p').clone();

자 위의것 대로 하면 될것같지만 복사해서 놓을 위치를 정해줘야 된다. 그래서 .insertAfter()등의 메소드를 사용한다.

$('p').clone().insertAfter('p');

위와같이하면아래와같이 복사되어 나올것이다

아메바......

아메바......

이벤트까지 복제

이벤트 까지 복제하는예제를 보자.변수에 true를 넣으면 이벤트까지복제 반대로 false를 넣어주면 엘리먼트만 복제된다.


위의 버튼을 누르면 복제되도록하려면

  $('button').click(function() {
     //button 엘리먼트에 접근 클릭시 이벤트발생
      $(this).clone(true).insertAfter(this);
     //this 즉 button엘리먼트를 복사해서 그뒤에 붙임
     // clone(true)로 이벤트까지 복사
    }); 

이러면 클릭시 옆에 새로 버튼이 나올거고 또 그버튼을 클릭하면 또 복사되어 나올것이다.

예제릐 결과를 보고싶다면 아레로 가보자

http://sianasiatiger.cafe24.com/study/D_clone.html


설정

트랙백

댓글

jQuery DOM empty remove 메소드 제거하기

jQuery/DOM&jQuery 2009. 11. 25. 15:12

jQuery DOM empty remove 메소드

제거하기위한 메소드로는 .empty().remove()가 있다..empty()의경우는 검색된 요소안의 모든 엘리먼트를 제거하고 .remove()의 경우는 검색된 엘리먼트와 자식들을 제거한다.차례대로 보자

empty 메소드

empty메소드는 비운다는 말 그대로 모든걸 지운다.해당엘리먼트의 자식과 텍스트모두 제거한다

모두 사라 집니다.

위의 코드에 아래를 삽입하면 아무것도 나오지 않는다.

$('p').empty();
//p란 엘리먼트에 접근후 
//p엘리먼트의 자식과 텍스트 제거

remove 메소드

이메소드는 접근하여 검색된 엘리먼트와 자식,텍스트를 제거한다.

사라짐

안사라짐

위에서 selected란 클래스의 엘리먼트를 사라지게 할것이다.

$('p').remove('.selected');
//p엘리먼트에 접근후 
//selected란 클래스를 가진것을 제거한다.

결과는 안사라짐 이것만 나올것이다.

예제의 결과는 여기에서http://sianasiatiger.cafe24.com/study/D_empty_remove.html


설정

트랙백

댓글

jQuery DOM wrap 메소드 대치하기

jQuery/DOM&jQuery 2009. 11. 24. 18:52

text replaceAll, replaceWith 메소드

대치란 원래있던 값대신에 다른 값을 생성하여 넣어주는 것을 말한다. 이런것이가능한 메소드는 .text(), .replaceAll()그리고 .replaceWith()등이 있다.

text 메소드

.text()메소드는 텍스트를 대치해준다.안녕하세요?반갑습니다로 대치해보겠다.

안녕하세요?

이걸 대치하려면 다음과 같다.

$('p').text('반갑습니다');

결과는 안녕하세요? 대신에 반갑습니다가 나올것이다

replaceWith 메소드

이메소드는 .text()메소드 처럼 대치하느데 그 대상이 엘리먼트인다.예제를보자문자대신에 그림을 대치시켜보자.

네이버 간판으로 바뀜

$('p').replaceWith('');

네이버 간판으로 바뀜 대신에 아래그림이 나올것이다

replaceAll 메소드

이것도 영어 Not only A but also B = B as well as A와 마찬가지다 replaceWith와 기능은 같고 위치값만 다를뿐이다.

$('').replaceAll('p');

예제의 결과는 여기서 확인http://sianasiatiger.cafe24.com/study/D_replace.html


설정

트랙백

댓글

jQuery DOM wrap 메소드 요소를 감싸기

jQuery/DOM&jQuery 2009. 11. 22. 13:26

jQuery wrap,wrapAll, wrapInner 메소드

앞서 포스팅 한 것은 한엘리먼트를 두고 앞이나 뒤에 생성하는 것이였다. 이번엔 아래그림과같이 한 엘리먼트를 놔두고 감싸는 엘리먼트를 만들어보자.


wrap 메소드

앞서 여러 생성 메소드를 학습했다면 쉽다.다음과 같다.

$('p').warp('
'); //$('내부에 엘리먼트').warp('외부엘리먼트'); $('p').warp('
'); //위와같이 아이디 설정도 가능하다.

위와 같이 해준다면 표현은 다음과 같이 나올것이다

어쩌고 저쩌고...........

주의 할 점은 두가지이다.

  • 인라인 엘리먼트로 블록엘리먼트를 감싸던지(ex)p엘리먼트를 img로)같은 엘리먼트를같은 엘리먼트로 감싼다던지(ex)p를p로 감싸기)이런 실수를 범하지 않는다.
  • 감싸는 엘리먼트에 텍스트가 포함된경우$('p').warp('<div>텍스트</div>');감쌀 엘리먼트 p의 내용은 무시된다

wrapAll 메소드

.wrap()는 지정한 엘리먼트를 일일이 감싸는 반면 .wrapAll()메소드는 ALL, 즉 한번에 다 감싸버린다.차이를 비교한 예제를 보자

감싸줘요.

나도요.

나도요2.

나도요3.

자...위와 같은 html이 있다고 하자 이때 두메소드의 차이점을 보면

$('p').warp('
'); $('p').warpAll('
');

결과는 다음과 같이 나온다

감싸줘요.

나도요.

나도요2.

나도요3.

감싸줘요.

나도요.

나도요2.

나도요3.

한번더 요약하면 warp은 개별로 일일이 감싸주는거고 wrapAll은 전체를 감싼다.

wrapInner 메소드

이 메소드는 대상 엘리먼트를 감싸는게 아니라 그 속성값(텍스트등..)과 하위 엘리먼트를 감싼다. 그래서 Inner이란 말이 붙은것. 예제를 보자

어쩌고 저쩌고

어쩌고 저쩌고

html이 위와 같고...

$('p').warp('');
//p엘리먼트 안에서 b엘리먼트로 감싸준다.
$('alpha#div').warp('
'); //alpha란 아이디의 div엘리먼트안에서 div엘리먼트로 감싼다.

결과는 아래와 같다

어쩌고 저쩌고

어쩌고 저쩌고

주의할점

감싼다는것은 지정한 엘리먼트를 다른 엘리먼트안에 넣는다는 것이다.여기서 인라인과 블록 엘리먼트를 유의할 필요있다. 블록을 인라인엘이먼트로 감싼다면 잘못된것이다.또 같은 엘리먼트로 감싸도 잘못된것이다(물론 div말고..)

마지막으로 적용된예제를 보려면 여기서보자http://sianasiatiger.cafe24.com/study/D_wrap.html


설정

트랙백

댓글

jQuery DOM after, befoer 메소드 요소뒤, 앞에 생성하기

jQuery/DOM&jQuery 2009. 11. 12. 15:12

jQuery after, befoer 메소드

.after()은 정해진 엘리먼트 뒤에 생성되고 before()은 앞에 생성된다.예를보자

먼저 html은 다음과 같다.

여기앞에 그리고 뒤에 어쩌고 저저고 생성됨

.after()

  $('p').after('

after로 뒤에 생성

');

결과는 다음과 같다.

여기앞에 그리고 뒤에 어쩌고 저저고 생성됨

after로 뒤에 생성 된 것

.before()

  $('p').before('

bfore로 앞에 생성

');

결과는 다음과 같다.

before로 앞에 생성 된 것

여기앞에 그리고 뒤에 어쩌고 저저고 생성됨

insertAfter(), insertBefore()

이 두메소드 역시 Not only A but also B = B as well as A 와 같다고 보면된다.

A.after(B) = B.insertAfter(A),그리고 A.before(B) = B.insertBefore(A)

$('p').before('

bfore로 앞에 생성

'); $('

insertBfore로 앞에 생성

').insertBefore('p'); $('p').after('

after로 뒤에 생성

'); $('

insertAfter로 뒤에 생성

').insertAfter('p');

적용된 예제는 여기서 보자http://sianasiatiger.cafe24.com/study/D_after_before.html


설정

트랙백

댓글

jQuery DOM트리 prepend, prependTo 메소드

jQuery/DOM&jQuery 2009. 11. 10. 15:10

jQuery prepend() 메소드

append()메소드와 사용법은 같다. 그럼 차이점은 무언인가? pre-앞이란 뜻이있듯이 preapend는 앞에 생성된다.앞서 포스팅 append() 메소드를 보면 뒤에 생성된것을 볼 수 있다.preapend는 앞에 생성된다. 사용방법은 똑같다.

$(document).ready(function() {
  $('p').preppend('노말');
  $('p').prepend('굵게');
  $('가늘게').prependTo('p');
  });

결과는 아래와 같다

가늘게굵게노말본문

적용된 페이지는 여기로http://sianasiatiger.cafe24.com/study/D_append.html


설정

트랙백

댓글

jQuery DOM트리 append, appendTo 메소드

jQuery/DOM&jQuery 2009. 11. 10. 14:55

jQuery append() 메소드

먼저 DOM이뭔지 다시 잠깐보자

"객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다.DOM은 HTML 문서의 요소(엘레멘트; element)를 제어하기 위해 웹 브라우저에서 처음 지원됐다. DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단이었다. 브라우저 사이에 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성하게 되었다."

jQuery 또한 이런 접근을 통해 모델을 구현한다.엘리먼트안에 새 엘리먼트를 만들거나.엘리먼트를 감싸거나, 엘리먼트 앞뒤에 추가하는 메소드를 지원한다. 그중 append()메소드가 엘리먼트안에 자식엘리먼트를 추가하는 방법이다.

append() 메소드

.append() 메소드는 선택한 엘리먼트안에 자식 엘리먼트,텍스트를 추가한다.

사용방법은 $('선택').append('내용');

예를보자

본문

$(document).ready(function() {
  $('p').append('노말');
  $('p').append('굵게');
  $('가늘게').appendTo('p');
  });

굵게 하도록하고 하위엘리먼트를 넣어보자<strong>굵게</strong>

$(document).ready(function() {
  $('p').append('노말');
  $('p').append('굵게');
  });

appendTo메소드를 보자 이것은 앞뒤가바뀌었다고 보면된다.

appendTo() 메소드

영어에서 as well as와 not~ but~ 를보자.Not only A but also B = B as well as A .대상 A,B가 바귀었다..appendTo()메소드 역시마찬가지다.$('A').append('B') = $('B'),appendTo('A')와 같다 다음예제를 보자

$(document).ready(function() {
  $('p').append('노말');
  $('p').append('굵게');
  $('가늘게').appendTo('p');
  });

최종결과는 다음과 같이 나올것이다.

본문노말굵게가늘게

적용된 페이지는 여기로http://sianasiatiger.cafe24.com/study/D_append.html

웹표준관련 주의사항

DOM트리를 짤는 메소드 사용시 appendsk기타등 변수값에 우리는 태그엘리먼트를 입력하게된다.예제에서 $('<i>가늘게</i>').appendTo('p');처럼 </i>를 넣는경우. 이런경우 자바스크립트 삽입시 html페이지에 그대로 넣을경우 코딩유효성 검사시 경고가뜬다. 따라서 이같이 태그 엘리먼트를 사용할시에는 별도로 파일이름을 정해주고 링크시키는방법이옳다.

또하나더 유의사항을 인코딩 방법이다. 인코딩방법에 따라 글자가 개지니 js파일이 무슨 종류의 인코딩인지 알아야한다. html과 일치하지않는경우 깨진다.


설정

트랙백

댓글