<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("p[title]").css("background-color", "yellow");
// [속성]: 속성을 가지고 있는 태그를 선택
$("p[title = 'aaa1']").css("color", "blue");
// [속성 = 값]: 속성의 값이 지정된 값과 일치하는 태그를 선택
$("p[title != 'aaa1']").css("color", "red");
// [속성 != 값]: 속성의 값이 지정된 값과 일치하지 않는 태그를 선택
});
</script>
</head>
<body>
<p>속성이 없는 p태그</p>
<p title="aaa1">title이 aaa1인 p 태그</p>
<p title="aaa2">title이 aaa2인 p 태그</p>
</body>
</html>
Insert title here
속성이 없는 p태그
title이 aaa1인 p 태그
title이 aaa2인 p 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("p[title $= 'aaa3']").css("background-color", "blue");
// [속성 $= 값] : 속성의 값이 지정된 값으로 끝나는 태그를 선택
$("p[title |= 'aaa3']").css("color", "green");
// [속성 |= 값] : 속성의 값이 지정된 속성의 값과 일치하거나 지정된 속성으로 시작하고 하이픈으로 연결된 태그를 선택
$("p[title ^= 'aaa3']").css("font-size", "30px");
// [속성 ^= 값] : 속성의 값이 지정된 값으로 시작하는 태그를 선택
$("p[title ~= 'aa']").css("color", "purple");
//
$("p[title *= 'aa']").css("background-color", "yellow");
//
});
</script>
</head>
<body>
<p title="aaa3">title이 aaa3인 p태그</p>
<p title="aaa3-test">title이 aaa3-test인 p 태그</p>
<p title="aaa3test">title이 aaa3test인 p 태그</p>
<p title="aaa4">title이 aaa4인 p태그</p>
<p title="aaa5-test">title이 aaa5-test인 p 태그</p>
<p title="aa a6">title이 aa a6인 p 태그</p>
<p title="aa">title이 aa인 p 태그</p>
</body>
</html>
Insert title here
title이 aaa3인 p태그
title이 aaa3-test인 p 태그
title이 aaa3test인 p 태그
title이 aaa4인 p태그
title이 aaa5-test인 p 태그
title이 aa a6인 p 태그
title이 aa인 p 태그
``` Insert title heretitle이 aaa4인 p태그
title이 aaa5-test인 p 태그
title이 aa a6인 p 태그
title이 aa인 p 태그
``` Insert title heretitle이 aaa4인 p태그
title이 aaa5-test인 p 태그
title이 aa a6인 p 태그
title이 aa인 p 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#a1 + p").css("background-color", "blue");
// 선택자1 + 선택자2 => 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택
// 바로 다음에 오는 선택자를 올바르게 선택해야 적용이 된다
$("#a1 ~ div").css("background-color", "yellow");
// 선택자1 ~ 선택자2 => 선택자1 태그 바로 다음에 오는 선택자2태그 전부를 선택
// 바로 다음에 오는 선택자2에 해당 하는 모두를 위치에 상관없이 적용해준다
});
</script>
</head>
<body>
<p>p 태그</p>
<p>p 태그</p>
<p>p 태그</p>
<p id="a1">p 태그</p>
<p>p 태그</p>
<div>div 태그</div>
<p>p 태그</p>
<p>p 태그</p>
<div>div 태그</div>
<p>p 태그</p>
</body>
</html>
Insert title here
p 태그
p 태그
p 태그
p 태그
p 태그
p 태그
p 태그
p 태그
## Onload ``` Insert title here ``` Insert title here늘 Visual Studio Code만 사용하다 Eclipse를 사용하니 새롭다. 한눈에 창을 여러개 상태를 확인할수 있어 좋다.