🦁_21.12.09 TIL

21년 12월 09일

📝 JQuery & Ajax

라이브러리

• 자주 사용하는 코드를 재사용 할 수 있는 형태로 가공하여 프로그래밍 효율을 높여주는 코드

📎 JQuery

• 경량의 자바스크립트 라이브러리
• JQuery를 이용하면 DOM과 이벤트에 관한 처리를 쉽게 구현할 수 있다.
• 또한, Ajax 응용 프로그램 및 플러그인도 JQuery를 활용하여 빠르게 개발할 수 있다.

📎 JQuery 선택자

Basic

• "*" : 모든 요소 선택
• "element" : 해당 태그 이름의 모든 요소 선택
• ".class" : 지정된 클래스의 모든 요소 선택
• "#id" : 지정된 아이디의 모든 요소 선택
• "selector1, selector2, selectorN" : 명시된 여러 요소 선택

Basic Filter

index는 음수도 가능

• :eq(index) : 선택된 요소들의 집합에서 해당 인덱스를 통해 선택
  => $("li").eq(3).css("color", "red" );

  jQuery 3.4 부터 :eq(index)를 사용하지 않고, .eq(index)를 사용하여 결과를 필터링

• :gt(index) : 선택된 집합에서 지정 인덱스보다 큰 인덱스를 가지는 태그 선택(greater than)
  => $("td:gt(4)").css("backgroundColor", "yellow");
• :lt(index) : 선택된 집합에서 지정 인덱스보다 작은 인덱스를 가지는 태그 선택(less than)
• :first : 선택된 요소 중 첫 번째 요소
• :last : 선택된 요소 중 마지막 요소
• :even : 선택된 요소 중 짝수 번째 요소
• :odd : 선택된 요소 중 홀수 번째 요소
• :not() : 선택된 요소 중 현재 선택한 요소의 반대 요소
  => $( "input:not(:checked) + span" ).css( "background-color", "yellow" );

Attribute

• [name="value"] : 속성 중 value와 일치하는 값 선택
• [name*="value"] : 속성 중 value가 포함되어 있는 요소 선택

Child Filter

• :first-child, :last-child : 첫 번째, 마지막 자식 요소 선택
• :nth-child(index) : index 번째에 있는 자식 요소 선택

Content Filter

• :contains() : 지정된 문자가 포함된 모든 요소 선택
  => $("div:contains('John')").css("text-decoration", "underline");
• empty : 선택된 집합 중 하위 요소가 없는 요소 선택
  => $("td:empty") .text("Was empty!") .css("background", "rgb(255,220,200)");
• has() : 선택된 집합의 일치하는 요소
  => $("div:has(p)").addClass("test");

📎 JQuery 실행 방법

• $("선택자") : 코드를 적용할 선택자
• hide() : hide()와 같이 실행했을 때 적용되는 코드 작성

📎 JQuery Attributes

• .val() : 선택한 폼 요소의 속성 값을 설정하거나 반환

// 선택한 요소의 속성 값을 가져옴
$("선택자").val();
// Get the value from the selected option in a dropdown
$( "select#foo option:checked" ).val();

// 선택산 요소의 속성 값을 변경
$("선택자").val("속성");
// 선택한 요소의 함수 설정
$("선택자").val("함수");

• .attr() : 선택한 요소의 속성 값 설정

// 선택한 요소의 속성 값을 가져옴
$("선택자").attr("속성 이름");
// 선택한 요소의 속성값을 변경
$("선택자").attr("속성 이름", "속성 값");
// 선택한 요소의 여러개의 속성 값을 변경
$("선택자").attr({"속성":"속성 값", "속성":"속성 값", .... });
// 선택한 요소의 콜백 함수 설정
$("선택자").attr("속성", 콜백함수);

• .addClass() : 선택한 요소에 클래스 추가
• .removeClass() : 선택한 요소에 클래스 삭제
• .toggleClass() : 선택한 요소에 클래스 추가 또는 삭제
• .hasClass() : 선택한 요소에 클래스가 있는지 확인

// 선택한 요소에 클래스 추가
// 클래스 이름을 여러 개 추가할 수도 있음
$("선택자").addClass("클래스이름");

// 선택한 요소의 클래스 삭제
// 클래스 이름을 설정하지 않으면 모든 클래스 삭제
$("선택자").removeClass("클래스이름");

// 선택한 요소에 클래스 추가 또는 삭제
$("선택자").toggleClass("클래스이름");

// 선택한 요소에 클래스가 있는지 확인
$("선택자").hasClass("클래스이름");

• .css() : 선택한 요소에 CSS 속성 값 설정

// 선택한 요소의 속성 값 가져옴
$("선택자").css("속성");
// 선택한 요소에 여러가지 속성 값을 설정
$("선택자").css(["속성","속성",...]);
// 선택한 요소의 속성 값 변경              
$("선택자").css("속성","속성값");
// 선택한 요소에 함수를 이용하여 속성 값을 설정
$("선택자").css("속성",함수);

📎 JQuery Traversing

• .children() : 선택한 요소의 바로 아래 자식 요소만 선택

$("선택자").children();
// 선택한 요소의 바로 아래 자식 요소 중 선택자를 통해 선택
$("선택자").children("선택자");

• .parent() : 선택한 요소의 부모 요소만를 선택
• .parents() : 선택한 요소의 모든 부모 요소를 선택

$("선택자").parent();
$("선택자").parent("선택자");

$("선택자").parents();
$("선택자").parents("선택자");

• .siblings() : 선택한 요소를 제외한 형제 요소를 모두 선택

$("선택자").siblings();
$("선택자").siblings("선택자");

참고링크

• jQuery API Documentation
• jQuery - WEBSTORYBOY

---

마무리

• 점심시간에 잠을 좀 잤는데 오랜만에 꿈을 꾸었다
  => 꿈에서도 카페에서 멋사 교육 듣고 있었는데 너무 웃갸아아아아
• 왜 제이쿼리하다가 정신을 놓아버려가지고..
  => 혼란하다 혼란해