JQuery

: 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리

• 라이브러리: 자주 사용하는 기능들을 모아두었다가 필요할 때 가져다 쓸 수 있도록 한 자원들의 묶음
• 장점: 대부분 브라우저에서 사용 가능. html DOM, css를 더 손쉽게 조작 가능. 더 간단하게, 짧게 구현 가능. 누구나 자유롭게 이용 가능.
• 사용 방법:
  1. 파일 다운로드
  2. cdn(content delivery network)를 통해 사용
  https://releases.jquery.com/

  <script
  	src="https://code.jquery.com/jquery-3.6.1.min.js"
  	integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
  	crossorigin="anonymous"
  </script> 

• 사용 방식:
  $(선택자).동작함수() ;

JQuery Method

값 가져오기 & 설정하기

$(선택자).val();: input과 같은 value 값을 가져올 수 있다.
$(선택자).val("설정할 값");input과 같은 곳에 value 값을 설정할 수 있다.

var value = $("input").val();
$("input").val("I'm done!");

Style 변경하기

$(선택자).css("속성","속성값");

• jquery적용 예시

$("span").css("font-size", "30px");
$("span").css("color","black");
--------------------------------------------
var span = document.querySelector("span");
span.style = "font-size: 10px; color: red";

속성 변경하기

$(선택자).attr("속성", "속성값");

$("#li2").attr("style", "color:red ;background-color: blue")

Text 변경하기

$(선택자).text("글자");

$("span").text("change innerText~";
----------------------
var span = document.querySelector("span");
span.innerText = 'change innerText~';

HTML 변경하기

$(선택자).html(html);

$("p").html("<h1>hello</h1>");
--------------------
var p = document.querySelector("p");
p.innerHTML = "<h1>hello</h1>";

요소 추가

• $(선택자).append(요소); : 선택된 요소의 자식 요소 중 마지막으로 추가
• jquery는 태그를 적으면 태그로 인식하지만, 반면에 document.querySelector("#p1").append("<h2>h2</h2>")를 사용한다면 태그가 문자로 인식된다.

$("p").append("<h3>h3tag</h3>");
--------------------
p.appendChild(h1);

• $(선택자).prepend(요소);
  선택된 요소의 자식 요소 중 첫번째로 추가
• $(선택자).before(요소);
  선택된 요소의 형제 요소로 이전 형제로 추가
• $(선택자).after(요소);
  선택된 요소의 형제 요소로 다음 형제로 추가

  $("#ul").prepend("<li>prepend</li>");
  $("#li1").before("<li>before</li>");
  $("#li2").after("<li>after</li>");

요소 삭제

• $(선택자).remove();
  • 선택한 요소를 DOM 트릴에서 삭제
  • 인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제
• $(선택자).empty();
  - 선택한 요소의 자식 요소를 모두 삭제
  • 선택한 요소는 남아 있고 그 안이 다 비워진다.

  //해당되는 요소 자기 자신을 삭제
      function remove() {
        $("li").remove();
      }
      //부모 아래의 모든 자식 삭제
      function empty() {
        $("#ul").empty();
      }

요소 탐색

• $(선택자).parent().함수();
  • 바로 위에 존재하는 하나의 부모 요소 선택
• $(선택자).parents().함수();
  • 바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택
• $(선택자).next().함수();
  • 선택한 요소 바로 다음에 위치한 형제 요소 선택
• $(선택자).prev().함수();
  • 선택한 요소 바로 이전에 위치한 형제 요소 선택
• $(선택자).children().함수();
  - 선택한 요소의 자식 요소 모두 선택

  $("#li1").parent().append("<li>parentAppend</li>")

클래스 조작하기

• switchClass를 사용하기 위해서는 jquery ui를 다운받아야 한다.
  https://jqueryui.com/download/
• 다운 받아서 jquery-ui.js 파일과 jquery-ui.css파일을 각자의 경로를 잘 입력하여 html 파일에 코드를 추가해주어야 한다.

<script src = "jquery-ui.js"></script>
<link rel='stylesheet' href=jquery-ui.css">

$(선택자).switchClass("class1","class2",시간);: class1에서 class2로 클래스를 바꾼다. 시간은 클래스를 바꿀 때 걸리는 시간을 의미한다.

$("div").addClass("class"); //class추가
$("div").removeClass("class"); //class제거
$("div").hasClass("class")//class가 있는지 없는지 확인 - true/false
$("div").toggleClass("class");//class가 있으면 삭제, 없으면 추가