JQuery를 사용해보자.
JavaScript
html의 동작을 담당하는 자바스크립트는 html의 요소를 선택해서 해당 요소의 내용이나 스타일 등을 변경할 수 있다.
기본적인 문법은 아래와 같다.
document.getElementById('id').style.color = 'red';
'id'는 선택한 요소의 id이다.
<p> 라는 요소를 선택하고 싶다면 <p id="pId"></p> 와 같이
id 값을 지정해주는데 위의 pId 부분을 가리킨다.
이후에 .뒤로부터는 어떠한 동작을 할 것인지를 명시한다.
위 예시는 해당 요소의 글씨 색깔을 'red'로 변경해주는 예시이다.
javascript로 위처럼 길고 복잡하게 작성해야 하는 부분을
JQuery를 사용하면 직관적이고 편하게 사용할 수 있다.
JQuery
기본적인 문법은 아래와 같다.
$('#id').html('안녕');
'id'를 가진 요소의 글자를 '안녕'으로 바꿔주는 JQuery문이다.
javascript로 작성하면
document.getElementById('id').innerHTML = '안녕';
위처럼 작성하게 된다.
두 문장을 비교하면 JQuery가 훨씬 직관적이고 사용하기 쉽다는 장점이 있다.
JQuery를 사용하기 위해서는 기본적으로 head 부분에 JQuery CDN을 넣어주어야 한다.
JQuery는 라이브러리이기 때문에 호출해서 사용해주어야 하기 때문이다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
위 코드를 head부분에 작성해 주면 된다.
다른 예시를 보겠다.
<script> function result() { let a = '감자'; $('#q1').text(a) } </script> ... ... <body> <button onclick="result()">마법의 버튼</button> <p id="q1" style ="color: blue">남자</p> </body>```
위 예제는 버튼을 클릭하면 onclick 이벤트로 result 함수가 실행되어 'q1'이라는 id를 가진 요소의 텍스트를 a라는 변수로 변경해주는 예제이다.
마법의 버튼을 클릭하면 남자가 감자가 된다!
마치며
사실 웹개발 공부를 혼자 하면서 JQuery를 잘 사용하려고 하지도 않았고 신경도 쓰지 않았는데 javascript 문법과 차이를 보면서 사용해보니 확실히 편하고 눈에 잘 들어온다.
앞으로 JQuery를 활용해서 javascript와 더 친해져야겠다.
- 스파르타내일배움캠프에서 웹개발 캠프를 진행중이다.
오늘 12시간 중 밥먹는시간 빼면 온전히 집중한건 7~8시간..? 사이쯤일 것 같은데
12시간 중 적어도 8시간 넘게는 집중할 수 있도록 다잡아야겠다.
아는 내용도 있을 것이고 모르는 내용도 있을 것이지만
아는건 처음부터 배운다는 마음가짐으로 열심히 다시 복습하고,
모르는건 정말 처음 배우니깐 열심히 배워야겠다.
내일도 화이팅
