<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<Script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></Script>
<script>
$(function(){
//속성선택자
// a태그에 title속성이 있으면
$("a[title]").parent().css("background-color","pink");
//a 태그에 href속성의 값이 https://www.naver.com 같은 객체 선택
$('a[href="https://www.naver.com"]').css('font-size', '2em');
//^= : 특정 문자로 시작하면 선택
$("a[href^='https'").css("background-color", "yellow");
//$= : 특정 문자로 끝나면 객체선택
$('a[href$="com"]').parent().css("background-color", "lightblue");
// *= : 특정 문자가 포함되면 객체 선택
$('a[href*="na"]').css("font-color", "red")
$("a[class=best]").css("font-size", "3em").css("padding", "10px");
});
function startScript(){
console.log("함수 실행됨...");
}
</script>
</head>
<body>
<ul>
<li><a href="https://www.nate.com" class="test">네이트</a></li>
<li><a href="https://www.daum.net" class="best">다음</a></li>
<li><a href="https://www.naver.com" class="test">네이버</a></li>
<li><a href="https://www.jquery.com" class="best" title="제이쿼리 홈페이지로 이동합니다.">제이쿼리</a></li>
<li><a href="https://www.spring.io" class="test">스프링프레임워크</a></li>
<li><a href="https://www.w3school.com" class="best">w3schools</a></li>
<li><a href="javascript:startScript()" class="test">메일보내기</a></li>
</ul>
</body>
</html>
최근댓글