반응형
2교시
1. CDN (외부에 직접 접근)
방법 : head 에 작성
장점 : 파일을 다운받지 않아서 쉽고 편하게 접근
단점 : 내부 파일에 비해 로딩 속도가 느림
인터넷 연결이 안되면 접근 안됨
폐쇄망을 사용할 경우 접근 안됨
<!DOCTYPE html>
<html lang="en">
<head>
<script
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
2. 내부 파일 접근
방법 : head 소스에 경로 직접 주기
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/jquery-3.6.4.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>제이쿼리 시작</div>
<div>안녕하세요. <span class="sp">반갑습니다</span> 글씨를 클릭해보세요</div>
<p>자바스크립트<span class="sp">ㅎㅎㅎ</span>testtest1.</p>
<p>자바스크립트<span id="sp">ㅎㅎㅎ</span>testtest1.</p>
</body>
</html>
<script>
// $(선택자).함수()
// 1. 연습
$(function() {
$("div").on("click", function(){
$("div").css("color","pink");
})
});
// 2. 연습
$(function() {
$("div").on("click", function(){
$("span").css("fontSize","30px");
})
});
// 3. 연습
$(function() {
$("p").on("click", function(){
$("#sp").css("fontSize","30px");
})
});
// 4. 연습
$(function() {
$("p").on("click", function(){
$(".sp").css("fontSize","30px");
})
});
</script><body>
<ul>
<li>java</li>
<li><h3>database</h3></li>
<li><span>HTML</span></li>
<li>java</li>
<li>database</li>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
<li>jQuery</li>
<li>JSP</li>
</ul>
<button>click</button>
<div id="text"></div>
</body>
</html>
<script>
// 1. 버튼을 눌렀을 때 ul 태그 밑에 li 태그들이 콘솔 창에 출력되도록 하기
$(function(){
let list = $("li");
$("button").on("click",function(){
for (let i=0; i<list.length; i++) {
console.log(list[i]);
}
})
});
// 2. 버튼을 클릭하면 id 가 text인 div 태그 안에 "안녕하세요" 글 넣기
$(function(){
$("button").on("click",function(){
$("#text").text("안녕하세요");
})
});
// 3. id로 연결하여 테스트에 list 의 개수 출력하기
$(function(){
let list = $("li");
$("button").on("click",function(){
$("#text").text("li 태그는 현재 " + list.length
+ "개입니다" );
})
});
// 4. li 태그 안에 span 태그 찾고 텍스트 변경
$(function(){
$("button").on("click",function(){
$("li:has(span)").text("hello jQuery");
});
});
// 5. li 인덱스가 1(두번째 요소)인 요소를 빨강으로 변경
// * eq : 선택한 요소에서 인덱스가 n인 요소
$(function(){
$("button").on("click",function(){
$("li:eq(1)").css("color","red");
});
});
// 6. li의 인덱스 1보다 "큰" 요소를 빨강으로 변경
// * gt : 인덱스 n보다 큰 요소
$(function(){
$("button").on("click",function(){
$("li:gt(1)").css("color","red");
});
});
// 7. li의 인덱스 1보다 "작은" 요소를 빨강으로 변경
// * lt : 인텍스 n보다 작은 요소
$(function(){
$("button").on("click",function(){
$("li:lt(1)").css("color","red");
});
});
// 8. li의 인덱스가 홀수인 요소를 빨강으로 변경
// * odd, even : 인덱스 홀수, 짝수 인 요소
$(function(){
$("button").on("click",function(){
$("li:odd").css("color","red");
});
});
// 9. li의 인덱스가 첫번째인 요소 빨강으로 변경
// * fist 첫번째, last 마지막
$(function(){
$("button").on("click",function(){
$("li:first").css("color","red");
});
});
</script>반응형
'Java Script > JQuery' 카테고리의 다른 글
| [JQuery] each, toggleClass #0418수업 #4교시 (0) | 2023.04.18 |
|---|---|
| [JQuery] 부모자식 요소 #0418수업 #4교시 (0) | 2023.04.18 |
| [JQuery] 복사, 대체 #0418수업 #3교시 (0) | 2023.04.18 |
| [JQuery] 기본문법 #0414수업 #4교시 (0) | 2023.04.14 |
| [JQuery] 기본문법 #0414 수업 #3교시 (0) | 2023.04.14 |