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 prop, 체크박스 전체 선택, 전체 해제

2020/JQuery 2020. 3. 5. 17: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() {
        $("#total").click(function() {
          if ($("#total").prop("checked")) {
            $("input[type=checkbox]").prop("checked", true);
          } else {
            $("input[type=checkbox]").prop("checked", false);
          }
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <table>
      <tr>
        <th class="boardChk"><input type="checkbox" id="total" />전체</th>
      </tr>
      <tr>
        <td><input type="checkbox" id="test[]" />테스트1</td>
      </tr>
      <tr>
        <td><input type="checkbox" id="test[]" />테스트2</td>
      </tr>
      <tr>
        <td><input type="checkbox" id="test[]" />테스트3</td>
      </tr>
      <tr>
        <td><input type="checkbox" id="test[]" />테스트4</td>
      </tr>
    </table>
  </body>
</html>
반응형
저작자표시

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

JQuery 엘리먼트 순서 알아내기  (0) 2020.03.05
JQuery height, width  (0) 2020.03.05
Jquery focus, blur, focusin, focusout  (0) 2020.03.05
JQuery change  (0) 2020.03.04
JQuery window.resize  (0) 2020.03.04
블로그 이미지

꽃꽂이하는개발자

,

Jquery focus, blur, focusin, focusout

2020/JQuery 2020. 3. 5. 17: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>
      //focusin: 초점이 맞추어지기 전
      //(selector).focusin(function)
      //focusout: 초점이 사라지기 전
      //(selector).focusout(function)
      //focus : 초점을 맞추어 질 때
      //(selector).focus(function)
      //blur : 초점이 사라질 때
      //(selector).blur(function)
      $(document).ready(function() {
        $("div").focusin(function() {
          $(this).css("background-color", "yellow");
        });
        $("div").focusout(function() {
          $(this).css("background", "red");
        });
        $("#focus").on("focus", function() {
          $("#focus").css({
            background: "blue",
            color: "white",
            border: "1px solid violet"
          });
        });
        $("#blur").on("blur", function() {
          $("#blur").css({
            background: "red",
            color: "white",
            border: "1px solid red"
          });
          alert("text4:blur");
        });
      });
    </script>
    <title>Focus</title>
  </head>
  <body>
    <div style="border: 1px solid black; padding: 10px;">
      First name: <input type="text" /> Last name: <input type="text" />
    </div>
    focus:<input id="focus" type="text" /> <br />
    blur:<input id="blur" type="text" />
    <p>
      Click an input field to get focus. Click outside an input field to lose
      focus.
    </p>
  </body>
</html>
반응형
저작자표시

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

JQuery height, width  (0) 2020.03.05
JQuery prop, 체크박스 전체 선택, 전체 해제  (0) 2020.03.05
JQuery change  (0) 2020.03.04
JQuery window.resize  (0) 2020.03.04
JQuery scroll event  (0) 2020.03.04
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

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

티스토리툴바