728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220422/jquery1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>jquery1 예제</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> //Jquery
</script>
<script type="text/javascript">
/*
$(document).ready(function(){$("*").css("color","pink")}) : 현재 페이지의 로드가 완료되면, 실행준비 완료시 function 호출. 적용 가능.
$("*").css("color","pink") : 모든 태그. 적용 가능.
$("body").css("color","pink"): body태그. 적용 불가능. body태그 생성전.
*/
$(function(){ //$(document).ready(function(){ 축약사용함
$("body").css("color","pink")
//p태그의 글자색을 파랑색으로 변경
$("p").css("color","blue")
//h1태그의 글자색을 빨강색으로 변경
$("h1").css("color","red")
//class 속성이 item인 태그의 글자색을 초록색으로 변경
$(".item").css("color","green")
//id 속성이 selected인 태그의 글자색을 오렌지색으로 변경
$("#selected").css("color","orange")
})
</script>
</head>
<body>
<h1>Jquery1<p>Jquery1</p></h1>
<h1>Jquery1</h1>
<p>Jquery1</p>
<h1 class="item">Jquery1 class=item</h1>
<h1 id="selected">Jquery1 id=selected</h1>
<script type="text/javascript">
// $("body").css("color","pink") //body태그. 적용 가능. body태그 생성후.
</script>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 21. Jquery each 함수(let arr=, $.each) (0) | 2022.04.22 |
|---|---|
| [Jquery] 21. Jquery 반복문 (nth-child, odd, even, $.each(), let colors = []) (0) | 2022.04.22 |
| [Jquery] 21. Jquery table 태그 다루기(nth-child, tr:first, tr:last, tr:eq) (0) | 2022.04.22 |
| [Jquery] 21. Jquery 선택자 사용 (0) | 2022.04.22 |
| [Jquery] 21. Jquery alert창 띄우기(setTimeout) (0) | 2022.04.22 |