<수업내용>
@JQuery
-> 존 레식에 의해 만들어진 JavaScript 프레임워크
-> 기본의 JavaScript를 사용하는 방법보다 훨씬 단순하고 간결한 코드 형태를 제공
#JQuery 가장 큰 특징
1. DOM과 관련된 처리를 쉽게 구현 가능
2. 일관된 이벤트 연결을 쉽게 구현
3. 시각적 효과를 쉽게 구현 가능
4. Ajax 애플리케이션을 쉽게 개발 가능
@jQuery 사용법
1.CDN방식 : 온라인으로 js파일을 불러와서 실행
2. 파일 다운로드 후 연결
https://code.jquery.com
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
innerHTML -> html() -> html('aaaa');
value -> val() -> val('aaa');
@선택자
@@기본선택자
$('선택자')
1. 전체 선택자 -> *$("*")
2. Element Selector
-> 지정된 tag와 일치하는 모든 element 선택
-> $("태그 이름") -> $("p"),$("h1")
3. Id Selector
-> 지정된 id와 일치하는 element 선택
-> $("#id")
4. Class Selector
-> 지정된 class와 일치하는 모든 element선택
-> $(". class")
5. Multiple Selector
-> $("선택자 1, 선택자 2")
-> 여러 선택자 동시 선택 시 사용
@자손/후손 선택자
@@자손 선택자 $("부모> 자식")
@@후손 선택자 $("부모 후손")
@속성 선택자
->기본선택자 뒤에 붙여 사용
요소[속성]
요소[속성=값]
요소[속성~=값] : 속성 안에 특정 값을 단어로 포함
요소[속성^=값] : 특정 값으로 시작하는
요소[속성$=값] : 특정 값으로 끝나는
@입력 양식 필터 선택자
-> input 태그는 type 속성에 따라 문서 객체 선택 가능
input:button
input:checkbox
input:file
input:image
input:password
input:radio
input:checked -> input 태그 중 체크된 객체 선택
input:disabled -> input 태그 중 비활성화된 객체 선택
input:enabled -> input 태그 중 활성화된 객체 선택
option:selected -> select태그의 option 태그 중 선택된 객체 선택
@위치 관련 선택자
요소:odd ->홀수 번째에 위치한 객체 선택
요소:even ->짝수 번째에 위치한 객체 선택
요소:first ->첫 번째 위치한 객체 선택
요소:last ->마지막에 위치한 객체 선택
@함수 형태의 필터 선택자
요소:eq(n) :n번째 위치하는 객체 선택
요소:gt(n) :n번째 초과하는 객체 선택
요소:lt(n) :n번째 미만에 위치하는 객체 선택
요소:has(h1) :h1태그를 가지고 있는 객체 선택
요소:not(선택자):선택자와 일치하지 않는 객체 선택
요소:nth-child(3n+1):3n+1번째에 위치하는 객체 선택(1,4,7,...)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<!--
<script>
function test(){
var test =
document.getElementsByClassName("test");
for(var i=0; i<test.length; i++){
test[i].style.color="red";
}
}
</script>
-->
<p id="p1" class ="test">test1</p>
<p id="p2" class ="test">test2</p>
<p id="p3" class ="test">test3</p>
<p id="p4">test4</p>
<span id="span1" class="test">test5</span><br>
<span id="span2">test6</span>
<!-- <button onclick="test();">글자색변경</button>-->
<script>
$(document).ready(function(){
// $("*").css('color','red');
$('span').css('background-color','yellow');
$('#p4').css('background-color','skyblue');
$(".test").css('text-decoration','underline');
$("#p2,#p3").css('background-color','pink');
$("li>h1").css("color","blue");
$("div h1").css("background-color","yellow");
});
// window.onload=function(){
//
// }
// $(document).ready(function(){
//
// });
// $(function(){
//
// });
//
// function test(){
// $(".test").css('color','red');
// }
</script>
<br><br>
<div>
<ul>
<li><h1>Test1</h1></li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
<h1>Test5</h1>
</div>
<input type="text" name="id"><br>
<input type="password" name="pw"><br>
<script>
$(function(){
$("input[type=text]").css('background-color','red');
});
function sel(){
var value =
$("select>option:selected").val();
alert(value);
}
</script>
<select>
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
<option>DDDD</option>
</select>
<button type="button" onclick="sel();">클릭</button>
<br><hr><br>
<script>
$(function(){
$("tr:odd").css('color','red');
$("tr:even").css('background-color','gray');
$("tr:first").css('color','black').css('background-color','white');
$("tr:last").css({
'color':'red',
'background-color':'yellow'
});
$("#tbl>tbody>tr:eq(0)").css("background","black").css("color","white");
$("#tbl td:nth-child(3n+1)").css('background','green');
$("#tbl td:nth-child(3n+2)").css('background','blue');
})
</script>
<table>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td></tr>
</table>
<br><br><br><br><br>
<table id="tbl">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>3</td><td>3</td></tr>
</table>
<br><br><hr><br><br>
<h3 class="hh">Header-0</h3>
<h3 class="hh">Header-1</h3>
<h3 class="hh" name="test">Header-2</h3>
<h3 class="hh">Header-3</h3>
<script>
$(function(){
var select = $(".hh");
select.first().css('background','yellow');
select.last().css('background','blue');
select.eq(1).css('color','red');
select.filter("[name=test]").css('color','green');
select.not("[name=test]").css('text-decoration','underline');
});
</script>
</body>
</html>
@JQuery Traversing
-> 순회(탐색)
-> 특정 요소를 찾거나 필터링하는 작업은 대부분 선택자를 사용하면 됨
하지만 1차적으로 선택자에서 찾은 요소들을 2차 필터링하거나
새로운 요소를 추가할 때 Traverse 관련 메서드를 사용하면 됨
@@first()
->선택된 요소중 가장 첫 번째 요소
@@last()
->선택된 요소중 가장 마지막 요소
@@eq(0)
-> 인덱스 번호화 일치하는 요소
@@filter(인자 값)
-> 선택자 1.filter(선택자 2);
-> 선택자 1로 불러온 요소 중에 선택자 2인 요소
@@not(인자 값)
-> 인자 값과 일치하지 않는 요소만
@Ancestors 메서드(조상)
-> 선택된 요소의 상위 요소들을 선택할 수 있는 메서드
@@$(선택자). parent()
-> 선택된 요소의 바로 위 상위 요소만 리턴
@@$(선택자). parent([인자])
-> 매개변수가 없는 경우 선택된 요소의 모든 상위 요소 리턴
-> 매개변수가 있으면 매개변수와 일치하는 조상만 리턴
@@$(선택자). parentsUntil(인자)
->선택된 요소부터 인자 요소(포함 X)까지 범위 요소 리턴
->선택된 요소는 제외
@ Descendants 메서드
->선택된 요소의 하위 요소들을 선택할 수 있는 메서드
@@ $(선택자). children([인자])
-> 선택된 요소의 모든 자손(다음 레벨) 객체를 리턴
-> 선택된 요소의 인자와 일치하는 자손(다음 레벨) 객체
@@ $(선택자). find(인자)
-> 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴
@ siblings 메서드
-> 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메서드
@@ $(선택자). siblings([인자])
-> 선택된 요소와 같은 레벨에 있는 요소 리턴
-> 선택된 요소와 같은 레벨 중 인자와 일치하는 요소 리턴
@@ $(선택자). next(), $(선택자). nextAll(), $(선택자). nextUntil(인자)
next() : 선택된 요소의 같은 레벨들 중 선택된 요소 다음의 한 개
nextAll() : 선택된 요소의 같은 레벨들 중 선택된 요소 다음의 모든 요소
nextUntil(인자) : 선택된 요소부터 같은 레벨들 중 인자까지 범위의 모든 요소
@@$(선택자). prev(),$(선택자), prevAll(),$(선택자). prevUntil(인자)
prev() : 선택된 요소의 같은 레벨들 중 선택된 요소 이전의 한 개 요소 리턴
prevAll() : 선택된 요소의 같은 레벨들 중 선택된 요소 이전의 모든 요소를 리턴
prevUntil(인자) : 선택된 요소의 같은 레벨들 중 선택된 요소로부터 인자 사이의 요소를 리턴
@@$(선택자). is(인자)
-> 선택된 요소의 범위 내에 인자와 동일한 요소가 있는지 찾아서 true/false를 리턴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<style>
.ancestors *,.descendants *,.siblings *{
display : block;
border: 2px solid lightgray;
color : lightgray;
padding: 5px;
margin : 15px;
}
</style>
</body>
<div class="ancestors">
<div style="width: 500px;">div(great-grandparent)
<ul>ul(grandparent)
<li>li(direct parent)
<span>span</span>
</li>
</ul>
</div>
<div style="width: 500px;">div(grandparent)
<p>p(direct parent)
<span>span</span>
</p>
</div>
</div>
<script>
$(function(){
// $("span").parent().css("border","2px solid red");
// $("span").parents().css("border","2px solid red");
// $("span").parents("ul").css("border","2px solid red");
// $("span").parentsUntil("div").css("border","2px solid red");
// $(".descendants").children(".child1").children().css("border","2px solid red");
// $(".descendants").find("span").css("border","2px solid red");
// $(".siblings h2").siblings().css("border","2px solid red");
// $(".siblings h2").siblings("p").css("border","2px solid red");
// $(".siblings h2").next().css("border","2px solid red");
// $(".siblings h2").nextAll().css("border","2px solid red");
// $(".siblings h2").nextUntil("h6").css("border","2px solid red");
$(".siblings h2").prev().css("border","2px solid red");
// $(".siblings h2").prevAll().css("border","2px solid red");
// $(".siblings h2").prevUntil().css("border","2px solid red");
});
</script>
<div class="descendants" style="width: 500px;">div(current element)
<p class="child1">p (child)
<span class="child1">span (grandchild)</span>
</p>
<p class="child2">p (child)
<span>span (grandchild)</span>
</p>
</div><br><br><br>
<div class="siblings">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
</div>
</div>
<br><br><br>
<script>
$(function(){
//each 각각의 요소에 접근
//this 는 각각의 요소를 말함
$(".isTest>h3").each(function(){
if($(this).is(".select")){
$(this).css("color","red");
}
});
});
</script>
<div class="isTest">
<h3 class="select">Test1</h3>
<h3>Test2</h3>
<h3>Test3</h3>
<h3 class="select">Test4</h3>
</div>
</html>
@each 메서드
-> 배열을 관리하는 for in문과 비슷한 메서드로 객체나 배열의 요소를 검사하는 메서드
-> index : 객체, 배열의 순번
-> item : 값을 보관하는 변수, '.'으로 접근
1)$. each(배열 이름, function(index, item){실행 로직});
-> 지정한 배열을 0번부터 자동으로 불러와 순번을 index에 넣고, 값을 item에 넣는 메서드
-> 단, item은 jQuery객체 형태가 아니기 때문에 jQuery메서드를 사용할 수 없음
@@ addClass() 메서드
-> 문서 객체에 class 속성을 추가하는 메서드
@@ removeClass() 메서드
-> 문서 객체에 class 속성을 제거하는 메서드
@@문서 객체의 속성 검사
-> 문서 객체의 속성을 메서드를 통해서 검사할 수 있음
@@ attr() 메서드
@ 문서 객체의 스타일 검사 및 추가
@@ CSS() 메서드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<script>
$(function(){
$("#btn1").click(function(){
var arr = $(".test1>li");
$.each(arr,function(index,item){
alert("인덱스 번호 : " + index + " / 값 : " + item.innerHTML);
});
});
$("#btn2").click(function(){
$(".test1>li").each(function(index,item){
alert("인덱스 번호 : " + index + " / 값 : " + item.innerHTML);
});
});
$(".test1>li").click(function(){
// alert($(this).html());
alert($(this).index()); //인덱스 번호호출
});
});
</script>
<button type="button" id="btn1">목록 가져오기</button>
<button type="button" id="btn2">목록 가져오기</button>
<ul class="test1">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<br><br><hr><br><br>
<script>
$(function(){
$("#btn3").click(function(){
$(".classTest").children().first().addClass("textChange");
});
$("#btn4").click(function(){
$(".classTest").children().first().removeClass("textChange");
});
});
</script>
<style>
.textChange{
font-size: 40px;
color: red;
}
</style>
<button type="button" id="btn3">클래스 추가</button>
<button type="button" id="btn4">클래스 제거</button>
<div class="classTest">
<p>클래스 테스트 1</p>
<p>클레스 테스트 2</p>
</div>
<br><br><br>
<img id="img" src="image/wz_1_5_1_1522134274.jpg" width="300px" height="300px">
<br>
<button type="button" id="btn5">파일 이름</button><br>
<button type="button" id="btn6">파일 크기</button><br>
<button type="button" id="btn7">이미지 키우기</button><br>
<button type="button" id="btn8">속성 지우기</button><br>
<script>
$(function(){
$("#btn5").click(function(){
var img =$("#img").attr("src")
alert(img);
});
$("#btn6").click(function(){
var width =$("#img").attr("width");
var height =$("#img").attr("height");
alert("width : " +width+" / height : " +height);
});
$("#btn7").click(function(){
$("#img").attr("width",500);
$("#img").attr("height",500);
});
$("#btn8").click(function(){
$("#img").removeAttr("width");
$("#img").removeAttr("height");
});
$("#btn9").click(function(){
alert($(".first").css('color'));
alert($(".second").css('color'));
alert($(".third").css('color'));
$(".first").css("background-color","skyblue");
});
});
</script>
<br><br><hr><br><br>
<button type="button" id="btn9">스타일 확인하기</button><br>
<h1 class="first">Test1</h1>
<h1 class="second">Test2</h1>
<h1 class="third">Test3</h1>
<style>
.first{
color : red;
}
.second{
color : pink;
}
.third{
color : orange;
}
</style>
</body>
</html>
<<실습>>
문제1.
학생정보 출력 버튼을 클릭시 테이블에 있는 학생 정보가
fieldset 안에 출력되도록 만드시오! ($.each 사용)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
문제1. <br>
학생정보 출력 버튼을 클릭시 테이블에 있는 학생 정보가 <br>
fieldset 안에 출력되도록 만드시오! ($.each 사용) <br>
<table border="1px">
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
<tr><td>홍길동</td><td>20</td><td>서울시</td></tr>
<tr><td>김말똥</td><td>30</td><td>경기도</td></tr>
<tr><td>고길똥</td><td>40</td><td>강원도</td></tr>
<tr><td>김지똥</td><td>50</td><td>인천광역시</td></tr>
</table>
<fieldset style="height:200px;width:500px;">
<legend>출력</legend>
<span id="span1"></span>
</fieldset>
<button id="btn">학생정보 출력</button>
<script>
$(function(){
$("#btn").click(function(){
var arr = $("tr"); //tr table > tr 무슨차이임
var str = "";
// for(String str : arr) str = item
$.each(arr,function(index,item){
if(index>0){
var name =
$(item).children().eq(0).html();
var age =
$(item).children().eq(1).html();
var addr =
$(item).children().eq(2).html();
str += (index)+"번째 학생 이름 : "+name+"/나이 : "
+age+"/주소 : "+addr+"<br>";
}
});
$("#span1").html(str);
});
});
</script>
</body>
</html>
문제2.
적용 버튼 클릭시 style이 적용될 수 있도록 하여라.
취소 버튼 클릭시 style이 취소될 수 있도록 하여라.
(css 코드는 변경하지 않도록 함)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<style>
.title {
background-color : black;
color:white;
}
.name {
background-color:yellow;
}
.age{
background-color:blue;
}
.addr{
background-color:grey;
}
</style>
문제2. <br>
적용 버튼 클릭시 style이 적용될 수 있도록 하여라.<br>
취소 버튼 클릭시 style이 취소될 수 있도록 하여라.<br>
(css 코드는 변경하지 않도록 함) <br>
<table border="1px">
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
<tr>
<td>홍길동</td>
<td>20</td>
<td>서울시</td>
</tr>
<tr><td>김말똥</td><td>30</td><td>경기도</td></tr>
<tr><td>고길똥</td><td>40</td><td>강원도</td></tr>
<tr><td>김지똥</td><td>50</td><td>인천광역시</td></tr>
</table>
<button id="btn2">적용</button>
<button id="reset">취소</button>
<script>
$(function(){
var title = $("tr").eq(0);
var td1 = $("td:nth-child(3n+1)");
var td2 = $("td:nth-child(3n+2)");
var td3 = $("td:nth-child(3n+3)");
$("#btn2").click(function(){
title.addClass("title");
td1.addClass("name");
td2.addClass("age");
td3.addClass("addr");
// var td1 = $("td").filter(function(index){
// return index%3==0;
// alert(td1);
// alert(td1.length); 12개 잡힘
});
$("#reset").click(function(){
title.removeClass("title");
td1.removeClass("name");
td2.removeClass("age");
td3.removeClass("addr");
});
});
</script>
</body>
</html>
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<style>
.test *{
display:block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 3px;
margin: 15px;
}
</style>
<div class="test">
<div>
난 부모
<ul>
<li>당근</li>
<li>김치</li>
<li>오이</li>
<li>양배추</li>
<li>파푸리카</li>
</ul>
<p id="pp">
<span id="pica">피카츄</span>
<span>파이리</span>
<span>꼬부기</span>
</p>
<p>난 뭐임?</p>
</div>
</div>
문제1. 아래의 버튼을 클릭하였을때 p태그(id=pp)를 중점으로 당근을 <br>
선택하여 빨간색 배경으로 만들어 보아라.
<button onclick="action1();">작동1</button><br><br>
문제2. 아래의 버튼을 클릭하였을때 ul태그를 중점으로 파이리를 <br>
선택하여 빨간색 배경으로 만들어 보아라.
<button onclick="action2();">작동2</button><br><br>
문제3. 아래의 버튼을 클릭하였을때 span 태그(id="pica")를 중점으로 <br>
ul과 p태그를 감싸고 있는 div 의 테두리를 파란색으로 만들어 보아라.
<button onclick="action3();">작동3</button><br><br>
문제4. 아래의 버튼을 클릭하였을때 div태그(class="test")를 이용하여<br>
당근,김치,오이,양배추,파푸리카가 console.log에 출력 되도록 <br>
만들어 보아라. (JS 에서 innerHTML은 jQuery에선 html() 입니다.)
<button onclick="action4();">작동4</button><br><br>
<script>
function action1(){
$("#pp").siblings().children().first().css("border","2px solid red");
// $("#pp").siblings('ul').children().first().css("border","2px solid red");
};
function action2(){
$("ul").siblings().children().eq(1).css("border","2px solid red");
}
function action3(){
$("#pica").parents().eq(1).css("border","2px solid blue");
}
function action4(){
var li = $(".test").find("li"); //배열형태
console.log(li);
for(var i=0; i<li.length; i++){
console.log(li.eq(i).html());
}
}
</script>
</body>
</html>
'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글
| <이공계기술전문연수> 3. jQuery(3일차) (0) | 2019.09.26 |
|---|---|
| <이공계기술전문연수> 2. jQuery(2일차) (0) | 2019.09.25 |
| <이공계전문기술연수> 3. JavaScript(3일차) (0) | 2019.09.25 |
| <이공계전문기술연수> 2. JavaScript(2일차) (0) | 2019.09.24 |
| <이공계전문기술연수> 1. JavaScript(1일차) (0) | 2019.09.22 |
