JQuery children, parent, parents, siblings

2020/JQuery 2020. 3. 6. 12:35
반응형
<!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() {
        //자식 레벨에서만 찾아서 선택
        // $("ul")
        //   .children()
        //   .css({ color: "red", border: "2px solid red" });
        //노드의 부모를 선택
        // $("ul")
        //   .parent()
        //   .css({ color: "blue", border: "2px solid red" });
        // //노드의 모든 부모 선택
        // $("ul")
        //   .parents()
        //   .css({ color: "gray", border: "2px solid red" });
        // //태그의 형제 노드를 선택
        $("ul")
          .siblings()
          .css({ color: "green", border: "2px solid red" });
      });
    </script>
    <title>Document</title>
  </head>
  <body class="descendants">
    body(great-grndparent)
    <div style="width:500px;">
      div(grandparent)
      <ul>
        ul (direct parent)
        <li>
          li(child)
          <span>span (grandchild)</span>
        </li>
      </ul>
      <ul>
        <li>another ul-li</li>
      </ul>
    </div>
  </body>
</html>
반응형
저작자표시

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

JQuery not()  (0) 2020.03.06
JQuery 현재요소, 다음요소, next(), nextAll()  (0) 2020.03.06
jquery animation stop  (0) 2020.03.06
JQuery 엘리먼트 순서 알아내기  (0) 2020.03.05
JQuery height, width  (0) 2020.03.05
블로그 이미지

꽃꽂이하는개발자

,

JQuery not()

2020/JQuery 2020. 3. 6. 12:24
반응형
<!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() {
        $("p")
          .not(".intro")
          .css("background-color", "yellow");
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <h1>Welcome to My Hompage</h1>
    <p>이번에는 NOT을 공부할거야</p>
    <p class="intro">NOT알지?</p>
    <p class="intro">not은 부정이잖아?</p>
    <p>위에 스크립트 소스를 보면 이해될거야^^*</p>
  </body>
</html>
반응형
저작자표시

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

JQuery children, parent, parents, siblings  (0) 2020.03.06
JQuery 현재요소, 다음요소, next(), nextAll()  (0) 2020.03.06
jquery animation stop  (0) 2020.03.06
JQuery 엘리먼트 순서 알아내기  (0) 2020.03.05
JQuery height, width  (0) 2020.03.05
블로그 이미지

꽃꽂이하는개발자

,

JQuery 현재요소, 다음요소, next(), nextAll()

2020/JQuery 2020. 3. 6. 11:40
반응형
<!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() {
        $("li:eq(0)")
          .next()
          .text("next 활용")
          .css("background", "red");
        $("li:eq(2)")
          .nextAll()
          .text("nextAll활용")
          .css("background", "blue");
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>원숭이</li>
      <li>호랑이</li>
      <li>낙타</li>
      <li>박쥐</li>
      <li>쥐며느리</li>
      <li>리어카</li>
    </ul>
  </body>
</html>
반응형
저작자표시

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

JQuery children, parent, parents, siblings  (0) 2020.03.06
JQuery not()  (0) 2020.03.06
jquery animation stop  (0) 2020.03.06
JQuery 엘리먼트 순서 알아내기  (0) 2020.03.05
JQuery height, width  (0) 2020.03.05
블로그 이미지

꽃꽂이하는개발자

,

jquery animation stop

2020/JQuery 2020. 3. 6. 11:33
반응형
<!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() {
        $("#start").click(function() {
          $("div").animate({ left: "100px" }, 1000);
          $("div").animate({ fontSize: "3em" }, 5000);
        });
        $("#stop").click(function() {
          $("div").stop();
        });
        $("#stop2").click(function() {
          $("div").stop(true);
        });
        $("#stop3").click(function() {
          $("div").stop(true, true);
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="stop2">Stop all</button>
    <button id="stop3">Stop but finish</button>
    <div
      style="background:#98bf21; height:100px; width:200px; position:absolute;"
    >
      HELLO
    </div>
  </body>
</html>
반응형
저작자표시

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

JQuery not()  (0) 2020.03.06
JQuery 현재요소, 다음요소, next(), nextAll()  (0) 2020.03.06
JQuery 엘리먼트 순서 알아내기  (0) 2020.03.05
JQuery height, width  (0) 2020.03.05
JQuery prop, 체크박스 전체 선택, 전체 해제  (0) 2020.03.05
블로그 이미지

꽃꽂이하는개발자

,

JQuery 엘리먼트 순서 알아내기

2020/JQuery 2020. 3. 5. 18:43
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>index demo</title>
    <style>
      div {
        background: yellow;
        margin: 5px;
      }
      span {
        color: red;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  </head>
  <body>
    <span>Click a div!</span>
    <div>First div</div>
    <div>Second div</div>
    <div>Third div</div>

    <script>
      $("div").click(function() {
        // `this` is the DOM element that was clicked
        var index = $("div").index(this);
        $("span").text("That was div index #" + index);
      });
    </script>
  </body>
</html>

 

출처: https://api.jquery.com/index/

반응형
저작자표시

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

JQuery 현재요소, 다음요소, next(), nextAll()  (0) 2020.03.06
jquery animation stop  (0) 2020.03.06
JQuery height, width  (0) 2020.03.05
JQuery prop, 체크박스 전체 선택, 전체 해제  (0) 2020.03.05
Jquery focus, blur, focusin, focusout  (0) 2020.03.05
블로그 이미지

꽃꽂이하는개발자

,

JQuery height, width

2020/JQuery 2020. 3. 5. 18:17
반응형
<!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() {
      //     $("button").click(function() {
      //       var wh = $(window).height();
      //       var ww = $(window).width();
      //       alert("높이" + wh + "넓이" + ww);
      //     });
      //   });
      //div의 크기
      $(document).ready(function() {
        $("button").click(function() {
          var wh = $("div").height();
          var ww = $("div").width();
          alert("높이" + wh + "넓이" + ww);
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <div
      style="height: 100px; width:300px; padding: 10px; margin:3px; border:1px solid blue; background-color:lightblue;"
    ></div>
    <br />

    <button>Display the width of div</button>
  </body>
</html>
반응형
저작자표시

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

jquery animation stop  (0) 2020.03.06
JQuery 엘리먼트 순서 알아내기  (0) 2020.03.05
JQuery prop, 체크박스 전체 선택, 전체 해제  (0) 2020.03.05
Jquery focus, blur, focusin, focusout  (0) 2020.03.05
JQuery change  (0) 2020.03.04
블로그 이미지

꽃꽂이하는개발자

,

JQuery change

2020/JQuery 2020. 3. 4. 21:50
반응형
<!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>
      //change - 상태변경 등의 이벤트가 발생하였을 경우 사용
      // $(selector).change(function), $(selector).change()
      $(document).ready(function() {
        $("#select1").change(function() {
          var x = $("#select1 option:selected").text();
          $("div").text(x);
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <select id="select1" size="6">
      <option value="1">강아지</option>
      <option value="2">고양이</option>
      <option value="3">말</option>
      <option value="4">소</option>
      <option value="5">양</option>
      <option value="6">개구리</option>
      <option value="7">도마뱀</option>
    </select>
    <br /><br />
    <div>선택 표시</div>
  </body>
</html>
반응형
저작자표시

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

JQuery prop, 체크박스 전체 선택, 전체 해제  (0) 2020.03.05
Jquery focus, blur, focusin, focusout  (0) 2020.03.05
JQuery window.resize  (0) 2020.03.04
JQuery scroll event  (0) 2020.03.04
JQuery 글자수 제한 (keyup, textarea, length)  (0) 2020.03.04
블로그 이미지

꽃꽂이하는개발자

,

JQuery window.resize

2020/JQuery 2020. 3. 4. 21:02
반응형
<!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>
      //브라우저의 크기를 조정하면 화면에 width가 나옴.
      $(window).resize(function() {
        $("body").prepend("<div>" + $(window).width() + "</div>");
      });
    </script>
    <title>Document</title>
  </head>
  <body></body>
</html>
반응형
저작자표시

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

Jquery focus, blur, focusin, focusout  (0) 2020.03.05
JQuery change  (0) 2020.03.04
JQuery scroll event  (0) 2020.03.04
JQuery 글자수 제한 (keyup, textarea, length)  (0) 2020.03.04
JQuery event.stopPropagation();  (0) 2020.03.03
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2024/06   »
일 월 화 수 목 금 토
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

티스토리툴바