Programming/JQuery

[JQuery/실습] 선택자 - 선택자 별로 CSS태그 다르게 적용하기

reeme 2020. 10. 25. 23:47

html code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- jquery라이브러리 다운로드 //두가지 순서가 바뀌면 안됨 -->
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/jqueryBasic.js"></script>

</head>
<body>

	<h1>태그 선택자 실습</h1>
	<p id="idselector">아이디 선택자 실습</p>
	<p class="classselector">클래스 선택자 실습</p>


</body>
</html>

 

js code

/**
 * 
 */

$(document).ready(function(){


	//전체 선택자 : $("*")
	$("*").css("margin",0)
    
	//태그 선택자 : h1태그의 테두리 적용
	$("h1").css("border","2px solid red")
    
	//아이디 선택자 
	//자바스크립트 : document.getElementById("idselector")
	$("#idselector").css({"background-color":"gray","color":"red"})
	
	//클래스 선택자
	$(".classselector").css("background-color","yellow").css("color","red");


});

 

결과 확인

(Eclipse / html 창에서 마우스 오른쪽 버튼 클릭 - Open With - Web Browser)