Language/JavaScript
jQuery를 이용하여 객체 제어, 선택, 요소 추가, 대체, 삭제
javapp 자바앱
2022. 4. 10. 00:00
728x90
목차
제이쿼리 (jQuery)
자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다.
jQuery 를 이용하면 DOM를 사용하는 것 보다 훨씬 효율적으로 필요한 객체 조회할 수 있습니다.
객체를 조회할 때 CSS 선택자를 이용합니다.
jquery CDN을 통해 사용
기본 문법
Document 객체의 ready() 메소드
자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 합니다.
- 아직 생성되지 않은 HTML 요소에 속성을 추가하려고 할 경우 오류
- 로드되지 않은 이미지 크기를 얻으려고 할 경우 오류
그래서 window.onload() 메소드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정합니다.
자바스크립트
window.onload= function(){
...
};
제이쿼리
$(document).ready(function(){
//제이쿼리코드;
});더욱 짧은 문법 (권장)
$(fucntion(){
//제이쿼리
});창로드
$(window).load( function() {
$("#win").text("창이 모두 로드됐어요!");
});
선택자
태그 이름
$('li').css('color','red'); // style 변경
클래스 이름
$(".active").css('color','red')
아이디 값
$('#active').css('color','red').css('textDecoration','underline');
다중
<li id="active">
<ul>
<li class="marked"> </li>
<li class="marked"> </li>
</ul>
</li>$(".marked", "#active")
$("#active", ".marked")
선택한 요소 필터링
$(function() {
$("button").on("click", function() {
$("li:has(span)").text("<span>요소를 가지고 있는 아이템이에요!");
});
});<li><span>두 번째</span> 아이템이에요!</li>
| 선택자 | 설명 |
| :eq(n) | 선택한 요소 중 인덱스가 n인 요소 |
| :gt(n) | 인덱스가 n보다 큰 요소 모두 선택 |
| :lt(n) | 인덱스가 n보다 작은 요소 모두 선택 |
| :even | 인덱스가 짝수 |
| :odd | 인덱스가 홀수 |
| :first | 첫 번째 요소 |
| :last | 마지막 요소 |
| :animated | 애니메이션 효과 실행 중인 요소 모두 |
| :header | h1~h6 |
| :lang(언어) | 언어 요소 |
| :not(선택자) | 선택자와 일치하지 않는 요소 모두 선택 |
| :root | 최상위 루트 요소 |
| :target | 웹 페이지 URI의 fragment 식별자와 일치하는 요소 모두 |
| :contains("text") | 지정한 텍스트를 포함하는 요소 모두 |
| :has("선택자") | 선택자와 일치하는 자손 요소 모두 |
| :empty | 자식 요소를 가지고 있지 않은 요소 모두 |
| :parent | 자식 요소를 가지고 있는 요소 모두 선택 |
input 요소 선택
$(function() { // ready
$("button").on("click", function() {
// 체크되어 있는 요소를 모두 선택함.
$(":checked").next().text("체크되어 있는 요소는 이 요소입니다.");
});
});<input type="checkbox" name="lecture" value="jquery" checked> <span>제이쿼리</span>
| 타입 속성 선택자 | 설명 |
| :input | <input> <textarea> <select> <button> 모두 선택 |
| :button | |
| :checkbox | |
| :file | |
| :image | |
| :password | |
| :radio | |
| :reset | |
| :text | |
| :submit |
| :checked | |
| :focus | |
| :disabled | |
| :enabled |
ex)
<form action="formResult_useBean.jsp"id="frm" method="get">
<!-- name=value -->
이름: <input type="text" name="name" id="name"><br/>
나이: <input type="number" name="age" id="age"><br/>
성별: <input type="radio" name="gender" value="남" id="man"> <label for="man">남자</label>
<input type="radio" name="gender" value="녀" id="girl"> <label for="girl">여자 </label> <br/>
관심분야: <input type="checkbox" name="hobby" value="운동" >운동
<input type="checkbox" name="hobby" value="게임" >게임
<input type="checkbox" name="hobby" value="등산" >등산
<input type="checkbox" name="hobby" value="영화" >영화<br/>
직업: <select name="job" id ="job">
<option value="학생">학생</option>
<option value="직장인">직장인</option>
<option value="기타">기타</option>
</select> <br/>
<input type="button" value="jquery 클릭" id="btn" >
</form><script>
$(document).ready(function(){
// # :id
$("#btn").click(function(){ //클릭시 바로 함수 실행
if($("#name").val()==""){
alert("이름 입력")
return;
}
if($("input:checkbox[name='hobby']:checked").length==0){
alert("관심분야 선택")
return;
}
$("#frm").submit();
})
})
</script>$("input:checkbox[name='hobby']:checked")
<input type="checkbox" name="hobby" value="영화" >영화<br/>
.map()
반복을 통해 조회
var li= $('li');
li.map(function(index, elem){
$(elem).css('color','red');
}
getter : .html()
setter : .html( ... )
| 메소드 | 설명 |
| .html() | 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. |
| .text() | 텍스트 콘텐츠 반환하거나 설정 |
| .width() | |
| .height() | |
| .attr() | 명시된 속성 값을 반환하거나 설정, $("img").attr("src"); |
| .position() | 첫번째 요소에 대해 특정 위치에 존재하는 객체를 반환 (getter) |
| .val() | <form> 요소의 값을 반환하거나 설정 |
| .eq(n) | n번째 인덱스 값의 요소 |
| .find("li") | <li>요소를 모두 선택 |
요소 추가
.append()
$("#list").append("<li>새로 추가된 아이템이에요!</li>");'마지막'에 추가
.appendTo()
$("#firstItem").appendTo("#list");#firstItem을 #list 요소의 마지막에 삽입 (추가x)
.prepend()
요소의 앞에 추가
.prependTo()
$("<b>새로 추가된 콘텐츠에요!</b>").prependTo(".item");
기존 요소와 같은 레벨에 추가
| 1. .before() | 2. .after() |
| 3. .insertBefore() | 4. .insertAfter() |
$("<td>새로운 셀이에요!</td>").insertBefore("#secondColumn");
$("<td>새로운 셀이에요!</td>").insertAfter("#secondColumn");
기존 요소를 감싸면서 추가
wrap
$(".content").wrap("<div class='wrapper'></div>");
wrapAll
$(".content").wrapAll("<div class='wrapper'></div>");
wrapInner
$(".content").wrapInner("<div class='wrapper'></div>");
요소 복사
.clone()
요소 대체
// class가 "item"인 각 요소를 id가 "firstItme"인 요소로 대체함.
$("#firstItem").replaceAll(".item");
// firstItem <- item
// class가 "item"인 모든 요소를 id가 "firstItme"인 요소로 대체함.
$(".item").replaceWith($("#firstItem"));
//item -> firstItem
요소 삭제
| .remove | DOM 트리에서 삭제, .first, .second 삭제 | $(".content").remove(".first, .second"); |
| .detach | DOM 트리에서 삭제 .append, .prepend 메소드로 복구 가능 객체 유지 |
data = $(".content").detach(); //삭제 $("#container").append(data); //복구 |
| .empty | 자식 요소 모두 삭제 | $("#container").empty(); |
| .unwrap | 부모 요소 삭제, 감싼 요소 삭제 | $("span").unwrap(); |
요소 탐색
조상 요소 탐색
| $("p").parent() | 선택한 요소의 부모(parent) 요소를 선택함. |
| $("p").parents("div") | 선택한 요소의 조상(ancestor) 요소를 모두 선택함. |
| $("p").parentsUntil("div") | 선택한 요소의 조상 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함. |
| $("#origin").closest("div") | 조상중 가장 가까운 "div" |
형제 요소를 탐색하는 메소드
| $("h4").siblings() | 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택함. 같은 레벨 태그 |
| $("h4").next() | 선택한 요소의 바로 다음에 위치한 형제 요소를 선택함. |
| $("h4").nextAll() | 선택한 요소의 다음에 위치한 형제 요소를 모두 선택함. |
| $("h4").nextUntil("p") | 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택함. |
| $("h4").prev() | 선택한 요소의 바로 이전에 위치한 형제 요소를 선택함. |
| $("h4").prevAll() | 선택한 요소의 이전에 위치한 형제 요소를 모두 선택함. |
| $("h4").prevUntil("p") | 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택함. |
자손 요소를 탐색하는 메소드
| $("li").children() | 선택한 요소의 자식(child) 요소를 모두 선택함. |
| $("li").find("*") | 선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택함. 별표("*")를 인수로 전달하여, 선택한 요소의 자손 요소를 모두 선택 ("*") ("p") (".marked") |
기타 탐색 메소드
| $("li").add("p") | 선택한 요소의 집합에 전달받은 요소를 추가함. |
| $("li").addBack("p") | 선택한 요소의 집합에 바로 전에 선택했던 요소를 추가함. |
| $("li").each(function(){ // <li> 마다 클래스를 추가, 제거 $(this).toggleClass("boldFont"); }); |
선택한 요소 집합의 요소마다 전달받은 콜백 함수를 실행함. |
| $("#divBox") // id가 "divBox"인 요소의 .find("p") // 자손 요소 중에서 <p>요소를 모두 선택하고, .end() // 선택된 요소의 집합을 find() 메소드의 실행 전으로 복원함. |
마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원함. |
| .offsetParent() | 선택한 요소를 위치시킬 때 기준이 되었던 조상 요소를 선택함. |
| $("iframe") // <iframe>요소의 .contents() // 자식 요소를 모두 선택한 후, .find("a") // 그 중에서 <a>요소를 모두 선택하고,, |
선택한 요소의 자식(child) 요소를 모두 선택함. (텍스트 노드와 주석 노드까지 모두 포함함) |
필터링 메소드
first , last
.first()
.last()
eq
$("li").eq(1)
filter
필터 : 선택요소필터링 사용
$("li").filter(":odd")
not
$("li").not(":lt(2)")
has
선택자에 해당하는 요소를 자손 요소로 가지고 있는 요소를 모두 선택합니다.
$("li").has("span")
is
요소가 하나라도 존재하면 참을 반환
if("$("span").parents().is("ul")){
...
}
map
반복하여 반환
// 선택한 <li>요소마다 콜백함수를 실행하여 각 <li>요소의 id 값을 반환함.
var ids = $("li").map(function() {
return this.id;
})
.get() // 반환된 모든 id 값을 하나의 배열로 반환함.
.join(); // 배열의 모든 요소를 쉼표(,)로 구분하는 하나의 문자열로 반환함.
$("#text").html(ids);
slice(n)
인덱스가 n 이상인 요소
$("li").slice(1)
요소 크기
메소드설명
| .width() | $("#divBox").width(); $("#divBox").width("400"); |
| .height() | $("#divBox").height(); $("#divBox").height("400"); |
| .innerWidth() | $("#divBox").innerWidth() |
| .innerHeight() | $("#divBox").innerHeight() |
| .outerWidth() | $("#divBox").outerWidth(), $("#divBox").outerWidth(true) //마진 영역까지 포함 |
| .outerHeight() | $("#divBox").outerHeight(), $("#divBox").outerHeight(true) |
요소 위치
메소드설명
| .offset() | 선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정함. |
| .position() | 선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환함. |
| .scrollLeft() | 선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나, 선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정함. |
| .scrollTop() | 선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정함 |