🍵 제이쿼리
자바스크립트 기반 라이브러리 언어. 라이브러리 언어란 자바스크립트로 만들어진 함수의 집합이다. 제이쿼리는 기존 자바스크립트의 브라우저 호환성 문제를 해결한 언어로 문서객체 호환성을 높인 언어이다. 편리하게 애니메이션을 구현할 수 있다.
제이쿼리 파일을 연결해야 쓸 수 있으며
https://cdnjs.com/libraries/jquery/1.12.4 사이트에서 압축파일을 다운받거나 cdn방식으로 연결해 사용한다.
옛날 버전의 라이브러리를 연동했다면 호환성 파일인 https://cdnjs.com/libraries/jquery-migrate 미그레이트 파일을 연결하는 것이 좋다.
<!-- cdn으로 제이쿼리 연결 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 다운받은 제이쿼리 연결 -->
<script src="./js/jquery.min.js"></script>파일 연결 순서
1. 제이쿼리 파일 연결
2. 미그레이트 파일 연결
3. 내가 사용할 js파일 연결
제이쿼리는 html처럼 기본구조가 정해져있다.
기본구조를 쓴 후 안에 사용할 코드를 작성한다.
[기본형]
1. $(function(){
제이쿼리 코드;
});
2. $(document).ready(function(){
제이쿼리 코드;
})
🍵 제이쿼리 자주 쓰는 문법
-
선택 요소의 지정한 스타일 적용
$('선택자').css('css속성', '값'); -
선택한 요소의 속성 바꾸고 해당 속성이 없으면 추가
$('선택자').attr('속성명', '값');
<script>
$(function () {
$(".txt").css("color", "tomato").css("backgrond-color", "pink");
$("input").attr("type", "checkbox");
});
</script>🍵 메서드를 여러개 연결하는 체이닝 기법
하나의 태그에 여러 메서드를 연결할 때 사용한다.
태그를 불러와 여러 메서드를 줄줄이 이어쓰는 것이 체인과 같다.
[기본형]
$('요소').css('속성', '값').attr('속성', '값')
🍵 제이쿼리 선택자
자바스크립트처럼 querySelector나 getElement가 필요하지 않다. $("") 안에 css 선택자를 그대로 사용한다.
부모 요소 선택자
선택한 요소를 감싸고 있는 요소
[기본형]
$('요소').parent();
하위 요소 선택자
선택한 부모 안쪽에 있는 하위 요소를 선택할 때 사용한다.
css 후손 문법과 동일
[기본형]
$('부모요소 자식요소')
자식 요소 선택자
부모요소의 자손 요소 선택할 때 사용
css와 동일하게 사용하거나 메서드를 이용한다
[기본형]
1. $('부모요소 > 자손요소')
2. $('부모요소').children('자손요소')
- 선택한 요소를 기준으로 지정한 자식요소만 불러옴
3. $('부모요소').children()
- 선택한 요소를 기준으로 모든 자식 요소를 불러옴
형(prev) 동생(next) 선택자
형 요소 : 선택 요소 바로 위
동생 요소 : 선택 요소 바로 아래
[기본형]
1. $('요소').prev();
2. $('요소').next();
3. $('형 + 동생');
전체 형(prev) 동생(next) 선택자
선택 요소 기준으로 모든 형 or 동생 요소를 선택함
[기본형]
$('요소').prevAll();
$('요소').nextAll();
전체 형제 요소 선택자
[기본형]
$('요소').siblings();
범위 제한 형 동생 요소 선택자
선택 요소 기준으로 지정한 범위 내 전체 형/동생 요소 선택
[기본형]
$('요소').prevUntil('형 요소')
요소부터 입력한 형 '사이'의 형들. 입력한 요소와 형은 제외
$('요소').nextUntil('동생 요소')
요소부터 입력한 동생 '사이'의 동생들. 입력한 요소와 동생은 제외
상위 요소 선택자
선택 요소 기준으로 모든 상위 요소 or 특정 상위 요소 선택
[기본형]
$('자식요소').parents(); 선택 요소의 모든 상위 요소 선택. body, html 포함
$('자식요소').parents('부모요소'); 선택 요소의 특정 상위 요소 선택
가장 가까운 상위 요소 선택자
.parent와 동일한 기능
[기본형]
$('요소').closest('요소선택');
🍵 css 한번에 여러개 적용하는 메서드
css속성을 변수에 넣고 싶다면 자바스크립트 문법 그대로 변수를 생성해 객체를 참조시키고 css 메서드에 변수 전달할 수 있다.
[기본형]
1.
$('요소선택').css({
속성 : 값,
속성 : 값,
속성 : 값
})
2.
let 변수 = {
속성 : 값,
속성 : 값,
속성 : 값
};
$('요소 선택').css(변수)
