존레식에 의해 개발된 경량 javascript 라이브러리
Write Less Do More
$(선택자).메서드명(속성, 값);
<사용 전 설정 >
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<!-- jQuery 홈페이지에서 3.6.0버전의 주소를 소스로 추가한다 -->
<script src="js/jquery_3.6.0.js"></script>
<!-- 다운받아 사용하는 경우 소스를 복사해 놓은 js파일을 연결한다 -->
jQuery는 DOM객체를 CSS선택자로 처리한다
const p1 = document.querySelector("#p1");
// DOM객체 사용
const p1 = $("#p1");
// jQuery 사용
css 문법 그대로 사용한다
p1.style.backgroundColor = "blue";
p1.style.color = "white";
// css적용 세가지 방법
// 1. 기본형태
p1.css("background-color", "blue");
p1.css("color", "white");
// 2. .css로 연결형태
p1.css("background-color", "blue").css("color", "white");
// 3. 객체로 넘겨주는 방법
p1.css({
"background-color" : "blue",
"color" : "white"
});
javaScript의 window.onload와 같은 개념의 메서드
element 생성
javaScript의 document.createElement와 같다
const btn = $("<button>생성버튼</button>");
객체 탐색 (순회)
선택자로 선택된 요소들 중 특정 요소만 선택하기 위해 한 번 더 필터링하는 작업
선택된 요소 중 직접 필터링 : first(), last(), eq(), filter(), not()
<div class="filter">
<p class="pp1">p-1</p>
<p class="pp1">p-2</p>
<p class="pp2">p-3</p>
<p class="pp3">p-4</p>
</div>
<button onclick="func3();">filterTest</button>
.first() / last() : 선택 요소 중 제일 처음 / 제일 마지막에 있는 요소 리턴
const filter = $(".filter>p");
console.log("선택된 엘리먼트 수 : "+filter.length); //4
const first = filter.first(); // 선택된 요소 중 첫번째 요소
console.log("first : "+first.text()); // p-1
const last = filter.last(); // 선택된 요소 중 마지막 요소
console.log("last : "+last.text()); // p-2
.eq(index) : 인덱스 번호와 일치하는 요소 리턴
const eq = filter.eq(2); // 2번 index (=3번째 요소)
console.log("eq : "+eq.text()); // p-3
// first() > eq(0)
// last() > eq(filter.length-1)
선택된 요소의 상위 요소들을 선택할 수 있는 메서드 : parent(), parents(), parentsUntil()
<div class="test ancestors">
<div>div(great-grand-patent)
<ul>ul(grand-parent)
<li>li(direct-parent)
<span>span</span> <!-- span 기준 -->
</li>
</ul>
</div>
<div>div(grand-parent)
<p>p(direct-parent)
<span>span</span> <!-- span 기준 -->
</p>
</div>
</div>
.parent() : 바로 위 상위요소 리턴
.parents() : 선택된 요소의 모든 상위요소 리턴
.parents("인자 ") : 선택된 요소의 모든 상위요소 중 매개변수로 받은 선택자와 일치하는 부모 리턴
.parentsUntil("인자 ") : 선택된 요소부터 인자 요소까지, 해당 범위에 포함되는 사이 요소 리턴
선택된 요소의 하위 요소를 선택할 수 있는 메서드 : children, find
.children() : 모든 직계 자식
.children("인자 ") : 직계 자식 중 매개변수의 선택자에 해당되는 요소
.find("인자 ") : 모든 후손 요소 중 인자로 전달한 요소를 찾아 리턴
선택된 요소들과 같은 레벨 (동위/형제) : siblings, next, prev
.siblings() : 선택된 요소를 제외한 모든 형제 요소
.siblings("인자" ) : 형제 관계에 있는 요소 중 매개변수에 해당하는 요소만
.next() : 선택된 요소의 바로 다음 요소
.nextAll() : 해당 요소 다음으로 오는 모든 형제 요소
.prev() : 선택된 요소의 바로 직전 요소
.prevAll() : 선택된 요소의 형제들 중 이전에 있는 모든 요소
.prevAll("인자 ") : 선택된 요소의 형제들 중 이전에 있으면서, 매개변수 선택자에 해당하는 요소만
1. 객체 조작을 위한 순회문
객체나 배열의 요소를 검사하는 메서드
javaScript의 foreach
주의사항
$.each(배열이름,function(index,item){})
2. 객체 클래스 조작
선택된 요소에 클래스를 추가하는 메서드
divs.eq(0).addClass("bg-yellow");
divs.eq(1).addClass("t-red").addClass("bg-yellow");
divs.last().addClass("t-red bg-yellow");
선택된 요소에 클래스를 삭제하는 메서드
divs.eq(0).removeClass("bg-yellow");
divs.eq(1).removeClass("bg-yellow").removeClass("t-red"); // 연결 가능
divs.eq(2).removeClass("bg-yellow t-red"); // 여러 클래스 한 번에 삭제 가능
"클래스2 클래스2" 공백으로 넣게 되면 문자열 그대로가 아닌 각각의 클래스로 들어감
선택된 요소에 해당 클래스가 있는지 없는지 확인하는 메서드 (true | false)
if(divs.eq(2).hasClass("t-red")){ // if의 조건문으로 활용가능
divs.eq(2).removeClass("t-red");
}else{
divs.eq(2).addClass("t-red");
}
선택한 요소에 클래스가 있으면 삭제, 없으면 추가 하는 메서드
divs.eq(3).toggleClass("t-red");
// hasClass로 if문을 만들어 사용하는 것과 같은 결과
// divs.eq(3)에 t-red 클래스가 있으면 삭제하고, 없으면 추가한다
3. 객체 속성 조작
getAttribute(), setAttribute()
선택자에 의해 선택된 요소의 속성값을 확인, 수정하는 메서드
$(선택자).attr("속성명")
$(선택자).attr("속성명", "속성값")
function func7(){
const label = $("#test3>label");
label.each(function(index, item){
const input = $(item).prev();
const id = input.attr("id");
$(item).attr("for", id);
});
속성을 삭제하는 메서드
true, false로 값을 조절하는 속성은 prop로 조절할 수 있다 (checked, required, readonly 등)
prop로 속성을 삭제하는 메서드
4. 객체 css 조작
선택된 요소의 css속성값을 가져오거나 설정하는 메서드
function func(){
const divs = $("#test>div"); // 여러 div가 들어있는 divs
// css메서드에 매개변수 1개 작성
console.log(divs.eq(0).css("background-color"));
console.log(divs.eq(1).css("background-color")); // rgb 값으로 가져옴
}
css.(매개변수1, 매개변수2) = setAttribute
매개변수1 == 속성명 | 매개변수2 == 속성값
function func(){
const divs = $("#test>div"); // 여러 div가 들어있는 divs
// css메서드에 매개변수 2개 작성
divs.eq(0).css("background-color", "green");
divs.eq(0).css("float", "none").css("clear","left"); // css 연속사용
divs.eq(1).css({
"background-color" : "pink",
"border" : "2px solid red",
"box-sizing" : "border-box"
}); // css 객체로 전달
}
5. 객체 text 조작
선택된 요소의 content영역 (innerHTML)을 가져오거나 수정
컨텐츠 영역에 태그가 있다면 태그까지 가져온다
// document.createElement = $("");
// document.textNode = $("text");
선택된 요소의 content영역 (innerText)을 가져오거나 수정
컨텐츠 영역에 태그가 있다면 태그는 가져오지 않는다
선택된 요소의 value를 가져오거나 수정
input처럼 내부 text를 갖지 않는 태그의 값을 가져올 때 사용
6. 생성된 객체 추가 / 이동
부모객체의 마지막 자식으로 객체 추가
= 객체.appendTo(부모객체)