제이쿼리(Jquery) 부모, 형제, 자식 선택자#3

제이쿼리에 요소를 선택 후 선택된 요소에서 부모, 형제, 자식 요소를 찾는 방법에 대해서 알아보겠습니다.

선택된 요소를 감싸고 있는 상위 노드를 부모, 반대로 선택된 요소가 어떤한 요소를 감싸고 있을때 감쌓여진 요소를 자식, 또는 선택된 요소와 같은 트리위치에 있는 요소들을 형제 요소라고 부릅니다.

1. 제이쿼리(Jquery) 부모 선택자 함수 표

1.1 부모 선택자 사용 예시

1.1.1 .parent() 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul>
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").parent().css("color","red");
</script> 

결과값

부모 요소인 ID가 'parentUl2' 요소가 선택된다.

1.1.2 .parents() 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul> 
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").parents().css("color","red");
</script>

결과값

부모요소들인 ID가 'parentDIV', 'parentLI', 'parentUl2' 요소들이 선택된다.

1.1.3 .closest( [selector] ) 사용 접근

<div id="parentDIV">메뉴
 <ul id="parentUL1">
  <li>1</li>
  <li>2</li>
  <li id="parentLI">3
   <ul id="parentUl2">
    <li id="selector">3-1</li> 
    <li>3-2</li>
   </ul> 
  </li>
  <li>4</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").closest("li").css("color","red");
</script> 

결과값

선택된 현재 요소부터 가장가까운 요소를 자기 자신이므로 ID가 selector인 요소를 찾게됩니다.

2. 제이쿼리(Jquery) 형제 선택자 함수 표

2.1 형제 선택자 사용 예시

2.1.1 .prev() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li> 
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").prev("#prevLI1").css("color","red"); 
</script> 

결과값

선택된 요소에 이전 요소인 ID가 prevLI1이 선택이 되고 selector에 해당하는 아이디가 prevLI1인 요소를 선택하게 됩니다.

2.1.2. .prevAll() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li> 
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").prevAll("#prevLI2").css("color","red"); 
</script> 

결과값

선택된 요소에 이전 요소 전체 ID값이 prevLI2, prevLI1 인 요소를 찾습니다. 그중에서 ID가 prevLI2인 요소만 찾게 됩니다.

2.1.3 .next() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").next().css("color","red");
</script> 

결과값

선택된 요소에 다음 요소인 ID가 nextLI1 요소가 선택이 됩니다.

2.1.4 .nextAll() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").nextAll("#nextLI2").css("color","red");
</script> 

결과값

선택된 요소에 다음 요소 전체를 ID가 nextLI1, nextLI2를 찾습니다. 그중에서 ID가 nextLI2인 요소가 선택이 됩니다.

2.1.5 .siblings() 사용 접근

<div>메뉴
 <ul>
  <li id="prevLI2">1</li>
  <li id="prevLI1">2</li>
  <li id="selector">3</li>
  <li id="nextLI1">4</li>
  <li id="nextLI2">5</li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").siblings().css("color","red");
</script> 

결과값

선택된 요소에 같은 노드에 해당하는 요소들을 전체 선택하게 됩니다.

3. 제이쿼리(Jquery) 자식 선택자 함수 표

3.1 자식 선택자 사용 예시

3.2.1 .children() 사용 접근

<div>메뉴
 <ul>
  <li>1</li>
  <li id="selector">2
   <ul id="children1">
    <li>2-1</li>
    <li>2-2</li>
    <li id="children2">2-3
     <ul id="children3">
      <li id="children4">2-3-1</li>
      <li>2-3-2</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div> 
<script type="text/javascript">
 $("#selector").children().css("color","red");
</script>

결과값

선택된 요소에 해당하는 자식요소인 ID가 children1 인 요소가 선택이 됩니다.

3.2.2 .find() 사용 접근

<div>메뉴
 <ul>
  <li>1</li>
  <li id="selector">2
   <ul id="children1">
    <li>2-1</li>
    <li>2-2</li>
    <li id="children2">2-3
     <ul id="children3">
      <li id="children4">2-3-1</li>
      <li>2-3-2</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript">
 $("#selector").find("#children4").css("color","red");
</script>

결과값

선택된 요소에 자식요소들 중에서 ID가 children4인 요소를 선택하게 됩니다.

개발노트 :: 제이쿼리(Jquery) 속성 선택자#2

제이쿼리를 이용해 특정 요소를 선택하는 방법에 대해 알아보겠습니다.

이번에는 요소에 해당하는 속성값을 이용해 선택을 해보겠습니다.

1. 속성 선택자 표

2. 속성 선택자 사용

2-1 element[attribute] attribute속성을 가진 요소 선택

<span id="text1" title="text1" >Header1</span>
<script type="text/javascript">
   $("span[id]").css("color",'red');
</script>

결과값

2-2 element[attribute=value] attribute속성이 value값인 된 요소 선택

<span title="text2">Header2</span>
<script type="text/javascript">
   $("span[title = 'text2']").css("color",'red');
</script>

결과값

2-3 element[attribute!=value] attribute속성이 value값이 아닌 요소 선택

<span title="text1">Header2</span>
<script type="text/javascript">
  $("span[title != 'text2']").css("color",'red');
</script>

결과값 

2-4 element[attribute$=value]  attribute속성이 value값으로 끝나는 요소 선택

<span title="valueText1">Header2</span>
<script type="text/javascript">
 $("span[title $= 'Text1']").css("color",'red');
</script>

결과값

2-5 element[attribute|=value] attribute속성이 'value'일치 또는 'value-'으로 시작하는 요소

<span title="text1">Header2</span><br/>
<span title="text1-text2">Header2</span> 
<script type="text/javascript">
 $("span[title |= 'text1']").css("color",'red');
</script>

결과값

2-6 element[attribute^=value] attribute속성이 value값으로 시작하는 요소 선택

<span title="text1text2">Header2</span> 
<script type="text/javascript">
 $("span[title ^= 'text1']").css("color",'red');
</script>

결과값

2-7 element[attribute~=value] attribute 속성이 value 단어를 포함되어 있는 요소 선택

<span title="text1 text2">Header2</span> 
<script type="text/javascript">
 $("span[title ~= 'text1']").css("color",'red');
</script>

결과값

2-8 element[attribute*=value] attribute속성이 value 값을 포함되어 있는 요소 선택

<span title="text1text2">Header2</span>  
<script type="text/javascript">
 $("span[title *= 'text1']").css("color",'red');
</script>

결과값

제이쿼리(Jquery) 아이디, 클래스, 태그 선택자#1

제이쿼리를 이용해 특정 요소를 선택하는 방법에 대해 알아보겠습니다.

이번에는 요소에 해당하는 아이디, 클래스, 태그를 이용해 선택을 해보겠습니다.

아이디, 클래스, 태그 값으로 찾기위해서는 제이쿼리가 정해놓은 아래 표에있는 기호를 이용해 선택을 하시면 되겠습니다.

1. 아이디, 클래스, 태그 선택자 표

2. 아이디, 클래스, 태그 선택자

 <h1 id="red">Header1</h1>
 <h1 class="blue">Header2</h1>
 <h2>Header3</h2>
 
 <script type="text/javascript">
  $("#red").css("color","red");
  $(".blue").css("color","blue");
  $("h2").css("color","gray");
 </script>

결과값

1. Jquersy 란?

Jquey를 사용하기 위해서는 Javascript언어에 대해 기본적인 지식이 필요로 합니다.

2. Jquery 프로젝트 적용

제이쿼리(jquery) 공식 홈페이지를 통해 https://jquery.com 다운로드가 가능합니다.

프로젝트 적용방법은 2가지로 나눠집니다.

1. CDN 주소를 활용한 방법

  https://developers.google.com/speed/libraries/#jquery 주소를 접속을 하면 아래와 같은 화면이 보입니다.

 현재 기준으로 버전이 3.x 버전까지 지원이 되고 있으니 가급적이면 최신버전으로 이용을 합니다.

 버전에 해당하는 소스를 복사를 해 사용을 하고자 하는 프로젝트에 <head></head> 태그 안에 포함을 시켜줍니다.

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

2. 라이브러리 다운 후 적용

  https://jquery.com/download/ 페이지에 접속을 하면 아래와 같은 화면이 나옵니다.

 여기서 실제 버전(production), 개발버전(development)이 존재를 하는데 필요하시는 버전을 클릭해 다운 후

 프로젝트에 <head></head>태그 사이에 다운로드한 파일을 경로를 넣어주시면 됩니다.

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

 3. Jquery 기능

3-1 요소 선택자

<링크>

1. JSTL indexOf 사용

${fn:indexOf("jstl indexOf","jstl") }

${fn:indexOf("jstl indexOf","indexOf") }

${fn:indexOf("jstl indexOf","text") }

결과값

${fn:indexOf("내용","찾는 문자열") }

찾는 문자열이 내용에 있으면 문자열이 시작하는 index 값을 리턴해 줍니다.

만약 찾는 문자열이 없다고 하면 -1이라는 값을 리턴이 된다.

JSTL length 및 substring 함수 사용

1. length 함수 사용

<c:set var="phoneNum" value="010-1234-5678"/>1
${fn:length(phoneNum)}

결과값

2. substring 함수 사용

<c:set var="phoneNum" value="010-1234-5678"/>
${fn:substring(phoneNum,0,3) }<br/> 
${fn:substring(phoneNum,4,8) }<br/>
${fn:substring(phoneNum,9,13) }<br/>

결과값

JSTL 날짜 포맷 <fmt:formatDate> <fmt:parseDate> 

fmt:parseDate - 문자열 -> Date 타입으로 변경

fmt:formatDate - Date 타입 -> 문자열으로 변경

1. JSTL <fmt:parseDate>

<fmt:parseDate var="date1" value="2019-01-01" pattern="yyyy-MM-dd"/> 
${date1}

결과값

2. JSTL <fmt:formatDate>

<fmt:formatDate  var="date2" value="${date1}" type="DATE" pattern="yyyy-MM-dd"/>
${date2}

결과값

3. pattern 형식

1. <fmt:formatNumber>숫자 포맷

<fmt:formatNumber var="num1" value="123456789" type="number"/>
<fmt:formatNumber var="num2" value="123456789" type="currency" currencySymbol="W"/>
<fmt:formatNumber var="num3" value="123.456789" pattern="0000.000"/>
<fmt:formatNumber var="num4" value="0.01" type="percent"/>
 
${num1}<br/>
${num2}<br/>
${num3}<br/>
${num4}

결과

2. <fmt:parseNumber> 숫자 파스

<fmt:parseNumber var="num1" value="1,234,567.89" type="number"/>
<fmt:parseNumber var="num2" value="123456789abcdef"  type="number" />
 
${num1}<br/>
${num2}  
 

결과

숫자 포맷 옵션