728x90
jQuery
웹 문서에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈 소스 기반의 자바스크립트 라이브러리
DOM 조작을 간편하게 사용하기 위해 만들어짐
속성을 대부분 메소드화 시켜 사용하고 간단한 메소드 형태로 지정이 가능함
문서객체선택이 간단함
사용방법
1) jQuery 플로그인 연결(다운로드 후 lib 추가)
-> https://jquery.com/download/ 접속 후 Download the compressed, production jQuery 3.7.1 우클릭 다른 이름으로 저장
-> 외부링크로 사용
(...생략...)
<head>
(...생략...)
<!-- jQyery 라이브러리 연결 -->
<script src="js/jquery-3.7.1.min.js"></script>
</head>
불러오기 준비 구문
(...생략...)
<body>
(...생략...))
<script>
//준비 구문
//1.스크립트 요소를 이용하여 라이브러리 불러들이기 -> jQuery();
//2.html 문서가 준비되고 DOM 객체에서 필요한 요소로 이동하여 작업 시작 -> jQuery(document.ready());
//3. 실행문을 실행(실행문은 그룹을 만들어 사용하기 때문에 함수 형식을 이용)
jQuery(document.ready(function(){
//실행문
}));
</script>
</body>
(...생략...)
라이브러리를 연결 후 불러들이는 또 다른 방법
jQuery -> $ 변경, document.ready 생략
<script>
$(function(){
실행문;
});
</script>
2) HTML에서 jQuery를 추가하는 방법(CDN)
-> https://jquery.com/download/#other-cdns 스니펫 복사한 후 HTML에 붙혀넣기
(...생략...)
<head>
(...생략...)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 기본 작성</title>
<!-- jQuery 라이브러리 연결 -->
<script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
<!-- jquery를 이용하여 handing -->
<h1>jQuery1</h1>
<h2>jQuery2</h2>
<h3>jQuery3</h3>
<h4>jQuery4</h4>
<h5>jQuery5</h5>
<script>
//준비 구문
//1.스크립트 요소를 이용하여 라이브러리 불러들이기 -> jQuery();
//2.html 문서가 준비되고 DOM 객체에서 필요한 요소로 이동하여 작업 시작 -> jQuery(document.ready());
//3.실행문을 실행(실행문은 그룹을 만들어 사용하기 때문에 함수 형식을 이용)
$(function(){
//자바스크립트 형식
document.querySelector("h1").style.color="blue"; //바닐라 자바스크립트 구문
const h2 = document.querySelector("h2");
h2.style.color="red";
//jQuery 형식
//${"선택자"}.메소드(매개변수1); 또는
//${"선택자"}.매소드({"속성":"값","속성":"값",...})
//jQuery에서 css속성을 변경
//선택자에서 필요한 명령문 1개만 작성
$("h3").css('color','green');
jQuery("h4").css('color', 'purple');
//선택자에서 필요한 명령문이 여러 개인 경우 작성
$("h5").css( {
"color":"white",
"fontSize" : "2em",
"backgroundColor" : "black",
"border" : "2px soild #ccc",
"width" : 200
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 이벤트와 이벤트 핸들러</title>
</head>
<!-- CDN방식 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body>
<button id="btn_1">화면 변경1</button>
<button id="btn_2">화면 변경2</button>
<button id="btn_3">화면 변경3</button>
<p>
<div id="d">색상변경</div>
</p>
<script type="text/javascript">
//이벤트 : 웹 문서에서 일어나는 사건
//이벤트 명령어 방식
//$("선택자").이벤트명 ex)$("선택자").click(function(){실행문;});
//이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 함수
//이벤트 등록 메소드 방식
//$("선택자").on("이벤트명",실행할함수) ex)$("선택자").on("click", function(){실행문;});
$(function(){
//이벤트 명령어 방식 : 하나의 선택자에 이벤트 하나를 등록하여 실행하는 방법
$("#btn_1").click(function(){
alert("이미지가 변경됨 btn_1");
});
//이벤트 등록 메소드 방식 : on("이벤트명", 실행할 함수)
//하나의 선택자에 이벤트 여러 개를 등록하여 실행하는 방법
$("#btn_2").on("click",function(){
alert("이미지가 변경됨 btn_2");
});
//이벤트 발생을 한 번만 실행 : one("이벤트명",실행할 함수)
$("#btn_3").one("click",function(){
alert("이미지가 변경됨 btn_3");
});
//이벤트 제거 : off("이벤트명") -> 클릭 이벤트를 막아주는 역할
$("#btn_1").off("click");
//하나의 선택자에 이벤트 여러 개 등록하여 실행하는 방법
$("#d").on({
"mouseover" : function(){
$("#d").css({
"backgroundColor" : "#ccc",
"color" : "red",
"width" : 200,
"height" : 200
})
},
"mouseout" : function(){
$("#d").css("color", "#000");
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 기본 콘텐츠 변경</title>
<!-- CDN방식 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<button id="btn_1">text 수정</button>
<button id="btn_2">text 가져오기</button>
<p id="first">text1</p>
<p id="second">시작시간</p>
<ul>
<li>13시 A 클래스에서 시작</li>
<li>20시 B 클래스에서 시작</li>
</ul>
<script type="text/javascript">
//$("선택자").text() : 선택자의 하위 text 노드의 값을 읽어오기
//$("선택자").text("내용") : 선택자의 하위 text 노드의 값 변경
//$("선택자").html(): 선택자의 하위 text 노드의 값을 읽어오기(태그 방식)
//$("선택자").html("<>내용</>"): 선택자의 하위 text 노드의 값 변경(태그 방식)
$(function() {
//텍스트 수정
$("#btn_1").click(function() {
$("#first").text("수업시작");
});
$("#btn_2").click(function(){
let some = $('ul>li:eq(0)').text()//가져오기
//let some = $('ul>li:eq(1)').text()//가져오기
$("#second").text(some); //텍스트 수정
});
});
//jQuery 기본 서식
//기본 필터 선택자 : 선택한 요소 집합에서 저장한 인덱스 위치에 있는 요소
// :eq(n), :gt(n), :lt(n), :even, :odd, :first, :last, :animated, :header, :focus
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 날짜 생성</title>
<!-- jQuery 라이브러리 연결 -->
<script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
let now = new Date();
document.write(now+"<br>");
document.write(now.getFullYear()+"<br>");
document.write((now.getMonth()+1)+"월<br>");
document.write((now.getDate())+"일<br>");
document.write(now.getDay()+"요일<br>");
document.write(now.getHours()+"시<br>");
document.write(now.getMinutes()+"분<br>");
document.write(now.getSeconds()+"초<br>");
</script>
<br>
<p><span id="span_1"></span></p>
<p><span id="span_2"></span></p>
<p><span id="span_3"></span></p>
<p><span id="span_4"></span></p>
<p><span id="span_5"></span></p>
<button id="btn_1">오늘날짜</button>
<button id="btn_2">년도</button>
<button id="btn_3">월</button>
<button id="btn_4">일</button>
<button id="btn_5">시분초</button>
<hr>
<script type="text/javascript">
$(function (){
$("#btn_1").click(function(){
$("#span_1").text(now);
})
$("#btn_2").click(function(){
$("#span_2").text(now.getFullYear()+" 년");
})
$("#btn_3").click(function(){
$("#span_3").text((now.getMonth()+1)+" 월");
})
$("#btn_4").click(function(){
$("#span_4").text(now.getDate()+" 일");
})
$("#btn_5").click(function(){
$("#span_5").text(now.getHours()+" 시 " +now.getMinutes()+" 분 "+now.getSeconds()+" 초 ");
})
});
</script>
<hr>
<hr>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script type="text/javascript">
// $(document).redy(function(){
// let now = new Date();
// $("#btn_1").click(function(){
// $("span").eq(0).text(now + "<br>");
// })
// $("#btn_2").click(function(){
// let year = now.getFullYear();
// $("span").eq(1).html(year + "년<br>");
// })
// $("#btn_3").click(function(){
// let month = now.getMonth();
// $("span").eq(2).html(month + "월<br>");
// })
// $("#btn_4").click(function(){
// let day = now.getDay();
// $("span").eq(3).html(day + "일<br>");
// })
// $("#btn_5").click(function(){
// let time = now.getHours() +now.getMinutes()+now.getSeconds()
// $("span").eq(4).html(time);
// })
// })
</script>
<script type="text/javascript">
</script>
</body>
</html>
728x90
'KDT > JavaScript' 카테고리의 다른 글
| 240208 자바스크립트 (0) | 2024.02.08 |
|---|---|
| 240207 자바스크립트 (0) | 2024.02.07 |
| 240205 자바스크립트 (0) | 2024.02.05 |
| 240201 자바스크립트 (0) | 2024.02.01 |
| 240131 자바스크립트 (0) | 2024.01.31 |