'2020/JQuery'에 해당되는 글 45건

JQuery 속성 값 입력

2020/JQuery 2020. 2. 28. 13:00
반응형
<!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>
      $(function() {
        $(".text1").val("성함이 우째됩니꺼?");
      });
    </script>
    <title>속성입력</title>
  </head>
  <body>
    <input type="text" class="text1" value="What's your name?" />
    <input type="text" class="text2" value="How old are you?" />
  </body>
</html>
반응형
저작자표시

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

JQuery detach, empty, remove, 요소제거  (0) 2020.02.28
JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
JQuery 객체추가  (0) 2020.02.28
JQuery 속성추가  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery selectbox 확인

2020/JQuery 2020. 2. 28. 13:00
반응형
<!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() {
        $(".submit").click(function(event) {
          //선택된 개수
          var count = $("select option:selected").val();
          if (count == 0) {
            alert("셀렉트박스를 선택해주세요.");
          } else {
            alert(count + "를 선택하셨습니다.");
          }
          //html 에서 a 태그나 submit 태그는 고유의 동작이 있다.
          //페이지를 이동시킨다거나 form 안에 있는 input 등을 전송한다던가 그러한 동작이 있는데 e.preventDefault 는 그 동작을 중단시킨다
          event.preventDefault();
        });
      });
    </script>
    <title>셀렉트박스 선택된 값 확인</title>
  </head>
  <body>
    <select id="food" class="infobox">
      <option value="0">Select a Food</option>
      <option value="Pizza $5">Pizza $5</option>
      <option value="HotDog $2">HotDog $2</option>
      <option vlaue="Coke $1">coke</option>
      <option value="French Fries $3">French Fries $3</option>
    </select>
    <input type="submit" class="submit" value="submit" />
  </body>
</html>
반응형
저작자표시

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

JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery 객체추가  (0) 2020.02.28
JQuery 속성추가  (0) 2020.02.28
JQuery 객체이동  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery 객체추가

2020/JQuery 2020. 2. 28. 12:59
반응형
<!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>
      //(a).appendTo(b) b에 a를 추가
      function appendTest() {
        alert(1);
        $("#test1").append("<p>결과</p>");
      }

      //(a).append(b) a에 b를 추가
      function appendToTest() {
        alert(2);
        $("<p>결과2</p>").appendTo("#test2");
      }

      //(a).prepend(b) b를 a의 앞에 추가
      function prependTest() {
        alert(3);
        $("#test3").prepend("<p>결과3</p>");
      }
    </script>
    <title>Document</title>
  </head>
  <body>
    <button onclick="appendTest()">append</button>
    <div id="test1">test</div>

    <button onclick="appendToTest()">appendTo</button>
    <div id="test2">test2</div>

    <button onclick="prependTest()">prepend</button>
    <div id="test3">test3</div>
  </body>
</html>
반응형
저작자표시

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

JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
JQuery 속성추가  (0) 2020.02.28
JQuery 객체이동  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery 속성추가

2020/JQuery 2020. 2. 28. 12: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>
      $(document).ready(function() {
        var object = { name: "홍길동" };

        //객체에 속성추가
        $.extend(object, {
          region: "서울특별시 도봉구",
          part: " bass guitar"
        });
        var output = "";
        //$.each 메소드로 출력해봄
        $.each(object, function(key, data) {
          output += key + ":" + data + "\n";
        });
        alert(output);
      });
    </script>
    <title>Document</title>
  </head>
  <body></body>
</html>
반응형
저작자표시

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

JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
JQuery 객체추가  (0) 2020.02.28
JQuery 객체이동  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery 객체이동

2020/JQuery 2020. 2. 28. 12:56
반응형
<!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() {
        $("img").css("height", 250);
        // 2초에 한번씩 사진 바뀜
        setInterval(function() {
          // 1번 이미지를 body에 붙이면서 맨 뒤로 보냄
          $("img")
            .first()
            .appendTo("body");
        }, 2000);
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <img src="/images/1.png" />
    <img src="/images/2.png" />
    <img src="/images/3.png" />
    <img src="/images/4.png" />
    <img src="/images/5.png" />
  </body>
</html>
반응형
저작자표시

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

JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
JQuery 객체추가  (0) 2020.02.28
JQuery 속성추가  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   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

티스토리툴바