2023. 6. 20. 22:44ㆍFront/JS
jQuery
1. jQuery
- jQuery는 JavaScript Library (API)
- 자바스크립트의 단점을 보완하고 간단하게 만든 확장판
- 자바스크립트의 코드를 단순하고 간결한 상태로 개발이 가능하며,
동일한 코드의 반복과 복잡하고 많은 코드로 개발되던 기존의 작업에 비해
여러 가지 효과나 이벤트를 간단한 함수의 호출만으로 쉽고 빠르게 개발이 가능하도록 도와준다.
2. jQuery 특징
1. CSS 셀렉터
html 문서의 구조를 명료 하면서도 알기 쉬운 형태로 표현 및 사용 가능 한다.
2. 플러그인 아키텍처
중복되는 기능과 코드가 엉키는 등의 Feature Creep을 피하고 창의적인 산출물의 공유가 가능하며,
이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있다.
3. 메서드 체인
여러 개의 동작(기능)을 한 줄에 나열하여 임시 변수의 사용을 최소화 하여 불필요한 코드의 반복을 피할 수 있다.
4. 크로스브라우저
각각의 브라우저에 발생되는 이벤트, 객체 처리방법에 따라 여러 개의 함수 또는 여러 번의 분기가 없이
jQuery에서 제공하는 함수 또는 문장으로 간단히 해결 할 수 있다.
3. jQuery API 다운
1) 서버에 다운 받아서 제공
2) CDN 방식 (Content Delivery Network)
<head>
//구글 CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
//jQuery.com CDN
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
Event
1. 기본 문법
$("css선택자").action() ;
2. Event 종류
1) Mouse Event
click, dbclick, mousenter, mouseleave
2) Keyboard Event
keydown, keypress, keyup
3) Form Event
submit, focus, blur, change
4) 문서 Event
load, resize, scroll, unload
3. Event 적용
1) 이벤트 메서드 사용
$("css선택자").이벤트명(function);
2) on 메서드 사용
$("css선택자").on("이벤트명", function);
- 여러개의 이벤트를 한 요소에 등록할 때 사용
$("css선택자").on({ 이벤트명: function, 이벤트명: function, .. });
- 이벤트 위임 (부모영역의 이벤트를 자식으로 전달)
$("선택자").on("이벤트명", "자식의선택자", function);
<body>
<button id="btn">ADD</button>
<div id="res"> </div>
<script type="text/javascript">
$("#btn").on("click", function () {
$("#res").append("<div><button class='b'>BTN</button></div>");
});
/* 위임하지 않는 경우 동작하지 않음
$(".b").on("click",,function(){
alert("button");
}); */
$("#res").on("click", ".b", function () {
alert("button");
});
</script>
</body>
메서드
1. Get / Set 메서드
1) 내용, value에 접근
$("선택자").메서드명() / $("선택자").메서드명("내용")
- text() : 선택된 요소의 text에 접근 / 수정
- html() : 선택된 요소의 html에 접근 / 수정
- val() : form 태그 등의 value값에 접근 / 수정
<body>
<h1 id="t1"></h1>
<button id="btn">버튼</button>
<script type="text/javascript">
$("#t1").html("Hello");
$("#btn").click(function () {
alert("클릭");
});
</script>
</body><body>
<input type="text" id="d1">
<button id="btn">BTN</button>
<input type="text" id="d2">
<script type="text/javascript">
$("#btn").click(function () {
var s = $("#d1").val();
$("#d2").val(s);
});
</script>
</body>
2) 속성값에 접근
$("선택자").메서드명("속성명") / $("선택자").메서드명("속성명", "값")
- attr() : 선택된 요소의 속성값에 접근 (변할 수 있는 가능성이 없는 속성 : id 등)
- prop() : 선택된 요소의 속성값에 접근 (변할 수 있는 가능성이 있는 속성 : checked, selected 등)
<body>
<input type="checkbox" id="all" value="1">
<input type="checkbox" class="ch1" value="2">
<input type="checkbox" class="ch1" value="3">
<input type="checkbox" class="ch1" value="4">
<script type="text/javascript">
$(".ch1").click(function () {
var chk = true;
$(".ch1").each(function () { //반복문
if (!$(this).prop("checked")) {
chk = false;
};
})
$("#all").prop("checked", chk);
})
</script>
</body>
2. Style 관련 메서드
1) class
- hasClass("클래스명") : 해당 요소에 클래스가 존재하는지 true/false 반환
- addClass("클래스명1 클래스명2") : 해당 요소에 클래스 추가
- removeClass("클래스명") : 해당 요소에 클래스 삭제
2) css
- css("속성명") : 해당 요소의 css 속성값을 반환
- css("속성명", "값") : 해당 요소의 css 속성에 값을 대입
- position(), width(), height()
3. Add 메서드
1) 선택된 요소의 자식으로 요소를 추가
- append() : 선택된 요소 내부의 맨 마지막에 추가
- prepend() : 선택된 요소 내부의 맨 앞에 추가
<body>
<ul id="id1">
<li>1</li>
</ul>
<button id="add">ADD</button>
<script type="text/javascript">
var num = 1;
$("#add").click(function () {
num++;
$("#id1").append("<li>" + num + "</li>");
});
</script>
</body>2) 선택된 요소의 외부에 요소를 추가
- before() : 선택된 요소의 위에 추가
- after() : 선택된 요소의 밑에 추가
4. Remove 메서드
- remove() : 선택자 내부의 자식들과 선택자까지 모두 삭제
- empty() : 선택자 내부의 자식들만 삭제
<body>
<input type="text">
<button>DEL</button>
<div id="d1">
<h1>SELECT 1</h1>
</div>
<div id="d2">
<h1>SELECT 2</h1>
</div>
<div id="d3">
<h1>SELECT 3</h1>
</div>
<div id="d4">
<h1>SELECT 4</h1>
</div>
<script type="text/javascript">
$("button").on("click", function () {
var res = $("input").val();
$("#d" + res).remove();
})
</script>
</body>
5. 상위, 하위 요소를 가져오는 메서드
1) 상위 요소
- parent() : 선택자의 직속 부모 반환
- parents() : 선택자의 모든 부모 반환
- parentsUntil("선택자2") : 선택자의 직속 부모부터 선택자2 미만까지의 요소 반환
2) 하위 요소
- children() : 선택자의 직속 자식 반환
- children("선택자2") : 선택자의 직속 자식부터 선택자2 미만까지의 요소 반환
- find("선택자2") : 선택자의 후손들 중 선택자2만을 반환
<body>
<h1>Write Form</h1>
<form action="">
<p> Writer : <input type="text"> </p>
<p> Title : <input type="text"> </p>
<p> Contents </p>
<p> <textarea rows="20" cols="30"></textarea> </p>
<p>첨부파일 <input type="button" id="add" value="Add file"></p>
<div id="res"> </div>
<p><button>Write</button></p>
<script type="text/javascript">
var cnt = 0;
$("#add").click(function () {
if (cnt < 5) {
$("#res").append('<div><input type="file"><span class="r">X</span></div>');
cnt++;
num++;
} else {
alert("파일 업로드는 최대 5개까지 가능합니다.");
};
});
$("#res").on("click", ".r", function () {
$(this).parent().remove();
cnt--;
});
</script>
</form>
</body>
6. 반복문 메서드 each()
$("선택자").each(function(){ });
선택자에 해당되는 요소들을 하나씩 가지고 와서 그 요소에 함수를 실행한다