1. J-Query
J-Query 는 JavaScript 의 Library 이다.
| 1-1. J-Query 사용하는 이유 1) 사용의 편리성 2) Cross Browsing Java Script 는 Browser 에서 해석하므로 종류나 버전마다 표현이 안되거나 다르게 되는 경우가 있다. J-Query 에서는 내부적으로 Browser 마다 처리를 해 놓았기 때문에 신경 쓸 필요가 없다. 2) 다양한 Plugin |
2. Selector
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h1>클래스가 없다.</h1>
<h1 class="cls">클래스가 있다.</h1>
<h1>클래스가 없다.</h1>
<h1 class="cls">클래스가 있다.</h1>
<p id="one">아이기다 있는 요소</p>
<p>태그만 있는 요소</p>
<h3>List 1:</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>J-QUERY</li>
</ul>
<h3>List 2:</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>J-QUERY</li>
</ul>
<a href="#">사이트 링크 A</a><br/>
<a href="#">사이트 링크 B</a><br/>
<a href="#" target="_blank">사이트 링크 C</a><br/>
</body>
<script>
/* js
// 아이디가 one 인 요소 가져와 콘솔로 찍어보기
console.log(document.getElementById('one'));
// 클래스가 cls 인 요소 가져와 콘솔로 찍어보기
console.log(document.getElementsByClassName('cls'));
// 태그가 p 인 요소 가져와 콘솔로 찍어보기
console.log(document.getElementsByTagName('p'));
*/
// jq
// 기초
console.log($('#one')); // 아이디가 one
console.log($('.cls')); // 클래스가 cls
console.log($('p')); // 태그가 p
console.log($('*')); //html 이하의 모든 요소 모두
// 000 중에서..
console.log($('h1.cls'));//h1 태그 중에서 클래스가 cls
console.log($('p:first'));//p 태그 중에서 첫번째 요소
console.log($('ul li'));//ul 태그의 자식인 li
// 복잡하면 신경 쓰지 말것
console.log($('ul li:first'));// 첫 ul 의 자식중 첫 li
console.log($('ul li:first-child'));// 모든 ul 의 자식중 첫 li
// this 는 이벤트가 걸린 당사자
$('p').click(function(){
console.log($(this));
});
// 속성 활용
//a 태그 중에서 href 속성을 가지고 있는 요소
console.log($('a[href]'));
// a 태그 중에서 target 속성이 _blank 인 요소
console.log($('a[target="_blank"]'));
console.log($('a[target!="_blank"]'));
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
th, td{
padding: 5px 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>NO</th>
<th>이름</th>
<th>생년월일</th>
</tr>
<tr>
<td>1</td>
<td>김길동</td>
<td>2018-01-01</td>
</tr>
<tr>
<td>2</td>
<td>이길동</td>
<td>2018-01-01</td>
</tr>
<tr>
<td>3</td>
<td>박길동</td>
<td>2018-01-01</td>
</tr>
<tr>
<td>4</td>
<td>정길동</td>
<td>2018-01-01</td>
</tr>
<tr>
<td>5</td>
<td>홍길동</td>
<td>2018-01-01</td>
</tr>
</table>
<input type="button" value="click"/>
<button>click</button>
</body>
<script>
// odd : 홀수
$('tr:odd').css('background-color','yellow');
// even: 짝수
$('tr:even').css('background-color','lightblue');
//$('input[type="button"], button')
console.log($(':button'));
</script>
</html>
3. 부모-자식 관계를 이용한 Select
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.ancestors *{
display: block;
border: 2px solid gray;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="ancestors">
<div>div(great-grandparent)
<ul>ul(grandparent)
<li>li(parent)
<span>span</span>
</li>
</ul>
</div>
<div>div(grandparent)
<p>p(parent)
<span>span</span>
</p>
</div>
</div>
</body>
<script>
//span 의 바로 위 부모를 찾아라
console.log($('span').parent());
//$('span').parent().css({'border':'2px solid red'});
//span 에서 부터 위의 부모들을 찾아라
// 기본적으로는 html 까지 올라가서 찾는다.
// 두번째 인자 값을 넣으면 올라가면서 해당 요소만 찾는다.
console.log($('span').parents('div'));
//$('span').parents('div').css({'border':'2px solid red'});
//span 에서 부터 000 까지 사이의 부모를 찾아라
// 당사자와 지정도니 부모는 제외
console.log($('span').parentsUntil('.ancestors'));
// .ancestors 까지 포함하여 빨강색 라인을 그려보기
$('span').parentsUntil('body').css({'border':'1px solid red'});
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.ancestors *{
display: block;
border: 2px solid gray;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="ancestors">
<div>div(great-grandparent)
<ul>ul(grandparent)
<li>li(parent)
<span id="item">span</span>
</li>
</ul>
</div>
<div>div(grandparent)
<p>p(parent)
<span>span</span>
</p>
</div>
</div>
</body>
<script>
// html 까지 올라가면서 부모중 div 는 모두 찾아온다.
$('#item').parents('div').css({'border':'2px solid red'});
// html 까지 올라가면서 부모중 처음 찾은 div 를 가져온다.
$('#item').closest('div').css({'border':'2px solid blue'});
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.ancestors *{
display: block;
border: 2px solid gray;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="ancestors">
<div>div(great-grandparent)
<ul>ul(grandparent)
<li>li(parent)
<span id="item">span</span>
</li>
</ul>
</div>
<div>div(grandparent)
<p>p(parent)
<span>span</span>
</p>
</div>
</div>
</body>
<script>
// 선택한 요소의 바로 아래 자식들을 선택
console.log($('.ancestors').children());
// 선택한 요소의 자식 요소들중 2번째 인자값을 만족하는 요소를 선택
console.log($('.ancestors').find('span'));
</script>
</html>
4. 형제 관계를 이용한 Select
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
div.siblings *{
display: block;
border: 2px solid gray;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="siblings">DIV(parent)
<p>ELEMENT 1</p>
<span>ELEMENT 2</span>
<span>ELEMENT 3</span>
<span>ELEMENT 4</span>
<h3>ELEMENT 5</h3>
<h4>ELEMENT 6</h4>
<h5>ELEMENT 7</h5>
<h6>ELEMENT 8</h6>
<p>ELEMENT 9</p>
</div>
</body>
<script>
//siblings() 선택한 요소의 동일선상 형제들( 나를 제외한)
//$('h3').siblings().css({'border-color':'red'});
// 두번째 인자값에 해당하는 형제들만 가져옴
$('h3').siblings('span').css({'border-color':'red'});
//next() : 선택한 요소 바로 다음(아래)
$('h3').next().css({'color':'blue'});
//prev() : 선택한 요소 바로 이전(위)
$('h3').prev().css({'color':'green'});
//nextAll() : 선택 요소 아래의 모든 요소(2번째 인자값만 골라온다.)
$('h3').nextAll('h6').css({'background-color':'yellow'});
//prevAll() : 선택 요소 위의 모든 요소(2번째 인자값만 골라온다.)
$('h3').prevAll('span').css({'background-color':'yellow'});
//nextUntil() : 선택요소와 인자값 요소 사이(next 방향으로)
//prevUntil() : 선택요소와 인자값 요소 사이(prev 방향으로)
// h3 와 p 사이의 border-color 를 변경 하시오
$('h3').nextUntil('p').css({'border-color':'blue'});
$('h3').prevUntil('p').css({
'border-color':'green',
'font-weight':600
});
</script>
</html>
5. Filtering 을 이용한 Select
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
div{
/*border: 1px solid black;*/
margin: 5px;
}
p{
text-align: center;
border: 1px solid gray;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<p>ELEMENT 1</p>
<p class="sel">ELEMENT 2</p>
<p>ELEMENT 3</p>
<p class="sel">ELEMENT 4</p>
</div>
<div>
<p>ELEMENT 5</p>
<p class="sel">ELEMENT 6</p>
<p>ELEMENT 7</p>
<p class="sel">ELEMENT 8</p>
</div>
</body>
<script>
// 배열 개념
console.log($('div p').first());
console.log($('div p').eq(0));
console.log($('div p').last());
console.log($('div p').eq($('div p').length-1));
// 필터링 개념(1차 셀레터로 가져온 내용을 2차로 한번 더 걸러준다.)
console.log($('div p').filter('.sel'));
console.log($('div p').not('.sel'));
</script>
</html>'J-Query' 카테고리의 다른 글
| 05. 요소 추가, 요소 삭제, 요소 면적 (0) | 2024.03.24 |
|---|---|
| 04. Animate, Method Chainin (0) | 2024.03.24 |
| 03. hide & show, Fade effect, Slide (0) | 2024.03.24 |
| 02. Event 등록, GET, SET, CSS, AddClass (0) | 2024.03.24 |
