● jQuery
- 요소들을 선택하는 강력한 방법 제공 및 선택된 요소들을 효율적으로 제어할 수 있는 자바스크립트 라이브러리이다.
● jQuery 기본 문법
$("선택자")
- 아이디: #
- 클래스: .
- 속성: 태그명[속성명=속성값]
- 태그: 태그명
● 값 가져오기
$("선택자").val();
$("선택자").text();
● 값 수정하기
$("선택자").val("값");
$("선택자").text("값");
● 반복문
1. $.each(iterator, function(index, item){});
2. iterator.each(function(index, item){});
- jQuery를 사용하면, 순수 Javascript에 비해 속도가 느려진다.
- 하지만 간결한 문법으로 인해 개발 속도 증가와 처리비용 감소에 대한 장점이 있다.
- 현업에서 60%이상의 웹 사이트에서 jQuery를 사용하고 있기 때문에 적절한 상황에 맞춰서 사용할 줄 알아야 한다.
- 까다로운 UI작업일 경우 상대적으로 무거운 jQuery보다는 직접 javascript를 이용하기도 한다.
※ 기본적으로 DOM을 최소화하는 것이 성능상 좋다.
실습(jQuery(1))
- 버튼 클릭 시 버튼 테두리 색상 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 기초 예제</title>
</head>
<body>
<div>
<input type="text" class="num" value="1">
</div>
<div>
<input type="text" class="num" value="2">
</div>
<div>
<input type="text" class="num" value="3">
</div>
<div>
<button onclick="change()">변경(순수 javascript 사용)</button>
<button onclick="$('.num').css('border-color', 'red')">변경(jQuery 사용)</button>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function change(){
let inputs = document.querySelectorAll(".num");
inputs.forEach(function(input){
input.style.borderColor = "red";
})
}
</script>
</html>
실습(jQuery(2))
- jQuery 객체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 객체 예제</title>
</head>
<body>
<ul class="car">
<li>벤츠</li>
<li>아우디</li>
<li>비엠더블유</li>
</ul>
</body>
<!-- jQuery 사용 시 필수 입력 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let lists = $("li");
let ul = $(".car");
console.log(lists);
// ul 태그의 모든 자식 태그 가져오기
console.log(ul.children());
// ul 태그의 부모 태그 가져오기
console.log(ul.parent());
// li 태그의 부모 중 ul 태그 가져오기
console.log(lists[1].closest("ul"));
// li 태그의 부모 중 body 태그 가져오기
console.log(lists[1].closest("body"));
// body 태그의 자식 중 li 태그 가져오기
console.log($("body").find("li"));
// ul 태그의 마지막 자식 요소 조회하기
console.log(ul.children().last());
console.log(ul.children().eq(2));
console.log(ul.children()[2]);
console.log($(ul.children()[2]));
// 속성 값 가져오기
console.log(ul.attr("class"));
</script>
</html>
- ul태그의 자식 중 첫번째 자식의 내용 변경하기
console.log(ul.children().first().text("제네시스"));
- ul 태그의 마지막 자식 요소 삭제하기
ul.children().last().remove();
- ul 태그 마지막 자식 요소로 요소 추가하기
ul.append("<li>람보르기니</li>");
- 속성명 변경하기
ul.attr("class", "superCar");
console.log(ul.attr("class"));
실습(jQuery(3))
- jQuery 체크박스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuert 체크박스</title>
</head>
<body>
<form action="" name="myForm">
<div>
<label>
서비스 이용약관 동의
<input type="checkbox" name="term1" class="term">
</label>
</div>
<div>
<label>
정보 수집 동의
<input type="checkbox" name="term2" class="term">
</label>
</div>
<div>
<label>
마케팅 수신 동의
<input type="checkbox" name="term3" class="term">
</label>
</div>
</form>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let $inputs = $(".term");
// 첫 번째 체크박스를 체크 상태로 설정한다.
$($inputs.get(0)).prop('checked', true);
$inputs.on("click", function(){
console.log($(this).is(":checked")); // 체크 여부 검사
console.log($(this).prop("checked")); //값 변경에 사용
});
</script>
</html>
'웹 개발 > JavaScript' 카테고리의 다른 글
| [Web_JavaScript] 19 (0) | 2022.05.15 |
|---|---|
| [Web_JavaScript] 18 (0) | 2022.05.14 |
| [Web_JavaScript] 16 (0) | 2022.05.12 |
| [Web_JavaScript] 15 (0) | 2022.05.11 |
| [Web_JavaScript] 14 (0) | 2022.05.10 |
