Jquery

Jquery 기본문법을 알아봐요!

martinooo 2021. 7. 20. 11:24
728x170

현재 시점에서 가장 많은 사람들이 사용하는 javascript 라이브러리 Jquery 입니다.
javascript비해서 jqeury 쉬운코드로 강력한 기능을 만들수 있기 때문입니다.
그래서 유지보수나 가독성이 뛰어난 효과를 볼수있습니다.

기본적인 문법을 알아봐요! 
저는 기본적으로 Jquery CDN 사용합니다! 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

실무에서는 주로 Jquery 파일을 다운로드 받아서 프로젝트에 삽입해서 사용하는 경우가 많습니다.

이것을 다운받아서 사용하면 됩니다
Download the compressed, production jQuery 버전 
이것을 클릭하면 jquery 압축된 코드를 볼수있습니다. ctrl + s 로 파일저장
이파일을 저장해서 사용하면됩니다 **프로젝트에서는 이파일을 많이 씁니다.

 

vs코드를 켜고 가장 기본적인 코드를 작성해봐요 

 

기본코드를 작성하고 결과값을 보면 
boommmmmmmm

 

여기서 $(document).ready(function(){

     이코드는 문서를 다읽고 스크립트를 실행한다는 뜻입니다!

});

 

그리고 이번에는 기본적인 click 이벤트와 class & id 선택자를 css를 주는 코드를 작성해보아요!

이걸 작성하고

class 선택자는 . 사용을하고 

id 선택자는 # 사용합니다

css('' , '') 이런 형태로 css 줄수있으면 다시 이어서 .css 메소드를 활용할수있습니다 이렇게 연속적으로 메소드를 호출할수있습니다 이런형태를 changing 이라고 합니다

button 를 추가하고

button 을 클릭하면 저런 변화를 일이키는 코드입니다!

브라우저를 키고 
execute 클릭하면 결과물이 booommmmm

Jquery 기본적인 문법을 공부해봤습니다!!

그리드형

'Jquery' 카테고리의 다른 글

요즘 많이 쓰이는 gnb floating 을 만들어봐요  (7) 2021.08.04
오늘은 floating 만들어봐요!  (10) 2021.07.23
오늘은 go-Top 만들어봐요  (10) 2021.07.22
오늘은 Tab-Menu 만들어 봐요!  (10) 2021.07.21