제이쿼리(jQuery)란?
제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리이다.
자바스크립트보다 사용이 쉽다.
👉 환경 구축
제이쿼리 쓸 수 있는 환경 만들기 = 제이쿼리 가져오기
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>.js 파일 불러오기
<script src="./name.js"></script>👉 선택하는 방법
$('')
'' 사이에 태그, 클래스/ID명, 변수 등을 작성한다.
$('body')
$('.class')
$('#id')
$(변수)👉 괄호의 뜻
( )
스크립트에서 괄호의 뜻은 "실행" 또는 "불러오기" 이다.
👉 연결하는 방법
$('').text()
. (점) 으로 연결하여 작성한다.
⭐️ 활용
$('.name').text('123456')해석 : name 이라는 이름을 가진 클래스의 > 텍스트를 123456 으로 변경해줘
👉 기초 문법
text
$().text('') //텍스트를 빈칸으로 비워주세요
$().text() //텍스트를 불러와주세요html
$().html('<h1>123456</h1>')❗️Tip!
text와 html의 차이
• text는 태그를 텍스트로 인식해 문자가 그대로 입력된다.
• html은 태그를 인식을 하여 태그의 기능을 살려 입력된다.
add / remove
$().add()
$().remove()• display: none; 이 아닌, 내용(태그) 자체를 삭제/추가해버린다.
hide / show
$().hide()
$().show()• hide : '내용을 숨기다' 라는 의미로 display: none; 이 들어간다.
• show : '내용을 보여주다' 라는 의미로 원래 속성을 살려준다.
ㄴ display: block (X) display: none; 을 삭제 (O)
fadeOut / fadeIn
$().fadeOut()
$().fadeIn()• opacity 가 들어가면서 서서히 사라지거나 나타난다.
css
$().css('color','#f00')
$().css({color:'#f00',background:'#00f'})❗️Tip!
여러개의 속성 사용 시
• css() 괄호 안에 {} 중괄호를 사용하여 , (콤마)로 여러 속성을 기재한다.
animate
$().animate()
=> $().animate({속성:값},속도,콜백)
//1초동안 위드200으로 바뀜
$().animate({width:200},1000)
//1초동안 위드 200%으로 만든 후 11경고창 뜸
$().animate({width:'200%'},1000,function(){
alert('123')
})$().animate({속성:값},속도,콜백)
• 콜백 : 뒤에서 실행함
• 1000 = 1초
• '200%' = %가 문자라 '' 따옴표 필수 ('' 없이 기재 시 밑줄이 뜬다)
addClass / removeClass
$().addClass()
$().removeClass()
//div class="name on" 으로 on 이 추가됨
$().addClass('on')hasClass
$().hasClass()
//on 이라는 클래스를 가지고 있나요?
$().hasClass('on') if
if(조건){
실행
}ifelse
if (condition) { //if = 만약에, () = 괄호에 기재한 내용이 참이면
// 여기에 적힌 내용을 실행
} else { //else = 그렇지 않으면
// 여기에 적힌 내용을 실행
}if (조건: 참=true) {
실행
} else {그렇지 않다면
실행
}❗️Tip!
• ifelse 와 hasClass 는 같이 자주 사용된다.
if ($('.name').hasClass('on')) { //.name에 온이 있습니까?
console.log('yes'); //있으면 yes가 나온다
} else {
console.log('no') //없으면 No가 나온다
}👉 스크립트 작성 방법
$(function(){})$(function(){ //로드 후 실행
$(function(){ 내용 }) // {} 중괄호 사이에서 엔터 쳐서 내용 기재
}) //스크립트 끝 부분, 지우면 절대 안됨스크립트는 위에서 아래로 읽기 때문에 위에서 쓰면 지나간 버스 붙잡는 격이라 실행되지 않는다.
❗️ 위 코드 처럼 펑션을 써야 스크립트를 내용 위에 기재해도 실행이 된다.
👉 확인 방법
alert();
console.log();제대로 기재 되었는지 확인하는 방법에는 2가지가 있는데,
alert 는 팝업(경고)창이 뜨기 때문에 console.log 을 사용하는 편이다.
// () 괄호 안에 작성
console.log($('.class').text());
//변수 사용으로 줄이는 방법
name = $('.class').text();
console.log( name );👉
문자
"안녕하세요"
따옴표 안에 작성한다.
숫자
1, 123, 9876
따옴표 안에 들어가지 않는다.
변수
a, title, 변수
따옴표에 들어가지 않으며, 한글도 가능하다.
❗️ x = 1; (가능) / x = 1,2; (불가능) => 여러가지를 담을 수 없다.
배열
동물 = ['사자', '호랑이', '치타'];
여러가지 변수를 담을 때 사용한다.
❗️ 사자는 0번, 호랑이는 1번, 치타는 2번 = 1이 아닌 0부터 시작한다 = 제로베이스
동물.length //변수의 갯수를 알려줌
console.log(동물[0]) //확인 시 이런 형식으로 작성객체
에스파 = {
성별: '여성',
멤버: ['카리나', '윈터', '닝닝', '지젤'],
문신유무: true
}
복잡한 변수를 만들 수 있다.
만약,
" 에스파의 성별이 여성이면서, 멤버의 수가 2명 이상이면서, 문신이 있다면 "
이라는 조건문을 작성한다면
(에스파.성별 === '여성' && 에스파.멤버.length >= 2 && 에스파.문신유무 === true)
or
(에스파.성별 === '여성' && 에스파.멤버.length >= 2 && 에스파.문신유무)→ 트루를 물어보는 것이기 때문에 "=== true" 생략 가능 (아래 조건문처럼)
기호
x = 1;
y = 2;
로 가정하였을 때
= (대입연산자)
x = 1;== (비교연산자)
x == y; → false=== (완벽한비교)
x = 1; (숫자)
y = "1"; (문자)
x == y; → true (숫자가 같아서)
x === y; → flase (숫자와 문자로 데이터 타입은 같지 않아서)> < >= <= (이상, 이하, 초과, 미만)
x <= y; → true&& (그리고)
x == y && x > y → false|| (또는)
x == y || x < y → true