Notice
Recent Posts
Recent Comments
Link
SeouliteLab
jQuery의 다중 속성 선택자 활용하기 본문
jQuery의 다중 속성 선택자인 [name="value"][name2="value2"]는 여러 개의 속성 조건을 동시에 만족하는 요소를 선택하는 데 사용됩니다. 이 선택자를 활용하면 웹 페이지에서 특정한 속성 값 조합을 가진 요소를 선택하여 조작할 수 있습니다.
예제 1: 클래스와 데이터 속성을 동시에 가진 요소 선택하기
<!DOCTYPE html>
<html>
<head>
<title>다중 속성 선택자 활용 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("[data-category='fruit'][data-color='red']").css("font-weight", "bold");
});
</script>
</head>
<body>
<div data-category="fruit" data-color="red">사과</div>
<div data-category="fruit" data-color="green">바나나</div>
<div data-category="vegetable" data-color="red">토마토</div>
</body>
</html>
설명: 위 예제는 데이터 속성이 "fruit"이고 색상이 "red"인 요소를 선택하여 글꼴을 굵게 만듭니다.
예제 2: 태그와 클래스를 동시에 가진 요소 선택하기
<!DOCTYPE html>
<html>
<head>
<title>다중 속성 선택자 활용 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("input[type='text'][class='required']").css("border", "2px solid red");
});
</script>
</head>
<body>
<input type="text" class="required" placeholder="이름">
<input type="email" class="required" placeholder="이메일">
<input type="password" placeholder="비밀번호">
</body>
</html>
설명: 이 예제는 태그가 input이고 클래스가 "required"인 요소를 선택하여 빨간색 테두리를 추가합니다.
예제 3: ID와 태그를 동시에 가진 요소 선택하기
<!DOCTYPE html>
<html>
<head>
<title>다중 속성 선택자 활용 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#username[type='text']").css("background-color", "lightblue");
});
</script>
</head>
<body>
<input type="text" id="username" placeholder="사용자 이름">
<input type="password" id="password" placeholder="비밀번호">
</body>
</html>
설명: 이 예제는 ID가 "username"이고 태그가 input인 요소를 선택하여 배경색을 연보라색으로 변경합니다.
'프로그래밍' 카테고리의 다른 글
jQuery의 인접 형제 선택자 활용하기 (0) | 2024.04.12 |
---|---|
jQuery의 다중 선택자 활용하기 (0) | 2024.04.12 |
jQuery의 :lt() 선택자 활용하기 (0) | 2024.04.12 |
jQuery의 :last 선택자 활용하기 (0) | 2024.04.12 |
jQuery의 :last-of-type 선택자 활용하기 (0) | 2024.04.12 |