제이쿼리란?
- HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리를 말한다.
1. 제이쿼리 사용방법
https://releases.jquery.com/ 로 들어가 jQuery Core 3.6.3에 minified를 클릭 한 후 주소만 복사한다. (버전은 상관없지만 모든 과제에 3.6.3버전을 쓸 예정이다.)
<body>
<!-- 내용 -->
<!-- 스크립트는 최하단에 넣는 것이 좋음 -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</body>2. $(), $(function(){}), e.preventDefault()
- $()을 사용할 때는 무조건 최하단에 작성해야한다. -> 위에서 아래로 내용을 읽기 때문.
- $(function(){})을 사용하면 어디에든 사용이 가능하다.
- a태그에 이벤트를 줄 때는 꼭 e.preventDefault()를 써줘야 이벤트가 적용된다.
$(function(e){
e.preventDefault();
<!-- 이벤트 내용 적기 -->
})3. hide() & show() / fadeIn() & fadeOut()
hide(): display:none으로 처리되어 화면에서 안 보이게 된다.
show(): display:none이 사라지며 다시 화면에 보이게 된다.
fadeIn(): 실행시 숨겨진 요소를 나타나게 한다.
fadeOut(): 실행시 요소를 사라지게 한다.
4. console.log(), alert()
오류가 있는지 없는지를 확인할 때 많이 사용한다.
- console.log(): 개발자 모드에 있는 콘솔창에서 확인할 수 있다.
- alert(): 경고창같은 화면으로 뜬다. -> 실무에서는 콘솔을 많이 사용하고 alert은 거의 사용되지 않는다.
<!-- 하나로 묶어주면 좀 더 쉽게 사용할 수 있다. -->
name = $('.name').text('name');
console.log(name);
alert(name);5. text(), html()
text()와 html()은 문자를 넣을 수 있다는 공통점이 있지만 차이점으로는 html()은 태그까지 사용할 수 있다.
$('.name').text('이름');
$('.name').html('<h1>이름</h1>');6. css()
- css요소를 한 가지만 쓸 경우
$('.name').css('color', '#f00');- css요소를 두 가지 이상 쓸 경우
<!-- {}를 넣어서 묶어주면 됨. -->
$('.name').css({color: 'f00',background: '#000'});7. animate()
animate() 메소드는 요소를 움직이거나 변화를 줄 때 사용한다.
<!-- 3초안에 넓이 200px로 넓혀지라는 의미 -->
$('.name').animate({width: 200}, 3000);
<!-- 1초안에 넓이 200px 높이 200px로 움직이는게 끝나면 alert을 실행하라는 뜻
-> 여기서 function은 콜백함수를 의미한다. -->
$('.name').animate({width:200,height:200},1000,function(){alert('1'})
8. addClass(), removeClass(), hasClass()
- addClass(): 클래스명을 추가할 때 사용
- removeClass(): 클래스명을 제거할 때 사용
- hasClass(): 선택한 요소에 클래스가 있는지를 확인하고 불린으로 반환한다.
9. if else
<!-- 조건1이 참일 경우 상태1이 실행되고
조건1이 참이 아닐경우 상태2가 실행된다. -->
if(조건1) {
상태1
}
else {
상태2
}
10. 연산자
💚 대입연산자
- 연산된 데이터를 변수에 저장할 때 사용한다.
💚 비교연산자
-
두 데이터를 '크다, 작다, 같다'와 같이 비교할 때 사용하는 연산자로 결과는 불린형으로 반환된다. (ex) ==, ===, >, <, >= 등)
-
==와 ===의 차이점
5=="5" -> true -> 데이터형까지 반영하지 않는다.
5==="5" -> false -> 데이터형까지 같아야지 true다.
💚 논리연산자(&&, ||, !)
- && (and연산자): 둘 다 모두 true여야지만 true다.
- || (or연산자): 둘 중 하나만 true이면 true다.
- ! (부정연산자): 결과값이 true면 false이고 결과값이 false이면 true다.
11. 숫자, 문자, 배열, 변수
- 숫자: 1, 123, 12
- 문자: "안녕하세요"
- 배열: 동물 = ['사자', '토끼', '기린']
- 배열에서 배열 수를 알고 싶을 때는 동물.length를 사용하면 된다.
- 변수: 아무것도 들어가지 않음.
- 객체
블랙핑크 = {
성별: "여성",
멤버:["지수", "제니", "로제", "리사"],
엠버서더 유무: true,
}12. width(), innerWidth(), outerWidth()
- width(): box클래스의 가로크기 값을 가져온다. -> 순수한 값을 가져오는 것이기 때문에 실제의 값을 가져오지는 못한다.
- innerWidth(): box클래스의 border를 제외한 가로크기 값을 가져온다. -> border값을 제외하고 padding 값을 포함한 결과
- outerWidth(): box 클래스의 border,padding값까지의 가로크기 값을 가져온다.
13. var, let, const
- var: 동일한 이름으로 여러 번 선언이 가능하다. (2015년 이전인 es5에서 사용됨)
- let: var와는 다르게 중복 선언은 불가능하지만 재할당(name = 'name')은 가능하다.(2016년 이후인 es6에서부터 사용됨)
- const: 한번만 선언이 가능하며 재할당도 불가능하다.
14. val()
- text나, input값을 가져올 때 사용한다.
$('.submit').click(function(){
keyword = $('.text').val();
if (keyword){
html = `<li>
<span class="work">${keyword}</span>
<button class="end">끝낸일</button>
<button class="del">삭제</button>
</li>`;
$('.list1').append(html)
}
$('.text').val('').focus();
})15. prepend(), append()
- prepend(): 선택한 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다. -> ::before와 비슷함
- append(): 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다. -> ::after와 비슷함
웹퍼블리셔를 꿈꾸고 있습니다✨