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

꽃꽂이하는개발자

,

JQuery event.stopPropagation();

2020/JQuery 2020. 3. 3. 18:47
반응형
<!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>
      //event.stopPropagation
      // 현재 이벤트가 상위로 전달되지 않도록 중단
      $(document).ready(function() {
        $("a").click(function(event) {
          $(this).css("background-color", "orange");
          //이벤트 전파를 막음
          event.stopPropagation();
          event.preventDefault();
        });
        $("h1").click(function() {
          $(this).css("background-color", "green");
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <h1>
      <a href="http://www.naver.com">Naver</a>
    </h1>
  </body>
</html>
반응형
저작자표시

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

JQuery scroll event  (0) 2020.03.04
JQuery 글자수 제한 (keyup, textarea, length)  (0) 2020.03.04
JQuery event.preventDefault, 기본 이벤트 제거  (0) 2020.03.03
JQuery odd, even 위치 필터선택자  (0) 2020.03.03
JQuery clone(), 문서 객체 복제  (0) 2020.03.03
블로그 이미지

꽃꽂이하는개발자

,

JQuery event.preventDefault, 기본 이벤트 제거

2020/JQuery 2020. 3. 3. 18:39
반응형
<!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>
      //event.preventDefault
      // 현재 이벤트의 기본 동작을 중단
      // $(selector).click(function(event){event.preventDefault();});
      $(document).ready(function() {
        $("#naver").click(function(event) {
          event.preventDefault();
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <a id="naver" href="http://www.naver.com">네이버</a>
    <a id="daum" href="http://www.daum.net">다음</a>
  </body>
</html>
반응형
저작자표시

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

JQuery 글자수 제한 (keyup, textarea, length)  (0) 2020.03.04
JQuery event.stopPropagation();  (0) 2020.03.03
JQuery odd, even 위치 필터선택자  (0) 2020.03.03
JQuery clone(), 문서 객체 복제  (0) 2020.03.03
JQuery removeAttr() , 문서객체 속성 제거  (0) 2020.03.03
블로그 이미지

꽃꽂이하는개발자

,

JQuery odd, even 위치 필터선택자

2020/JQuery 2020. 3. 3. 18: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>
      //odd : 홀수 인덱스 선택
      // $('tr:odd').css('background-color', 'yellow')
      //even : 짝수 인덱스 선택
      // $('tr:even').css('background-color', 'blue')
      $(document).ready(function() {
        $("tr:odd").css("background-color", "yellow");
        $("tr:even").css("background-color", "blue");
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <h1>welcome.</h1>
    <table border="3">
      <tr>
        <td>love</td>
        <td>man</td>
      </tr>
      <tr>
        <td>love</td>
        <td>girl</td>
      </tr>
      <tr>
        <td>love</td>
        <td>child</td>
      </tr>
      <tr>
        <td>love</td>
        <td>world</td>
      </tr>
      <tr>
        <td>love</td>
        <td>you</td>
      </tr>
      <tr>
        <td>love</td>
        <td>me</td>
      </tr>
    </table>
  </body>
</html>
반응형
저작자표시

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

JQuery event.stopPropagation();  (0) 2020.03.03
JQuery event.preventDefault, 기본 이벤트 제거  (0) 2020.03.03
JQuery clone(), 문서 객체 복제  (0) 2020.03.03
JQuery removeAttr() , 문서객체 속성 제거  (0) 2020.03.03
JQuery 특정 태그 선택 find()  (0) 2020.03.03
블로그 이미지

꽃꽂이하는개발자

,

JQuery clone(), 문서 객체 복제

2020/JQuery 2020. 3. 3. 18: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>
      // clone
      //자식노드, 텍스트 및 속성을 포함한 선택한 요소를 복사
      // $(selector).clone(true | false)
      $(document).ready(function() {
        $("button").click(function() {
          $("p")
            .clone()
            .appendTo("body");
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <p>오늘은 회사가니까</p>
    <p>화면 그려오라고 하시더라..</p>
    <p>그런데 제이쿼리 하고있음.. 이거 하고 해야지</p>

    <button>Clone all a elements, and append them to the body element</button>
  </body>
</html>
반응형
저작자표시

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

JQuery event.preventDefault, 기본 이벤트 제거  (0) 2020.03.03
JQuery odd, even 위치 필터선택자  (0) 2020.03.03
JQuery removeAttr() , 문서객체 속성 제거  (0) 2020.03.03
JQuery 특정 태그 선택 find()  (0) 2020.03.03
JQuery is()  (0) 2020.03.02
블로그 이미지

꽃꽂이하는개발자

,

JQuery removeAttr() , 문서객체 속성 제거

2020/JQuery 2020. 3. 3. 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>
      //removeAttr
      // 선택된 엘리먼트(요소)에서 하나 이상의 속성을 제거
      // $(selector).removeAttr(attribute)
      // $('p').removeAttr('style');
      $(document).ready(function() {
        $("button").click(function() {
          $("p").removeAttr("style");
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <p style="font-size:120%; color:red">This is a paragraph.</p>
    <p style="font-weight:bold; color:blue">This is another paragraph.</p>

    <button>Remove the style attribute from all p elements</button>
  </body>
</html>
반응형
저작자표시

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

JQuery odd, even 위치 필터선택자  (0) 2020.03.03
JQuery clone(), 문서 객체 복제  (0) 2020.03.03
JQuery 특정 태그 선택 find()  (0) 2020.03.03
JQuery is()  (0) 2020.03.02
jquery 문서 객체 추가 선택(add)  (0) 2020.03.02
블로그 이미지

꽃꽂이하는개발자

,

JQuery 특정 태그 선택 find()

2020/JQuery 2020. 3. 3. 18:11
반응형
<!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>
      //find : $(selector).find(filter)
      // 일반 선택자로 선택 및 XML 문서에서 데이터 추출 시 사용
      var xml = "";
      xml += "<phones>";
      xml += "<phone>";
      xml += "<name>갤럭시노트10</name>";
      xml += "<manufacturer>SAMSUNG</manufacturer>";
      xml += "</phone>";
      xml += "<phone>";
      xml += "<name>G6</name>";
      xml += "<manufacturer>LG</manufacturer>";
      xml += "</phone>";
      xml += "<phone>";
      xml += "<name>아이폰 10</name>";
      xml += "<manufacturer>APPLE</manufacturer>";
      xml += "</phone>";
      xml += "</phones>";

      $(document).ready(function() {
        xmlDOC = $.parseXML(xml);

        console.log(xmlDOC);
        $(xmlDOC)
          .find("phone")
          .each(function(index) {
            var output = "";

            output += "<div>";
            output +=
              "<h1>" +
              $(this)
                .find("name")
                .text() +
              "</h1>";
            output +=
              "<p>" +
              $(this)
                .find("manufacturer")
                .text() +
              "</p>";
            output += "</div>";

            document.body.innerHTML += output;
          });
      });
    </script>
    <title>Document</title>
  </head>
  <body></body>
</html>
반응형
저작자표시

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

JQuery clone(), 문서 객체 복제  (0) 2020.03.03
JQuery removeAttr() , 문서객체 속성 제거  (0) 2020.03.03
JQuery is()  (0) 2020.03.02
jquery 문서 객체 추가 선택(add)  (0) 2020.03.02
JQuery 문서 객체 탐색 종료  (0) 2020.03.02
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

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

티스토리툴바