jQuery -01( jQuery값 가져오기, 설정하기 /Style ,속성, Text, HTML 변경하기 /요소 추가, 삭제, 탐색하기 / 클래스 조작하기
jQuery
jQuery?
JavaScript를 더 단순화된 문장으로 사용하기 위한 것으로 생각! (JS문법이랑은 다르다!)
그래서 같은 동작이더라도 JS에 비해 문장이 더 짧고 보기에 편하다.
- 사용법
- 파일을 다운로드 하거나 코드를 복사해 붙여넣기하는 식으로 사용할 수 있다.
- jQuery를 사용하는 곳보다 위쪽에 작성해준다. 순서대로 읽혀야 하기 때문.
- https://releases.jquery.com/ 사이트 접속,
minified복사,<head>태그 안에 작성.
jQuery 기초
$(선택자 or DOM객체).동작함수(); 의 형태로 사용한다.
$ 는 jQuery()함수를 의미한다. 특정 요소를 선택할 때 사용한다.
기본적으로 jQuery는 여러개를 선택한다. 선택된 요소가 여러개라면 알아서 여러개에 다 적용시킨다.
▶️ jQuery 메소드
-
값 가져오기
-
$(선택자).val(); -
선택한 요소의 value값을 가져올 수 있다.
//이런식으로 작성한다. id가 input인 태그를 선택, 그 input의 value를 가져오겠다는. //jQuery에서는 function getInput(){ const value = $("#input").val(); console.log(value)}
-
-
값 설정하기
-
$(선택자).val("설정할 값"); -
괄호 안에 값을 넣어주면 value값을 설정할 수 있다.
//id가 input인 태그를 선택, 그 input의 value값을 설정하는 하겠다는. $("#input").val("설정하고싶은 값");
-
-
Style 변경하기
-
$(선택자).css("속성", "속성값");function colorChange(){ $("#span1").css("color", "blue")
-
-
속성 변경하기
-
$(선택자).attr("속성", "속성값");$("#cute").attr("style", "color:pink");
-
-
Text 변경하기
-
$(선택자).text("글자");$("span").text("글자 이걸로 바뀌지롱");
-
-
HTML 변경하기
-
$(선택자).text("글자");$("p").html("<p>hiiiii</p>");
-
-
요소 추가하기
-
$(선택자).append(요소);: 선택자의 자식 요소 중 마지막으로 추가$("p").append(h1); -
$(선택자).prepend(요소);: 선택자의 자식 요소 중 첫번째로 추가 -
$(선택자).before(요소);: 선택자의 형제 요소 중 이전 형제로 추가 -
$(선택자).after(요소);: 선택자의 형제 요소 중 다음 형제로 추가
-
-
요소 삭제하기
$(선택자).remove();- 선택한 요소를 DOM트리에서 삭제한다.
- 선택한 요소 중 조건을 만족하는 요소만 삭제한다. 선택된게 다 지워진다.
$(선택자).empty();- 선택한 요소의 자식 요소를 모두 삭제한다.
- 선택된 요소는 남아있고, 그 안에 들어있던 것들이 싹 비워진다.
- 요소 선택하기
-
$(선택자).parent().함수(): 바로 위에 존재하는 하나의 부모 요소 선택.<div class="parent"> <div class="child1">1번</div> <div class="child2">2번</div> 번호없음 <div class="child3">3번</div> </div>$(".child2").parent().css("color", "red"); //이런식으로 사용할 수 있다. //부모요소는 <div>태그이고, css스타일로 글자색이 red로 바뀐다. //즉 안에 들어있는 '1번', '2번', '번호없음', '3번' 이렇게 4개의 텍스트의 글자색이 빨간색으로 바뀐다. -
$(선택자).parents().함수(): 바로 위 부모~모든 조상을 선택. -
$(선택자).next().함수(): 선택한 요소 바로 다음에 위치한 형제 요소 선택. -
$(선택자).prev().함수(): 선택한 요소 바로 이전에 위치한 형제 요소 선택. -
$(선택자).children().함수(): 선택된 요소의 자식 요소 모두 선택.
-
- 클래스 추가, 삭제하기
$(선택자).addClass("클래스명"): 선택된 요소에 클래스 추가.$(선택자).removeClass("클래스명"): 선택된 요소에 클래스 삭제.$(선택자).hasClass("클래스명"): 선택된 요소에 클래스가 있는지 확인. Return값은 true, false.$(선택자).toggleClass("클래스명"): 선택된 요소에 클래스가 있으면 추가, 없으면 삭제.
💬
- JS와 비슷한 듯 하지만 달라서 헷갈린다. 그런데 확실히 JS보다는 작성되는 코드의 길이가 줄어서 보기에 편하다. jQuery와 JS의 문법을 합쳐서 사용하지 않도록 잘 구분해서 익숙해져야겠다.
- 빨리 더 배워서 뭔가를 만들어보고싶다. 내가 코드를 작성하면서 없던 것을 만들어나간다는게 재미있다. 하지만 현실은 수업 시간 실습도 따라가기 어렵다. 빨리 익숙해져보자고 항상 생각해본다!
