jQuery
jQuery
-
라이브러리
-자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다.
-프로그래밍 효율을 높여주는 코드들jQuery
-DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다.
jquery 제어 대상 접근 방법
-$ -> jQuery
-jquety는 제어할 요소를 획득하기 위해 $()함수 안에 제어할 대상을 가리키는 CSS셀렉터를 파라미터로 전달한다.
태그
-let my tag = $("h1");
클래스
-
let myclass = $('.hello');
id
-let myid = $('#hello');
chain
-jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. 연속적인 제어가 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<ul id = "list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input type = "button" id = "btn" value = "btn"/>
<script>
$("#btn").click(function(){
$("#list li").text('happy');
}); 기존li태그 안에 있는 empty문자를 btn버튼 클릭시 happy로 바꾸어주는 예시이다.
list li에 있는 text를 'happt'로 바꾸겠다는 뜻이며
만일 jQuery가 아닌 일반 자바스크립트를 이용했다면
function addEvent(target, eventType,eventHandler, useCapture) {
if (target.addEventListener) {
target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
}
}
function clickHandler(event) {
var nav = document.getElementById('list');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
child.innerText = 'happy';
}
}
addEvent(document.getElementById('btn'), 'click', clickHandler);이렇게 for문을 이용한 긴 코드가 나왔을 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<p>Hello jQuery</p>
<script>
$('p').css('color','red');
</script>
</body>
</html>이것도 간단한 내용이다. p태그의 스타일시트의 '색깔'을 'red'로 변경. 말 그대로 직관적이라고 할 수 있다.
<!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="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
.selected{
background-color: black;
color: beige;
}
</style>
</head>
<body>
<ul id = "list">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
<li>MySQL</li>
<li>Oracle</li>
<script>
//여러개
//list라는 id를 가진 태그안에 있는 모든 li태그 선택
// $('#list li').addClass('selected');
//인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자
//2라는 숫자 index(0부터 시작)
// $("#list li:eq(2)").addClass('selected')
//index값이 1보다큰 나머지 인덱스 선택
// $("#list li:gt(1)").addClass('selected');
//인덱스 값이 2보다 작은값 찾아냄
//$("#list li:lt(2)").addClass('selected');
//짝수만 선택
// $("#list li:even").addClass('selected')
// 홀수만 선택
// $("#list li:odd").addClass('selected')
//처음것만
$("#list li:first").addClass('selected');
//마지막 것만
$("#list li:last").addClass('selected');
</script>
</ul>
</body>
</html>주석에 대부분의 내용이 들어가있다. #을 통해 id값을 가져오고 li태그에 접근해 적용한다.
초보 개발자 이야기