[jQuery] 요소의 선택

jQuery 공식사이트

http://jquery.com/download

Download jQuery | jQuery

 

 

jQuery(제이쿼리)란?

- 오픈 소스 기반의 자바스크립트 라이브러리

 

 

jQuery 문법

$(선택자).동작함수();

 

 

CSS 선택자

- 태그 이름으로 선택

$("button").on("click", function() {
  $("span").css("fontSize", "30px");
});

 

- 아이디로 선택

$("button").on("click", function() {
  $("#devkuma").css("fontSize", "30px");
});

 

- 클래스로 선택

$("button").on("click", function() {
  $(".devkuma").css("fontSize", "30px");
});

 

- 그밖의 선택

$("#btn1").on("click", function() {
  $("span[title=devkuma]").css("fontSize", "30px");
});

$("#btn2").on("click", function() {
      $(this).css("fontSize", "30px");
    });

$("#btn3").on("click", function() {
  $("ul li:first").css("color", "red");
});

코드 실행

 

 

jQuery 선택자

- 선택한 요소를 변수에 저장

<ul>
    <li>에스프레소</li>
    <li>아메리카노</li>
    <li>카페라떼</li>
</ul>

var coffees = $("li");
$("#length").text("커피의 종류는 총 " + coffees.length + "가지 입니다.");

코드 실행

 

- 선택한 요소의 필터링

<ul>
    <li>에스프레소</li>
    <li><b>아메리카노</b></li>
    <li>카페라떼</li>
</ul

$("li:has(b)").append(" - 추천 메뉴입니다.");

코드 실행

 

- 필터링에 사용할 수 있는 선택자

선택자	예제	설명
:eq(n)	$("ul li:eq(3)")	선택한 요소 중에서 인덱스가 n인 요소를 선택함.
:gt(n)	$("ul li:gt(3)")	선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택함.
:lt(n)	$("ul li:lt(3)")	선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택함.
:even	$("tr:even")	선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택함.
:odd	$("tr:odd")	선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택함.
:first	$("p:first")	선택한 요소 중에서 첫 번째 요소를 선택함.
:last	$("p:last")	선택한 요소 중에서 마지막 요소를 선택함.
:animated	$(":animated")	선택한 요소 중에서 애니메이션 효과가 실행 중인 요소를 모두 선택함.
:header	$(":header")	선택한 요소 중에서 <h1>부터 <h6>까지의 요소를 모두 선택함.
:lang(언어)	$("p:lang(ko)")	선택한 요소 중에서 지정한 언어의 요소를 모두 선택함.
:not(선택자)	$("input:not(:empty)")	선택한 요소 중에서 지정한 선택자와 일치하지 않는 요소를 모두 선택함.
:root	$(":root")	선택한 요소 중에서 최상위 루트 요소를 선택함.
target	$("a[target='_blank']")	선택한 요소 중에서 웹 페이지 URI의 fragment 식별자와 일치하는 요소를 모두 선택함.
:contains(텍스트)	$(":contains('Hello')")	선택한 요소 중에서 지정한 텍스트를 포함하는 요소를 모두 선택함.
:has(선택자)	$("p:has(span)")	선택한 요소 중에서 지정한 선택자와 일치하는 자손 요소를 갖는 요소를 모두 선택함.
:empty	$(":empty")	선택한 요소 중에서 자식 요소를 가지고 있지 않은 요소를 모두 선택함.
:parent	$(":parent")	선택한 요소 중에서 자식 요소를 가지고 있는 요소를 모두 선택함.

 

- <input> 요소의 선택

<div><input type="checkbox" id="espresso"><label for="espresso">에스프레소</label></div>
<div><input type="checkbox" id="americano"><label for="americano">아메리카노</label></div>
<div><input type="checkbox" id="caffeLatte"><label for="caffeLatte">카페라떼</label></div>

var checked = $(":checked");
$("#count").text("선택한 커피는 총 " + checked.length + "가지 입니다.");

코드 실행

 

- <input>요소를 선택할 수 있는 선택자

선택자	예제	설명
:button	$(":button")	type 속성값이 "button"인 요소를 모두 선택한다.
:checkbox	$(":checkbox")	type 속성값이 "checkbox"인 요소를 모두 선택한다.
:file	$(":file")	type 속성값이 "file"인 요소를 모두 선택한다.
:image	$(":image")	type 속성값이 "image"인 요소를 모두 선택한다.
:password	$(":password")	type 속성값이 "password"인 요소를 모두 선택한다.
:radio	$(":radio")	type 속성값이 "radio"인 요소를 모두 선택한다.
:reset	$(":reset")	type 속성값이 "reset"인 요소를 모두 선택한다.
:submit	$(":submit")	type 속성값이 "submit"인 요소를 모두 선택한다.
:text	$(":text")	type 속성값이 "text"인 요소를 모두 선택한다.
:input	$(":input")	<input>, <textarea>, <select>, <button>요소를 모두 선택한다.
:checked	$(":checked")	type 속성값이 "checkbox" 또는 "radio"인 요소 중에서 체크되어 있는 요소를 모두 선택한다.
:selected	$(":selected")	<option>요소 중에서 선택된 요소를 모두 선택한다.
:focus	$(":focus")	현재 포커스가 가지고 있는 요소를 선택한다.
:disabled	$(":disabled")	비활성화되어있는 요소를 모두 선택한다.
:enabled	$(":enabled")	활성화되어있는 요소를 모두 선택한다.

 

 

선택된 요소에 접근(getter 메소드와 setter 메소드)

- 대표적인 getter 메소드와 setter 메소드

메소드	설명
.html()	해당 요소의 HTML 콘텐츠를 반환하거나 설정한다.
.text()	해당 요소의 텍스트 콘텐츠를 반환하거나 설정한다.
.width()	선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정한다.
.height()	선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정한다.
.attr()	해당 요소의 명시된 속성의 속성값을 반환하거나 설정한다.
.position()	선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환한다. (getter 메소드)
.val()	<form>요소의 값을 반환하거나 설정한다.

 

메소드 체이닝(method chaining)

getter 메소드는 선택된 요소의 값을 읽어서 그 값을 반환한다.
만약 선택된 요소가 여러 개 존재하면, getter 메소드는 가장 '첫 번째 요소'의 값만을 반환할 것이다.

 

하지만 setter 메소드는 선택된 '모든 요소'에 인수로 전달된 값을 설정한다.
그리고 선택된 모든 요소에 접근할 수 있는 또 다른 jQuery 객체를 반환한다.

 

이렇게 반환된 jQuery 객체를 이용하면 메소드를 호출할 때마다 세미콜론(;)을 사용하지 않고도, 곧바로 이어서 다른 jQuery 메소드를 호출할 수 있다.
이런 방식으로 여러 개의 메소드가 연속으로 호출되는 것을 메소드 체이닝(method chaining)이라고 한다.

$("ul").find("li").eq(1).append(" - 추천 메뉴입니다.");

<ul>
  <li>에스프레소</li>
  <li>아메리카노</li>
  <li>카페라떼</li>
</ul>

코드 실행

 

.eq() 메소드는 선택한 요소 중에서 지정된 인덱스에 해당하는 요소를 선택하는 메소드이다.

메소드 체이닝 도중에 .end() 메소드를 사용하면 바로 이전에 선택했던 요소의 집합을 다시 선택할 수 있다.

$("ul").find("li").eq(1).append(" - 추천 메뉴입니다.")
  .end().eq(2).append(" - 추천 메뉴입니다.");

<ul> 요소에서 <li>를 찾아, 인덱스가 1인 요소에 문자열이 추가하고, .end() 메소드를 사용하여 append() 메소드 이전으로 돌아서 다시 인덱스가 2인 요소를 선택하여 문자열을 추가한다.

코드 실행

 

- .width() 메소드와 .height() 메소드

// setter
$("img").width(300);
$("img").height(300);

// getter
var imgWidth = $("img").width();
var imgHeight = $("img").height();
$("p").html("가로 길이:" + imgWidth + ", 높이 :" + imgHeight);

 

 - .attr() 메소드

.attr() 메소드는 선택한 요소의 특정 속성값을 반환하거나 설정하기 위해 사용한다.

// setter
$("img").attr("width", "300");

// getter
var imgWidth = $("img").attr("width");
$("p").html("변경된 이미지 너비:" + imgWidth);

 

[참고] : http://www.devkuma.com/