웹프로그래밍/jQuery

jQuery-탐색관련 메소드

zelkova 2016. 3. 28. 15:38

<목차로 돌아가기>

  탐색메소드 알아보기



 메소드

 기능

 parent()

  선택한 요소 바로 위에 있는 요소를 선택

 Children()

 선택한 요소 아래에 있는 요소를 선택

 Siblings([표현식])

 선택한 요소의 모든 형제자매 요소 선택
 (표현식) 기술시 해당 표현식에 만족하는 형제자매요소만 선택

 Prev( )

 선택한 요소 위치한 왼쪽(이전)에 있는 요소를 선택

 Next()

 선택한 요소 위치한 오른쪽(이후)에 있는 요소를 선택



Example

아래의 예제의 dom 구조는 이와 같습니다.


dom구조를 숙지하고 살펴보면 이해하기가 더 쉽습니다.



<html>

 <head>

<script src="js/jquery-1.12.2.min.js"></script>


<script>

$(document).ready(function()//현재 문서가 준비되면 함수를 사용하겠다.

{

$(".img").click(function(){

var a="<b> 요로콤 나옴</b>";

$("b").remove(); //현재문서에서 b태그는 다지워버리겠다!

$(".img").children("b").remove();

//img라는 class의 아래에 있는 계층인 b태그를 지워버리겠다!

$(this).append(a);

});

});

</script>

</head>


<body>

<div class="img">

<img src="1.jpg"  width=200 height=200>

<h1> 고양이</h1>

</div>

<div class="img">

<img src="2.jpg"  width=200 height=200>

<h1> 강아지</h1>

</div>

<div class="img2">

<img src="3.jpg"  width=200 height=200>

<h1> 다람쥐</h1>

</div>

</body>

</html>




반응형

'웹프로그래밍 > jQuery' 카테고리의 다른 글

jQuery의 이벤트 처리  (0) 2016.03.30
jQuery의 필터제어  (0) 2016.03.30
jQuery의 변수  (0) 2016.03.28
jQuery-DOM요소 제어하기  (0) 2016.03.28
jQuery의 메소드  (0) 2016.03.26