JQuery
사용 조건
아래 jquery 링크해야함
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>기본 정의
css함수 : style변경
attr(속성) : 해당 요소의 속성 값 반환 //==getAttribute
attr(속성, 값) : 속성 값을 해당 값으로 변경 //==setAttribute
$("selector"): $안에 접근을 위한 요소 값을 selector라고 한다
JQuery - head
-방법1
$ : jquery 시작
$(document).ready(function(){
}); // head 첫 로딩시 호출..자바스크립트 window.onload 와 같다
-방법2
//window.onload=function() == function()
$(function(){
}JQuery - css
-방법1
//모든 b태그의 글꼴을 28pt로 변경
$("b").css("font-size","28pt");
//b태그의 클래스가 happy인 태그의 배경색을 바꾸시오
$("b.happy").css("background-color","cadetblue");
//모든 h2태그의 border을 변경,글자색도 변경
//방법1 - 연달아서 작성
//$("h2").css("border","3px inset orange").css("color","red");-방법2
$("h2").css({
"border":"10px double pink",
"color":"magenta"
});JQuery - attr
//모든 이미지 속성 src를 변경
$("img").attr("src","../flower_ani/f1.png");
//이미지 _ width100
$("img").css("width","100px");
위의 코드 한 줄로
$("img").attr("src","../flower_ani/f1.png").css("width","100px");JQuery - css, attr
//스타일 여러개로
$("img").attr("src","../flower_ani/f3.png").css({
"width":"150px",
"border":"2px dotted green"
});예제
//span태그 중에서 class가 nice인 태그의 배경색,글자색,글자크기 변경
$("span.nice").css({
"background-color":"orange",
"color":"black",
"font-size":"2em"
});
//Q1. img태그중에서 클래스명이 yourimg의 이미지를 변경하고
//width,border-radius,border, box-shadow를 변경
$("img.yourimg").attr("src","../Food/1.jpg").css({
"width":"200px",
"border-radius":"15px",
"border":"3px solid grey",
"box-shadow":"15px 15px 15px gray"
});
//Q2.아이디가 myimg의 이미지와 너비 변경하고 title을 '오늘은 불금!!!'으로 변경하라
$("#myimg").attr("src","../연예인사진/10.jpg").attr("title","오늘은 불금!!!").css({
"width":"150px",
});본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jquery 사용하려면 jquery link 필수 -->
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Document</title>
<script>
// $ jquery 시작
//$(document).ready(function(){
//}); // head 첫 로딩시 호출..자바스크립트 window.onload 와 같다
//window.onload=function() == function()
$(function(){
//css함수 : style변경
//attr(속성) : 해당 요소의 속성 값 반환 //==getAttribute
//attr(속성, 값) : 속성 값을 해당 값으로 변경 //==setAttribute
//$("selector"): $안에 접근을 위한 요소 값을 selector라고 한다
//alert("load");
//모든 b태그의 글꼴을 28pt로 변경
$("b").css("font-size","28pt");
//b태그의 클래스가 happy인 태그의 배경색을 바꾸시오
$("b.happy").css("background-color","cadetblue");
//모든 h2태그의 border을 변경,글자색도 변경
//방법1 - 연달아서 작성
//$("h2").css("border","3px inset orange").css("color","red");
//방법2
$("h2").css({
"border":"10px double pink",
"color":"magenta"
});
//모든 이미지 속성 src를 변경
//$("img").attr("src","../flower_ani/f1.png");
//이미지 _ width100
//$("img").css("width","100px");
//위의 코드 한 줄로
//$("img").attr("src","../flower_ani/f1.png").css("width","100px");
//스타일 여러개로
$("img").attr("src","../flower_ani/f3.png").css({
"width":"150px",
"border":"2px dotted green"
});
//span태그 중에서 class가 nice인 태그의 배경색,글자색,글자크기 변경
$("span.nice").css({
"background-color":"orange",
"color":"black",
"font-size":"2em"
});
//Q1. img태그중에서 클래스명이 yourimg의 이미지를 변경하고
//width,border-radius,border, box-shadow를 변경
$("img.yourimg").attr("src","../Food/1.jpg").css({
"width":"200px",
"border-radius":"15px",
"border":"3px solid grey",
"box-shadow":"15px 15px 15px gray"
});
//Q2.아이디가 myimg의 이미지와 너비 변경하고 title을 '오늘은 불금!!!'으로 변경하라
$("#myimg").attr("src","../연예인사진/10.jpg").attr("title","오늘은 불금!!!").css({
"width":"150px",
});
});
</script>
</head>
<body>
<h2>jquery에서 가장 많이 사용하는 함수 css,attr</h2>
<b class="happy">B tag Class Happy</b>
<br>
<span class="nice">Span Tag Class nice</span>
<br>
<h2 class="happy">H2 Tag Class Happy</h2>
<b>내가 좋아하는 이미지들</b>
<img src="">
<img src="" class="yourimg">
<img src="" id="myimg">
<img src="">
</body>
</html>JQuery2
eq(0): 0번 인덱스, 즉 첫번째 //버튼의 클래스 등이 없으면 0번째 1번째... 사용
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Document</title>
</head>
<body>
<div class="a">
<div>Happy</div>
<div>Friday</div>
</div>
<div class="b">
<div>Java</div>
<div>Oracle</div>
<h3>b클래스 아래의 h3태그입니다</h3>
<img src="">
</div>
<div class="c">
<b>오늘은 즐거운 금요일</b>
<div>오늘은 JQuery 공부하는 날</div>
<h3>c클래스 아래의 h3태그입니다</h3>
<div><img src=""></div>
</div>
<script>
//eq(0): 0번 인덱스, 즉 첫번째 //버튼의 클래스 등이 없으면 0번째 1번째... 사용
//1.div의 클래스명이 a인 태그 아래 모든 div안에 있는 글자색 변경
//형제태그라 >해도 하위 div 모두 변경
$("div.a>div").css({
"color":"red",
"font-family":"Impact",
"font-size":"25px"
});
//2.b클래스 바로 아래(부모의 아래 형제들을 뜻함) div의 width를 300px로 변경
$("div.b>div").css({
"width":"300px",
"border":"2px solid grey"
});
//3.b클래스 아래의 img태그의 src변경하고 width-200px로 변경
$("div.b img").css("width","200px").attr("src","../연예인사진/15.jpg");
//4.c클래스인 div아래의 b태그의 글자색,배경색,글자크기 변경
$("div.c b").css({
"color":"cadetblue",
"background-color":"cyan",
"font-size":"20px"
});
//5.c클래스인 div 아래의 img 태그에 신민아 사진을 넣은 후 동그랗게 나오게 출력
//알아서 css
$("div.c img").attr("src","../연예인사진/17.jpg").css({
"border":"2px solid grey",
"border-radius":"15px",
"box-shadow":"5px 5px 5px grey"
})
//6.모든 h3태그의 배경을 회색,글자색을 그린색,너비를 300px,보더를 굵게 지정
$("h3").css({
"background-color":"grey",
"color":"green",
"width":"300px",
"border":"10px solid black"
})
</script>
</body>
</html>
백엔드 개발자로서 성장해 나가는 성현이의 블로그~