jQuery는 DOM조작의 단순화, AJAX호출, Event핸들링에 초점을 맞춘 JavaScript Library다. 바닐라 자바스크립트에서 몇 줄이나 되는 긴 코드로 하는 일을 jQuery로 한 두 줄만에 간단히 끝낼 수 있을 정도로 편의성이 좋다. 제이쿼리의 가장 기본이 되는 형식은 다음과 같다.
$(selector).action()
이것만 보아서는 잘 이해가 되지 않을 수 있다. 쉬운 예시로 'All About Dog'이라는 강아지에 관한 사이트가 있다고 가정하자. 나는 강아지보다 고양이가 더 좋으므로 이 사이트를 'All About Cat'으로 바꾸고 싶다. 그래서 Dog이라고 적힌 것들을 전부 Cat으로 바꾸려 한다. 이 문제를 jQuery로 간단히 해결해보겠다.
1. span 태그가 Dog을 감싸고 있을 때
$("span").text("Cat");이 한 줄로 모든 Dog은 Cat으로 변했다. jQuery의 마법!
여기서 한 발자국 더 나아가볼까?
2. Dog은 "animal"이라는 클래스네임을 가진 span 태그에 감싸져있다.
$("span.animal).text("Cat");만약 span 태그가 class가 아니라 ID 속성을 가지고 있다면 이렇게 표현하면 된다.
$("span#animal).text("Cat");아래에서 몇 가지 예시를 더 들겠다.
$("p").hide() - "p" elements를 모두 숨긴다.
$(".test").hide() - "test"라는 클래스네임을 가진 elements를 모두 숨긴다.
$("#test").hide() - "test"라는 아이디를 가진 elements를 숨긴다.
jQuery에서 요소의 값 찾기
조금의 트위스트를 가미해보자. 아까는 Dog이라는 텍스트를 전부 Cat으로 대치하는 작업을 했다. 그러나 이번엔 텍스트를 대치하는 대신에 기존의 텍스트에 강조의 의미로 느낌표만 추가해주려고 한다. 어떤 식으로 하는게 좋을까?
먼저, 기존의 값을 변수에 저장해줘야한다.
main-heading이라는 ID를 가진 h1 태그가 있다고 하자. 이 h1의 값 앞뒤에 느낌표를 추가해주려고 한다.
1. headingText라는 변수를 선언한다. (이때 text 함수는 빈 괄호로 둔다.)
let headingText = $("#main-heading").text();2. main-heading이라는 아이디를 가진 선택자와 아까 선언한 변수를 이용해 느낌표를 붙여준다.
$("#main-heading").text("!!"+ headingText + "!!");완성!
