1. J-Query 는 무엇 인가?
- J-Query 는 JavaScript 의 Library 이다.
2. Library 는?
1) 자주 사용하거나, 직접 구현이 어려운 기능을 만들어 모아 놓은 Program Group
2) JavaScript Library 로는 J-Query 외에도 RequireJS, Prototye, AngluarJS, Backbone 등이 있다.
3. J-Query 를 사용 하는 이유는?
1)사용의 편리성이 있다.
2) Cross Browsing
- Java Script 는 Browser 에서 해석하므로 종류나 버전마다 표현이 안되거나 다르게 되는 경우가 있다.
- J-Query 에서는 내부적으로 Browser 마다 처리를 해 놓았기 때문에 신경 쓸 필요가 없다.
3) 다양한 Plugin
- J-Query 를 기초로 한 유용한 Plugin 이 많다.
- Bootstrap, J-query UI, Pagination 등
4. Selector
- J-query 에서는 CSS 에서 사용하는 Selector 의 기능을 차용 했다.
- 그래서 원하는 요소를 쉽게 가져 올 수 있다.
selector 1.ex)
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel = "iocn" href="img/icon.png">
<title>J-QUERY</title>
<script src = "https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
</style>
</head>
<body>
<h1>클래스가 없음</h1>
<h1 class="cls">클래스가 있음</h1>
<h2>클래스가 없음</h2>
<h2 class="cls">클래스가 있음</h2>
<p id="one"></p>
<p>아이디 있는 녀석</p>
<p>태그만 있는 녀석</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="http://w3school.com">사이트링크 A</a><br/>
<a href="http://w3school.com">사이트링크 B</a><br/>
<a href="http://w3school.com" target="_blank">사이트링크 C</a><br/>
</body>
<script>
//기초
console.log($("#one"));//아이디가 one 인 요소 가져오기
console.log($(".cls"));//클래스가 cls 인 요소 가져오기
console.log($("p"));//태그가 p인 요소 가져오기
// 000 중에서...
console.log($("h2.cls"));//h2 태그 중에서 클래스가 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
$("p").click(function(e){// e: 이벤트 객체
console.log($(this));//디스는 이벤트가 걸린 당사자
});
//속성으로 가져오기
console.log($("a[href]"));//a 태그 중에서 href 속성이 있는 요소
console.log($('a[target="_blank"]'));//a 태그 중에서 target 속성이 _blank인 요소
console.log($('a[target!="_blank"]'));//a 태그 중에서 target 속성이 _blank 가 아닌요소
</script>
</html>selector 2.ex)even(짝수),odd(홀수)
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel = "iocn" href="img/icon.png">
<title>J-QUERY</title>
<script src = "https://code.jquery.com/jquery-3.7.0.min.js"></script>
<style>
table, th ,td{
border: 1px solid black;
border-collapse: collapse;
}
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>
</body>
<script>
//odd : 홀수
console.log($("tr:odd"));
//even :짝수
console.log($("tr:even"));
// 적용 예시 =홀수만 색상 변경
$("tr:odd").css({"background-color":"lightgray"});
</script>
</html>* 짝수 홀수 결과(짝수 회색으로 표시)
5. DOM
- DOM 내에서도 부모 자식 관계가 존재 한다.
- 이런 관계를 이용하여 원하는 요소를 얻어 오기도 한다.
6. 부모 관계를 이용한 Select 방식
7. 자손 관계를 이용한 Select 방식
8. 형제 관계를 이용한 Select 방식
형제 관계 ex)
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="img/icon.png">
<title>J-QUERY</title>
<script src="https://code.jquery.com/jquery-3.7.0.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>CHILD 1</p>
<span>CHILD 2</span>
<span>CHILD 3</span>
<span>CHILD 4</span>
<h3 id="item">CHLID 5</h3>
<h3>CHLID 6</h3>
<h3>CHLID 7</h3>
<h3>CHLID 8</h3>
<p>CHILD 9</p>
</div>
</body>
<script>
//siblings() : 형제요소 전부 선택
//siblings("span") : 형제요소들 중에서 span 만 선택
//$('p').siblings().css({'border':'2px solid red'});
//$('p').siblings('span').css({'border':'2px solid blue'});
//next() : 선택한 요소의 바로 다음(아래줄)
//$("#item").next().css({'border':'2px solid red'});
//prev() : 선택한 요소의 바로 전(윗줄)
//$("#item").prev().css({'border':'2px solid blue'});
// #item 의 nextAll 과 prevAll 을 사용해 보자
// 매개변수에 셀렉터를 넣으면 해당 요소만 찾아낸다.
//$("#item").nextAll('p').css({'border':'2px solid red'});
//$("#item").prevAll('span').css({'border':'2px solid blue'});
//until 은 두 선택자는 제외된다.
$("#item").nextUntil('p').css({'border':'2px solid red'});
$("#item").prevUntil('p').css({'border':'2px solid blue'});
</script>
</html>
시작
개발자로서 성장하는 데 큰 도움이 된 글이었습니다. 감사합니다.