jQuery 기본 설정

jQuery.com

기본적으로 google CDN script 링크를 html 에 삽입하여 사용하는걸 권장함.

첫줄은 항상 위와 같이 놓는다.

기본 예시

$("body")
.css({
	"background-color":"yellow",
	"fontSize" : "50px",
	})
		.on("click", function() {
})

기본적으로 쌍따옴표 "@" 로 모든 구문을 묶어주는걸 기본으로 하고,
모든 명령자는 .명령셋() 로써 소괄호로 이루어지고 소괄호 안에 아무것도 적지 않을 경우 값을 반환하고 적을경우 값을 적용한다.

$("선택객체")
.명령셋(명령어);

이런 구조를 가지고 있으며,
세미콜론을 찍지 않는다면,
.명령셋(명령어)
.명령셋(명령어)
.명령셋(명령어)
.명령셋(명령어);

의 구조로 가능하다.

모든 선택자는 $("@") 로 선택하고, 따로 변수지정필요 없음.
복수 단수의 개념이 없다.

기본 명령어셋

• $("@").find("특정태그") : 맨처음 $("@") 에서 경로지정하지 않고 다음명령으로 넘어간 상태라면 하위 태그를 찾는다면 무조건 find 로 찾아야 한다.
  ex : $(this).find("@"), $("@").eq(2).find("@")
• $("@").index() : 키값 추출, 소괄호 안에 텍스트 적으면 적용됨
• $("@").eq(0), @.eq(1), 각각 여러개의 객체일때 첫째 둘째 선택 css 의 nth-of-type() 와 같다.
• $("@").text(), : innerText 조정 명령어
• $("@").html() : 도큐먼트 조정 명령어
• $("@").attr("src") : getAttribute 의 약자로 객체 속성값을 지정하고 뒤 소괄호까지 포함해 src 값을 가져온다,
• $("@").attr("class", "abc") : getAttribute 의 약자로 객체 속성값을 지정하고 뒤까지 포함하여 클래스네임을 abc로 지정한다.
• $(this) : function 문 안에서 this 와 같다, function 안에서 쓰이는 $(@K), $(@V) 모두 이렇게 예외적으로 function 안에선 쌍따옴표를 제외시킨다.
• $("@").addClass() = 클래스네임 추가
• $("@").removeClass() = 클래스네임 제거
• $("@").toggleClass() = 클래스네임 토글
• $("@").show() = display: block; 과 같다. 반대는 .hide()
• $("@").each(function(K, V) {명령문}) : JS forEach 의 전신격인 명령어로, 반복문으로서 전혀 같은 기능으로서 작동하교, 순서가 조금 다른데, function 에서 도출되는 V 와 K 값이 JS 의 반대이다.

여러개의 객체를 function 시켰을 경우 $(this) 가 그냥 실행되는 객체이기에 forEach 가 된다.

• 애니메이션
  .stop() : 일단 애니메이션이 끝나면 정지시킨다.
  .slideToggle() : 개지랄병을해서 만드는 슬라이딩을 이글자 하나로 뿅
  .slideUp(), slideDown()
  .fadeIn(시간, easing, ), .fadeOut()

만약 스크롤링에서 숨겨놓은 상태로 시작하고 싶다면 태그에 display: none 을 먹여놓으면 된다.

Load

load 명령어를 통하여 html 파일을 단락으로 나누어 불러올 수 있게 만든다.

$(`body`).prepend(`<header></header>`);
$(`header`).load(`./inc.html nav`, function);

body 태그에 header 태그를 맨위에 종속생성시킨다 1줄째
header 태그에 같은 폴더에 만들어놓은 inc.html 안의 모든 내용물을 끌어온다 2줄째
load 이후 function 같은 경우 모든항목이 불러와 진 다음에 실행하게 되기 때문에, 항목이 불러와지지 않은 상태로 명령이 잘못실행되는것을 막아주는 역할을 함

• 옵셔널 체이닝

경로?.경로 || 0 : 경로 사이 따옴표 앞에 물은표로 ?. 옵셔널 체인징 연산자라고 부르며 이것을 놓았을 경우 ?. 뒤의 값이 없어 데이터 베이스 로드 오류가 생겼을 때에 그 값을 || 뒤에 적어놓은 값으로 대신 데이터 베이스에 넣어놓는다.
이 경우 경로.경로 = 0 이 될 것이다.