jQuery는 HTML 문서 작업 프로세스를 간소화하는 자바스크립트 라이브러리이며, jQuery 셀렉터는 DOM(Document Object Model)에서 요소를 선택하고 이에 대한 작업을 수행할 수 있다.
jQuery 사용하기 - CDN
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
jQuery 사용하기 - 내부자원사용의 경우 다운로드 후 해당 경로에서 가져오기
npm install jquery<script src="path/to/jquery.js"></script>
jQuery 기본 사용 예
$(document).ready(function() {
$("p").css("background-color", "red");
});$(document).ready(function() { ~ }); 은 웹페이지가 모두 랜더링된 후 일어난 이벤트이며 이 이벤트에 실행될 스크립트를 작성한다.
jQuery 셀레터 사용법
태그 요소는 $("태그명") : 그냥 태그
ID 요소는 $("#아이디") : 샵아이디
Class 요소는 $(".클래스") : 닷클래스(점클래스)
$("p").css("background-color", "red");
$("p.selected").css("font-size", "20px");
p태그 여러개에 대해 한번에 처리할 때 jQuery each 구분
$("p").each(function() {
$(this).css("background-color", "red");
});
input박스가 여러개에 대해서는
$("input[type='text']").each(function() {
var value = $(this).val();
// update value in database
});
브라우저에서 원하는 요소를 선택하고 마우스 우클릭하면 검사가 나온다. 이걸 클릭하면 아래와 같다.
여기에서 다시 우측버튼을 클릭하면 Copy가 나오고 거기에서 Copy Selector를 하면 해당 요소의 셀렉턱를 알수 있다.
이 셀렉터를 복사해서 $("body > div.L3eUgb > div.o3j99.ikrT4e.om7nvf > form > div:nth-child(1) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input") 가능하다.
페이지를 구성하는 요소들은 셀렉터를 가지며 이 셀럭터를 통해 해당 요소를 객체로 반환받아 속성값을 제어할 때 jQuery는 용이하게 사용한다.
jQuery 셀렉터를 사용하여 배열데이터를 DOM에 추가
<ul id="items-list">
</ul>
var data = [
{ "id": 1, "name": "item 1" },
{ "id": 2, "name": "item 2" },
{ "id": 3, "name": "item 3" },
{ "id": 4, "name": "item 4" }
];
var items = "";
$.each(data, function(key, val) {
items += "<li>" + val.name + "</li>";
});
$("#items-list").html(items);
jQuery Ajax(에이작스) 로 데이터 가져와서 DOM에 추가
$.ajax({
url: "data.json",
dataType: "json",
success: function(data) {
var items = [];
$.each(data, function(key, val) {
items.push("<li id='" + key + "'>" + val + "</li>");
});
$("<ul/>", {
"class": "my-new-list",
html: items.join("")
}).appendTo("body");
}
});var inputValue = "example";
$.({ jquery ajax를 사용해서
url: "data.json", data.json를 호출하고
data: { input: inputValue }, data는 input파라미터에 값은 inputVlue 변수값 "example"
dataType: "json", data.php를 호출하고
success: function(data) { 요청이 성공했을 때
var items = []; item이라는 배열을 선언하고
$.each(data, function(key, val) { .each문으로 키, 값을 반복해서 가져와서
items.push("<li id='" + key + "'>" + val + "</li>"); li 태그에 키와 값으로 배열을 추가하고
});
$("<ul/>", {
"class": "my-new-list",
html: items.join("")
}).appendTo("body"); body아래에 ul태그의 클래스네임은 my-new-list으로 해서 item배열을 조인해서 추가하라
}
});
$.ajax({
url: "data.json",
dataType: "json",
success: function(data) {
var items = "";
$.each(data, function(key, val) {
items += "<li>" + val.name + "</li>";
});
$("#items-list").html(items);
}
});$("#items-list").html(items); 데이터 결과를 items변수로 모으고 items-list객체 요소의 내부 html로 집어넣어라.
[
{ "id": 1, "name": "item 1" },
{ "id": 2, "name": "item 2" },
{ "id": 3, "name": "item 3" },
{ "id": 4, "name": "item 4" }
]위 예제에서 사용하는 data.json파일 내용이다. jsonObject가 4개 있는 jsonArray이다.
jQuery Ajax(에이작스) 로 데이터 가져와서 폼에 뿌리기
$.ajax({
url: "data.json",
dataType: "json",
success: function(data) {
// populate input box
$("#input-box").val(data.inputValue);
// populate checkbox
if(data.checkboxValue) {
$("#checkbox").prop("checked", true);
} else {
$("#checkbox").prop("checked", false);
}
// populate select box
$("#select-box").val(data.selectValue);
// populate radio button
$("input[name='radio-group'][value='" + data.radioValue + "']").prop("checked", true);
// populate textarea
$("#textarea").val(data.textareaValue);
}
});jQuery val()메소드로 각 폼요소 셀럭터에 값을 넣어주는 예제이며 각 컨트롤의 성격에 따라 데이터 대입방식이 조금씩 다르다.
{
"inputValue": "Example Input",
"checkboxValue": true,
"selectValue": "Option 2",
"radioValue": "Option 1",
"textareaValue": "Example Textarea"
}다음은 위에서 호출하는 data.json파일이다.
jQuery Ajax로 폼에 있는 데이터 서버로 전송하기
- 간단한 유효성 체크 포함
$("#form").submit(function(event) {
event.preventDefault(); // prevent the form from submitting
// validate form data
var inputValue = $("#input-box").val();
if (!inputValue) {
alert("input box에 값을 입력하세요.");
return;
}
var checkboxValue = $("#checkbox").is(":checked");
var selectValue = $("#select-box").val();
if (!selectValue) {
alert("select box를 선택하세요.");
return;
}
var radioValue = $("input[name='radio-group']:checked").val();
if (!radioValue) {
alert("radio button을 선택하세요.");
return;
}
var textareaValue = $("#textarea").val();
//textarea는 값을 안넣어도 무시
// send data to server
$.ajax({
url: "submit",
type: "POST",
data: {
input: inputValue,
checkbox: checkboxValue,
select: selectValue,
radio: radioValue,
textarea: textareaValue
},
success: function(response) {
alert("서버로 전송이 완료되었습니다.");
}
});
});$("#form").submit(function(event) id가 form인 객체에 submit이벤트가 발생하면
event.preventDefault(); submit이 진행되는 동안 다른 이벤트를 막고
// validate form data
var inputValue = $("#input-box").val(); 셀렉터의 val()메서드를 통해 값을 가져온다.
if (!inputValue) { 값이 없으면
alert("input box에 값을 입력하시오."); 오류메시지 출력하고
return; 종료 리턴
}
var checkboxValue = $("#checkbox").is(":checked"); id가 checkbox인 체크박스는 checked여부를 가져온다.
var selectValue = $("#select-box").val(); selectbox도 val() 메서드로 값을 가져온다.
if (!selectValue) {
alert("select box를 선택하시오.");
return;
}
var radioValue = $("input[name='radio-group']:checked").val();.val() radio 버튼은 checked된 것을 val() 메서드로 값을 가져온다.
if (!radioValue) {
alert("radio button을 선택하시오.");
return;
}
var textareaValue = $("#textarea").val(); texarea도 val() 메서드로 값을 가져온다.
// send data to server
$.ajax({
url: "submit", 서버측 요청경로는 submit이다.
type: "POST", POST타입으로 폼 데이터를 전송한다.
data: {
input: inputValue,
checkbox: checkboxValue,
select: selectValue,
radio: radioValue,
textarea: textareaValue
}, {} 오브젝트에 input, checkbox, select, radio, textarea 속성에 값을 집어넣어 데이터를 전달 .
success: function(response) {
alert("서버에 전송이 완료되었습니다."); ajax 처리성공 이벤트가 발생하면 성공메시지 출력.
}
});
});
@WebServlet("/submit")
public class FormSubmitServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// validate, sanitize and process the data
String inputValue = req.getParameter("input");
boolean checkboxValue = Boolean.parseBoolean(req.getParameter("checkbox"));
String selectValue = req.getParameter("select");
String radioValue = req.getParameter("radio");
String textareaValue = req.getParameter("textarea");
// insert the data into the database or perform other actions
// ...
// return a response to the client
resp.setContentType("application/json");
resp.getWriter().write("{\"status\":\"success\"}");
}
}서버사이드 자바소스 예제임
jQuery 이벤트 핸들러
- 이벤트 핸들러는 html 요소에 click, change등의 이벤트가 발생했을 때 실행되는 함수를 정의한다.
- 자바스크립트에서는 이벤트기반으로 함수를 정의하여 서비스를 구현한다. 스크립트의 적절한 위치에 이벤트 핸들러를 구현하면 해당 요소에 이벤트가 발생할 때 함수내용이 실행된다. 함수명이 없는 함수를 가리켜 콜백함수라고 한다.
- $(this) 는 jQuery에서 이벤트를 받은 요소(객체) 자신이다. $(this).val() 은 자신의 값을 리턴한다는 뜻 이다.
- 아래와 같은 형태로 이벤트가 발생했을 때 각 이벤트 핸들러를 구현한다.
// Handle button click
$("#button").click(function() {
alert("Button clicked!");
});
// Handle select box change
$("#select-box").change(function() {
alert("Select box value changed to: " + $(this).val());
});
// Handle radio button change
$("input[name='radio-group']").change(function() {
alert("Radio button value changed to: " + $(this).val());
});
// Handle checkbox click
$("#checkbox").click(function() {
alert("Checkbox clicked, value is: " + $(this).is(":checked"));
});
jQuery는 셀렉터, Ajax, 폼 validatator, JSON 데이터 핸들링, 이벤트핸들러 정도만 알련 개발을 진행하는 데 전혀 문제가 없다. 다른 부분은 구글링으로 충분하다고 생각한다.
댓글