오늘부턴 JS를 더 쉽고 편하게 사용할 수 있는 라이브러리인 Jquery를 배우기 시작했다.
안 그래도 자바스크립트는 왜 이렇게 쓸 게 많을까...라며 불평하고 있었는데, 제이쿼리 쓰는까 확실히 쉽고 편하더라!
Jquery
제이쿼리는 대표적인 자바스크립트 라이브러리로 ECMA6이전 불편했던 자바스크립트를 편하게 사용하기 위해서 만들어졌다. 물론 ECMA6 이후 자바스크립트의 기능이 대폭 상향되고 리액트, 뷰가 치고 들어오면서 제이쿼리는 시장에서 도태되기 시작했다. 그럼에도 제이쿼리 개발자들은 독자 노선으로 자신들만의 갈 길을 가고 있다.
이런 제이쿼리의 문법은 자바스크립트와 다르지만, 그 자체가 자바스크립트이기 때문에 모두 기능을 사용할 수 있다.
[ 사용법 ]
제이쿼리를 사용하기 위해선 <head>에서 CDN으로 불러와야 한다. 그 후, <script> 요소 안에서 똑같이 사용한다.
- 제이쿼리랑 자바스크립트는 문법적으로 혼합 사용이 가능하다.
$().으로 시작하고, jQuery 객체에 모든 기능이 들어가 있다.- 제이쿼리는 극히 드문 경우 빼고 모두 함수로 이뤄져 있다.
1) 요소 선택하기
: 제이쿼리가 요소를 선택할 때는 CSS의 선택자를 사용한다.
document.getElementById("msg").value;
$("#msg").val(); // getter
$("#msg").val(“input text”); // setter
document.getElementById("msg").innerHtml;
$(“#msg”).text();
$(“#msg”).text(“제이쿼리로 HTML 바꾸기”);함수를 매개변수 없이 사용하면 getter의 역할을 하여 대상에 대한 값을 가져온다. 반대로 매개변수를 입력하면 setter의 역할을 하여 값을 넣어줄 수 있다.
2) CSS 스타일 변경
제이쿼리를 통해서 CSS 속성과 값을 줄 수도 있다.
그리고 여러 개의 속성을 줄 때는, 객체로 묶어서 key : value의 형태로 부여한다.
// 속성이 1개일 때
$("#msg").css(
"border", "1px solid pink",
);
// 여러 개를 줄 때
$("#msg2").css({
"border" :"1px solid pink",
"color" : "dodgerblue"
});
// 스타일 속성값도 출력할 수 있다.
console.log($("#msg2").css("border"));3) 이벤트 처리
자바스크립트에서 사용하는 이벤트 처리를 보다 간편하게 할 수 있다.
// $(대상).on(“이벤트 종류”, 콜백함수)
$("#btn").on("click", function(){
alert("JQuery Event!");
});4) 텍스트 입력 방법
제이쿼리에서 요소 내부의 컨텐츠를 입력하는 방식은 2가지가 존재한다.
- text() : 입력하는 컨텐츠를 단순 text로 인식한다.
- html() : 입력하는 컨텐츠를 html로 인식하여 태그 적용이 가능하다 (document.write)
<input type="text" id="msg">
<input type="button" value="버튼" id="btn">
<div id="target"></div> // 입력 내용이 들어가는 부분
<script>
$("#btn").on("click", function(){
let msg = $("#msg").val();
$("#target").html(msg); // (1)
$("#target").text(msg); // (2)
});
</script>위 코드에서 (1)의 방식으로 <div> content </div> 를 입력하면, 그 결과는 target div에 content 라는 내용이 들어간 <div> 가 생겨난다. 반면 (2)의 방식으로 하면 입력내용 그대로 target 안에 <div> content </div> 라는 텍스트가 적힌다.
또한 출력 시엔, text는 태그 안의 내용을 추출하며, html은 해당 html 자체를 출력하게 된다.
5) 요소를 추가하기
브라우저가 HTML 파일을 렌더링하게 되면 document 영역에 그 내용에 따라 화면이 구현된다. 이를 정적인 상태라고 한다. 그러나 여기서 우리가 렌더링 후, 요소를 추가하게 되면 재 렌더링을 하지 않는 이상, 이는 나타나지 않는다.
따라서 우리가 원하는 것은 렌더링하지 않아도, 일정 조건(이벤트)에 따라서 요소들이 사라지고 만들어지게 하는 동적인 상태를 구현하는 것인데, 예를 들어 댓글, 스크롤 시 화면이 이어지는 것과 같은 것이다.
- 정적 : 코드 상에 고정되어, 렌더링 되면 요소가 나타나는 것.
- 동적 : 코드 상에 있지만, 렌더링 후 일정 조건에 따라 나타나는 것.
이를 위해 우리가 사용할 함수는 총 네 가지이며, 이것들은 단순 위치에 대한 것이니 이해하고 활용하면 된다.
- append() : 원 내용의 뒤
- prepend() : 원 내용의 앞
- before() : 대상 태그의 앞
- after() : 대상 태그의 뒤
예시
<div id="box">
내용1 <br>
내용2 <br>
</div>
<script>
$("#box").prepend("여기가 Prepend<br>") // ‘내용1’의 앞
$("#box").append("여기가 Append") // ‘내용2’의 뒤
$("#box").before("여기가 Before") // #box의 여는 태그 앞
$("#box").after("여기가 After") // #box의 닫힘 태그 뒤
</script>6) 요소 객체 만들기
자바스크립트의 document.write(“<div>”); 의 응용으로 write()을 호출하면 body의 영역에 실제로 <div> 을 입력해 div 태그를 만들어낼 수 있다. 물론 닫는 태그도 같이 입력해줘야 한다. 쉽게 말하면 script를 통해서 html의 body에 실제로 입력하는 것이다.
이런 기능은 제이쿼리에서도 가능하다. 단순 텍스트로 만드는 것이 아닌 요소 객체로 만들어서 사용한다. 물론 텍스트로만 구성하는 것도 문제가 되진 않는다. 다만 유지 보수에서 있어선 객체로 사용하는 것이 훨씬 유리하다.
// div 객체 생성
let div = $(“<div>”);
// table 객체 만들기
let tr = $("<tr>");
tr.append($("<td>").text(title));
tr.append($("<td>").text(content));
tr.append($("<td>").text(writer));먼저 해당 태그를 CSS선택자로 호출하면 메모리 상에 실제 HTML처럼 div, tr 요소가 만들어진다. 그리고 이는 닫힘 태그가 같이 붙어 있다.
더 나아가 이 안에 내용을 추가하거나, table 객체를 만들고 싶다면 앞서 배운 append()를 이용해서 실제 table을 만들 듯이 사용해주면 된다.
또한, 해당 동작을 위해선 이벤트 처리를 해주면 된다.
<table id="table" border="1">
<tr>
<th> 제목 </th>
<th> 내용 </th>
<th> 작성자 </th>
</tr>
</table>
<script>
$("#btn").on("click", function () {
let title = $("#title").val();
let content = $("#content").val();
let writer = $("#writer").val();
let record = $("<tr>"); // <tr> 객체 생성
// <tr> 객체 내부에 추가
record.append($("<td>").text(title)); // <td> 객체 생성 후, 입력받은 내용을 태그 안에 넣어줌
record.append($("<td>").text(content));
record.append($("<td>").text(writer));
// 만들어진 객체를 table 태그 내부에 추가.
$("table").append(record);
// 입력값 초기화
$("#title").val('');
$("#content").val('');
$("#writer").val('');
// 위 코드는 이렇게도 표현이 가능하다.
// record.html("<td>" + title + "<td>" + content + "<td>" + writer
// $("#table").append("<tr>" +"<td>" + title + "<td>" + content + "<td>" + writer +"</tr>");
});
</script>