Jquery - Element 탐색하기

1. 순회탐색하기

 

first()	선택자로 선택된 element중 첫번째
last()	선택자로 선택된  element 중 마지막
eq(index번호)	선택자로 선택된 element중 index번호가 일치하는 element
filter(function(i,v){}||선택자)	매개변수 선택자랑 일치하는 element 또는 함수에서 반환하는 값이 true인 element
not(선택자)	매개변수 선택자를 제회한 element

 

    <div id="container">
        <h3 class="a">h3 1</h3>
        <h3>h3 2</h3>
        <h3 class="a">h3 3</h3>
        <h3>h3 4</h3>
        <h4>h4</h4>
        <p>p 1</p>
        <p class="a">p 2</p>
        <p>p 3</p>
        <p class="a">p 4</p>
    </div>

    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>

        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>

        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>

        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>

        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>

        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    
    </table>

    <button onclick="fisrtTest();">첫번째 elemnet선택</button>
    <button onclick="lastTest();">마지막 elemnet선택</button>
    <button onclick="filterTest();">조건에 맞는 elemnet선택</button>
    <button onclick="notTest();">예외 elemnet선택</button>
    <button onclick="eqTest();">eq선택</button>

    <script>
        const eqTest=()=>{
            $("#container>*").eq(3).css("backgroundColor","yellow");
        }

        const notTest=()=>{
            $("#container>*").not(".a").css("backgroundColor","yellow");
        }  //#container에 속하면서 class가 a이 아닌것


        const filterTest=()=>{
            console.log($("#container>*").filter("p"));
            console.log($("#container>*").filter("p.a")); //p태그이면서 class가 a인 것

            $("#container>*").filter(function(i,v){
                console.log(i,v);
            })

            $("#container>*,table td").filter(function(i,v){
                //return v.innerText.includes("1");
                // 같은 방법
                return $(v).text().includes("1");
            }).css("backgroundColor","hotpink")

        }


        const fisrtTest=()=>{
            // const firstEl=$("#container>*").first();
            // console.log(firstEl);

            const firstEl=$("#container>p","#container>h4").first();
            console.log(firstEl);

            $("table tr").first().css("backgroundColor","lime");
        }

        const lastTest=()=>{
            const lastEl=$("#container>.a").last();
            console.log(lastEl);

            $("table tr").last().css("backgroundColor","cornflowerblue");
        }
    </script>

 

2. 자식 element 탐색하기

children()	모든 자손 element를 찾는것(직접 연결되어 있는 것)
find("선택자")	모든 후손 element 중 선택자에 해당하는 것

 

    <div id="childcontainer">
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>

            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>

            <tr>
                <td>7</td>
                <td>
                    <button>버튼입니다</button>
                </td>
                <td>
                    <input type="text" name="test">
                </td>
            </tr>
        </table>
        <img src="https://w7.pngwing.com/pngs/441/722/png-transparent-pikachu-thumbnail.png" alt="" width="200" height="200" style="display: none;">
        <button>두번째 버튼</button>
    </div>

    <button onclick="childrenTest();">자식들 찾기</button>
    <button onclick="findTest();">후손 태그들 찾기</button>

    <script>

        const childrenTest=()=>{
            const t=$("#childcontainer>table>tbody").children();
            console.log(t); //tr
            console.log(t.children()); //td
            t.children().filter((i,v)=>{
                return i%2==0;
            }).css("backgroundColor","purple");
        }

        const findTest=()=>{
            const b=$("#childcontainer>table>tbody").find("button");
            console.log(b);

            $("#childcontainer").find("button").click(e=>{
                $("img").css("display","block");
            }) //버튼을 찾아서 이벤트를 넣어라
        }

    </script>

 

 

3. 부모 element 탐색하기

 

parent()	바로 위에 있는 부모태그 가져오기
parents()	모든 부모태그 가져오기
parentsUntil("선택자")	매개변수까지의 부모를 가져오기

<div id="parentcontainer">
        <div>나는 div div의 부모
            <div>나는 div h1의 부모
                <h1>나는 h1 p의 부모
                    <p>
                        나는 p
                    </p>
                </h1>
            </div>
        </div>
</div>

<button onclick="parentTest();">부모찾기</button>
<button onclick="parentsTest();">부모들찾기</button>
<button onclick="parentsUntilTest();">특정범위로 부모 찾기</button>

<style>
  div#parentcontainer *{
  	border : 3px solid aqua;
    padding: 10px;
  }
</style>

<script>
   const parentsUntilTest=()=>{
       const psuntil=$("#parentcontainer p").parentsUntil("div#parentcontainer") //접근하는 부모 전까지만 출력
       console.log(psuntil);
   }

   const parentsTest=()=>{
       const ps=$("div#parentcontainer p").parents();
       // 나의 바로 위 부모 : fist, 
       // 최상위 부모 : last => 인덱스 처음을 가까운 부모부터 시작하기 때문
       console.log(ps);
   }

   const parentTest=()=>{
      const p=$("div#parentcontainer p").parent();
      console.log(p); //h1
      console.log(p.parent());  //div 나는 h1의 부모
   }
</script>

 

 

f. 형제레벨 element 탐색

siblings()	위, 아래 형제를 다 가져오는 함수
next()	아래 태그를 가져오는 함수
nextAll()	아래 있는 태그 전체를 가져오는 함수
nextUntil()	아래에 있는 태그를 범위에 맞게 가져오는 함수
prev()	위에 있는 태그를 가져오는 함수
prevAll()	위에 있는 태그 전체를 가져오는 함수
prevUntil()	위에 있는 태그 범위에 맞게 가져오는 함수

 

<div id="brocontainer">
        <h2>1</h2>
        <h2>2</h2>
        
        <p>p 1</p>
        <p>p 2</p>
        <p>p 3</p>

        <span>span1</span>
        <span>span2</span>

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

        <div>
            <h2>div h2 1</h2>
            <h2>div h2 2</h2>
            <p>div p 1</p>
            <span>div span 1</span>
        </div>
</div>

<button onclick="siblingsTest();">형제들 가져오기</button>
<button onclick="prevTest();">앞에 태그</button>
<button onclick="prevAllTest();">앞에 있는 전체태그</button>
<button onclick="prevAllUntilTest();">앞에 있는 전체태그 증 범위</button>
<button onclick="nextTest();">다음에 있는 태그 가져오기</button>

<script>
    const nextTest=()=>{
          const nextEl=$("#brocontainer>div>h2").next();
          console.log(nextEl);
    }

    const prevAllUntilTest=()=>{
          const prevAllUntil=$("#brocontainer>*").last().prevUntil("span");
          prevAllUntil.css("color","crimson");
    }

    const prevAllTest=()=>{
          const preAll=$("#brocontainer>span:eq(0)").prevAll();
          console.log(preAll);
          preAll.each((i,v)=>{
                if($(v).prop("tagName")=='H2') $(v).css("backgroundColor","lime");
                else if ($(v).prop("tagName")=='P') $(v).css("backgroundColor","purple");
          });
    }

    const prevTest=()=>{
          const preTag=$("#brocontainer>div").prev();
          console.log(preTag); //div 바로 위에 있는 ul

          preTag.children().css({"display":"inline"});
            //div자식들
    }

    const siblingsTest=()=>{
         // const t = $("#brocontainer>p:eq(1)").siblings();
         // t.css("backgroundColor","tomato")

         const t = $("#brocontainer>ul>li:eq(2)").siblings(); 
         t.css("backgroundColor","tomato") //li의 같은레벨(형제)는 li밖에 없기 때문
    }
</script>

 

 

5. 같은 레벨의 입력창 추가하기

 

 <table>
   <tbody>
     <tr>
        <td><input type="text"></td>
        <td><button onclick="addInput(event);">추가</button></td>
     </tr>
          
     <tr>
        <td><input type="text"></td>
        <td><button onclick="addInput(event);">추가</button></td>
     </tr>
     
     <tr>
        <td>
           <input type="text">
        </td>
        <td>
           <button onclick="addInput(event);">추가</button>
        </td>
    </tr>
  </tbody>
</table>

<script>
    const addInput=(e)=>{
        const input=$("<input>").attr({
                type:"text",
                name:"test"
        });
        $(e.target).parent().prev().append(input);
    }
</script>