728x90
반응형
index
<!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>
        #menu li:nth-of-type(even){background-color: yellow;}
    </style>
    <script>
        $(function(){
            $("#menu li:even").css({"background-color": "red"});
            // $("#menu li:nth-of-type(even)").css({"background-color": "yellow"});
            // $("#menu li:odd").css({"background-color": "green"});
            // jQuery선택자
            // eq(인덱스번호(0부터)) : 인덱스번호에 해당되는 요소 선택
            // $("#menu1 li").eq(2).css({"background-color": "yellow"});
            $("#menu1 li:eq(2)").css({"background-color": "yellow"});

            // lt(인덱스번호) : 인덱스 번호보다 작은, 이전 요소 모두 선택(자신 제외)
            // less than
            $("#menu1 li:lt(2)").css({"background-color": "aqua"});

            // gt(인덱스번호) : 인덱스 번호보다 큰, 이후 요소 모두 선택(자신 제외)
            // greater than
            $("#menu1 li:gt(2)").css({"background-color": "hotpink"});
        });
    </script>
</head>
<body>
    <div id="wrap">
        <h1>탐색 선택자</h1>
        <ul id="menu">
            <li>내용1</li>
            <li>내용2</li>
            <li>내용3</li>
            <li>내용4</li>
        </ul>
    </div>
    <div id="wrap1">
        <h1>탐색 선택자</h1>
        <ul id="menu1">
            <li>내용1</li>
            <li>내용2</li>
            <li>내용3</li>
            <li>내용4</li>
            <li>내용5</li>
        </ul>
    </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 exeFnc() {
        // $(".wrap_1 p.active").removeClass("active").addClass("on");
        // $(".wrap_1 p.active").removeClass("active").attr("class", "on");
        // $(".wrap_1 p.active").addClass("on"); //추가
        // $(".wrap_1 p.active").attr("on"); //추가

        // attr("속성명", "속성값") : 해당 요소에 해당 속성과 값을 설정한다.
        // attr("속성명") : 해당 요소에 해당 속성의 값을 가져오라는 의미임.

        $(".wrap_1 p.active").attr("class", "on");
        $(".wrap_1 p:eq(2) a").attr("href", "http://www.naver.com");

        // val("값"): 해당 요소에 value속성의 값을 설정한다.
        // val() : 해당 요소에 value속성의 값을 가져오세요.
        $(".wrap_1 p:eq(3) input").val("Korea");
        alert($(".wrap_1 p:eq(3) input").val());

        // after("요소"): 해당 요소 뒤에(바로 동생으로) 추가할 요소(html형태)를 넣는다.
        $(".wrap_2 p:eq(1)").after("<p>After(추가1)</p>");

        // before("요소"): 해당 요소 뒤에(바로 형으로) 추가할 요소(html형태)를 넣는다.
        $(".wrap_2 p:eq(1)").before("<p>Before(추가2)</p>");

        // unwrap() : 선택한 요소의 부모 요소를 삭제한다.
        // wrapInner() : 선택한 요소의 자식 요소를 감싼다.
        // $(".wrap_3 p").unwrap();
        $(".wrap_3 p").unwrap().wrapInner("<strong>");
        $("button").hide();
      }
    </script>
  </head>
  <body>
    <div class="wrap_1">
      <p>텍스트1</p>
      <p class="active">내용2</p>
      <p><a href="#">네이버</a></p>
      <p><input type="text" value="Hello" /></p>
    </div>
    <div class="wrap_2">
      <p>내용5</p>
      <p>내용6</p>
    </div>
    <div class="wrap_3">
      <div>
        <p>내용7</p>
        <p>내용8</p>
      </div>
    </div><br><br>
    <button onclick="exeFnc()">제이쿼리 적용하기</button>
  </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 exeFnc(){
            // text("변경할 내용"): 해당 요소의 컨텐츠(가장 최종적인 인라인요소=텍스트 포함)를
            // 변경할 내용으로 바꾼다. => javascript의 공간자리 innerText와 동일
            // text() : 해당 요소의 자식요소 중 텍스트만 모두 가져와라 => javascript의 값자리 innerText와 동일
            $("#divBox1 li:first").text("첫번째 내용");
            $("#divBox1 li:last").text("마지막 내용");
            
            $("#divBox2 li:first-of-type").css({"background-color":"#ff0"});
            $("#divBox2 li:last-of-type").css({"background-color":"#0ff"});
            
            $("#divBox3 p:first-of-type").css({"background-color":"green"});
            $("#divBox3 p:last-of-type").css({"background-color":"yellow"});

            $("li:first").text("첫번째 내용");
            $("li:last").text("마지막 내용");

            // $("li:first-of-type").css({"background-color":"#ff0"});
            // $("li:last-of-type").css({"background-color":"#0ff"});
            $('button').hide();
        }
    </script>
</head>
<body>
    <div id="divBox1">
        <h1>탐색 선택자</h1>
        <ul>
            <li><p>123</p><img src="C:\hwork\img\before.png" width="150"></li>
            <li>내용1-2</li>
            <li>내용1-3</li>
        </ul>
        <ul>
            <li>내용2-1</li>
            <li>내용2-2</li>
            <li>내용2-3</li>
        </ul>
    </div>
    <div id="divBox2">
        <h1>탐색 선택자</h1>
        <ul>
            <li><p>123</p><img src="C:\hwork\img\before.png" width="150"></li>
            <li>내용1-2</li>
            <li>내용1-3</li>
        </ul>
        <ul>
            <li>내용2-1</li>
            <li>내용2-2</li>
            <li>내용2-3</li>
        </ul>
    </div>
    <div id="divBox3">
        <h1>탐색 선택자</h1>
        <div>
            <p>내용1-1</p>
            <p>내용1-2</p>
            <p>내용1-3</p>
        </div>
        <div>
            <p>내용2-1</p>
            <p>내용2-2</p>
            <p>내용2-3</p>
        </div>
    </div>
    <br>
    <button onclick="exeFnc()">제이쿼리 적용하기</button>
</body>
</html>​
nth-child
<!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>
        /* #menu1 li:nth-child(1){background-color: yellow;} */
        /* li:nth-child(1){background-color: yellow;} */
    </style>
    <script>
        $(function(){
            // nth-child(번호n): 번호는 1부터. 번호에 해당되는 요소를 선택함.
            // 인덱스는 맨 처음 요소를 0부터 세지만, 번호는 맨 처음 요소를 1부터 셈.
            // n은 인덱스와 동일하게 0부터 셈.
            // nth-child: 정방향(위->아래로)
            // nth-last-child: 역방향(아래->위로)
            $("#menu1 li:even").css({"background-color":"red"}); //even홀수
            // $("#menu1 li:nth-of-type(even)").css({"background-color":"yellow"});
            
            $("#menu1 li:nth-child(1)").css({"background-color":"yellow"});
            $("#menu1 li:nth-child(2n)").css({"border":"2px dashed red"});

            $("#menu2 li:nth-last-child(2)").css({"background-color":"aqua"});
        });
    </script>
</head>
<body>
    <h1>탐색 선택자</h1>
    <ul id="menu1">
        <li>내용1-1</li>
        <li>내용1-2</li>
        <li>내용1-3</li>
        <li>내용1-4</li>
    </ul>
    <ul id="menu2">
        <li>내용2-1</li>
        <li>내용2-2</li>
        <li>내용2-3</li>
    </ul>
</body>
</html>​

 

728x90
반응형
저작자표시 비영리 변경금지

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

[JS] jQuery ㅇㅇㅇ  (0) 2024.03.06
[JS] jQuery  (0) 2024.03.05
[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 selector - parent(), children(), closest()  (0) 2024.03.05

+ Recent posts

티스토리툴바