728x90
반응형

selector
$("#선택자"). - 아이디 선택자
$(".선택자"). - 클래스 선택자
$("선택자"). - 요소 선택자
$('선택자1 선택자2'). - 후손 선택자
$("선택자1.선택자2'). - 종속 선택자
$("선택자1 , 선택자2'). - 그룹 선택자
 
체이닝 기법 : 한 객체에 다양한 메서드를 줄줄이 이어서 사용하는 방법
 $("선택자").css("스타일").css("스타일")
.css('css속성명' , '속성값').css ('css속성명' , '속성값') ; -1개 속성
.css({' css속성명' : ' 속성값 ', ' css속성명' : ' 속성값 ' }) ; - 다중 속성
인접관계 선택자
 
.parent()
$("선택자").parent().css( ~ ) ;
.parents()
$("선택자").parents().css( ~ ) ;
$("선택자").parents(부모태그).css( ~ ) ;
.children()
$(부모태그>자식태그 ).children(자식태그).css( ~ ) ;
$(   ).children(자식태그).css( ~ ) ;
.closest()
: 해당 요소의 조상(부모 포함) 요소들 중 가장 가까운 div요소를 선택함
 
 
!important; 속성들 !important;
 
 
.prev()
: 바로 이전 요소 선택자. 바로 앞 요소 선택자
$("선택자").prev().css( ~ );
.prevAll()
: 바로 이전(앞, 형) 요소들 모두 선택
 
$( "선택자").prevUntil()
: 선택자 요소부터 지정한 형 요소까지 그 사이에 있는 요소들만 선택. (나와 기준점 태그는 미포함)
 
 
 
.next() or $("선택자1+바로 다음 선택자2")
: 선택한 요소의 바로 다음 요소를 선택함
$("선택자").next().next().css( ~ );
$("선택자1+바로 다음 선택자2").css( ~ );
.nextAll()
: 바로 다음(뒤, 동생) 요소들 모두 선택
$("선택자").nextAll().css( ~ );
$("선택자").nextUntil()
: 선택자 요소부터 지정한 동생 요소까지 그 사이에 있는 요소들만 선택(나와 기준점 태그는 미포함)
 
 
 
.siblings()
: 나를 제외한 형제 요소들 모두 선택
$("선택자").siblings('P').css( style );

체이닝 기법
아이디, 클래스, 요소, 자손 선택자, 후손선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    
    <style>
        em {
            font-size: 12pt;
            line-height: 60px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            //ready(function) : body 후 실행되기에 해당 함수 안에 기술된 요소들이 위에 기술되있지 않아도 문제없음
            // 체이닝 기법 : 한 객체에 다양한 메서드를 줄줄이 이어서 사용하는 방법
            // 아이디선택자
            $("#tit").css("background-color","green").css("border","2px solid #000");
            // 클래스 선택자
            $(".tit").css("background-color","red").css("border", "2px dashed #000");
            // 요소 선택자
            $("h2").css("background-color","blue").css("border", "2px dashed #000");
            // 후손 선택자 - 가장 마지막에 기술된 내용으로 적용
            $('div em').css('border','3px solid #000').css('padding','7px 9px 11px 13px');
            $('span em').css({'border' : '1px dotted #000', 'padding': '7px 10px'});
            //css("css속성명","속성값") - 단일적용시
            //css({"css속성명":"속성값","css속성명":"속성값", ...}) - 다중적용시 object(json방식)객체로 적용
        })
    </script>
</head>
<body>
    <h1>h1태그 1</h1>
    <h2 id="tit">아이디 선택자</h2>
    <h2 class="tit">클래스 선택자</h2>

    <h1>h1태그 2</h1>
    <div><em>Hello!</em><em>jQuery</em><em>forever</em></div>
    <span><em>Good Bye!</em><em>javascript</em></span>
</body>
</html>

 

종속 선택자
그룹 선택자
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        $(function(){
            // 종속 선택자
            $("h1.tit").css("background-color", "yellow").css("border" ,"2px dashed #000");
            // 그룹 선택자
            $("h1,#tit3").css({"background-color": "#00f", "border": "2px dashed #f00"});
        });
    </script>
</head>
<body>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>

    <h3 id="tit3">그룹 선택자</h3>
    <h3>인접 선택자</h3>

    <h1 class="tit">종속 선택자</h1>
    <h3 class="tit">직접 선택자</h3>
    
</body>
</html>​

 

parent()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        $(function(){
            //parent() : 부모 선택자, 해당 요소의 부모 요소만 선택함.
            $("#list_1").css('font-size','32px').parent().css("border","2px dashed #f00");
        });
    </script>
</head>
<body>
    <h1>인접 관계 선택자</h1>
    <ul id="wrap">
        <li>
            <ul>
                <li id="list_1">리스트1-1</li>
                <li>리스트1-2</li>
            </ul>
        </li>
        <li>리스트2</li>
        <li>리스트3</li>
    </ul>
</body>
</html>​
parents()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <style>
        html, body{padding:0 !important; margin:0 !important;}
        /* !important 최상위 우선순위 선택자 */
        /* html, body{padding:0  margin:0;} */
    </style>
    <script>
        $(function(){
            $(".txt1").parents().css({"border": "5px solid red", "padding": "10px"});
            // $(".txt2").parents("section").css({"border": "5px solid red", "padding": "10px"});
        });
    </script>
</head>
<body>
    <h1 class="title">선택자</h1>
    <section>
        <div><p class="txt1">내용</p></div>
    </section>
    <section>
        <div><p class="txt2">내용</p></div>
    </section>
</body>
</html>​
children()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        $(function (){
            // children() : 선택한 요소의 모든 자식 요소를 선택함.
            // children("매개변수로 들어가는 선택자들") : 선택한 요소의 모든 자식 요소 중 매개변수에 설정한 태그 요소들만 선택함.
            $("#wrap h1").css({"background-color":"yellow"});
            $("#wrap > section").children("h1").css({
                "color": "green",
                "font-weight": "bolder",
                "border": "2px dashed #f00"
            });
        });
    </script>
</head>
<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <section>
            <h1>하위 요소 선택자</h1>
            <p>내용2</p>
            <h1>하위 요소 선택자</h1>
            <p>내용2</p>
            <h1>하위 요소 선택자</h1>
            <p>내용2</p>
        </section>
    </div>
</body>
</html>​

 

closest()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
        $(function(){
            // $("선택자").closest("div").css({
            // 해당 요소의 조상(부모 포함) 요소들 중 가장 가까운 div요소를 선택함
            // $(".txt1").closest("div").css({
            // $(".txt1").parents("div").css({
            $(".txt1").closest("section").css({
                "background-color": "yellow",
                "border": "2px solid #f00",
                "padding": "10px"
            });
        })
    </script>
</head>
<body>
    <div>
        <h1 class="title">선택자</h1>
        <div>
            <div style="background-color: green;">상위 DIV</div>
            <section>
                <p class="txt1">내용</p>
            </section>
        </div>
    </div>
</body>
</html>​
728x90
반응형
저작자표시 비영리 변경금지

'[JS]' 카테고리의 다른 글

[JS] jQuery selector - prev, prevAll, prevUntil / next, nextAll, nextUntil / siblings  (0) 2024.03.05
[JS] jQuery selector - prev, prevAll, prevUntil / next, nextAll, nextUntil / siblings  (0) 2024.03.05
[JS] jQuery - 네트워크, 다운로드 방식  (0) 2024.03.04
[JS] querySelector, querySelectorAll  (0) 2024.03.04
[JS] callfunction  (0) 2024.03.04

+ Recent posts

티스토리툴바