250920 #002 jQuery - node

jQuery 2020. 9. 25. 10:28

Node, Element?

Node -

Element -

jQuery의 모든 코드는 jQuery.ready() 메소드로 시작.

jQuery.ready() : 페이지 내의 모든 코드를 읽어들인 후에 실행해라! (= window.onload)

  	//jQuery(document).ready(function(){//방법 1
        //$(document).ready(function(){//방법 2
        //jQuery(function(){//방법 3
        $(function(){//방법 4
            $("#frontEnd").css("border", "3px solid lightblue");
            $("#backEnd").css("border", "3px solid pink");
        })
        // php에서도 $를 사용하기에
        var j = jQuery; //초기화 하면 $를 j로 대체할 수 있다.

일반 노드 찾기

일단 body 부분.

<body>
    <!-- form tag 안에 node들은 name을 꼭 넣어줘야해,,,submit하면 name부분이 입력되거든! -->
    <form action="./index.html" method="GET"> 
        <input type="text" id="aTxt" name="txtName">
        <input type="submit" id="bBtn" name="bBtn" value="Home">
    </form>
        <div id="frontEnd">
                <h2>Front End</h2>
                <ul>
                    <li class="myFavourite">html</li>
                    <li class="myFavourite">CSS</li>
                    <li class="js">JavaScript
                        <ul>
                            <li id="JS_CORE"><a href="./javascript_ex.html">JavaScript Core</a></li>
                            <li id="DOM"><a href="./DOM.js">DOM</a></li>
                            <li id="BOM"><a href="./BOM.js">BOM</a></li>
                        </ul>
                    </li>
                    <li class='js'>jQuery</li>
                        
                </ul>
        </div>
        <div id="backEnd">
            <h2>Back End</h2>
            <ul>
                <li class="java myFavourite">java</li> <!--띄어쓰기 먹히네,,,신기방기-->
                <li class="java">jsp/sevlet</li>
                <li class="myFavourite">oracle</li>
            </ul>
        </div>
</body>

역시 시작은 jQuery(document).ready(function(){ });을 해야지?

$(function(){

아이디 이름으로 찾기

//document.getElementById("#frontEnd").css 를 하면 .css를 쓸 수 있는 것은 jQuery형태뿐이기에 앞에 DOM형태는 올 수 없다.
            $("#frontEnd").css("border", "3px solid lightblue");
            $("#backEnd").css("border", "3px solid pink");
            $("input[type='text']").css("color", "green");

클래스 이름으로 찾기

 var $myF = $(".myFavourite") //document.getElementsByClassName()랑 같은거야
            console.log($myF.length);
            var $myF_2 = $myF.eq(2); //jQuery형태로 return;
            $myF_2.css("border", "2px dotted red");

class="java myFavourite"인데 myFavourite에 걸렸다.

줄여서 쓸 수도 있다.

 //줄여쓰기 = method chaining
            $(".myFavourite").eq(0).css("border", "2px dotted blue");

태그 이름으로 찾기

 //풀어쓰기
            var $tagLi = $("li");
            var $tagLi_0 = $tagLi.eq(0);
            $tagLi_0.css("background-image", "linear-gradient(orange, purple)");

//줄여쓰기 = method chaining
            $("h2").eq(1).css("background-image", "linear-gradient(pink, lightblue)");

Array로 뽑아지기에 index 생각해야지!

속성 이름으로 찾기

단순히 속성 옵션

$("[href]")

그 외 추가할 수 있는 옵션들

Option	Description
$("E[a]")
$("E[a=v]")
$("E[a^=v]")
$("E[a$=v]")
$("E[a*=v]")

//속성 이름으로 찾기
        $("[href]").css("text-decoration", "none");
        $("[href$=js]").css("color", "lightblue");

href 속성이 있는 전체가 밑줄이 사라졌고, href 마지막에 js가 있는 노드들만 색이 변했다.

다 하고 시작할 때 열었던 jQuery(document).ready(function() { 이거 닫아야지

})

찾은 노드 다루기

찾은 node 개수 구하기

var $myF = $(".myFavourite");
    //찾은 노드 개수 구하기
    $(function(){
        alert("$myF.length: "+$myF.length); //body태그 뒤로가야 다 나오네,,,
    })

n번째 node 접근하기 - eq()

//n 번째 노드 구하기 - eq() : jQuery로 return;
    $(function(){
        var $myF_3 = $(".myFavourite").eq(3);
        $myF_3.css("background-image", "linear-gradient(pink, blue)")
    })

DOM obj 접근하기 - get()

//DOM obj 접근하기 - get() : HTMLElement로 return;
    $(function(){
        var $li_2 = $("li").get(2);
        //$li_2.css("background", "gray"); // 안먹힌다.
        $li_2.style.background = "gray"; // 잘먹힌다.
    })

순차적으로 접근하기 - each()

//순차적으로 접근하기 - each() : jQuery로 return;
    //이거 밑에 2개 차이 확인해
    var $list = $("ul li");
    for(var i in $list){
                console.log($list[i]);
            }
            for (var i = 0; i < $list.lenght; i++){
                console.log($list[i].innerText);
            
            }
            
            $list.each(function(){
                console.log($(this).text());
            })

자손 노드 중 특정한 노드 접근하기 - find()

//자손 노드 중 특정 노드 찾기 - find() : jQuery로 return;
    $(function(){
        $("#backEnd").find(".java").eq(0).css("border", "2px solid beige");
    })

자식 노드 찾기

모든 자식 노드 찾기

//모든 자식 노드 찾기 - children() : jQuery로 return;
    $(function(){
        $("#frontEnd").children().css("border", "2px dotted blue");
    })

특정 자식 노드 찾기

//특정 자식 노드 찾기
    $(function(){
        $("#backEnd").find("ul").children(".myFavourite").css("font-weight", "bold");
        //자식에 자식도 적용이 되나?
        //$("$backEnd").children("ul").children("li").css("background", "pink"); // 응 안돼~
    })

부모 노드 찾기

//부모 노드 찾기 - parent() : 
    $(function(){
        $("#DOM").parent().parent().css("border", "2px dotted pink");
    })

조상 노드 찾기

//조상 노드 찾기 - parents() :
    $(function(){
        $("#DOM").parents().css("color", "pink");
    })

형제 노드 찾기

이전 형제 노드 찾기

//이전 형제 노드 찾기 - prev() :
    $(function(){
        $("#DOM").prev().css("border", "3px solid orange");
    })

모든 이전 형제 노드 찾기

//이전 모든 형제 노드 찾기 - prevAll() :
    $(function(){
        $("#DOM").prevAll().css("border", "3px solid orange");
    })

다음 형제 노드 찾기

//다음 형제 노드 찾기 - next() :
    $(function(){
        $("#DOM").next().css("border", "3px solid orange");
    })

모든 다음 형제 노드 찾기

//다음 모든 형제 노드 찾기 - nextAll() :
    $(function(){
        $("#DOM").nextAll().css("border", "3px solid orange");
    })

노드 생성 / 추가 / 삭제 / 이동

'jQuery' 카테고리의 다른 글

280920 #003 jQuery : Style / Attribute (0)	2020.09.28

ABOUT ME

stuoy

일반 노드 찾기

아이디 이름으로 찾기

클래스 이름으로 찾기

태그 이름으로 찾기

속성 이름으로 찾기

찾은 노드 다루기

'jQuery' 카테고리의 다른 글

티스토리툴바

ABOUT ME

일반 노드 찾기

아이디 이름으로 찾기

클래스 이름으로 찾기

태그 이름으로 찾기

속성 이름으로 찾기

찾은 노드 다루기

'jQuery' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바