Notice
Recent Posts
Recent Comments
Link
SeouliteLab
jQuery 속성값이 특정 단어를 포함하는 요소 선택자 [name~="value"] 본문
예제 1: 특정 단어를 포함하는 속성값을 가진 요소 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 속성값이 특정 단어를 포함하는 요소 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("[class~='highlight']").css("background-color", "yellow");
});
</script>
<style>
.highlighted {
background-color: yellow;
}
</style>
</head>
<body>
<div class="highlighted">특정 단어를 포함하는 요소</div>
<div class="not-highlighted">포함하지 않는 요소</div>
</body>
</html>
설명:
이 예제는 jQuery의 속성값이 특정 단어를 포함하는 요소를 선택하는 방법을 보여줍니다.
[class~='highlight']
는 class 속성값에 "highlight"라는 단어가 포함된 모든 요소를 선택합니다.- 선택된 요소에 CSS를 적용하여 배경색을 노란색으로 변경합니다.
예제 2: 특정 단어를 포함하는 요소에 이벤트 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 속성값이 특정 단어를 포함하는 요소 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("[class~='highlight']").click(function(){
alert("특정 단어를 포함하는 요소를 클릭했습니다.");
});
});
</script>
</head>
<body>
<div class="highlighted">특정 단어를 포함하는 요소</div>
<div class="not-highlighted">포함하지 않는 요소</div>
</body>
</html>
설명:
이 예제는 jQuery의 속성값이 특정 단어를 포함하는 요소에 클릭 이벤트를 추가하는 방법을 보여줍니다.
[class~='highlight']
는 class 속성값에 "highlight"라는 단어가 포함된 모든 요소를 선택합니다.- 특정 단어를 포함하는 요소를 클릭하면 알림창이 뜨도록 이벤트를 추가합니다.
예제 3: 특정 단어를 포함하는 요소에 클래스 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 속성값이 특정 단어를 포함하는 요소 선택자 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("[class~='highlight']").addClass("bold");
});
</script>
<style>
.bold {
font-weight: bold;
}
</style>
</head>
<body>
<div class="highlighted">특정 단어를 포함하는 요소</div>
<div class="not-highlighted">포함하지 않는 요소</div>
</body>
</html>
설명:
이 예제는 jQuery의 속성값이 특정 단어를 포함하는 요소에 클래스를 추가하는 방법을 보여줍니다.
[class~='highlight']
는 class 속성값에 "highlight"라는 단어가 포함된 모든 요소를 선택합니다.- 선택된 요소에 "bold" 클래스를 추가하여 글꼴을 굵게 만듭니다.
jQuery의 속성값이 특정 단어를 포함하는 요소 선택자
인 [name~="value"]
는 웹 페이지에서 특정 요소를 선택하고 조작하는 데 유용한 도구입니다. 이 선택자를 사용하면 특정 요소를 찾아서 스타일을 변경하거나 이벤트를 추가하는 등의 작업을 할 수 있습니다.
'프로그래밍' 카테고리의 다른 글
파이썬 strftime 함수: 날짜/시간 객체를 문자열로 변환하기 (0) | 2024.04.09 |
---|---|
파이썬 strptime 함수: 문자열을 날짜/시간 객체로 변환하기 (0) | 2024.04.09 |
jQuery 속성값이 특정 문자열을 포함하는 요소 선택자 [name*=”value”] (0) | 2024.04.09 |
jQuery 속성값이 특정 접두사를 포함하는 요소 선택자 [name|=”value”] (0) | 2024.04.09 |
jQuery :animated Selector - 애니메이션 중인 요소를 선택하여 조작 (0) | 2024.04.09 |