jquery는 예전에는 많이 사용했던 라이브러리 입니다.
그렇다고 지금 사용하지 않는다는 건 아니니 배워서 나쁠 것은 없지만,
jquery를 통해 javascript를 같이 학습하는 것이 가장 좋아보입니다.
요즘은 주로 가상 dom을 사용하는 vue, react를 주로 사용한다고 합니다.
jquery 연동하기
다운로드 방식 대신, CDN으로 연동할 생각입니다.
방법을 모르는 사람은 아래 글을 참고할 수 있습니다.
2022.12.23 - [IT/javascript] - 4. javascript 외부 스크립트 연결하기, css 외부 연결하기
4. javascript 외부 스크립트 연결하기, css 외부 연결하기
css 파일은 link 태그를 사용해 외부파일을 연결했다면, js 파일은 script 태그로 연결해서 사용할 수 있다. ex) bootstrap5 CDN 이렇게 디렉토리 경로 뿐만 아니라 웹 주소로도 파일을 받아올 수 있다. 우
mahongro1101.tistory.com
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js" integrity="sha512-nO7wgHUoWPYGCNriyGzcFwPSF+bPDOR+NvtOYy2wMcWkrnCNPKBcFEkU80XIN14UVja0Gdnff9EmydyLlOL7mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>jquery 공식 사이트에서 가져온 CDN 주소입니다. 그대로 html 파일 head 태그 사이에 붙여넣어주면 됩니다.
CSS와 JS 차이
CSS는 기본적으로 정적 스타일입니다. 그래서 가상 클래스를 통해서 제한적으로 동적 스타일을 만들 수 있습니다.
하지만 JS를 사용하면 자유롭게 원하는 요소에 동적 스타일을 적용할 수 있습니다.
hello jquery
jquery가 잘 작동하는지 간단한 스크립트를 작성하고 끝내겠습니다.
<script>
$(function(){
$("h1").text("hello jquery");
});
</script>
</head>
<body>
<h1></h1>
</body>제이쿼리 객체에 함수를 전달해 document 객체가 생성된 이후 jquery가 실행되도록 합니다.
끝으로
jquery는 DOM를 다루는 자바스크립트 라이브러리로 다양한 선택자를 제공합니다.
CSS에서 제공하는 선택자들도 있고 jquery만 갖고 있는 선택자들도 있습니다.
다음글에선 선택자에 대해 정리하겠습니다.
'WEB > HTML CSS JS' 카테고리의 다른 글
| 3. jquery DOM maniputlation 객체 조작 메서드(속성, 수치, 편집) (0) | 2022.12.29 |
|---|---|
| 2. jquery selectors 여러가지 선택자들(기본, 탐색) (0) | 2022.12.28 |
| 7. javascript 함수, 재귀 함수, 내장 함수 정리 (0) | 2022.12.26 |
| 6. javascript 브라우저 객체(Browser Object) 정리 (0) | 2022.12.25 |
| 5. javascript 내장 객체(Built-in Object) 정리 (0) | 2022.12.24 |
