jQuery
jQuery는 웹 개발을 할 때 자주 사용되는 자바스크립트 라이브러리이다.
jQuery는 자바스크립트를 사용한 웹 개발을 더 쉽고 빠르게 해주는 도구이며, 간단한 문법, 크로스 브라우저 호환성, 강력한 DOM 조작, 이벤트 처리, 애니메이션 및 Ajax 기능을 제공하여 웹 개발자들이 복잡한 작업을 효율적으로 수행할 수 있게 도와준다.
jQuery를 사용하면 더 간결하고 읽기 쉬운 코드를 작성할 수 있어, 웹 개발을 보다 생산적으로 만들 수 있습니다.
- attr
HTML의 요소의 속성을 설정하거나 가져오는데 사용한다. 이를 통해 속성값을 동적으로 변경하거나, 현재 속성 값을 확인할 수 있다.
1. 속성 값 가져오기
var imgSrc = $("img").attr("src");
console.log(imgSrc);
2. 속성 값 설정
$("img").attr("src", "new-image.jpg");
3. 여러 속성 한번에 설정
$("img").attr({
"src": "new-image.jpg",
"alt": "새로운 이미지 설명",
"title": "이미지 제목"
});
4. 동적으로 속성 설정
$("a").attr("href", function(index, oldValue) {
return oldValue + "?user=123";
});
-> <a> 요소의 href 속성을 동적으로 설정.
- serialize
폼(form) 데이터를 쿼리 문자열(query string) 형식으로 직렬화(serialize)하는 데 사용되는데, 이는 주로 폼 데이터를 서버로 전송할 때 사용되며, AJAX 요청과 함께 사용하면 특히 유용하다. serialize 메서드는 폼 내의 모든 입력 요소(input, textarea, select 등)의 값을 하나의 문자열로 결합하여 반환한다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery serialize 메서드 예시</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#submitBtn").click(function() {
var formData = $("#myForm").serialize();
console.log(formData);
});
});
</script>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age"><br><br>
<input type="button" id="submitBtn" value="Submit">
</form>
</body>
</html>
위 코드에서 #submitBtn 버튼을 클릭하면, 폼 데이터가 직렬화되어 콘솔에 출력된다.
-> name=John&email=john%40example.com&age=25
만약 값에 공백이나 특수 문자가 포함되어 있으면, URL 인코딩(URL encoding)을 통해 안전하게 변환된다.
미친개발자를향해