[구디아카데미] jQuery 객체 탐색

[구디아카데미]

✅ 순회탐색

• first() : 선택자로 선택된 element중 0인덱스의 element -> :first 와비슷
• lias() : 선택자로 선택된 element중 마지막인덱스의 element -> :last 와비슷
• eq() : 선택자로 선택된 element중 매개변수값과 동일한 위치에 있는 element
• filter(fucntion(index,value){return true || false}||선택자) : 선택자로 선택된 element 중 return값이 true인 element
• not(선택자) : 매개변수 선택자를 제외한 element

    <script>
        const firstTest=()=>{
            // console.log($("#container>*").first());  // h3 1 문구가 들어있는 태그
            $("#container>*").first().css("fontSize","30px");
        }

        const lastTest=()=>{
            console.log($("#container>*").last()); // p4가 문구가 있는 태그
        }

        const eqTest=()=>{
            console.log($("#container>*").eq(4)); // 인덱스번호가 4번인 태그 
        }

        const filterTest=()=>{
            // $("#container>*").filter("p").css("backgroundColor","lime"); // p태그들 모두 적용
            $("#container>*").filter((i,v)=>{
                const text = $(v).text();
                // return i%2==0;  // 인덱스가 짝수번째 태그들만 해당
                return text.includes("2") || text.includes("4");  // 문구가 2또는 4가 들어있는 태그들만 해당
            }).css("backgroundColor","lime");
        }

        const notTest=()=>{
            $("#container>*").not(".a,p").css("backgroundColor","magenta");  // 클래스가 a인 것과 p태그인것 빼고 해당
        }
    </script>

✅ 자식 태그 찾기

• children() : 자식(직접연결된 element)를 가져오는 함수
  
• find("선택자") : 후손중에 매개변수와 일치하는 element 가져오는 함수
  

   <div id="childrencontainer">
        <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>
        <button>외부버튼입니다.</button>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmGRlj6CLN26NTpBzLZNluh1dNSlAF1dO7UFzf2KtUu8BKda0Fv7u447_ulpofbdurmg0&usqp=CAU" 
        alt="" width="100" height="100">
    </div>
    <button onclick="searchChildren();">자식찾기</button>
    <button onclick="searchFind();">후손태그찾기</button>
    <script>
        const searchChildren=()=>{
            const children=$("#childrencontainer").children(); // table, button, img가 나옴
            console.log(children);

            console.log($("#childrencontainer>table>tbody").children().children()); 
            $("#childrencontainer>table>tbody").children().first().css({ // 문구 1,2,3 에 적용
                "backgroundColor" : "lightgray",
                "color":"white"
            });

            $("#childrencontainer>table>tbody").children().last().css({ // 문구 7 8 9 에 적용
                "backgroundColor" : "magenta",
                "color":"white"
            });

            // console.log($("#childrencontainer>table>tbody").children().each((i,v)=>{
            //     const td=$(v).children();
            //     console.log(td);
            // }));
        }

        const searchFind=()=>{
            console.log($("#childrencontainer").find("tr")); // 3개
            console.log($("#childrencontainer").find("td")); // 9개
            console.log($("#childrencontainer").find("button")); // 2개

            const innerTag=$("#childrencontainer").find("td").children().each((i,v)=>{ // // id가 childrencontainer후손중에 태그가 td인 element 갖고옴
                // td의 밑에 children() -> element들을 갖고옴 -> button, input 
                // console.log($(v).prop("tagName"));
                console.log(v.tagName);

                switch($(v).prop("tagName")){
                    case "BUTTON" :$(v).click(e=>alert("클림!!"));break;
                    case "INPUT" :$(v).val("내가 값을 입력함"); break;
                }
            });
            console.log(innerTag);
        }

    </script>

✅부모 태그 찾기

• parent() : 바로위에있는부모
• parents() : 모든 부모를 가져오기
• parentsUnitl("선택자") : 특정 범위의 부모만 가져오기

    <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="parentAllTest();">모든부모찾기</button>
    <button onclick="parentUntilTest();">특정범위 부모찾기</button>
    <script>
        const parentTest=()=>{
            console.log($("#parentcontainer p").parent()); // h1
            console.log($("#parentcontainer p").parent().parent()); // div
        }

        const parentAllTest=()=>{
            console.log($("#parentcontainer p").parents()); 
            console.log($("#parentcontainer p").parents().filter("body").find("#parentcontainer")); 
      		// #parentcontainer p 선택자의 부모들 중에서 filter를 통해 body부분을 찾은 후 거기서 후손중 
      		// id가 #parentcontainer 인 부분 찾음
        }

        const parentUntilTest=()=>{
            console.log($("#parentcontainer p").parentsUntil("div#parentcontainer"));  // 특정범위 전까지 그 사이의 태그들 다 출력
        }
    </script>

✅ 형제 태그 찾기

• siblings() : 모든 형제들 가져오기
• prev() : 앞에 있는 형제 element 가져오기
• prevAll() : 앞에있는 전체 elment 가져오기
• prevUntil() : 위에있는 일부 범위의 elment 가져오기
• next() : 뒤에 있는 elment 가져오기
• nextAll() : 뒤에 있는 전체 element 가져오기

        <div id="brocontainer">
            <h2>h2 1</h2>
            <h2>h2 2</h2>
            <p>p 1</p>
            <p>p 2</p>
            <p>p 3</p>
            <span>span 1</span>
            <span>span 2</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>
    </h3>
    <button onclick="siblingsTest();">형제들 가져오기</button>
    <button onclick="prevTest();">앞에 있는 형제 element 가져오기</button>
    <button onclick="prevAllTest();">위에있는 전체 elment 가져오기</button>
    <button onclick="prevUntilTest();">위에있는 일부 범위의 elment 가져오기</button>
    <button onclick="nextTest();">밑에 있는 elment 가져오기</button>


    <script>
        const nextTest=()=>{
            const test=$("#brocontainer>p:last").next().next();
            console.log(test);        
            const test2=$("#brocontainer>p:last").nextAll();
            console.log(test2); // span span ul div
        }

        const siblingsTest=()=>{
            const bro=$("#brocontainer>ul").siblings(); // 본인태그 제외하고 형제태그들 호출
            console.log(bro);
        }

        const prevTest=()=>{
            const prevEl = $("#brocontainer>ul").prev();
            console.log(prevEl);

            const prevEl2 = $("#brocontainer p").prev();
            console.log(prevEl2);
        }

        const prevAllTest=()=>{
            const preveAll = $("#brocontainer>ul").prevAll().filter((i,v)=>{
                return v.tagName == "P" || v.tagName == "SPAN";   // brocontainer>ul 앞에 있는 것들중에서  p태그나 span태그 인것들 골라냄
                // return $(v).prop("tagName") =='P' ||
            }).css({
                "fontSize":"30px",
                "color":"red"
            }).css("display",(i,v)=>{
                if(v=="inline")return "block"; 
                return v;
            });
            console.log(preveAll);
        }

        const prevUntilTest=()=>{
            const test = $("#brocontainer>ul").prevUntil("#brocontainer>h2:first");
            console.log(test);
        }

    </script>