jQuery

jQuery 다운로드기능자바스크립트 코드의 길이를 줄여준다다운로드 방법jQuery cdn 검색제일 최신 버전(가장 위에 있음)minified 클릭코드를 head tag 안에 복붙한다.버전 차이uncompressed원래 버전minified압축 버전, 용량이 적음slim라

jQuery $("")html을 js로 가져온다.위와 아래 코드는 의미가 같다.괄호안에는 css selector를 사용한다.

.html()해당 tag 안에 html tag 생성위와 아래 코드는 의미가 같다..text()안의 컨텐츠를 수정할 수 있다.위와 아래 코드는 의미가 같다.

.css()h1 tag가져오고 js로 css수정했음

.attr()해당 tag안의 속성을 수정하거나 추가할 수 있다.

.addClass()yellow class를 추가.removeClass()yellow class 제거

.on()자바스크립트 .addEventListener와 유사하다.

.hide().hide() 숨길 수 있다..show().show()숨겼던 것을 다시 보이게 한다.

.fadeIn() & .fadeOut() & .slideDown() & .slideUp() & .slideToggle() & .fadeToggle() & .toggle()숨겨놨던 것을 스무스하게 나타나게 한다.스무스하게 사라진다.스무스하게 아래로 나타난다.스무스하게 위

jQuery .val() input에 입력된 값 가져오기

form tag에서 제출할 때, 이벤트 만들기

form tag에서 제출 이벤트에서 특정 조건에서, 제출 막는 방법특정 조건에서 제출을 막도록 코드를 작성하였음핵심 : 이벤트 익명함수에 매개변수 e넣기e.preventDefault();

빈 값 체크하는 방법

jQuery .animate({}) 애니메이션 설정animate({ css설정 , css설정 })css설정을 여러 개를 쓸 때는 ,로 구분한다.작동 시간도 설정할 수 있음animate({ css설정 , css설정 },1000)1000 -> 1초반드시 {}괄호 밖에 시간

jQuery 함수 연결하기 스킬원리.show()실행되고 .animate({ marginLeft: "0px" })된다.

jQuery .hasClass() class가 있는지 없는지 확인.left-menu에 slide-right class가 있는지 확인있으면 동작문을 실행한다.

스크롤 이벤트html을 가져오는 것이 아니라, 따옴표 없이 window에 이벤트를 설정한다.

현재 스크롤 위치를 아는 방법맨 위에서 부터 얼마나 떨어져 있는지 알 수 있다.

jQuery는 중복된 html을 가져올 때, 모두 가져온다.button tag 3개 모두 가져온다.1개만 가지고 오려면제일 위의 버튼을 가지고 온다.

해당 class 갯수 세기의미 : 해당 class의 갯수

html에 데이터 넣어 사용하기data 넣기data 사용

동적 html 생성이유 : append(변수)를 이용하면, 화면에 변수의 초기값도 생성된다.첫번째 : 일단 html을 없앤다.두번째 : 원하는 부분에 html을 넣는다.

Ajax서버에 데이터를 요청해서 받아오는 것, 새로고침없이 받아온다.새로고침없이 GET/POST방식으로 데이터를 요청하기 때문에,GETURL에 정보를 담아서 요청한다.검색POST데이터를 다른 곳에 담아서 요청한다로그인jQuery 코드이다.$.ajax().done()버튼

ajax 데이터 받아와서 화면에 표시하기js의 object형태와 비슷데이터가 자바스크립트의 객체 형태로 저장되어있다.데이터를 e.model 객체 형태로 써야 한다.

json 데이터데이터를 저장하는 방법중 하나이다.파일명 vsc에서는 이름뒤에 .json을 붙여라문법특징이름은 반드시 "" 쌍따옴표안에 작성해야한다.데이터 사용하기jQueryurl에 주소를 복붙하거나, 파일명.json 둘중 하나를 사용하면 된다.