728x90
반응형
예제1
<!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>
        #zone2 :checked {width:30px; height:30px;}
        /* input[name="hobby1"]:checked {width:30px; height:30px;} */
    </style>
    <script>
        function ent(){
            // :hidden탐색선택자 : 엘리먼트 속성이 display: none인 태그만 인지함.
            $("#wrap p:hidden").css({"display":"block","background":"#ff0"});

            var z1 = $("#course :selected").val();
            var z1 = $("#zone1 :selected").val();
            console.log("z1: ", z1);

            var z1 = $("#course :selected");
            console.log(z1[0].attributes[0].value);

            // var z2 = $("#zone2 :checked").val();
            // var z2 = $("#zone2 :checked");
            console.log("z2: ", z2);

            var z3 = $("#zone3 :checked").val();
            var z3 = $("#zone3 :checked");
            console.log("z3: ", z3);
        }
    </script>
</head>
<body>
    <button onclick="ent()">클릭</button>
    <div id="wrap">
        <p>내용1</p>
        <p style="display: none;">내용2-1</p>
        <p style="visibility: hidden;">내용2-2</p>
        <p>내용3</p>
    </div>
    <form action="#" >
        <p id="zone1">
            <select name="course" id="course">
                <option value="opt1">옵션1</option>
                <option value="opt2" selected>옵션2</option>
                <option value="opt3">옵션3</option>
            </select>
        </p>
        <p id="zone2">
            <input type="checkbox" name="hobby1" value="독서">독서
            <input type="checkbox" name="hobby2" value="자전거">자전거
            <input type="checkbox" name="hobby3" value="등산" checked>등산
        </p>
        <p id="zone3">
            <input type="radio" name="gender" value="male">남성
            <input type="radio" name="gender" value="female" checked>여성
        </p>
        <input type="submit" value="전송하기">
    </form>
</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(){
            // :contains(문자열) =>문자열 포함여부 확인 선택자
            $("#inner_1 p:contains(내용1)").css({"background-color":"green"});

            // :has(요소명)=>해당 요소를 가지고 있는지의 여부 확인 선택자
            $("#inner_1 p:has(strong)").css({"background-color":"aqua"});

            // contents() => 자식(후손포함안됨)으로 존재하는 엘리먼트(태그)들
            $("#outer_wrap").contents().css({"border":"1px dashed red"});

            // not("선택자") => 해당선택한 요소가 아닌 것
            $("#inner_2 p").not(":first").css({"background-color":"yellow"});
            $("#inner_2 p").eq(2).css({"color":"red"});
            // end() : 앞의 타겟선택  $("#inner_2 p").
            $("#inner_2 p").eq(2).end().css({"color":"blue"});
        });
    </script>
</head>
<body>
    <div id="outer_wrap">
        <h1>콘텐츠 탐색 선택자</h1>
        <section id="inner_1">
            <h1>contains(), contents(), has()</h1>
            <p><span>내용1</span></p>
            <p><strong>내용2</strong></p>
            <p><span>내용3</span></p>
        </section>
        <section id="inner_2">
            <h1>not(), end()</h1>
            <p>내용4</p>
            <p>내용5</p>
            <p>내용6</p>
        </section>
    </div>
</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(){
            $('p:first').css("color","green")
            .next().css('color','red')
            .next().css({'color': 'aqua', 'font-weight': 'bolder'})
            .end().children('span').css({'color':'blue','font-weight':'bolder'})
            ;
        });
    </script>
</head>
<body>
    <p>p태그1 : <span>p태그1 안의 span태그</span></p>
    <p>p태그1의 동생 p태그2 : <span>p태그2 안의 span태그</span></p>
    <p>p태그3</p>
</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>
    <style>
        span {color:blue;}
    </style>
    <script>
        $(function(){
            // 이벤트핸들러 함수는 이벤트 객체(e)와 이벤트를 발생시킨 요소(this)를 가지고 있다.
            /*
            이벤트 객체 사용하는 방법
            1. function의 매개인자로 객체를 생성하여 사용하는 방법
            ex) function(e){
                    let t= e.target;
                }

            2. 자바스크립트의 event내장객체를 사용하는 방법
            ex) function(){
                    let t= event.target;
                }
            */
           $('.tt').click(function(e){
            let i = e.target;
            let id=$(i).attr("id");
            $("#"+id).css({"width":"30px", "height":"30px"})
           })
           $('button').click(function(e){
                console.log('e: ', e);
                let t = e.target;
                // e.target과 this는 자바스크립트 객체이므로
                // jQuery함수를 적용하려면 jQuery형식으로 변경해주어야 한다.
                // ex) $(e.target), $(this)
                console.log('t',t);
                console.log('this',this);
                console.log($(this).attr("id"));

                $(t).parent().css("background-color","black");

                // 해당 엘리먼트의 자식 엘리먼트들 찾기
                $("div").children().css("border-bottom","3px double red");
                // $("div").children(".selected").css("color","red");
           });
        });
    </script>
    </script>
</head>
<body>
    <button type="button" id="btn">엘리먼트에 스타일 입히기</button>
    <p>이곳은 문단</p>
    
    <input type="checkbox" class="tt"name="t1" id="t1" value="t1">t1
    <div><span class="selected">이곳은 div의 차일드 span</span></div>
    <p>그리고<span>여기는 또 다른</span> 문단</p>
    <div>마지막으로 <span>이곳은 div의 차일드 span,</span>이곳은 div</div>
</body>
</html>​
728x90
반응형
저작자표시 비영리 변경금지

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

prop(), attr(), map방식  (0) 2024.03.06
[jQuery] slice(), find(), filter(), remove(), replace(), empty()  (0) 2024.03.06
[JS] jQuery  (0) 2024.03.05
[JS] jQuery  (0) 2024.03.05
[JS] jQuery selector - prev, prevAll, prevUntil / next, nextAll, nextUntil / siblings  (0) 2024.03.05

+ Recent posts

티스토리툴바