JQuery 손자 - jQuery sonja

/* Javascript Sample */ //아래와 같이 하면 자식요소가 딱 바로 아래 뎁스의 요소만 나온다 $("."+$("#tab").val()).children().each(function(){ //~~ }); //이렇게 하면 하위 요소 중에서 클래스명이 devValidation인 것을 모두 골라온닷 $("."+$("#tab").val()).find(".devValidation").each(function(){ console.log("find : "+$(this).prop('tagName').toLowerCase()); });

* 자식요소 가져오기

children : 자식요소만 가져옴(손자요소 가져오지 않음)

find : 자손 요소까지 모두 대상으로 해서 가져옴

[참고] 「웹 엔지니어의 교과서 」

저작자표시비영리변경금지

'Front-End' 카테고리의 다른 글

jQuery.ajaxSettings.traditional = true; (0) jQuery 자식요소 seletor & li의 value 가져오기 (3) jQuery selectBox에서 option text값 가져오기 (1) JSTL 함수로 현재 시간 나타내기 (0) Select Box의 값 중 특정 값 selected (0)

2017.06.26

2017.06.06

2017.05.16

2017.05.11

하위(descendant:자손) 요소의 탐색

DOM 트리에서 특정 요소의 자손(descendant) 요소를 탐색하기 위한 메소드는 다음과 같다.

메소드설명

.children()	선택한 요소의 자식(child) 요소를 모두 선택한다.
.find()	선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택한다.

.children() 메소드

.children() 메소드는 선택한 요소의 자식(child) 요소를 모두 선택한다.
이때, 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 자식 요소만을 선택할 수도 있다.

아래와 같이 HTML 요소가 있을 때,

<ul>요소의 자식 요소를 모두 선택하고, 해당 요소의 CSS 스타일을 변경한다.

$("ul").children().css({"border": "2px solid red"});

코드 실행

.find() 메소드

.find() 메소드는 선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 하위 요소를 모두 선택한다.
이때 별표("*")를 인수로 전달하여, 선택한 요소의 자손 요소를 모두 선택할 수도 있다.

<ul>요소의 자손 요소를 모두 선택하고, 해당 요소의 CSS 스타일을 변경한다.

$("ul").find("*").css({"border": "2px solid red"});

코드 실행

jQuery를 사용하여 특정 선택자를 기준으로 자식 요소들을 어떻게 찾을 수 있을까?

--> 바로 아래 요소, 즉 자식 요소만 탐색할때는 children()을 사용, 자식 및 하위 태그 모두에서 찾을 때는 find()를 사용

예시))

다음과 같은 DOM이 있는 경우

1. ul을 기준으로 자식 태그에 있는 li 태그를 찾고 싶을 때

--> children() 사용

$('ul').children('li'); // return 'li' 배열(li 두개) // 첫번째 li를 찾을때 $('ul').children('li:eq(0)'); /return 첫번째 li

2. ul을 기준으로 손자 태그에 있는 span을 찾고 싶을 때

--> find() 사용(children은 자식 태그까지만 찾을 수 있다)

$('ul').find('span') //return span배열(span 두개) //첫번째 span을 찾을때 1. $('ul>li:eq(0)').children('span'); or 2. $('ul').find('span:eq(0)');

참고로 eq(0)은 선택한 요소 중 첫번째 요소를 선택합니다.

ex)

<ul>

<li></li> // 첫번째 li --> li:eq(0)

<li></li> // 두번째 li --> li:eq(1)

<ul>

자손 등등 자식, 손자, 증손자하고있다.

jQuery를하여 자손 요소를 찾기 위해 DOM 트리를 통과.

아래로 DOM 트리를 이송

여기에 jQuery를 방법 아래로 DOM 트리를 통과하는 두 가지입니다 :

어린이 ()
() 발견

jQuery를 어린이 () 메소드

어린이 () 메소드는 선택한 요소를 모두 직접 자식 요소를 반환합니다.

이 방법 만 아래 한 쌍의 DOM 트리 탐색.

다음 예는 모든 직접 하위 요소의 각 <div> 요소를 반환합니다 :

예

$(document).ready(function(){
$("div").children();
});

»시도

또한 하위 요소에 대한 검색을 필터링 옵션 매개 변수를 사용할 수 있습니다.

다음 예는 모든 <p> 요소에 "1"의 클래스 이름을 반환, 그들은 <DIV> 직접 자식 요소입니다 :

예

$(document).ready(function(){
$("div").children("p.1");
});

»시도

jQuery를 찾기 () 메소드

찾기 () 메서드는 선택된 요소의 하위 요소 아래의 마지막 후손에있는 모든 방법을 반환합니다.

다음의 예 반환에 속하는 <DIV> 모든 <SPAN> 요소의 자손 :

예

$(document).ready(function(){
$("div").find("span");
});

»시도

다음의 예는 <DIV> 모든 세대를 반환합니다 :

예

$(document).ready(function(){
$("div").find("*");
});

»시도

<body>

<div>

<ul>

</ul>

</div>

</body>

1. body태그를 기준으로 바로 아래 div를 자식. body 아래 모든 태그를 후손

2. 자식선택자

- 형태 : '부모 > 자식'

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

$('body > *').css('color','red');

});

</script>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

자식에게만 적용된것을 확인할수 있다.

3. 후손선택자

- 형태 : '요소 A 요소 B'

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

$('body *').css('color','red');

});

</script>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

;body 밑으로 모두 속성이 적용된다.

$('body ul').css('color','red');

; ul만 적용됨.

4. 속성선택자

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

$('input[type=text]').val("이름을 입력하세요!");

});

</script>

</head>

<body>

</body>

</html>

; input 태그 중 type이 text인 것만 적용.

; id를 주면 복잡할수 있으므로.

5. 입력양식 필터 선택자

- 형태 : '요소:값'

요소:button	input태그 중 type속성이button인 문서객체와 button태그를 선택
요소: checkbox
요소:file
요소:image
요소:password
요소:radio
요소:reset
요소:submit
요소:text

요소:checked	check된 입력양식을 선택
요소:disabled	비활성화된 입력양식을 선택
요소:enabled	활성화된 입력양식을 선택
요소:focus	포커스가 된 입력양식을 선택
요소:input	모든 입력양식을 선택
요소:selected	option중 선택된 입력양식을 선택

예) 5초 후 선택된 값을 보여주는 예제

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

//5초후 실행

setTimeout(function(){

//변수 선언

var value = $('select > option:selected').val();

alert(value);

}, 5000);

});

</script>

</head>

<body>

</select>

</body>

</html>

;

6. 필터 선택자

- 위치 관련 필터 선택자 : 테이블에 색상

요소:odd 홀수번재 위치한 문서객체 선택

요소:even 짝수번재 위치한 문서객체 선택

요소:first 첫번재 위치한 문서객체 선택

요소:last 마지막 번재 위치한 문서객체 선택

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(document).ready(function(){

$('tr:odd').css('background','red');

$('tr:even').css('background','blue');

$('tr:first').css('background','orange');

});

</script>

</head>

<body>

<table>

</table>

</body>

</html>

JQuery 손자 - jQuery sonja

'Front-End' 카테고리의 다른 글

하위(descendant:자손) 요소의 탐색

.children() 메소드

.find() 메소드

아래로 DOM 트리를 이송

jQuery를 어린이 () 메소드

예

예

jQuery를 찾기 () 메소드

예

예

관련 게시물

JQuery 롤링 슬라이드 - jQuery lolling seullaideu

제이쿼리 html 추가 - jeikwoli html chuga

자바스크립트 clear - jabaseukeulibteu clear

JavaScript Date 시간 더하기 - JavaScript Date sigan deohagi

제이 쿼리 선택자 하위 - jei kwoli seontaegja hawi

Textarea readonly 해제 - Textarea readonly haeje

Javascript readonly 여부 - Javascript readonly yeobu

Toplist

최신 우편물

태그