jQuery 기초

liim·2023년 2월 27일
0

제이쿼리(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!
ifelsehasClass 는 같이 자주 사용된다.

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
profile
Web Publisher

0개의 댓글