55일 차 - jQuery 기본 문법 (23.03.16)

yvonne·2023년 3월 16일
jquery
0

📂jQuery

목록 보기
1/4
post-thumbnail

1. remove();와 empty();의 차이

$("#removeMthod").remove();
  • 선택된 요소와 하위 요소 전부 제거 (element 자체 제거)
$("#emptyMthod").empty();
  • 하위 요소들만 제거 (content만 제거)




2. jQuery

💡 jQuery 기본 문법

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      window.onload = function () {
        jQuery("p").css("height", "380px"); // jQuery(선택자).함수명(매개변수);

        $("p").css("width", "500px"); // $(선택자).함수명(매개변수);
        $("p").css("border", "1px solid #0000ff");
      };
    </script>
  </head>
  <body>
    <p>Hello jQuery!</p>
  </body>
</html>
  • 결과



💡 jQuery 객체

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      window.onload = function () {
        jQuery("p").css("color", "red");
        $("p").css("font-weight", "bolder");

        var myJQ = jQuery("p"); // jQuery("p") 객체를 생성
        myJQ.css("textDecoration", "underLine");
        console.log(myJQ);

        var elementP = document.getElementsByTagName("p");  // myJQ와는 객체 자체가 다른 객체
        console.log(elementP);
      };
    </script>
  </head>
  <body>
    <p>Hello jQuery!</p>
  </body>
</html>
  • 결과



💡 jQuery의 css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      window.onload = function () {
        jQuery("p").css("color", "red");
        $("p").css("font-weight", "bolder");

        var myJQ = jQuery("p"); // jQuery("p") 객체를 생성
        myJQ.css("textDecoration", "underLine");
        console.log(myJQ);

        myJQ.css("width","300px").css("border", "1px solid #ff0000");

        $("p")	// css 여러 번 적용 가능
        .css("fontSize","2em")
        .css("height","300px")
        .css("lineHeight","300px")
        .css("textAlign","center")
     
      };
    </script>
  </head>
  <body>
    <p>Hello jQuery!</p>
  </body>
</html>
  • 결과



💡 document.ready();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>

      $(document).ready(function () {   // window.onload와 역할은 같지만 메모리에 순서대로 전부 올려서 실행
        // callback 함수
        console.log(1);
      });
      $(document).ready(function () {
        // callback 함수
        console.log(2);
      });
      $(document).ready(function () {
        // callback 함수
        console.log(3);
      });
    </script>
  </head>
  <body>
    <p>Hello jQuery!</p>
  </body>
</html>
  • 결과




💡 선택자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("*").css("fontSize", "1.1em"); // 전체 선택자
        $("li").css("color", "#0000ff"); // list 태그 선택자
        $("#item").css("background", "#ffff00").css("width", "300px"); // 아이디 선택자
        $(".seoul").css("background", "#ff0000"); // 클래스 선택자
        $("#wrap p").css("border", "2px solid #cccccc"); // 전체 선택자
        $("#wrap > p").css("border", "5px solid #cccccc"); // 전체 선택자
      });
    </script>
  </head>
  <body>
    <div id="wrap">
      <p>jQuery selector</p>
      <div id="centent">
        <h1>centent</h1>
        <p>ㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅌ</p>
        <p>ABCDEFGHIJKLMN</p>
      </div>
      <div id="item">
        <ul>
          <li class="seoul">서울</li>
          <li class="gyeonggi_do">경기도</li>
          <li>충청도</li>
          <li>전라도</li>
          <li>경상도</li>
          <li>강원도</li>
          <li>제주도</li>
        </ul>
      </div>
    </div>
  </body>
</html>
  • 결과
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("input[type='text']").css("color", "#ff0000"); // 속성 선택자
        $("input[type='password']").css("color", "#0000ff"); // 속성 선택자
        $("input:submit").css("fontSize", "1.2em"); // 필터(value) 선택자
        var chk = $("input:checked").val(); // 필터(value) 선택자
        console.log("chk : " + chk); 

        $("li:nth-child(2n+1)").css("background", "#ffff00"); // 함수 선택자
      });
    </script>
  </head>
  <body>
    <form>
      UserID <input type="text" />
      <br />
      UserPW <input type="password" />
      <br />
      Submit <input type="submit" value="submit" />
      <br />
      Reset <input type="reset" value="reset" />
      <br />
      Food <br />
      사과<input type="checkbox" id="apple" value="사과" /> 바나나<input
        type="checkbox"
        id="banana"
        value="바나나"
        checked
      />
      수박<input type="checkbox" id="watermelon" value="수박" />
      <br />

      <ul>
        <li>이만기</li>
        <li>이승엽</li>
        <li>이종범</li>
        <li>이재학</li>
        <li>이순철</li>
        <li>이길동</li>
        <li>이동국</li>
      </ul>
    </form>
  </body>
</html>
  • 결과



💡 객체 생성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        var wrapObj = $("#wrap");

        var divObj = $("<div> Hello jQuery!</div>"); // div 객체 생성 및 추가
        divObj.appendTo(wrapObj); // 자식 객체로 들어가겠다는 의미
        divObj.css("background", "#0000ff");

        $("<div>Hello jQuery!</div>")
          .appendTo($("#wrap"))
          .css("background", "#ff0000");
     
          var aObj = $("<a href = 'http://www.google.com'> google </a><br>"); // 주소 추가
        aObj.appendTo(wrapObj);

        var imgObj = $("<img src = 'img/logo.png'/><br>"); // 이미지 추가
        imgObj.appendTo(wrapObj);
     
      });
    </script>
  </head>
  <body>
    <div id="wrap"></div>
  </body>
</html>
  • 결과



📌 선택자와 생성자 태그

$("div") // 선택자 
  
$("<div>홍길동</div>")  // 생성자
    .appendTo($("#wrap"))
    .css("background", "orange");



💡 객체 삽입

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        var wrapObj = $("#wrap");

        var divObj = $("<div>Hello jQuery!</div>");
        divObj.appendTo(wrapObj);   //자식이 부모객체에 들어가기

        wrapObj.append(divObj); // 부모객체가 자식 집어넣기

        divObj.prependTo(wrapObj); // 첫번째 자식으로 들어가기

        divObj.insertAfter(wrapObj); // 형제 중 막내로 들어가기
        divObj.insertBefore(wrapObj); // 형제 중 첫째로 들어가기
      });
    </script>
  </head>
  <body>
    <div id="wrap">
      <div>contents</div>
    </div>
  </body>
</html>



💡 객체 이동

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        $("#wrap > .contents1 > .p").appendTo($("#wrap > .contents2"));
      });
    </script>

    <style>
      #wrap .contents1 .p {
        background: #ff0000;
      }

      #wrap .contents2 .p {
        background: #ffff00;
      }
    </style>
  </head>

  <body>
    <div id="wrap">
      <div class="contents1">
        <p class="p">contents1</p>
      </div>

      <div class="contents2">
        <p class="p">contents2</p>
      </div>
    </div>
  </body>
</html>
  • 결과



💡 객체 복제

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        var co = $("#wrap > .contents1> .p").clone();
        co.appendTo($("#wrap > .contents1"));

        $("#wrap > .contents1 > .p").clone().appendTo($("#wrap > .contents1"));
        $("#wrap > .contents1").append($("#wrap > .contents1> .p").clone());
      });
    </script>

    <style>
      #wrap .contents1 .p {
        background: #ff0000;
      }

      #wrap .contents2 .p {
        background: #ffff00;
      }
    </style>
  </head>

  <body>
    <div id="wrap">
      <div class="contents1">
        <p class="p">contents1</p>
      </div>
    </div>
  </body>
</html>
  • 결과



💡jQuery 기본 메소드

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        $("p").each(function (index, item) {
          // item에 객체를 하나씩 넘겨줌
          console.log($(item).text() + "index" + index); // p태그 안에 있는 텍스트를 빼낼 때 사용
          if (index % 2 == 0) {
            $(item).css("background", "blue");
       // $(this).css("background", "#dfdfdf");   //item == this
          } else {
            $(item).css("background", "#cccccc");
        //   $(this).css("background", "#cccccc");
          }
        });
      });
    </script>

    <style></style>
  </head>

  <body>
    <p>Hello javascript!</p>
    <p>Hello jQuery!</p>
    <p>Hello node.js!</p>

    <div id="htmlMethod">html() 메서드</div>
    <div id="textMethod">text() 메서드</div>

    <div id="addClass">addClass() 메서드</div>
    <div id="removeClass" class="remCla">removeClass() 메서드</div>

    <div id="attrMethod">
      <img />
      <br />
      <img />
    </div>

    <div id="cssMethod">CSS METHOD</div>

    <div id="removeMthod">Remove Object!</div>
    <div id="emptyMthod">Empty Object!</div>
  </body>
</html>
  • 결과
  • 메소드기능
    each( )배열
    html( ) / text( )내용 읽고 / 쓰기
    addClass( )클래스 속성 추가
    removeClass( )클래스 속성 제거
    attr( )속성 추가
    removeAttr( )속성 제거
    css( )스타일 추가 및 검사
    remove( )문서 객체 제거
    empty( )문서 객체 내부 제거






3. $("셀렉터").html() vs $("셀렉터").text() vs $("셀렉터").val() 의 차이

<script>
		console.log("textMethod : " +$("#textMethod").html());  // 자식 태그를 통째로 읽어올 때 사용
        console.log("htmlMethod : " +$("#htmlMethod").html());  

        console.log("textMethod : " +$("#textMethod").text()); // 텍스트만 가지고 올 때
        console.log("htmlMethod : " +$("#htmlMethod").text());

        console.log("textMethod : " +$("#textMethod").val()); // 태그에 정의된 value 속성값을 확인할 때 사용
        console.log("htmlMethod : " +$("#htmlMethod").val());
 </script>
$("셀렉터").html()
  • 셀렉터 태그 내에 존재하는 자식태그을 통째로 읽어올때 사용되는 함수
    ※ 태그 동적추가할때 주로 사용되는 함수
$("셀렉터").text()
  • 셀렉터 태그 내에 존재하는 자식태그들 중에 html태그는 모두 제외 한 채 문자열만 출력하고자 할때 사용되는 함수
    ※ html태그까지 모두 문자로 인식시켜주는 함수
$("셀렉터").val()
  • INPUT 태그에 정의된 value속성의 값을 확인하고자 할때 사용되는 함수




4. 아래를 구현하시오.

profile
yvonne
개발 연습장
다음 포스트

56일 차 - jQuery 이벤트, Ajax, JSON (23.03.17)

0개의 댓글