속성 탐색 선택자 : 요소의 지정된 속성을 기준으로 선택함.
1. 요소[속성] : 속성이 있는 요소 가져오기
2. 요소[속성=값] : 속성과 값이 일치하는 요소 가져오기
3. 요소[속성^=값] : 값으로 시작하는 요소 가져오기
4. 요소[속성$=값] : 값으로 끝나는 요소 가져오기
5. 요소[속성*=값] : 값을 포함하는 요소 가져오기
6. 요소[속성=값][속성=값] : and 조건으로 조건 2개의 속성과 값을 모두 만족하는 요소 가져오기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function () {
// 1. 요소[속성] : 속성이 있는 요소 가져오기
$("a[title]").css("border","1px solid red");
// 2. 요소[속성=값] : 속성과 값이 일치하는 요소 가져오기
$("a[href='http://www.naver.com']").css("background-color","pink");
// 3. 요소[속성^=값] : 값으로 시작하는 요소 가져오기
$("a[href^='mailto']").css("background-color", "aqua");
// 4. 요소[속성$=값] : 값으로 끝나는 요소 가져오기
$("a[href$='net']").css("background-color", "lightgray");
// 5. 요소[속성*=값] : 값을 포함하는 요소 가져오기
$("a[href*='daum']").css("border", "5px solid orange");
// 6. 요소[속성=값][속성=값] : and 조건으로 조건 2개의 속성과 값을 모두 만족하는 요소 가져오기
$("a[href^='mailto'][href$='net']").css("fontStyle", "italic");
});
</script>
</head>
<body>
<a href="http://www.google.com" title="구글 이동">구글</a> <br>
<a href="http://www.naver.com">네이버</a> <br>
<a href="http://www.daum.net">다음</a> <br>
<a href="mailto:jhehun@empas.com">네이트 메일</a> <br>
<a href="mailto:jhehun@naver.com">G 메일</a> <br>
<a href="mailto:jhehun@daum.net">다음 메일</a> <br>
</body>
</html>
'Front > JQuery' 카테고리의 다른 글
| [JQuery-3.6.0] 이벤트(Event) 처리 (0) | 2021.04.29 |
|---|---|
| [JQuery-3.6.0] 요소(속성) 편집 메서드 (0) | 2021.04.28 |
| [JQuery-3.6.0] 요소(속성) 조작, 수치 조작 메서드 (0) | 2021.04.28 |
| [JQuery-3.6.0] 기본 문법과 위치 선택자 사용 (0) | 2021.04.27 |
| [JQuery-3.6.0] 제이쿼리의 기본 개념 (0) | 2021.04.27 |
