📖 jQuery
javaScript를 편리하게 사용할 수 있도록 해주는 Java Script Library이다.
(HTML의 요소들을 쉽게 조작하고 편리하게 사용할 수 있게 만든 라이브러리로Javascript를 미리 작성해둔 것이다.)
📌 특징
- DOM 엘리먼트 선택
- DOM 트래버설 및 수정(CSS 1-3 지원. 기본적인 XPath를 플러그인 형태로 지원)
이벤트- CSS 조작
- 특수효과 및 애니메이션
- AJAX 및 JSON, XML 파싱
- JavaScript 플러그인을 통한 확장성
- 유틸리티 - 브라우저 종류와 버전, "each" 함수
🧨 jQuery vs Javascript
Javascript로 길고 복잡하게 써야 하는 것을JQuery로 짧고 직관적으로 사용 가능Javascript 사용
let divs = document.querySelectorAll("div"); for (let i = 0; i>divs.length ; i++){ let tmp = divs[i]; tmp.innerText = "hi"; }jQuery 사용
$("div").text("hi");
📌 사용하기
https://www.w3schools.com/jquery/jquery_get_started.asp
제이쿼리 임포트 하기 위해 <head></head> 사이에 넣어준다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
📌 기본 구문
jQuery 기분 문법 - Selector (선택자)
- $(‘a’)
: page 내 모든 <a>- $(‘div a’)
: page 내 <div> 하위에 있는 <a>- $('#test’)
: id가 test인 태그- $(‘.btn’)
: class가 btn인 모든 태그- $(‘tr:odd’)
: <tr> 태그들 중 홀수번째들- $(‘tr:last tr:last’)
: 문서내의 마지막 <tr>- $(‘b:contains(‘hi’))
: hi를 content로 가진 b태그- $(‘div:has(‘ul’)
: <ul> 을 가진 <div> 태그- $(‘input:checkbox’)
: input태그중 checkbox- $(‘td nth-child(2n)’)
: 2의 배수 번째 <td>
Content/DOM 변경 및 조회 메소드
html()
- 선택요소의 html 내용을 가져옴. innerHTML과 동일
html(value)
- 선택요소에 인수로 받은 value를 넣는다.
- value내에 html태그가 있는 경우 태그로 들어간다.
text()
- 선택요소 내의 html태그 요소를 제외한 내용을 가져옴.
- innerText innerText와 동일.
text(value)
- 선택요소 내에 인수로 받은 value를 넣는다.
- value내의 html태그도 text로 들어간다.
val()
- input 태그의 value 값을 조회
val(value)
- 인수로 받은 value를 input 태그의 value 값을 설정
사용 예시 1
// 위의 input 요소에 문자열을 입력하고 전송버튼을 누르면 입력한 문자열을
//p 요소의 innerText 에 출력되도록 프로그래밍
<div class="container">
<input type="text" id="inputMsg" placeholder="문자열 입력..."/>
<button id="sendBtn">전송</button>
<p id="result"></p>
</div>
<script>
$("#sendBtn").on("click", () => {
const msg = $("#inputMsg").val();
$("#result").text(msg);
});
</script>사용 예시 2 (css 변경)
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<h1>이벤트 리스너 함수 등록</h1>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script>
// $(".box").on(이벤트명, 콜백함수)
$(".box").on("mouseover", function (e) {
// 이벤트가 발생한 바로 그 요소의 참조값은 e.target
console.log(e.target);
/*
e.target.style.backgroundColor="yellow";
e.target.style.width="200px";
e.target.style.height="200px";
e.target.innerText="mouseover!";
*/
// $() 함수에 문서객체의 참조값을 전달하면
//해당 문서 객체를 jquery 의 기능을 통해서 조작할 수 있다.
$(e.target).css("background-color", "yellow")
.css("width", "200px")
.css("height", "200px")
.text("mouseover!");
});
</script>사용 예시 3 (요소 추가)
<h1>이벤트 처리</h1>
<input type="text" id="inputMsg" placeholder="메세지 입력 ...">
<button id="sendBtn">전송</button>
<p id="current"></p>
<ul id="msgList">
</ul>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script>
// 전송 버튼을 눌렀을 때 실행할 함수 등록
$("#sendBtn").on("click", function () {
// 1. 입력한 문자열을 읽어와서
const msg = $("#inputMsg").val();
// 2. li 요소를 만들어서 innerText 에 출력하고 id 가 msgList 인 요소에 추가하기
$("<li>").text(msg).appendTo("#msgList");
})
$("#inputMsg").on("keyup", (e) => {
console.log(e.keyCode);
//만일 Enter 키를 눌렀다면
if (e.keyCode === 13) {
const msg = $("#inputMsg").val();
$("<li>").text(msg).appendTo("#msgList");
$("#inputMsg").val("").focus();
}
// 현재까지 입력한 문자열을 읽어와서
const msg = $(e.target).val();
// p 요소에 출력
$("#current").text(msg);
})
</script>