jQuery란?
html의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리(사용 전 import필수)
jQuery등장배경 : 자바스크립트 보완
자바스크립트의 문제점
1) 코드 복잡
2) 브라우저 간 호환성 문제 고려 - 불편
자바스크립트 코드
document.getElementById("element").style.display = "none";
제이쿼리 코드
$('#element').hide();
제이쿼리 import
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
jQuery Get Started Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google Downloading jQuery There are two versions of jQuer
www.w3schools.com
위의 링크에서 Google CDN부분을 복사
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>* 부트스트랩을 사용하는 경우, 이미 부트스트랩 import를 위해 붙여넣은 <script>태그에 제이쿼리 import코드가 있음
- 부트스트랩에서도 제이쿼리를 사용하고 있다는 의미!
- 부트스트랩을 사용하지 않는 프로젝트인 경우에는 따로 제이쿼리 import해주기
특정 id가 지칭하는 요소의 값을 가져오는 경우
$('#id명').val()
특정 id가 지칭하는 요소에 값을 넣는 경우
$('#id명').val('넣을값')
특정 id가 지칭하는 요소를 숨기는 경우
$('#id명').hide()
특정 id가 지칭하는 요소를 보이게하는 경우
$('#id명').show()
특정 id가 지칭하는 요소의 css속성값을 확인하는 경우 (width를 확인하고 싶을 때)
$('#id명').css('width')
특정 id가 지칭하는 요소의 css속성값을 변경하는 경우 (width를 변경하고 싶을 때)
$('#id명').css('width','700px')
특정 id가 지칭하는 요소의 텍스트를 변경하는 경우
$('#id명').text('바꿀텍스트')
.val() : input박스에만 사용
.text() : 고정된 텍스트에 사용
특정 id가 지칭하는 요소
let temp_html = `동적으로 넣고싶은 html태그 내용`
$('#들어갈 위치를 나타내는 id명').append(temp_html)
버튼 눌러서 요소 보이기/숨기기
function openclose() {
if ($('#postingbox').css('display') == 'none')
$('#postingbox').show()
else
$('#postingbox').hide()
}
이메일 검사하기
function q2() {
// 1. input-q2 값을 가져온다.
let email = $('#input-q2').val();
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
if (email.includes('@')) {
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서
// 4. alert(도메인 값);으로 띄우기
let domainWithDot = email.split('@')[1];
let onlyDomain = domainWithDot.split('.')[0];
alert(onlyDomain);
} else {
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
alert('이메일이 아닙니다.');
}
}
동적으로 요소 추가시키기
function q3() {
// 1. input-q3 값을 가져온다.
let newName = $('#input-q3').val();
if (newName == '') {
alert('이름을 입력하세요');
return;
}
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
let temp_html = `<li>${newName}</li>`;
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
$('#names-q3').append(temp_html);
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty();
}
'Web' 카테고리의 다른 글
| [CSS] 로딩화면 디자인 (0) | 2021.08.11 |
|---|---|
| 가비아서비스를 이용한 도메인 연결 (0) | 2021.06.30 |
| [Ajax] Ajax기초 (0) | 2021.06.26 |
| 스토리보드 제작 및 테이블 설계 (1) | 2021.06.24 |
| [css] 자주 쓰는 애들 메모 (2) | 2021.06.20 |
댓글