jQuery
- HTML5 웹 문서 안의 스크립트 언어를 단순화하도록 설계된 자바스크립트 라이브러리
- 크로스 브라우징 지원
라이브러리 참조 방법
jquery.com에서 다운로드 받는다. jquery.com
CDN방식으로 참조한다. - 네트워크가 필요
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
jQuery함수를 $로 대신해서 쓸 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First jQuery</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
//id가 a인 div 요소를 찾아서 해당 엘리먼트 안에 <h1>hello<h1>
//1) 자바스크립트 방식
window.onload=function(){
var obj = document.getElementById('a');
obj.innerHTML='<h1>hello<h1>';
obj.style.color='green';
}
// alert(jQuery('title').text());
//2) jQuery방식
//id가 b인 div 요소를 찾아서 <h1>Hi jQuery</h1? 넣기
// jQuery(document).ready(function(){
// jQuery('#b').html("<h1>Hi jQuery</h1>");
// jQuery('#b').css('color','orange');
// });
$(document).ready(function(){
$('#b').html("<h1>Hi jQuery</h1>")
.css('color','orange');
});
//jQuery방식 2
$(function(){
// alert('aaaa');
$('#c').html("Good jQuery").css("color","aqua").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>jQuery라이브러리 참조 방법</h1>
<h2></h2>
<hr color='red'>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>jQuery Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function() {
//1.기본 선택자 모든 요소를 blue로 준다.
// $('*').css('color','blue');
$('h1').css('color','maroon');
$('h2,h3').css('background-color','#eeaaff');
//3. 아이디 선택자 $('#아이디')
$('#item').css('border','thick dashed green');
//4. 클래스 선택자 $('.클래스명')
$('.target1').css('color','lime').css('font-size','22pt');
$('.target2').css({
'color':'pink',
'font-size':'3em',
'padding':'10px',
'border':'2px double purple'
})
})
</script>
</head>
<body>
<h1>기본선택자, 아이디, 클래스, 태그 선택자</h1>
<h1>hi jQuery1</h1>
<h2>hi jQuery2</h2>
<h3>hi jQuery3</h3>
<p id="item">Id Selector : #item</p>
<p class="target1">Class Selector: .target1</p>
<p class="target2">Class Selector: .target2</p>
<p class="target3">Class Selector: .target3</p>
</body>
</html>속성 선택자
1) 요소 [속성='값'] : 특정 속성 값이 특정 값과 같은 요소를 선택
2) 요소 [속성^='값'] : 속성 값이 특정 값으로 시작하는 요소를 선택
3) 요소 [속성$='값'] : 속성 값이 특정 값으로 끝나는 요소를 선택
4) 요소 [속성*='값'] : 속성 값이 특정 값을 포함하는 요소를 선택
5) 요소 [속성~='값'] : 속성 값이 특정 값을 단어로 포함하는 요소를 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
//li요소 아래 a태그 중 href 속성값이 '#page2'인 요소를 선택해서
//글자색을 maroon으로 주고
$("li a[href='#page2']").css({
'color':'maroon',
'font-size':'22pt',
'text-decoration':'none'
})
//문제1 li a 요소 중 href 속성값이 http로 시작하는 요소를 찾아서
//밑줄 없애고 글자색
$("li a[href^='http']").css({
'text-decoration':'none',
'color':'skyblue'
})
//문제2 href속성값이 com으로 끝나는 a요소를 찾아서
//테두리를 2px solid gold
$("li a[href$='com']").css({
'border':'2px solid gold'
})
//문제3 a요소 중 title값에 naver라는 단어를 포함하는 요소를찾아
//배경색을 핑크로 주기
$("li a[title*='naver']").css({
'background-color':'pink'
})
//문제4 img요소 중 src,alt속성을 갖는 요소를 찾아서
//테두리를 dashed thick red로 주기
$("img[src][alt]").css({
'border':'dashed thick red'
})
//문제5 input name 속성값에 h라는 글자를 포함한 요소를 찾아서
//테두리를 dotted 3px blue로 주기
$("input[name*='h']").css({
'border':'dotted 3px blue'
})
})
</script>
</head>
<body>
<h1>jQuery 속성 선택자</h1>
<ul>
<li><a href="http://www.google.com" id="google" title="구글">구글</a></li>
<li><a href="http://www.daum.net" class="daum" title="다음">다음</a></li>
<li><a href="http://www.naver.com" title="naver good job">네이버</a></li>
<li><a href="#page2">2페이지로 이동</a></li>
</ul>
<div id="photo">
<img src="images/가위.PNG" alt="이미지1">
<img src="images/바위.PNG" >
</div>
<span id="msg" style='color: cadetblue'></span>
<form action="">
연락처:
<input type="text" name="hp1">-
<input type="text" name="hp2">-
<input type="text" name="hp3">
</form>
</body>
</html>계층 선택자
[1] 선택자 > 자식선택자: 특정 요소 바로 밑에 있는 자식 요소를 선택
[2] 선택자 자손선택자: 특정 요소 안에 포함된 모든 자손 요소를 선택
[3] 선택자 + 형제선택자: 특정 요소의 다음(바로옆) 형제 요소 1개 선택
[4] 선택자 ~ 형제선택자: 특정 요소의 다음에 오는 모든 형제요소를 선택
<html>
<head><title>계층 선택자</title>
<style>
body *{
border: thin solid gray;
margin: 5px;
padding: 8px;
font-size: 18px;
font-weight:bold;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
/* 계층 선택자
[1] 선택자 > 자식선택자: 특정 요소 바로 밑에 있는 자식 요소를 선택
[2] 선택자 자손선택자: 특정 요소 안에 포함된 모든 자손 요소를 선택
[3] 선택자 + 형제선택자: 특정 요소의 다음(바로옆) 형제 요소 1개 선택
[4] 선택자 ~ 형제선택자: 특정 요소의 다음에 오는 모든 형제요소를 선택
*/
//[문제1] 아이디가 div0인 요소의 자식 p요소를 선택해서
//배경색을 노랑색으로 주세요
$("#div0 > p").css("background-color","yellow");
/*[문제2] div0의 자손p요소를 선택해서 글자색을 blue로 주세요*/
$("#div0 p").css("color","blue");
/*[문제3] 아이디가 p1인 요소 바로 뒤에 오는 p요소를 선택해서
배경색을 maroon으로, 글자색은 흰색으로 주세요*/
$("#p1+p").css({"background-color":"maroon","color":"white"});
/*[문제4] 아이디가 span1인 요소의 모든 형제 요소를 선택해서
배경색을 navy, 글자색은 흰색으로 주세요
*/
$("#span1~span").css({"background-color":"navy","color":"white"});
/* [문제5] 아이디가 div2의 자식 요소 중 클래스가 class1인
요소를 찾아서 테두리를 thick solid skyblue로 주세요*/
$("#div2>.class1").css({"border":"thick solid skyblue"});
/*[문제6] div0의 자식 중 첫째 자식을 찾아서
테두리를 thick dotted pink로 주세요*/
$("#div0>:first").css({"border":"thick dotted pink"});
/*[문제7] div0의 자식 중 막내 자식을 찾아서
배경색을 orange로 주세요.*/
$("#div0>:last").css({"background-color":"orange"});
});//ready
</script>
</head>
<body>
<h1>jQuery 계층 선택자</h1>
<div id='div0'>div0
<div id="div1">div1
<span id="span1">span1</span>
<span id="span2">span2</span>
<span id="span3">span3</span>
<span>span4</span>
</div>
<div id="div2">div2
<p id='p1'>p1</p>
<p id='p2' class='class1 class2'>p2 class1 class2</p>
<p id='p3' class='class1'>p3 class1</p>
<p id='p4'>p4</p>
</div>
<div id='div3' class='class2'>div3 class2</div>
<p>p</p>
<p></p>
</div>
</body>
</html>
필터선택자
[1]요소:eq(n): 인덱스가 n인 요소를 선택
[2]요소:gt(n): 인덱스가 n보다 큰 요소를 선택 (greater than)
[3]요소:lt(n): 인덱스가 n보다 작은 요소를 선택 (less than)
[4]요소:first : 첫번째 요소 선택
[5]요소:last : 마지막 요소 선택
[6]요소:even : 짝수번째 선택
[7]요소:odd : 홀수번째 선택
[8]요소:not(필터): 해당 필터가 적용되지 않는 요소를 선택
[9]요소:first-child: 각각의 소속된 요소 중 첫번째 요소를 선택
[10]요소:last-child: 각각의 소속된 요소 중 마지막 요소를 선택
<html>
<head><title>필터선택자</title>
<!--jQuery Google CDN-------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-------------------------------------------->
<script>
$(function(){
/*[문제1] li 요소를 선택해서 글자색을 모두 blue로 주세요*/
$("li").css("color","blue");
/*[문제2] li태그 중 인덱스 번호가 3인 요소를 찾아 배경색을 하늘색 주세요*/
$("li:eq(3)").css("background-color","skyblue");
/*[문제3] 클래스가 navi2의 li 중 인덱스가 3인 요소를
찾아 글자색 red, 크기 16pt로 주세요
*/
$(".navi2>li:eq(3)").css({"color":"red","font-size":"16pt"});
/*[문제4]li요소 중 인덱스 5보다 큰 요소만 선택해서
서체 'sans-serif', 크기 : 20pt, 글자색 'green'*/
$("li:gt(5)").css({"font-family":"sans-serif","font-size":"20pt","color":"green"});
/*[문제5] li요소 중 인덱스 4보다 작은 요소 선택해서
테두리 2px dashed purple주세요
*/
$("li:lt(4)").css({"border":"2px dashed purple"});
/*[문제6] tr요소 중 첫번째 요소만 찾아서
높이 30px 서체스타일 bold 배경색 ,
테두리아래 double 5px silver*/
$("tr:first").css({"height":"30px","background-color":"yellow"});
/*[문제7] tr요소 중 홀수번째 요소를 찾아서
배경색을 #efefef로 주세요*/
$("tr:odd").css({"background-color":"#efefef"});
/*[문제8] li요소 중 첫번째 요소가 아닌 li는 모두 안보이게 처리하세요*/
$("li:not(:first)").css("visibility","hidden");
});//$()end------------
</script>
</head>
<body>
<h1>jQuery 필터선택자</h1>
<h2>필터 선택자 앞에는 콜론(:)을 붙인다.</h2>
<div id="panel">
<ul class="navi1">
<li>index0</li>
<li>index1</li>
<li>index2</li>
<li>index3</li>
</ul>
<ul class="navi2">
<li>index0</li>
<li>index1</li>
<li>index2</li>
<li>index3</li>
<li>index4</li>
</ul>
<table style="width:500px" border="1">
<tr>
<td>번호1</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
<tr>
<td>번호2</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
<tr>
<td>번호3</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
<tr>
<td>번호4</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
<tr>
<td>번호5</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
<tr>
<td>번호6</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
<tr>
<td>번호7</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
<tr>
<td>번호8</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
</table>
</div>
</body>
</html>
<!--ex07selector.html-->jQuery이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.5.1.min.js"></script>
<style>
body{
padding:3em;
}
div{
width:250px;
height:250px;
background-color: royalblue;
border-radius: 20%;
margin : 20px;
}
</style>
<script >
$(function(){
//이벤트
//1 선택요소.on('이벤트종류',핸들러함수)
$("#btn1").on('click',function(){
$("div").show(5000,function(){alert("두두등장")});
});
//2 선택요소.click(핸들러함수)
// $("#btn2").click(function(){alert("hi")});
$("#btn2").on('click',function(){
$("div").hide(5000);
});
$(".bclass2").click(function(){
$("div").show(5000);
$("div").css("visibility","visible");
$("div").css("background-color","pink");
});
$(".bclass1").click(function(){
$(".bclass1").css("background-color","royalblue");
});
$("button[type*='button']").on('mouseover',function(){
$(this).css("background-color","yellow");
});
$("button[type*='button']").on('mouseout',function(){
$(this).css("background-color","white");
});
})
</script>
</head>
<body>
<button id="btn1">div영역 표시하기</button>
<button id="btn2">div영역 감추기</button>
<div></div>
<button>나 버튼</button>
<button class="bclass1">클릭하면 버튼 배경색 바꾸기</button>
<button class="bclass2">등장한 뒤에 div배경색 바꾸기</button>
<button type="button">마우스를 올리기</button>
</body>
</html>
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 61일차 - JSP 이동방식(redirect, forward), Beans, jQuery 필터링, attr (jQuery의 setter, getter), effect (0) | 2020.07.09 |
|---|---|
| 국비지원 60일차 - JSP 회원가입, 요청정보, jQuery 내용필터, 보안필터, 선택필터 (0) | 2020.07.08 |
| 국비지원 58일차 - JSP, Error처리, include, include action, 홈페이지 연습 (0) | 2020.07.06 |
| 국비지원 57일차 - Bootstrap 이미지 슬라이드, form, list group, modal (0) | 2020.07.05 |
| 국비지원 56일차 - 팀프로젝트 (0) | 2020.07.02 |