728x90
※ 공부를 위한 정리 ※
1. jQuery란
자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리
참고: https://ko.wikipedia.org/wiki/JQuery
2. CDN 호스트 사용하기
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous">
</script>이는 온라인 상의 파일을 사용하기 위한 것으로 <head>와 </head> 태그 사이에 위의 코드를 삽입한다.
src에 있는 url에 slim이 포함되어있고 integrity 속성이 포함되어 있을 때도 있는데 본인같은 경우 실행이 되지 않아 삭제했다.
※ crossorigin 속성이 궁금해서 찾아봤는데 보안과 관련된 것같다.(참고 : https://taegon.kim/archives/6804) ※
3. 기본 형태
$(선택자).동작함수();4. 자주 사용하는 jQuery
- input 박스 값 가져오기
// id가 id인 input 박스에서 가져온 내용을 content에 저장
let content = $('#id').val();
// id가 id인 input 박스의 내용을 new content로 바꾼다.
$('#id').val("new content");- 내용을 보여주거나 숨기기
// id가 id인 내용을 숨긴다.
$('#id').hide();
// id가 id인 내용을 보여준다.
$('#id').show();내용을 보여주거나 숨길때 CSS의 display 속성이 block 이나 none으로 바뀐다.
즉, hide()할 경우 display=none / show()할 경우 display=block 으로 설정된다.
이때 주의할 점은 hide() 즉, 숨긴 내용에 관한 것에 대해 어떠한 접근을 할 수 없다.
- CSS 속성 값 가져오기
// id가 id인 속성 값 current에 저장
let current = $('#id').css('속성');- 태그 내 텍스트 가져오기
// id가 id인 태그 사이에 있는 텍스트를 content에 저장
// 예시) <button id="id">버튼입니다.</button>
// 위의 경우 content에 "버튼입니다."가 들어간다.
let content = $('#id').text();
// id가 id인 태그 사이에 있는 텍스트를 new content로 변경
$('#id').text('new content');- 태그 내 html 입력하기
// id가 id인 태그 속에 새로운 요소를 추가한다.
// `백틱(가장 왼쪽 위에 있는 키로 맥의 경우 (option + ₩)로 입력)사용!
$('#id').append(`추가 텍스트`);` 백틱을 사용하는 이유 `
1. 백틱으로 감싸진 문자열에는 띄어쓰기나 tab과 같은 정보도 입력되고
2. ${val}와 같은 형식으로 문자열 중간에 변수값을 넣어줄 수 있다.
즉, html 코드를 삽입하기 위해 사용
- 페이지 로딩 후 바로 시작하기
$(document).ready(function(){
실행할 내용
});
728x90
'Language > Javascript' 카테고리의 다른 글
| [NestJS] MongoDB와 연결하기 (0) | 2023.07.12 |
|---|---|
| [Javascript] Ajax 기본 정리 (0) | 2023.02.14 |
| [Javascript] 자바스크립트 기본 문법 정리 (0) | 2023.02.13 |
