[FE] jQuery 기초

jQuery Tutorial

 

- HTML/DOM manipulation

- CSS manipulation

- HTML event methods

- Effects and animations

- AJAX (비동기 처리)

- Utilities

 

기본 사용 설정: CDN 불러온 후 script 태그 안에 코드 작성

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    // jQuery 내용 작성
  });
</script>

// 혹은 이렇게
<script type="text/javascript">
  $(function () {
    // jQuery 내용 작성
  });
</script>

 

 

CSS 설정: .css() 함수 사용

 

색상 변경

// 전체 색상 변경
$("*").css("color", "red");​

 

 

폰트 변경

// li태그만 폰트 변경
$("li").css("font-family", "궁서체");
// jQuery: font-family, fontFamily 모두 사용 가능

 

여러 속성 한 번에: 메소드 체인

$("h3, h4")
  .css("border", "solid red 5px")
  .css("color", "white")
  .css("background-color", "orange");
  
  
$("h3").css({
  border: "solid red 5px",
  color: "skyblue",
  backgroundColor: "orange",
});

 

선택자: 태그, id, 클래스 모두 사용 가능

$("#tag").css("textDecoration", "underline");
$(".div").css({
  border: "blue double 3px",
});

 

필터 사용한 선택자

$("div ol li:eq(0)").css("color", "red"); // equal
$("div ol li:lt(2)").css("color", "blue"); // 더 작은
$("div ol li:gt(2)").css("color", "orange"); // 더 큰
$("div ol li:odd").css("color", "yellow"); // 홀수 인덱스
$("div ol li:even").css("color", "white"); // 짝수 인덱스
$("div ol li:not(:first)").css("color", "white"); // 반대: 처음이 아닌 것

 

하나만

$("div>span").css({
  backgroundColor: "yellow",
});

 

모든 하위

$("div span").css({
  backgroundColor: "yellow",
});

 

속성 가진 것 모두

// type 속성을 가진 것 모두 (checkbox의 테두리는 border에 해당하지 않음)
$("[type]").css("border", "1px blue solid");

 

특정 속성 가진 것

// name이 name인 것에만
$("[name=name]").css({
  color: "red",
  backgroundColor: "pink",
  border: "dotted 3px blue",
});