0706 5회차

💡 jQuery

 

0706

 

jQuery CDN

jQuery UI

<aside> ❓ Later

</aside>

• [x] 단축키
  • [x] 주석처리 command+/
  • [x] 줄선택 command+ shift
  • [x] 줄맨끝 command+ ←→
  • [x] 개발자도구 ctrl+alt+I
• [ ] 선택자 선택자
• [ ] 객체 개념
  • [ ] 클래스와 배열 https://goddino.tistory.com/198
• [ ] 제이쿼리 메소드 복습
• [ ] div-hover
• [ ] 실습2 ++ : 랜덤배경색상

JQuery

• 오픈소스 기반 JS 라이브러리
• JS → JQuery → VanilaJS

사용법

• 파일 다운
• jQuery CDN
• //CDN(Content Delivery Network) 

기초

$ : jQuery()함수의 축약 형태, 식별자 역할

$(선택자).동작함수();

🌟메소드

//값 가져오기 & 설정하기
var value = $(선택자).val();
$(선택자).**val**("설정할 값");

//Style
$(선택자).**css**("스타일요소","스타일값");

//속성
$(선택자).**attr**("속성","속성값");

//HTML
$(선택자).html("<h1>방가방가</h1>")
//innerText, innerHTML

요소 조작

//요소 추가 
$(선택자).append(요소);   //p.appendChild(요소)
$(선택자).prepend(요소);
$(선택자).before(요소);
$(선택자).after(요소);

//요소 삭제
$(선택자).remove(요소);  //선택한 요소만
$(선택자).empty(요소);   //하위 요소 전부

//요소 탐색
$(선택자).parent().함수();
$(선택자).next().함수();   //바로 다음 형제요소
$(선택자).children().함수();

클래스 조작

//클래스 추가
$(선택자).addClass("클래스명");

//클래스 삭제
$(선택자).removeClass("클래스명");

//클래스 유무 - return Boolean 
$(선택자).hasClass("클래스명");

//클래스 전환 - hasClass로 유무체크
$(선택자).switchClass("기존클래스","바뀐클래스",적용시간);

• jQuery UI

<script src="../jquery-ui-1.13.1.custom/jquery-ui.js"></script>
<link rel="stylesheet" href="../jquery-ui-1.13.1.custom/jquery-ui.css">