'2012/11'에 해당되는 글 1건

jQuery 기초 정리

jQuery 2012. 11. 27. 11:20

1.jQuery 기초

  1.1 jQuery() 함수

    $(selector)

    jQuery(selector)

   

    $("p a");

 

  1.2 유틸리티 함수

    $.trim(someString);

    jQuery.trim(someString);

 

  1.3 문서 준비 핸들러

    window.onload = function(){

      $("table tr:nth-child(even)").addClass("even");

    };

 

   $(document).ready(function(){

      $("table tr:nth-child(even)").addClass("even");

   });

 

   $(function(){

      $("table tr:nth-child(even)").addClass("even");

   });

 

  

   자세한 내용은 까페의 문학이님의 게시글을 보시면 됩니다.

   http://cafe.naver.com/javachobostudy/50141

 

  1.4 DOM 엘리먼트 생성하기

     $("<div>안녕!</div>");

 

  1.5 jQuery 확장하기

     $.fn.disable = function(){

       return this.each(function(){

         if(typeof this.disabled != "undefined") this.disabled = true;

       });

     }

 

    $("form#myForm").disable();

 

  1.6 다른 라이브러리들과 함께 jQuery 사용하기

    jQuery.noConflict();

 

 

2.1조작하려는 엘리먼트 선택하기

  2.1.1 기본 CSS 셀렉터 사용하기

  • a - 모든 <a> 엘리먼트와 일치하는 셀렉터
  • #specialID - specialClass를 클래스로 가지는 모든 엘리먼트와 일치하는 셀렉터.
  • .specialClass - specialClass를 클래스로 가지는 모든 엘리먼트와 일치하는 셀렉터.
  • a#specialID.specialClass - 아이디가 specialID이고 specialClass를 클래스로 가지는 <a>엘리먼트
  • p a.specialClass - <p>엘리먼트 내에 선언되고 specialClass를 클래스로 가지는 <a>엘리먼트

   jQuery를 이용해 엘리먼트를 선택하려면 셀렉터를 아래와 같이 $()로 감싸준다.

   $("p a.specialClass"); 

 

  2.1.2 자식 셀렉터, 컨테이너 셀렉터, 어트리뷰트 셀렉터 사용하기

셀렉터

설명

*

모든 엘리먼트와 일치

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와 일치. E의 생략은 *.C와 동일함

E#I

아이디가 I인 엘리먼트 E와 일치, E의 생략은 *#I와 동일함.

E[A]

어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A=V]

값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A^=V]

값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A$=V]

값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A*=V]

값이 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

  

   $("p > a")

   <p> 엘리먼트의 바로 아래 자식 링크와 일치한다.

 

   $("ul.myList > li > a")

    클래스 myList를 지닌 <ul> 엘리먼트의 바로아래 자식 리스트 엘리먼트를 선택한 다음, 리스트 엘리먼트의 바로 아래 자식

    링크만 선택한다.

 

   $("a[href^=http://]")

    href의 값이 정확히 http://로 시작하는 모든 링크와 일치한다.

  

   form[method] : 특정 어트리뷰트를 가진 엘리먼트와 일치

   input[type=text] : 특정 값과 일치하는 어트리뷰트를 가진 엘리먼트와 일치

  

   $("li:has(a)") <a>엘리먼트를 포함하는 모든 <li> 엘리먼트와 일치한다.

 

 2.1.3 위치로 선택하기

셀렉터

설명

:first

페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫 번째 링크를 반환한다.

:last

페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환한다.

:first-child

첫 번째 자식 엘리먼트. li:first-child는 각 리스트의 첫 번째 아이템을 반환한다.

:last-child

마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환한다.

:only-child

형제가 없는 모든 엘리먼트를 반환한다.

:nth-child(n)

n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두 번째 리스트 아이템을 반환한다.

:nth-child(even|odd)

짝수/홀수 자식 엘리먼트. li:nth-child(event)은 각 목록의 짝수 번째 자식 엘리먼트를 반환한다.

:nth-child(Xn+Y)

전달된 공식에 따른 n번째 자식 엘리먼트.

li:nth-child(3n) 3의 배수 번째 아이템을 반환한다.

li:nth-child(5n+1) 5의 배수 +1 번째 아이템을 반환한다.

:even / :odd

페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수 번째 아이템을 반환한다.

:eq(n)

n번째로 일치하는 엘리먼트.

:gt(n)

n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치

:lt(n)

n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.

 

$("a:first");

페이지에서 첫 번재 <a> 엘리먼트와 일치한다.

 

$("p:odd");  //모든 홀수 번째 문단(<p>) 엘리먼트와 일치한다.

$("p:even"); // 모든 짝수 번째 문단(<p>) 엘리먼트와 일치한다.

 

$("li:last-child");

각 리스트에서 마지막 리스트 아이템과 일치

 

$("table#languages tbody td:first-child");

$("table#languages tbody td:ntn-child(1)"); // 인덱스가 1부터 시작

테이블에서 각 행의 첫 번째 셀과 일치한다.

 

2.1.4 jQuery 정의 셀럭터 사용하기

셀렉터

설명

:animated

현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.

:button

모든 버튼을 선택한다.

:checkbox

체크박스 엘리먼트만 선택한다.

:checked

선택된 체크박스나 라디오 버튼만을 선택한다.

:contains(foo)

텍스트 foo를 포함하는 엘리먼트만 선택한다.

:disabled

인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.

:enabled

인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.

:file

모든 파일 엘리먼트를 선택한다.

:header

헤더 엘리먼트만 선택한다.

:hidden

감춰진 엘리먼트만 선택한다.

:image

폼 이미지를 선택한다.

:input

폼 엘리먼트만 선택한다.(input, select, textarea, button)

:not(filter)

필터의 값을 반대로 변경한다.

:parent

빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.

:password

패스워드 엘리먼트만 선택한다.

:radio

라디오 버튼 엘리먼트만 선택한다.

:reset

리셋 버튼을 선택한다.

:selected

선택된 엘리먼트만 선택한다.

:submit

전송 버튼을 선택한다.

:text

텍스트 엘리먼트만 선택한다.

:visible

보이는 엘리먼트만 선택한다.

 

$(":checkbox:checked:enabled");

활성화 되고 선택된 체크박스만 일치한다.

 

$("input:checkbox") // 체크박스만 선택

$("input:not(:checkbox)") //체크박스를 제외하고 모든 <input> 선택

 

*:not()은 필터 셀렉터에는 적용할 수 있지만 찾기 셀레터에는 적용하지 못한다.

$("div p:not(:hidden)"); // O

$("div :not(p:hidden)"); // X

 

2.2 새로운 HTML 생성하기

 $("<div>킴디 짱</div>");

 $("<div>") // $("<div></div>"), $("<div/>")와 동일

 

2.3 확장된 엘리먼트 집합 관리하기

  2.3.1 확장된 집합의 크기 결정하기

size()

설명

확장 집합의 엘리먼트 개수를 반환한다.

매개변수

없음

반환값

엘리먼트 개수

    

   $("#someDiv").html("<h1>페이지에는 총 " + $("a").size() + "개의 링크가 있다.</h1>");

 

  2.3.2 확장 집합에서 엘리먼트 획득하기

get(index) , get()

설명

확장된 집합에서 하나 또는 모든 일치하는 엘리먼트를 가져온다.

매개변수가 명시되지 않았다면 확장 집에서 모든 엘리먼트를 자바스크립트 배열로 반환한다.

매개변수

index (Number)

얻으려는 엘리먼트의 인덱스.

반환값

하나의 DOM 엘리먼트 또는 DOM 엘리먼트 집합

 

  $("img[alt]")[0];

  $("img[alt]").get(0);

 

index(element)

설명

확장 집합에서 전달된 엘리먼트를 찾고, 집합에서 찾은 엘리먼트의 인덱스를 반환한다. 못 찾으면 -1반환

매개변수

element (Element)

순서 번호를 알고자 하는 엘리먼트의 참조

반환값

확장 집합에서 전달된 엘리먼트의 순서 번호

발견되지 않으면 -1 반환

 

  var n1 = $("img").index($("img#findMe")[0]); // ㅉㅉㅉㅉ;;

  var n2 = $("img").index($("img#findMe"));

 

  var element = document.getElementById("findMe");

  var n3 = $("img").index(element );

 

  2.3.3 확장 엘리먼트 집합 재편성하기

add(expression)

설명

expression 매개변수로 명시한 엘리먼트를 확장 집합에 추가한다.

표현식에는 셀렉터, HTML코드, DOM 엘리먼트의 배열이 올 수 있다.

매개변수

element (String|Element|Array)

확장 집합에 추가될 대상을 명시한다.

반환값

확장집합

 

   $("img[alt], img[title]");

   $("img[alt]").add("img[title]");

   alt나 title 어트리뷰트를 가진 모든, <img> 엘리먼트를 반환한다.

  

   $("img[alt]").addClass("thickBorder").add("img[title]").addClass("seeThrough");

   alt 어트리뷰트를 가진 모든 <img> 엘리먼트의 확장 집합을 생성하고, 확장 집합의 각 엘리먼트에

   클래스 thickBorder를 적용한다.

   <img alt="test1" src="test.jpg" class="thickBorder">

   그리고 title 어트리뷰트를 가진 <img> 엘리먼트를 이전 확장집합에 추가하고, 클래스 seeThrough를 적용한다.

   <img alt="test1" src="test1.jpg" class="thickBorder seeThrough">

   <img alt="test2" title="testTitle" src="test2.jpg" class="seeThrough">

  

   $("img[alt]").add("<div>킴디 짱</div>"); //새로운 엘리먼트를 확장 집합에만 추가한다는 점을 주의한다.

  

not(expression)

설명

expression 매개변수의 값에 따라서 일치하는 집합에서 엘리먼트를 제거한다.

매개변수

element (String|Element|Array)

확장 집합에서 제거할 대상을 정의한 jQuery 필터 표현식이나 엘리먼트 참조 또는 엘리먼트 참조 배열

반환값

확장집합

 

  $("img[title]:not([title*=puppy])"); 

  $("img[title]").not("[title *= puppy]"); // 인자값은 엘리먼트 참조와 필터 표현식만 전달 받는다

  확장집합에서 title값이 puppy인 엘리먼트를 제거한다.

  

  $("img[alt]").not($("#findMe3"));

 

  var n = document.getElementById("findMe3");

  $("img[alt]").not(n);

filter(expression)

설명

전달 받은 셀럭터 표현식이나 필터링 함수를 이용해서 확장 집합에서 엘리먼트를 필터링 해낸다.

매개변수

element (String|Function)

확장 집합에서 일치하지 않는 엘리먼트를 모두 제거하고자 jQuery 셀렉터 또는 필터링 조건을 결정하는  함수를 명시한다. 이 함수는 집합에 있는 각 엘리먼트마다 호출된다. 호출된 함수는 해당 시점의 엘리먼트를 함수 콘텍스트인 this로 이용한다. 호출 결과로 false를 반환하는 엘리먼트가 모두 집합에서 제거된다.

반환값

확장집합

  

$("img").addClass("seeThrough").filter("[title*=dog]").addclass("thickBorder");

모든 <img> 엘리먼트에 seeThrough 클래스를 추가하고 title 어트리뷰티 값에 dog 문자열 값을 포함하고 있는

엘리먼트에만 thickBorder클래스를 추가한다.

 

$("div").filter(function (index) { 
                 
return index == 1 || $(this).attr("id") == "fourth"; 
               
}).addclass("thickBorder");

<div>엘리먼트중 두번째 div이거나 id값이 fourth인 div에만 thickBorder 클래스를 추가한다.

 

 

slice(begin, end)

설명

일치하는 집합에서 연속하는 일부분을 포함하는 새로운 확장 집합을 생성하고 반환한다.

매개변수

begin, end (Number)

반환되는 부분 집합에 포함될 엘리먼트의 위치

반환값

확장집합

 

  $("*").slice(2,3);

  모든 엘리먼트를 선택한 다음 세 번째 엘리먼트를 담은 새로운 집합을 생성한다.

  $("*").slice(4);

  모든 엘리먼트중 처음 네 엘리먼트를 제외한 모든 엘리먼트의 집합을 반환한다.

 

2.3.4 관계를 이용해 확장 집합 얻기 

메소드

설명

children()

확장 엘리먼트의 고유한 자식으로 구성된 확장 집합을 반환한다.

contents()

확장 집합에서 엘리먼트의 콘텐츠로 구성된 확장 집합을 반환한다.

next()

확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환한다.

nextAll()

확장 집합 내의 각 확장 엘리먼트 다음에 나오는 모든 형제로 구성된 확장 집합을 반환한다.

parent()

확장 집합 내에 있는 모든 확장 엘리먼트의 바로 위 부모로 구성된 확장 집합을 반환한다.

parents()

모든 확장 엘리먼트의 조상으로 구성된 확장 집합을 반환한다.

prev()

확장 집합 내의 각 확장 엘리먼트 바로 이전에 나오는 형제로 구성된 확장 집합을 반환한다.

prevAll()

확장 집합 내의 각 확장 엘리먼트 이전에 나오는 모든 형제로 구성된 확장 집합을 반환한다.

siblings()

확장 엘리먼트의 모든 형제를 포함하는 확장 집합을 반환한다.

2.3.5 확장 집합을 이용하는 기타 방법들 

find(selector)

설명

원본의 모든 엘리먼트 중 전달된 셀렉터 표현식과 일치하는 엘리먼트로 구성된 새로운 확장 집합을 반환한다.

매개변수

selector (String)

반환될 집합의 일부가 될 엘리먼트가 일치하는 셀렉터

반환값

새로 생성된 확장집합

 

wrappedSet.find("p cite"); 

변수 wrappedSet에 할당된 확장 집합에서, <p> 엘리먼트에 포함된 모든 <cite>엘리먼트로 구성된 확장 집합을 생성.

 

 $("p").find("span").css('color','red'); 

<p>엘리먼트 하위의 <span>엘리먼트의 글자색을 빨간색으로 설정

 

 $("span", $("p")).css('color','red'); // 더 간결한 방법

 

is(selector)

설명

확장 집합에 전달된 셀렉터 표현식과 일치하는 엘리먼트가 있는지 확인한다.

매개변수

selector (String)

확장 집합 엘리먼트를 평가 할 셀렉터 표현식

반환값

전달된 셀렉터에 하나라도 일치하면 true, 그렇지 않다면 false

 

var hasImage = $("*").is("img");

전체 엘리먼트중 <img>엘리먼트가 존재하면 hasImage 변수에 true를 저장한다. 그렇지 않으면 false

 

 

2.3.6 jQuery 체인 관리하기

end()

설명

jQuery 커맨드 체인에서 사용하며 이전 확장 집합으로 돌아간다.

매개변수

없음

반환값

이전 확장 집합

 

$("img").appendTo("#somewhere").end().addClass("beenCloned");

아이디가 #somewhere인 엘리먼트 하위에 <img> 엘리먼트를 붙이고, <img>엘리먼트에 beenCloned 클래스를 추가한다.

 

andSelf()

설명

커맨드 체인에서 이전 확장 집합 두 개를 하나로 합친다.

매개변수

없음

반환값

합쳐진 확장 집합

 

$("div#aa").find("p").andSelf().css("border", "2px solid red");

id가 aa인 <div>엘리먼트의 확장 집합과 <div>엘리먼트 하위의 <p>엘리먼트의 확장 집합을 합친

확장집합의 border 값을 2px solid red로 설정한다.

 

3.1 엘리먼트 프로퍼티와 어트리뷰트 조작하기

  3.1.1 엘리먼트 프로퍼티 조작하기 

each(iterator)

설명

일치하는 집합을 순회하면서 전달된 반복자 함수를 엘리먼트마다 호출한다.

매개변수

iterator (Function)

일치하는 집합의 엘리먼트마다 호출되는 함수. 집합에 있는 엘리먼트의 0부터 시작하는 인덱스를 매개변수로 받는다. 엘리먼트는 함수의 this 프로퍼티로 이용할 수 있다.

반환값

확장집합

 

    $("img").each(function(n){

        this.alt = "아이디가 " + this.id + "인 image[" + n + "]이다."

    })

   

  3.1.2 어트리뷰트 값 가져오기

attr(name)

설명

일치하는 잡합의 첫 번째 엘리먼트에서 매개변수로 명시된 어트리뷰트의 값을 얻는다.

매개변수

name(String)

값을 가져올 어트리뷰트의 이름

반환값

첫 번째로 일치하는 엘리먼트의 어트리뷰트 값.

없으면 undefined

 

  <img id="myImage" src="test.gif" alt="이미지"/>

  $("#myImage").attr("alt");

 

  3.1.3 어트리뷰트 값 설정하기

attr(name, value)

설명

매개변수에 전달된 값을 이용해 확장 집합의 모든 엘리먼트에 해당 어트리뷰트 이름의 값을 설정한다.

매개변수

name(String) 값을 설정할 어트리뷰트 이름

value(String|Object|Function) 어트리뷰트 값을 명시한다. 값을 반환하는 자바스크립트 표현식이나 함수를 사용할 수 있다. 이 매개변수가 어떻게 처리되는지는 이어지는 논의를 살펴보자.

반환값

확장 집합

 

  $("*").attr("title", function(indext){

    return "나는 " + index + "번 엘리머트이고 내 이름은 " + (this.id? this.id : "unset") + "이다";

  });

  $("input").attr({value : "", title : "값을 입력하세요."});

  3.1.4 어트리뷰트 제거하기

removeAttr(name)

설명

일치하는 모든 엘리먼트에서 명시된 어트리뷰트를 제거한다.

매개변수

name(String) 삭제할 어트리뷰트 이름

반환값

확장 집합

 

어트리뷰트를 제거한다고 해서 자바스크립트 DOM 엘리먼트에서 대응하는 프러퍼티가 제거되는 않음에 주목하자. 단지 값이 변경될 뿐이다. 예를 들어 한 엘리먼트에서 readonly 어트리뷰트를 제거함으로써 readonly 프로퍼티 값이 true에서 false로 전환되지만 이로 인해 엘리먼트에서 프로퍼티가 제거되지는 않는다.

 

3.2 엘리먼트 스타일 변경하기

  3.2.1 클래스 추가하고 제거하기

addClass(name)

설명

매개변수로 전달된 하나 이상 되는 클래스명을 확장 집합의 모든 엘리먼트에 추가한다.

매개변수

name(String)

클래스명을 포함하는 문자열, 여러 클래스명을 추가할 때는 공백으로 구분한다.

반환값

확장 집합

 

removeClass(name)

설명

매개변수로 전달된 하나 이상되는 클래스명을 확장 집합에 있는 모든 엘리먼트에서 제거한다.

매개변수

name(String)

클래스명을 포함하는 문자열, 다수의 클래스명을 제거하는 경우 고액으로 구분한다.

반환값

확장 집합

 

toggleClass(name)

설명

매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고, 존재한다면 제거한다. 이때 각 엘리먼트가 개별로 평가되므로, 클래스명이 추가되는 엘리먼트도 있고 제거되는 엘리먼트도 있다는점에 주목한다.

매개변수

name(String)

토글 대상 클래스명을 포함하는 문자열

반환값

확장 집합

 

   function swap(){

     $("tr").toggleClass("striped");

   }

 

   <table onmouseover="swap();" onmouseout="swap();">

 

  3.2.2 스타일 얻고 설정하기

 

css(name, value)

설명

일치하는 각 엘리먼트에 name 매개변수의 CSS 스타일 프로퍼티를 value 매개변수 값으로 설정한다.

매개변수

name(String) 설정하려는 CSS 프러퍼티 이름

value(String|Number|Function)

프로퍼티 값을 포함하는 문자열, 숫자, 함수.

매개변수로 함수가 전달되면, 확장 집합에 있는 각 엘리먼트는 함수의 반환값을 CSS 프로퍼티 값으로 사용한다. 각 함수 호출에서 this 프로퍼티는 평가할 엘리먼트로 설정된다.

반환값

확장 집합

 

  $("div.expandable").css("width", function(){

     return $(this).width() + 20 + "px";

  });

 

css(properties)

설명

매개변수로 전달된 객체에 키로 명시한 CSS 스타일 프로퍼티를 일치하는 엘리먼트의 해당 값으로 설정한다.

매개변수

properties (Object)

확장 집합에 속한 모든 엘리먼트에 설정할 CSS 프로퍼티를 포함한 객체.

반환값

확장 집합

 

  $("div.expandable").css({color:red, width:20px, height: function(index, value) { 
       
return parseFloat(value) * 1.2; 
     
} });

css(name)

설명

확장 집합의 첫 번째 엘리먼트에서 name으로 명시한 CSS 프로퍼티의 계산 값을 가져온다.

매개변수

name(String)

반환될 CSS 프로퍼티 이름을 명시한다.

반환값

계산된 스타일 값

 

$("div.expandable").css("color");

 

width(value) / height(value)

설명

일치하는 집합에 속한 모든 엘리먼트의 너비나 높이를 설정한다.

매개변수

value(Number)

설정된 픽셀 값

반환값

확장 집합

 

width() / height()

설명

확장 집합의 첫 번째 엘리먼트의 너비나 높이를 가져온다.

매개변수

없음

반환값

계산된 너비나 높이의 숫자 값

 

   $("div.myElements").width(500);

   $("div.myElements").css("width", "500px");

  

   var value = $("div.myElements").width();

 

  3.2.3 스타일과 관련된 유용한 커맨드

hasClass(name)

설명

일치하는 집합의 엘리먼트에 전달된 클래스 이름이 있는지 확인한다.

매개변수

Name (String)

확인하려는 클래스 이름

반환값

확장 집합의 엘리먼트가 저달된 클래스 이름을 가지면 true, 아니면 false를 반환한다.

 

 

$("p:first").hasClass("surpriseMe");

내부적으론 아래와 같이 구현 되어 있다.

$("p:first").is(".surpriseMe");

 

3.3 엘리먼트 콘텐츠 설정하기

  3.3.1 HTML과 텍스트 콘텐츠 대체하기

html(text)

설명

전달된 HTML 코드를 모든 일치하는 엘리먼트의 콘텐츠로 설정한다.

매개변수

text (String)

엘리먼트 콘텐츠로 설정될 HTML 코드

반환값

확장 집합

 

$("div").html("<span class='red'>Hello <b>Again</b></span>");

그냥 innerHTML인가 보네..

 

text()

설명

확장 엘리먼트의 모든 텍스트 콘텐츠를 결합하여 커맨드의 결과로 반환한다.

매개변수

없음

반환값

결홥된 문자열

 

var text = $("div").text(); 

텍스트 노드만 가져온다.

 

text(content)

설명

모든 확장 엘리먼트의 텍스트 콘텐츠를 전달된 값으로 설정한다. 전달된 텍스트가 “<” 또는 “>”을 포함한다면, 그 문자는 HTML 엔티티로 대체된다. (화면에 그대로 표시한다)

매개변수

Content (String)

확장 엘리먼트에 설정될 콘텐츠

반환값

확장 집합

 

$("div").text("<span class='red'>Hello <b>Again</b></span>"); 

<span class='red'>Hello <b>Again</b></span> 모두 문자열로 화면에 그대로 출력

 

  3.3.2 엘리먼트 복사하기와 이동하기

append(content)

설명

일치하는 모든 엘리먼트의 콘텐츠에 전달된 HTML 코드나 엘리먼트를 덧붙인다.

매개변수

content (String|Element|Object)

확장 집합의 엘리먼트에 추가할 문자열, 엘리먼트, 확장 엘리먼트 집합.

반환값

확장 집합

 

appendTo(target)

설명

확장 집합의 모든 엘리먼트를 target의 끝으로 이동시킨다.

매개변수

target (String|Element)

jQuery 셀렉터나 DOM 엘리먼트. 확장 집합에 있는 각 엘리먼트는 target의 위치에 추가된다. 셀렉터가 두 개 이상 엘리먼트에 일치하면 엘리먼트는 복사되고, 그런 다음 일치하는 각 엘리먼트에 추가된다.

반환값

확장 집합

 

$("p").append("<b>text</b>");

$("p.appendToMe").append($(a.appendMe));

var toAppend = $("a.appendMe")[0];

$("p.appendToMe").append(toAppend);

 

a.apend(b) // a 엘리먼트에 b엘리먼트를 덧붙인다.

a.appendTo(b)  // a 엘리먼트를 b 엘리먼트에 덧붙인다.

 

대상이 하나이면 원본 엘리먼트는 기존 위치에서 삭제되고 덧붙여지도록 지덩된 새로운 부모 엘리먼트의 위치로 이동한다.

대상이 여러개라면 원본 엘리먼트는 그대로 남아 있고 각 대상에 복사본이 추가된다.

 

<div class="inner">Hello</div>
<div class="inner">Goodbye</div>

 

// 원본 엘리먼트를 대상 엘리먼트 앞에 삽입한다.

$('.inner').prepend('<p>Test</p>');

<div class="inner">
    <p>Test</p>
    Hello
</div>
<div class="inner">
    <p>Test</p>
    Goodbye
</div>

 

$('<p>Test</p>').prependTo('.inner');

<div class="inner">
    <p>Test</p>
    Hello
  </div>
<div class="inner">
    <p>Test</p>
    Goodbye
</div>

 

 

// 엘리먼트를 대상의 첫 번째 자식으로 삽입하는 대신에 대상의 바로 앞 형제로 삽입한다.

$('.inner').before('<p>Test</p>');

<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>

 

$('<p>Test</p>').insertBefore('.inner');

<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>

 

 

//엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에 대상의 바로 뒤 형제로 삽입한다.

$('.inner').after('<p>Test</p>');

<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>

 

$('<p>Test</p>').insertAfter('.inner');

<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>

 

 3.3.3 엘리먼트 감싸기

 

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

 

wrap(wrapper)

설명

일치하는 집합의 엘리먼트를 전달된 HTML 태그나 엘리먼트의 복사본으로 감싼다.

매개변수

wrapper (String|Element)

일치하는 집합 내에 있는 각 엘리먼트를 감싸려는 HTML 코드 문자열 또는 래퍼로 제공되는 복사될 엘리먼트

반환값

확장 집합

 

$('.inner').wrap('<div class="new" />');

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

 

wrapAll(wrapper)

설명

일치하는 집합 내에 있는 모든 엘리먼트를 전달된 HTML 태그나 전달된 엘리먼트의 복사본으로 감싼다. 일치하는 집합을 하나의 단위로 취급한다.

매개변수

wrapper (String|Element)

일치하는 집합의 각 엘리먼트를 감싸려는 HTML 코드 문자열 또는 래퍼로 제공되고 복사될 엘리먼트

반환값

확장 집합

 

$('.inner').wrapAll('<div class="new" />');

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div> 

 

wrapInner(wrapper)

설명

일치하는 집합에서 엘리먼트의 텍스트 노드를 포함한 콘텐츠를 전달된 HTML 태그나 엘리먼트의 복사본으로 감싼다.

매개변수

wrapper (String|Element)

일치하는 집합의 각 엘리먼트를 감싸려는 HTML 문자열 또는 래퍼로 제공되는 복사될 엘리먼트

반환값

확장 집합

 

$('.inner').wrapInner('<div class="new" />');

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

  3.3.4 엘리먼트 제거하기

remove()

설명

페이지 DOM에서 확장 집합의 모든 엘리먼트를 삭제한다.

매개변수

없음

반환값

확장 집합

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

 

$('.hello').remove();

$('div').remove('.hello');

 

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

 

empty()

설명

일치하는 집합의 모든 DOM 엘리먼트의 콘텐츠를 제거한다.

매개변수

없음

반환값

확장 집합

 

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

 

$('.hello').empty();

<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

 

$("div#divTest").after("<p>div를 대체한다.</p>").remove(); 

$.fn.replaceWith = function(html){

   return this.after(html).remove();

}

$("div#divTest").replaceWith er("<p>div를 대체한다.</p>"); 

 

  3.3.5 엘리먼트 복사하기

clone(copyHandlers)

설명

확장 집합에 있는 엘리먼트를 복사하여 이를 포함하는 새로운 확장 집합을반환한다. 엘리먼트와 자식 모두 복사된다. copyHandlers 매개변수 옵션에 따라 이벤트 핸들러의 복사 여부가 결정된다.

매개변수

copyHandlers (Boolean)

true이면 이벤트 핸들러를 복사하고, false이거나 생략하면 복사하지 않는다.

반환값

새로 생성된 확장 집합

 

$("img").clone(); // 원본 확장 집합과 복사본 확장 집합 2개 생성후 아무것도 안함.

// 확장집합 복사 후 id가 here인 노드 바로 앞 형제로 삽입 후 원본 확장 집합 숨김

$("img").clone().insertBefore("#here").end().hide();

 

3.4 폼 엘리먼트 값 다루기

val()

설명

일치하는 집합에 있는 첫 번째 엘리먼트의 value 프로퍼티를 반환한다. 다중 선택이 가능한 엘리먼트라면, 반환값은 선택된 값의 배열이다.

매개변수

없음

반환값

가져온 값 혹은 값의 배열

 

$("[name=radioGroup]:checked").val(); // name이 radioGroup인 라디오 버튼들중 선택된 라디오 버튼의 value값을 가져온다.

체크박스와 마친가지로 확장집합의 첫번째 값만 가져오기 때문에 :checked를 안해주면 선택이 되었던 안되어있던 첫번째

라디오 버튼의 value값을 가져온다.

 

val(value)

설명

매개변수로 전달된 값을 일치하는 모든 폼 엘리먼트의 value 프로퍼티로 설정한다.

매개변수

value (String)

확장 집합에 있는 각 폼 엘리먼트의 value 프로퍼티에 설정할 문자열

반환값

확장 집합

 

$("[type=radio]").val("c"); // 셋팅 안됨
$("[type=checkbox]").val("가"); // 셋팅 안됨
$("[type=text]").val("텍스트 박스"); // 셋팅 됨
$("select").val("Multiple"); // 셋팅 됨

 

val(values)

설명

전달된 values 배열의 값과 일치하는 확장 집합에 있는 체크박스, 라디오 버튼을 선택하고 <select> 엘리먼트의 옵션을 선택한다.

매개변수

value (Array)

엘리먼트의 선택 여부를 결정하는 데 사용하는 값의 배열

반환값

확장 집합

 

 

$("[type=radio]").val(["c"]); // 셋팅 됨

$("[type=checkbox]").val(["가"]); // 셋팅 됨
$("[type=text]").val(["텍스트 박스"]); // 셋팅 됨
$("select").val(["Multiple"]); // 셋팅 됨

 

<select>에 배열로 넘기면 멀티 선택이 가능하고 (multiple="multiple" or multiple="true")

text박스에 배열로 넘기면 (["가","나","다"])

가,나,다 <= 요따구로 셋팅된다

.

'jQuery' 카테고리의 다른 글

JQuery 와 Prototype 충돌 방지  (0) 2012.07.09
jquery 유효성 검사  (0) 2012.02.09
jQuery 스크롤 올리기  (0) 2012.02.07
XML HTML로 로드 하기  (0) 2012.01.10
jquery 동적 js 실행  (0) 2012.01.10
블로그 이미지

스마트전

,