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
블로그 이미지

꽃꽂이하는개발자

,

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
블로그 이미지

꽃꽂이하는개발자

,

JQuery scroll event

2020/JQuery 2020. 3. 4. 20:55
반응형
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>scroll demo</title>
    <style>
      div {
        color: blue;
      }
      p {
        color: green;
      }
      span {
        color: red;
        display: none;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
      $(window).scroll(function() {
        $("span")
          .css("display", "inline")
          .fadeOut("slow");
      });
    </script>
  </head>
  <body>
    <div>화면을 작게 만들어서 스크롤을 움직여보세요..</div>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
  </body>
</html>
반응형
저작자표시

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

JQuery change  (0) 2020.03.04
JQuery window.resize  (0) 2020.03.04
JQuery 글자수 제한 (keyup, textarea, length)  (0) 2020.03.04
JQuery event.stopPropagation();  (0) 2020.03.03
JQuery event.preventDefault, 기본 이벤트 제거  (0) 2020.03.03
블로그 이미지

꽃꽂이하는개발자

,

JQuery 글자수 제한 (keyup, textarea, length)

2020/JQuery 2020. 3. 4. 20:34
반응형
<!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() {
        $("textarea").keyup(function() {
          var inputLength = $(this).val().length;
          if (inputLength > 150) alert("더이상 입력할 수 없습니다.");
          var remain = 150 - inputLength;
          $("h1").html(remain);
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <div>
      <p>글자수 제한 150</p>
      <h1>150</h1>
      <textarea cols="70" rows="5"></textarea>
    </div>
  </body>
</html>
반응형
저작자표시

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

JQuery window.resize  (0) 2020.03.04
JQuery scroll event  (0) 2020.03.04
JQuery event.stopPropagation();  (0) 2020.03.03
JQuery event.preventDefault, 기본 이벤트 제거  (0) 2020.03.03
JQuery odd, even 위치 필터선택자  (0) 2020.03.03
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   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

티스토리툴바