[JS] JQuery

 

 

 

 

<JQuery>

• 자바 스크립트 언어를 간편하게 사용할 수 있도록 단순화 시킨 오픈 소스 기반 자바스크립트 라이브러리
• 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능
• HTML DOM를 손쉽게 조작 가능, CSS 스타일도 간단히 적용 가능
• 애니메이션 효과나 대화형 처리를 간단하게 적용
• 같은 동작을 하더라도 더욱 짧게 구현 가능
• 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능

 

JQuery 사용법  1. 파일 다운로드 2. CDN (content Delivery Network) 사용 https://releases.jquery.com/

 

1. JQuery 메소드

 

 값 가져오기 & 설정하기 

 

메소드	예시	설명
$(선택자).val( );	var value = $("input").val();	Input과 같은 value 값 가져오기 가능
$(선택자).val("설정할 값");	$("input").val("설정완료!");	Input과 같은 곳에 value 값 설정 가능

 

 

Style 변경하기	$(선택자).css("속성","속성값");
속성 변경하기	$(선택자).attr("속성","속성값");
Text 변경하기	$(선택자).text("글자");
HTML 변경하기	$(선택자).html(html);
요소 추가	$(선택자).append(요소);	선택된 요소의 자식 요소 중 마지막으로 추가
	$(선택자).prepend(요소);	선택된 요소의 자식 요소 중 첫번째로 추가
	$(선택자).before(요소);	선택된 요소의 형제 요소로 이전 형제로 추가
	$(선택자).after(요소);	선택된 요소의 형제 요소로 다음 형제로 추가
요소 삭제	$(선택자).remove();	선택한 요소를 DOM 트리에서 삭제. 인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제
	$(선택자).empty();	선택한 요소의 자식 요소를 모두 삭제 선택된 요소는 남아있고, 그 안이 다 비워짐
요소 탐색	$(선택자).parent().함수()	바로 위에 존재하는 하나의 부모 요소 선택
	$(선택자).parents().함수()	바로 위 부모 뿐 아니라 부모의 부모, 모든 조상 선택
	$(선택자).next().함수()	선택된 요소 바로 다음에 위치한 형제 요소 선택
	$(선택자).prev().함수()	선택된 요소 바로 이전에 위치한 형제 요소 선택
	$(선택자).children().함수()	선택된 요소의 자식 요소 모두 선택

 

- 코드 예시

      // $(선택자).함수();
      // $ 란? : jQuery(선택자).함수() 였는데 jQuery 글자가 길어서 이제 $ 로 표시함
      // $() : parameter 로 선택자를 전달받아 특정 HTML 요소를 선택한다 -> 여기서 선택된 요소는 'jquery 객체' 라고 한다.
      // 함수 : jQuery 메소드

      function setValue() {
        // document.getElementById("input").value = "안녕";

        $("#input").val("안녕");
      }

      function getValue() {
        // document로 요소 선택 하고, 그 요소가 input 일 때 value 가져오기
        // let value = document.getElementById("input").value;

        // jQuery 문법을 이용해서 input의 값 가져오기
        let value = $("#input").val();

        alert(value);
      }

      function changeStyle() {
        // document 방식으로 해보면,
        // let div = document.querySelector("div");
        // div.style = "border :10px solid black;";

        // $().css("속성",속성값)
        $("div").css("border", "10px solid black");
      }

      function changeText() {
        // document 방식으로 해보면,
        // let div = document.querySelector("div");
        // div.innerText = "<b>jQuery 사용 전 글자 바꾸기<b>";

        // $().text();
        // 태그가 읽히지 않음
        $("div").text("<b>jQuery 사용 후<b>");
      }

      function changeAttribute() {
        // document 방식으로 해보면,
        // let a = document.querySelector("a");
        // set Attributee(속성,속성값)
        // a.setAttribute("href", "https://google.com");

        // $().attr("속성","속성값")
        $("a").attr("href", "https://google.com");
      }

      function changeHTML() {
        // document 방식으로 해보면,
        // let div = document.querySelector("div");
        // div.innerHTML = "<b>jQuery 사용 전 글자 바꾸기<b>";

        // $().html();
        // 태그가 태그로 읽힘
        $("div").html("<b>jQuery 사용 후<b>");
      }

      function append() {
        // append(): 마지막 자식 요소에 추가
        // js 방식으로 해보면,
        let li = document.createElement("li");
        // li.innerText = "append 된 친구";
        // document.querySelector("ul").append(li);

        // jQuery 방식
        // jQuery로 요소 생성 X !
        // 원하는 글자 넣기
        $(li).text("jQuery로 append");
        // ul 태그 안으로 append
        $("ul").append(li);
      }

      function prepend() {
        // prepend(): 첫번째 자식 요소에 추가
        // js 방식으로 해보면,
        let li = document.createElement("li");
        // li.innerText = "prepend 된 친구";
        // document.querySelector("ul").prepend(li);

        // jQuery 방식
        // jQuery로 요소 생성 X !
        // 원하는 글자 넣기
        $(li).text("jQuery로 prepend");
        // ul 태그 안으로 append
        $("ul").prepend(li);
      }

      function before() {
        // before(): 기준 요소의 전에 추가한다. ( = 앞에 추가한다.)
        let li = document.createElement("li");
        li.innerText = "before 된 친구";
        // document.querySelector("#li2").before(li);

        // jQuery 방식

        $("#li2").before(li);
      }

      function after() {
        // after(): 기준 요소 다음에 추가한다. ( = 뒤에 추가한다.)
        let li = document.createElement("li");
        li.innerText = "after 된 친구";
        // document.querySelector("#li2").after(li);

        // jQuery 방식

        $("#li2").after(li);
      }

      function removeElement() {
        // 내가 선택한 요소를 삭제하는 친구
        //  document.querySelector("ul").remove();

        $("ul").remove();
      }

      function emptyElement() {
        let standard = document.querySelector("li");
        // document.querySelector("ul").removeChild();

        // removeChild( ) : 부모를 선택하고 삭제할 자식 하나를 보내야 했다.

        // empty(): 선택된 자식들을 모두 삭제한다.
        $("ul").empty();
      }

      function findParent() {
        // parent() : 부모 요소를 반환
        console.log($(".child2").parent());
      }

      function findParents() {
        // parents() : 조상 요소를 모두 반환
        console.log($(".child2").parents());
      }

      function findNext() {
        // next() : nextSibling 내 다음 형제를 보는 친구

        // document의 nextElementSibling 과 동일
        console.log($(".child2").next());
      }

      function findPrev() {
        // prev() : previousSibiling 내 이전 형제를 보는 친구

        // previousSibling, previousElementSibling
        console.log($(".child3").prec()); // previousElemntSibling 와 동일
      }

      function findChildren() {
        // children() : 부모 요소를 선택했을 때 그 자식 요소들을 반환
        //childNodes 랑 Children 중 어떤거랑 동일할까? -> children과 동일

        console.log($(".parent").children());
      }

 

 

 클래스 조작하기 

 

$(선택자).addClass("클래스명")	선택된 요소에 클래스 추가
$(선택자).removeClass("클래스명")	선택된 요소에 클래스 삭제
$(선택자).hasClass("클래스명")	선택된 요소에 클래스가 있는지 여부 확인 Return값은 true와 false로 나온다
$(선택자).toggleClass("클래스명")	선택된 요소에 클래스가 있으면 추가, 없으면 삭제
$(선택자).switchClass("클래스명1","클래스명2",시간)	클래스1을 클래스2로 바꿈 이때, 시간은 클래스1을 클래스2로 바꿀 때 걸리는 시간을 의미

 

- 코드 예시

 

  
      function addClass() {
        // $().addClass("클래스명")
        $("div").addClass("css1");
      }

      function removeChild() {
        $("div").removeClass("css1");
      }

      function hasClass() {
        alert($("div").hasClass("css1"));
      }

      function toggleClass() {
        $("div").toggleClass("css1");
      }

      function switchClass() {
        // $().switchClass("클래스명1","클래스명2",[시간ms])
        // jQuery UI를 무조건 불러와야 함
        $("div").switchClass("css1", "css2", 3000);
      }

 

 

2. JQuery 이벤트 리스너

 

• 이벤트 발생 시 , 그 처리를 담당하는 함수

로딩 이벤트	.ready()
	$()
마우스 이벤트	click()
	mouseover()
	hover()
	scroll()
키보드 이벤트	keydown()
	keyup()

 

- 코드 예시

 

window.addEventListener("load", function () {});

      //로딩 이벤트
      // 1 =3 같은 말임
      $(window).ready(function () {
        console.log("로드 완료1");
      });
      $(document).ready(function () {
        console.log("로드 완료2");
      });
      $(function () {
        console.log("로드 완료3");
      });

      // $().on("이벤트명 ex.click")
      // addEventListner("click")
      /*$("button").on("click", function () {
        alert("클릭");
      });*/

      // 위 처럼 말고 이렇게 바로 쓸 수 있음
      $("button").click(function () {
        alert("클릭");
      });
      // on 함수를 이용하지 않고 바로 쓸 수 있는 이벤트 함수
      // click, scroll, mouseover, hover, keyup, keydown ...

      $("input").keyup(function (e) {
        console.log(e);
        console.log(e.key);
        console.log(e.keycode);
        console.log(e.currentTarget);
        console.log(e.currentTarget.value);
      });

      // js 에서 $().on("click",콜백함수) 로 썼다면,
      // jQuery 에서는 이벤트 함수가 있기 때문에 $().click(콜백함수) 로 쓸수있다.