jQuery - 소개 및 사용법
제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있다. 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있다.
사용법
제이쿼리 include
로컬 디렉토리에 jquery 파일을 다운로드 받아서 아래와 같이 script 태그의 src 속성에 해당 경로를 지정해주면 된다. 이때 script 태그는 head 태그 사이에 작성해줘야 한다. html 파일은 스크립트를 포함해서 위에서부터 아래로 순차적으로 호출이 되는 특징이 있는데, 만약 jquery include script 태그를 우리가 작성한 jquery 문법보다 아래에 작성하게 되는 경우, 우리가 작성한 jquery 문법을 jquery 문법으로 인식하지 못 하게 된다.
<script src="code.jquery.com_jquery-3.7.1.min.js"></script><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
</body>
</html>문법
on load
앞서 html 파일은 위에서부터 아래로 순서대로 호출이 되는 특징이 있다고 하였는데 on load는 예외이다. 제이쿼리의 on load는 항상 제일 마지막에 호출이 된다.
$(document).ready(function() {
alert("on load");
})
<!-- 위 코드와 동일 (축약 버전) -->
$(function() {
alert("on load");
})요소의 접근
요소에 접근하여 요소의 값을 읽거나 설정할 수 있도록 해주는 대표적인 메소드는 다음과 같다.
- .html() : 해당 요소의 html 컨텐츠를 반환하거나 설정한다.
- .text() : 해당 요소의 텍스트 컨텐츠를 반환하거나 설정한다.
- .width() : 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정한다.
- .height() : 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정한다.
- .attr() : 해당 요소의 명시된 속성의 속성값을 반환하거나 설정한다.
- .position() : 선택한 요소 중에서 첫 번째 요소에 대해 특정 위치에 존재하는 객체를 반환한다.
- .val() : form 요소의 값을 반환하거나 설정한다.
값 읽어오기 예시 (GET)
var result = $("#inputBox").val();
alert(result);값 설정하기 예시 (SET)
$("#inputBox").val("내용을 수정해보자");요소의 추가
아래 메소드를 사용하여 기존 요소의 내부에 새로운 요소나 컨텐츠를 추가할 수 있다.
- before(엘리먼트) : 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있다.
- after(엘리먼트) : 선택한 요소 앞에 요소를 추가하거나 이동시킬 수 있다.
- append(엘리먼트) : 선택한 요소의 첫번째에 새로운 요소나 컨텐츠를 추가할 수 있다.
- prepend(엘리먼트) : 선택한 요소의 마지막에 새로운 요소나 컨텐츠를 추가할 수 있다.
var html = '<p>Hello</p>';
$('h1').before(html);
$('h1').after(html);
$('h1').prepend(html);
$('h1').append(html);선택자
자주 사용되는 선택자
- $(".xxx") : 지정한 클래스를 가지는 모든 요소를 선택
- $("#xxx") : 지정한 id 속성을 가지는 하나의 요소를 선택
- $("input[name=test]") : 속성 name값이 test인 요소
- $("input[name*=test]") : 속성 name값이 test란 단어를 포함하는 요소 (어느 위치든)
- =test]") : 속성 name값이 test이거나 test로 정확히 끝나는 값인 요소. 비교는 대소 문자를 구분함.
- $("input[name!=test]") : 속성 name값이 test이거나 을 아예 갖지 않거나, 이거나 이외의 값을 갖지 않는 요소
- $("input[name^=test]") : 속성 name값이 test이거나, test로 정확히 시작하는 요소
- $("input[name=test]:checked") : 속성 name값이 test이면서 체크된 요소
- $("xxx:selected") : 선택된 모든 요소 선택
- $("input") : input 타입의 모든 요소를 선택
- $("div:eq(0)") : 일치하는 집합 내의 인덱스 n에 있는 요소를 선택
- $("div").eq(0) : 위와 동일
- $("div:first") : 첫 번째 위치한 문서 객체를 선택함
- $("div:last") : 마지막에 위치한 문서 객체를 선택함
- $("div:odd") : 홀수 번째에 위치한 문서 객체를 선택함
- $("div:even") : 짝수 번째에 위치한 문서 객체를 선택함
기본 선택자
- $("*") : 모든 요소를 선택
- $(".class") : 지정한 클래스를 가지는 모든 요소를 선택
- $("element") : 지정한 태그명을 가지는 모든 요소를 선택
- $("#id") : 지정한 id 속성을 가지는 하나의 요소를 선택
- $("selector 1, selector2") : 모든 지정한 선택자들의 결과들을 결합하여 선택
자식 선택자
- $("div:first-child") : 부모의 첫 번째 자식인 모든 요소를 선택
- $("div:first-of-type") : 동일한 요소 이름의 형제 중 첫 번째 요소를 모두 선택
- $("div:last-child") : 부모의 마지막 하위 요소인 모든 요소를 선택
- $("div:last-of-type") : 동일한 name 요소의 형제 중 마지막 요소인 모든 요소를 선택
- $("div:nth-child(2)") : 부모의 n 번째 자식인 모든 요소를 선택
- $("div:last-child(2)") : 마지막 요소에서 첫 번째 요소까지 계산하여 부모의 n 번째 자식인 모든 요소를 선택
- $("div:nth-last-of-type(2)") : 마지막 요소부터 첫 번째 요소까지 같은 name 요소를 가진 형제와 관련하여 부모의 n 번째 자식인 모든 요소 선택
- $("div:nth-of-type(2)") : 동일한 name 요소를 갖는 형제와 관련하여 부모의 n번째 자식인 모든 요소 선택
- $("div:only-child") : 부모의 유일한 자식인 모든 요소를 선택
- $("div:only-of-type") : 동일한 name 요소를 갖는 형제 노드가 없는 모든 요소 선택
계층 선택자
- $("ul > li") : "parent"로 지정된 요소의 "child"로 지정된 모든 직접 자식 요소 선택
- $("form input") : 지정된 조상의 자손인 모든 요소 선택
- $("label+input") : 형제 "prev"가 바로 앞에 오는 "next"와 일치하는 다음 요소 모두 선- 택
- $("#prev~div") : "prev"요소 다음에 오는 모든 형제 요소를 선택하고, 상위 요소가 같으며 필터링 "siblings" 선택자와 일치하는 요소
속성 선택자
- $("[name|=apple]") : 속성 name값이 apple이거나, apple- 으로 시작하는 요소
- $("[name*=apple]") : 속성 name값이 apple이란 단어를 포함하는 요소 (어느 위치든)
- $("[name~=apple]") : 속성 name값이 apple이거나 apple 공백 / 공백 apple 으로 구분된 단어를 포함하는 요소
- =apple]") : 속성 name값이 apple이거나 apple로 정확히 끝나는 값인 요소 비교는 대소 문자를 구분함.
- $("[name=apple]") : 속성 name값이 정확히 apple인 요소
- $("[name!=apple]") : 속성 name값이 apple을 아예 갖지 않거나, apple 이외의 값을 갖지 않는 요소
- $("[name^=apple]") : 속성 name값이 apple이거나, apple로 정확히 시작하는 요소
- $("[name]") : 속성 name을 갖고있는 요소
- $("[name=apple][name2=banana]") : 각 속성 선택자들이 and로 일치하는 요소
jQuery 전용 선택자
- $("div:odd") : 홀수 번째에 위치한 문서 객체를 선택함
- $("div:even") : 짝수 번째에 위치한 문서 객체를 선택함
- $("div:first") : 첫 번째 위치한 문서 객체를 선택함
- $("div:last") : 마지막에 위치한 문서 객체를 선택함
- $("div:root") : document의 루트 요소 선택
- $("div:target") : document의 URL의 flagment 식별자로 지정된 대상 요소를 선택
- $("div:header") : h1, h2, h3 등과 같이 헤더인 모든 요소를 선택
- $("div:empty") : 자식이 없는 모든 요소(텍스트 노드 포함)를 선택
- $("div:parent") : 하나 이상의 하위 노드(요소 또는 텍스트)가 있는 모든 요소를 선택
입력 양식 폼(Form) 필터 선택자
- $(":button"): input 태그중 type 속성이 button인 문서 객체와 button 태그를 선택
- $(":checkbox") : 체크박스 유형의 모든 요소 선택
- $(":checked") : 체크되거나 선택된 모든 요소와 일치한 요소 선택
- $(":disabled") : 비활성화된 모든 요소 선택
- $(":enabled") : 활성화된 모든 요소 선택
- $(":file") : 파일 유형의 모든 요소를 선택
- $(":focus") : 현재 포커스가 있는 요소 선택
- $(":image") : 이미지 유형의 모든 요소 선택
- $(":input") : 모든 input, textarea, select, button 요소 선택
- $(":password") : 패스워드 유형의 모든 요소 선택
- $(":radio") : 라디오 유형의 모든 요소 선택
- $(":reset") : reset 유형의 모든 요소 선택
- $(":selected") : 선택된 모든 요소 선택
- $(":submit") : submit 유형의 모든 요소 선택
- $(":text") : text 유형의 모든 input 요소 선택
함수 필터 선택자(function Filter)
- $("div:eq(1)") : 일치하는 집합 내의 인덱스 n에 있는 요소를 선택
- $("div:gt(2)") : 일치하는 세트 내의 인덱스보다 큰 인덱스에서 모든 요소를 선택
- $("div:lang(en-us)") : 지정된 언어의 모든 요소를 선택
- $("div:lt(4)") : 일치하는 집합 내의 인덱스보다 작은 인덱스에서 모든 요소를 선택
- $("div:not(:checked)") : 지정된 선택자와 일치하지 않은 모든 요소를 선택
- $("div:contains('Hello'") : 지정된 텍스트를 포함하는 모든 요소를 선택
- $("div:has(p)") : 지정한 선택자와 일치하는 요소를 하나 이상 포함하는 요소를 선택
- $("div:animated") : 선택자를 실행할 때 애니메이션 진행 상태에 있는 모든 요소를 선택
- $("not(:animated)" : 애니메이션중이지 않은것
가시성 필터 선택자 (Visibility Fileter)
- $("div:hidden") : hidden 된 모든 요소 선택
- $("div:visible") : visible인 모든 요소 선택
태그에 스타일(CSS) 제어
- $("selector").css("스타일key","적용하고자하는 값") : 지정한 요소에 style 속성을 추가한다.
- $("selector").attr( "style", "스타일key":"적용하고자하는 값") : 지정한 요소에 style 속성을 추가한다.
- addClass("클래스명") : 클래스명을 지정된 셀렉터에 추가한다.
- removeClass("클래스명") : 클래스명을 지정된 셀렉터로부터 제거한다.
- hasClass("클래스명") : 클래스명이 지정된 셀렉터로부터 존재하는지 여부를 판단한다.
$("div:eq(0)").css("color","red");
$("div:eq(0)").css("font-weight","bold");
<!-- 아래 코드는 위 코드들과 동일한 기능이 작동 -->
$("div:eq(0)").attr("style","color:red;font-weight:bold");$("#sampleDiv1").addClass("sample2");
$("#sampleDiv1").removeClass("sample2");
$("#sampleDiv1").hasClass("sample2");태그 추적
- parent() : 부모값들을 찾고자 할 때 사용한다.
$("#txt").parent().next().find(".txt:eq(1)").val();- find() : 자식값들을 찾고자 할 때 사용한다.
1. $("table").find("#txt").val();
2. $("table").find("tr:eq(0)").find("td:eq(0)").find("#txt").val();- prev() : 동일레벨에서 바로 이전의 요소를 선택한다.
$(".txt:eq(2)").prev()- next() : 동일레벨에서 바로 다음(동일 레벨)의 요소를 선택한다.
$(".txt:eq(2)").next().val();each() 함수
for(var i = 0; i < list.length; i++) {
html += "<tr><td>" + list[i].subject + "</td></tr>
}
<!-- 위 코드와 동일한 기능 -->
$.each(list, function(index,data){
html += "<tr><td>" + data[i].subject + "</td></tr>
})$(function () {
$("div").each(function (index) {
console.log($(this).html());
if (index == 1) {
return false;
}
});
})마우스, 키보드 이벤트 함수
click 이벤트
$("#alertButton").click(function(){
alert("click test");
});var textTag = "<h2>임시로 추가된 H2 태그입니다.</h2>";
$("#beforeAddButton").click(function(){
$("#addLayer").before(textTag);
});dblclick 이벤트
$("#alertButton").dblclick(function(){
alert("dblclick test");
});keypress, keyup, keydown 이벤트
$("#searchValue").keypress(function(event){
if(event.keyCode == 13) {
var searchKey = $("#searchKey").val();
var searchKey = $("#searchValue").val();
console.log("searchKey",searchKey);
console.log("searchValue",searchKey);
}
});on 이벤트
<!--
$(document).on("이벤트","셀렉터", function(){})
-->
$(document).on("click",".alertButton", function(){
alert("on test");
})자주 사용하는 문법 정리
//선택한 요소를 클릭했을 때 클래스를 추가한다.
$("?").click(function () {
$("?").addClass("active");
});
//선택한 요소를 클릭했을 때 클래스를 제거한다.
$("?").click(function () {
$("?").removeClass("active");
});
//선택한 요소를 클릭할때마다 클래스의 추가/제거를 반복한다.
$("?").click(function () {
$("?").toggleClass("active");
});
//선택한 요소를 클릭했을 때 인풋박스 value값을 변경한다.
$("?").click(function () {
$("?").val("");
});
//클래스 포함 여부
$("?").hasClass("mine");
//this의 앞, 뒤에 있는 동료태그 선택 (1개)
$(".stars .fa").click(function(){
$(this).prev().addClass('active')
$(this).next().removeClass('active')
})
//this의 앞, 뒤에 있는 동료태그 모두 선택 (n개)
$(".stars .fa").click(function(){
$(this).prevAll().addClass('active')
$(this).nextAll().removeClass('active')
})
//SideUp,SlideDown 같은 기능 구현할 때 반복클릭해도 반복실행 안되게 하는 방법
//아래 코드는 예시임. stop 부분이 중요.
$(this).next().stop.slideDown();focus(), blur()
<!-- 마우스가 포커스 되었을 때 나타나고, 포커스가 벗어났을 때 사라지는 기능 -->
$(".search .field input[type=search]").focus(function () {
$(this).parent().next().css("display", "block");
});
$(".search .field input[type=search]").blur(function () {
$(this).parent().next().css("display", "none");
});
//체이닝을 이용하여 아래와 같이 줄여쓸 수 있음.
$(".search .field input[type=search]")
.focus(function () {
$(this).parent().next().css("display", "block");
})
.blur(function () {
$(this).parent().next().css("display", "none");
});SHOW, HIDE
- $("#showhide").show();
- $("#showhide").hide();
- $("#showhide").fadeIn();
- $("#showhide").fadeOut();
- $("#showhide").slideUp();
- $("#showhide").slideDown();
trim()
trim() 함수를 통해 문자 앞 뒤의 공백을 제거할 수 있다. (단, 문자 사이의 공백은 제거되지 않는다.)
- $.trim(txt);
remove(), empty()
- .empty() : 특정 영역의 내용을 비운다.
- .remover() : 특정 영역을 삭제한다.
$("#txt").empty();
$("#txt").remove();index()
$(".btn").index(this);참조
https://reference-m1.tistory.com/284
https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EC%84%A0%ED%83%9D%EC%9E%90-Selector-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC
안녕하세요 백엔드 개발자입니다.