JQuery addClass, hasClass, removeClass, toggleClass(속성추가제거)

2020/JQuery 2020. 2. 28. 13:05
반응형
<!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() {
        $("#addClassBtn").click(function() {
          $("#target").addClass("testClass");
        });
        $("#hasClassBtn").click(function() {
          if ($("#target").hasClass("testClass") == true) {
            alert("textClass있네요?");
          } else if ($("#target").hasClass("testClass") == false) {
            alert("textClass가 없네요?");
          }
        });
        $("#removeClassBtn").click(function() {
          $("#target").removeClass("testClass");
        });

        $("#toggleClassBtn").click(function() {
          $("#target").toggleClass("testClass");
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <fieldset>
      <legend>Target</legend>
      <div id="target">타겟 영역입니다.</div>
    </fieldset>
    <input type="button" id="addClassBtn" value="addClass" />
    <input type="button" id="hasClassBtn" value="hasClass" />
    <input type="button" id="removeClassBtn" value="removeClass" />
    <input type="button" id="toggleClassBtn" value="toggleClass" />
  </body>
</html>
반응형
저작자표시

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

JQuery attr 속성변경  (0) 2020.02.28
JQuery trigger, 이벤트 자동발생  (0) 2020.02.28
JQuery unbind(이벤트해제)  (0) 2020.02.28
JQuery detach, empty, remove, 요소제거  (0) 2020.02.28
JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery unbind(이벤트해제)

2020/JQuery 2020. 2. 28. 13:04
반응형
<!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() {
        $("#btn").click(function() {
          alert("클릭됨");
        });
        $("#btnUnbind").click(function() {
          $("#btn").unbind("click");
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <div id="my">
      <input type="button" id="btn" value="버튼" class="hover" />
      <input type="button" id="btnUnbind" value="이벤트 해제" class="hover" />
    </div>
  </body>
</html>
반응형
저작자표시

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

JQuery trigger, 이벤트 자동발생  (0) 2020.02.28
JQuery addClass, hasClass, removeClass, toggleClass(속성추가제거)  (0) 2020.02.28
JQuery detach, empty, remove, 요소제거  (0) 2020.02.28
JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery detach, empty, remove, 요소제거

2020/JQuery 2020. 2. 28. 13:03
반응형
<!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() {
        // .detach() 지정한 요소를 포함한 하위 요소 모두 제거
        $("#detachBtn").click(function() {
          $("#target").detach();
        });
        // .empty 지정한 요소의 하위 요소를 제거
        $("#emptyBtn").click(function() {
          $("#target").empty();
        });
        //remove 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거
        $("#removeBtn").click(function() {
          $("#target").remove();
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <fieldset style="height:150px; position:relative;">
      <legend>Target</legend>
      <div
        id="target"
        style="background-color:gray; height:80px; width:80%; position:relative; left:10%; top:10px"
      >
        <div
          id="innerTarget"
          style="background-color:green; height:50px; width:50%; position:absolute; left:25%; top:20%;"
        ></div>
      </div>
    </fieldset>
    <input type="button" id="detachBtn" value="detach" />
    <input type="button" id="emptyBtn" value="empty" />
    <input type="button" id="removeBtn" value="remove" />
  </body>
</html>
반응형
저작자표시

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

JQuery addClass, hasClass, removeClass, toggleClass(속성추가제거)  (0) 2020.02.28
JQuery unbind(이벤트해제)  (0) 2020.02.28
JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery replaceWith, replaceAll, 요소 대체하기

2020/JQuery 2020. 2. 28. 13: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>
      $(document).ready(function() {
        //p태그를 h2태그로 전체 교체
        $("#replaceAll").click(function() {
          $("<h2>replaceAll</h2>").replaceAll("p");
        });
        //p tag의 first를 하나씩 replaceWith로 교체
        $("#replaceWith").click(function() {
          $("p:first").replaceWith("replaceWith");
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph</p>
    <p>This is another paragraph</p>

    <button id="replaceAll">replaceAll</button>
    <button id="replaceWith">replaceWith</button>
  </body>
</html>
반응형
저작자표시

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

JQuery unbind(이벤트해제)  (0) 2020.02.28
JQuery detach, empty, remove, 요소제거  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
JQuery 객체추가  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

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

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   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

티스토리툴바