JQuery 문서 객체 탐색 종료

2020/JQuery 2020. 3. 2. 18:20
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $("h1")
          .css("background-color", "#c9c9c9")
          .filter(":even")
          .css("color", "red")
          .end()
          .filter(":odd")
          .css("color", "blue");
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <h1>안녕</h1>
    <h1>오늘 하루 너는 어땟니?</h1>
    <h1>너무 힘들면 하루 쉬어가</h1>
    <h1>제일 소중한건 너니까</h1>
    <h1>하루 이틀 쉰다고 인생이 변하지는 않아.</h1>
    <h1>너무 쉬면 변한다...</h1>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery is()  (0) 2020.03.02
jquery 문서 객체 추가 선택(add)  (0) 2020.03.02
JQuery eq, last, first()  (0) 2020.03.02
JQuery 배열관리  (0) 2020.03.01
JQuery animate()  (0) 2020.03.01
블로그 이미지

꽃꽂이하는개발자

,

JQuery eq, last, first()

2020/JQuery 2020. 3. 2. 18:14
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      // eq : $(selector).eq(index)
      // first : $(selector).first()
      // last : $(selector).last()
      $(document).ready(function() {
        $("p")
          .eq(2)
          .css("background-color", "red");
        $("p")
          .first()
          .css("background-color", "blue");
        $("p")
          .last()
          .css("background-color", "gray");
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <h1>안녕..개발자는 참 힘든거 같아..</h1>
    <p>할게 너무 많거든..</p>
    <p>그런데 재미는 있다</p>
    <p>하지만 재미로만 살 수 없거든..가족도 있구..</p>
    <p>도전하고자 하는 사람 도전해!</p>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

jquery 문서 객체 추가 선택(add)  (0) 2020.03.02
JQuery 문서 객체 탐색 종료  (0) 2020.03.02
JQuery 배열관리  (0) 2020.03.01
JQuery animate()  (0) 2020.03.01
JQuery FadeIn(), FadeOut()  (0) 2020.03.01
블로그 이미지

꽃꽂이하는개발자

,

JQuery 배열관리

2020/JQuery 2020. 3. 1. 22:18
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $("h1").each(function(index) {
          $(this).addClass("high_light_" + index);
          console.log(index);
        });
      });
    </script>
    <style>
      .high_light_0 {
        background-color: yellow;
      }

      .high_light_1 {
        background-color: orange;
      }
      .high_light_2 {
        background-color: blue;
      }
      .high_light_3 {
        background-color: green;
      }

      .high_light_4 {
        background-color: red;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <h1>item - 0</h1>
    <h1>item - 1</h1>
    <h1>item - 2</h1>
    <h1>item - 3</h1>
    <h1>item - 4</h1>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery 문서 객체 탐색 종료  (0) 2020.03.02
JQuery eq, last, first()  (0) 2020.03.02
JQuery animate()  (0) 2020.03.01
JQuery FadeIn(), FadeOut()  (0) 2020.03.01
Jquery slideDown(), slideUp()  (0) 2020.03.01
블로그 이미지

꽃꽂이하는개발자

,

JQuery animate()

2020/JQuery 2020. 3. 1. 22:09
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      //(selector).animate({styles}, speed,  easing, callback)
      $(document).ready(function() {
        $("#btn1").click(function() {
          $("#box").animate({ height: "300px" });
        });
        $("#btn2").click(function() {
          $("#box").animate({ height: "100px" }, 3000);
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <button id="btn1">Animate height</button>
    <button id="btn2">Reset height</button>

    <div
      id="box"
      style="background:#98bf21;height:100px;width:100px;margin:15px;"
    ></div>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery eq, last, first()  (0) 2020.03.02
JQuery 배열관리  (0) 2020.03.01
JQuery FadeIn(), FadeOut()  (0) 2020.03.01
Jquery slideDown(), slideUp()  (0) 2020.03.01
JQuery on, off(이벤트 연결 및 제거)  (0) 2020.02.29
블로그 이미지

꽃꽂이하는개발자

,

JQuery FadeIn(), FadeOut()

2020/JQuery 2020. 3. 1. 22:03
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#btn1").click(function() {
          $("img").fadeOut(1000);
        });
        $("#btn2").click(function() {
          $("img").fadeIn(1000);
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <img src="/images/1.png" />

    <button id="btn1">FadeOut</button>
    <button id="btn2">FadeIn</button>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery 배열관리  (0) 2020.03.01
JQuery animate()  (0) 2020.03.01
Jquery slideDown(), slideUp()  (0) 2020.03.01
JQuery on, off(이벤트 연결 및 제거)  (0) 2020.02.29
JQuery insertAfter, insertBefore 요소추가  (0) 2020.02.29
블로그 이미지

꽃꽂이하는개발자

,

Jquery slideDown(), slideUp()

2020/JQuery 2020. 3. 1. 21:58
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      //slideDown , slideUp
      $(document).ready(function() {
        $("#btn1").click(function() {
          $("img").slideUp();
        });
        $("#btn2").click(function() {
          $("img").slideDown();
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <img src="/images/1.png" />
    <br /><br />
    <button id="btn1">SlideUp</button>
    <button id="btn2">SlideDown</button>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery animate()  (0) 2020.03.01
JQuery FadeIn(), FadeOut()  (0) 2020.03.01
JQuery on, off(이벤트 연결 및 제거)  (0) 2020.02.29
JQuery insertAfter, insertBefore 요소추가  (0) 2020.02.29
JQuery 요소 추가(형제관계)  (0) 2020.02.29
블로그 이미지

꽃꽂이하는개발자

,

JQuery on, off(이벤트 연결 및 제거)

2020/JQuery 2020. 2. 29. 17:05
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      //off는 unbind랑 비슷한듯?
      $(document).ready(function() {
        $("p").on("click", function() {
          $(this).css("background-color", "red");
        });
        $("button").click(function() {
          $("p").off("click");
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <p>Click this paragraph to change its background color</p>
    <p>
      Click the button below and then click on this paragraph.(the click event
      is removed)
    </p>
    <br />
    <button>이벤트제거(off)</button>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery FadeIn(), FadeOut()  (0) 2020.03.01
Jquery slideDown(), slideUp()  (0) 2020.03.01
JQuery insertAfter, insertBefore 요소추가  (0) 2020.02.29
JQuery 요소 추가(형제관계)  (0) 2020.02.29
JQuery 요소 감싸기, 요소 태그 넣기  (0) 2020.02.29
블로그 이미지

꽃꽂이하는개발자

,

JQuery insertAfter, insertBefore 요소추가

2020/JQuery 2020. 2. 29. 16:54
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#insertBefore").click(function() {
          $("<span>Hello Insert Before</span>").insertBefore("p");
        });
        $("#insertAfter").click(function() {
          $("<span>Hello After Before</span>").insertAfter("p");
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph</p>
    <button id="insertBefore">insertBefore</button>
    <button id="insertAfter">insertAfter</button>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

Jquery slideDown(), slideUp()  (0) 2020.03.01
JQuery on, off(이벤트 연결 및 제거)  (0) 2020.02.29
JQuery 요소 추가(형제관계)  (0) 2020.02.29
JQuery 요소 감싸기, 요소 태그 넣기  (0) 2020.02.29
JQuery selectBox 유효성검사  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바