jQuery

존레식에 의해 개발된 경량 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 기본

$("선택자")

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"
});

$(document).ready()

javaScript의 window.onload와 같은 개념의 메서드

$("태그");

element 생성

javaScript의 document.createElement와 같다

const btn = $("<button>생성버튼</button>");

jQuery Traversing

객체 탐색 (순회)

선택자로 선택된 요소들 중 특정 요소만 선택하기 위해 한 번 더 필터링하는 작업

filtering

선택된 요소 중 직접 필터링 : 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)

ancestors

선택된 요소의 상위 요소들을 선택할 수 있는 메서드 : 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("인자 ") : 선택된 요소부터 인자 요소까지, 해당 범위에 포함되는 사이 요소 리턴

descendants

선택된 요소의 하위 요소를 선택할 수 있는 메서드 : children, find

.children() : 모든 직계 자식

.children("인자 ") : 직계 자식 중 매개변수의 선택자에 해당되는 요소

.find("인자 ") : 모든 후손 요소 중 인자로 전달한 요소를 찾아 리턴

sideways

선택된 요소들과 같은 레벨 (동위/형제) : siblings, next, prev

.siblings() : 선택된 요소를 제외한 모든 형제 요소

.siblings("인자" ) : 형제 관계에 있는 요소 중 매개변수에 해당하는 요소만

.next() : 선택된 요소의 바로 다음 요소

.nextAll() : 해당 요소 다음으로 오는 모든 형제 요소

.prev() : 선택된 요소의 바로 직전 요소

.prevAll() : 선택된 요소의 형제들 중 이전에 있는 모든 요소

.prevAll("인자 ") : 선택된 요소의 형제들 중 이전에 있으면서, 매개변수 선택자에 해당하는 요소만

객체 조작

1. 객체 조작을 위한 순회문

$.each()

객체나 배열의 요소를 검사하는 메서드

javaScript의 foreach

주의사항

1. 매개변수 순서 ( index , item ) == index 생략 불가
2. each의 item은 dom객체 즉, javascript 메서드를 사용해야 한다
3. dom객체를 jQuery로 사용하고 싶다면, $(item) < 달러로 감싸주어야 한다

$.each(배열이름,function(index,item){})

2. 객체 클래스 조작

$.addClass()

선택된 요소에 클래스를 추가하는 메서드

divs.eq(0).addClass("bg-yellow");
divs.eq(1).addClass("t-red").addClass("bg-yellow");
divs.last().addClass("t-red bg-yellow");

$.removeClass()

선택된 요소에 클래스를 삭제하는 메서드

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" 공백으로 넣게 되면 문자열 그대로가 아닌 각각의 클래스로 들어감

$.hasClass()

선택된 요소에 해당 클래스가 있는지 없는지 확인하는 메서드 (true | false)

if(divs.eq(2).hasClass("t-red")){	// if의 조건문으로 활용가능
        divs.eq(2).removeClass("t-red");
    }else{
        divs.eq(2).addClass("t-red");
}

$.toggleClass()

선택한 요소에 클래스가 있으면 삭제, 없으면 추가 하는 메서드

divs.eq(3).toggleClass("t-red");
// hasClass로 if문을 만들어 사용하는 것과 같은 결과
// divs.eq(3)에 t-red 클래스가 있으면 삭제하고, 없으면 추가한다

3. 객체 속성 조작

$.attr()

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);
	});

$.removeAttr()

속성을 삭제하는 메서드

$.prop()

true, false로 값을 조절하는 속성은 prop로 조절할 수 있다 (checked, required, readonly 등)

$.removeProp()

prop로 속성을 삭제하는 메서드

4. 객체 css 조작

.css()

선택된 요소의 css속성값을 가져오거나 설정하는 메서드

1. css.(매개변수1) : 매개변수를 1개만 작성하면 속성 값을 가져온다 = getAttribute

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 값으로 가져옴
}

1. 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 조작

$.html()

선택된 요소의 content영역 (innerHTML)을 가져오거나 수정

컨텐츠 영역에 태그가 있다면 태그까지 가져온다

// document.createElement = $("");

// document.textNode = $("text");

$.text()

선택된 요소의 content영역 (innerText)을 가져오거나 수정

컨텐츠 영역에 태그가 있다면 태그는 가져오지 않는다

$.val()

선택된 요소의 value를 가져오거나 수정

input처럼 내부 text를 갖지 않는 태그의 값을 가져올 때 사용

6. 생성된 객체 추가 / 이동

부모객체.append(객체)

부모객체의 마지막 자식으로 객체 추가

= 객체.appendTo(부모객체)