Day 7 - JQUERY 사용하기(1) :: 아는 것의 미학 🌼

Day 7 - JQUERY 사용하기(1)

🐱‍👤지식닌자 2022. 10. 20. 16:31

2022. 10. 20. 16:31

728x90

자바스크립트로 HTML을 구현하는 것은 생각보다 매우 까다롭다. 그러므로 요소들을 수정 및 추가할 때 작업을 편리하게 해주는 라이브러리인 JQUERY를 사용하자.
→ 타이핑을 줄여줌, 브라우저 상관 없이 사용 가능

HTML <head> 또는 <body> 안에 제이쿼리 CDN 주소 복사, 붙여넣기

https://releases.jquery.com 에서 복사할 수 있다.

*minified 버전(개발할 땐 디버깅을 위해 uncompressed 버전을 쓰기도 한다고 함)

<body>

$(document).ready(function(){

명령문 작성;

;);

$ = Jquery의 상징

$(document).ready() 함수는 렌더링이 바로 실행되는 함수. 페이지 로드가 끝난 후 script문을 실행한다.

→ document는 자바스크립트가 미리 만들어 놓은 객체로, HTML 페이지에 접근하게 한다.

● 요소 불러오기 $('선택자') ex. $('h1')

$(document).ready(function(){

let $pElements = $("h1")

;);

*변수명 앞에 $를 붙여주는 이유는? JQUERY 객체임을 명시하기 위해. 자바스크립트 객체와 혼동 방지

● 선택자 - 자손, 자식

<body>

<div>

<div>

</div>

명령문 작성

</script>

</body>

→ <script> 하위 명령문 작성 부분에 다음과 같이 쓴다.

let $gChild = $("div p"); --> 모든 p를 불러온다.

let $child = $("div > p"); --> div의 자식인 p만 불러온다.

●요소 콘텐츠 출력하기

let $childElement = $("div > p");

console.log(childElement.html()) --> child.html() 안에 비워 놓는다.

●요소 콘텐츠 변경하기

let $childElement = $("div > p");

childElement.html("Hello guest") --> child 요소(텍스트: 자식)를 (텍스트: Hello guest)로 변경

●요소 콘텐츠 삭제하기, 요소 삭제하기

let $childElement = $("div > p");

childElement.empty(); --> 콘텐츠를 비운다. 요소<p>는 남아있음.

childElement.remove() --> 요소 자체를 아예 삭제한다.

●요소 추가하기

let $childElement = $("div > p");

childElement.append("<p>Nice to meet you<p>");

●요소 생성하기

let newElement = $("<div class="parent">부모</div>");

--------> 새로운 클래스 선택자 parent가 생성되고, 안에 "부모"가 추가됨

위의 내용에 이어 JQUERY로 CSS 설정하는 법과 CSS 값 읽어오는 법을 알아보자.

JQUERY로 CSS 설정하는 법

let $childElement = $("div > p");

childElement.css("color", "green"); ---> 바꾸고 싶은 속성("값")

childElement.css({ ------> 여러개를 바꿀 땐 객체 형식으로

"background-color": "pink",

"font-size" 20px"

});

CSS 값 읽어오는 법

let $childElement = $("div > p");

console.log(childElement.css("color"));

console.log(childElement.css(["color", "font-size"]));

});

찾기, 검색

■부모를 중심으로 자식 요소 찾기 - children()

<body>

<div>

</div>

명령문 작성

</script>

</body>

명령문 작성:

let h1 = $('.fruits').children('h1') ----> 부모 클래스 fruits를 중심으로 h1인 자식 요소 찾기.

alert(h1.html()) -----> 오렌지 알림이 뜬다

</script>

■자식을 통해서 부모 요소 찾기 - parent()

<body>

<div class="fruits"> 과일

<div>

</div>

명령문 작성

</script>

</body>

명령문 작성:

let h1 = $('h1')

let $fruits = h1.parent() -------> 자식 요소 h1을 중심으로 부모 요소 찾기

alert(fruits.html())

■자손 요소 찾기 - find()

<body>

<div class="fruits"> 과일

<div>

</div>

명령문 작성

</script>

</body>

명령문 작성:

let $pElement = $('.fruits').find('p') ----->fruits의 자손 요소 찾기

alert(pElement,html())

■filter() 사용해서 선택자로 걸러내기

<body>

<div class="fruits"> 과일

<div>

</div>

명령문 작성

</script>

</body>

$('p').css('background-color', 'red') ------------>class sour포함 모든 p 부분 'background-color', 'red' 적용하고,

.filter('.sour')

.css('border', '10px solid black') ------------------------>class sour에만 테두리 두르기 'border', '10px solid black' 적용

■filter() 함수를 사용해서 걸러내기

<body>

<div class="fruits"> 과일

<div>

</div>

명령문 작성

</script>

</body>

명령문 작성:

$('p').css('background-color', 'red') ------->모든 p에 배경 빨간색 적용하고,

.filter(function(index){

return index % 2 == 0 ------->2로 나눠서 나머지가 0인 것에만 테두리 두르기 'border', '10px solid black' 적용하기

})

.css('border', '10px solid black')

■형제 찾기 - next()

body>

<div class="fruits"> 과일

</div>

명령문 작성

</script>

</body>

명령문 작성:

$('p').next().css('color','red') ------>p의 형제 요소에 적용된다. 과일 사과 달콤 새콤

</script>

</body>

■형제 찾기 - prev()

<body>

<div class="fruits"> 과일

</div>

명령문 작성

</script>

</body>

명령문 작성:

$('p').prev().css('color','red') ------>p의 이전 형제 요소에 적용된다. 과일 사과 달콤 새콤

</script>

</body>

■length - 길이

<body>

<div class="fruits"> 과일

</div>

명령문 작성

</script>

</body>

명령문 작성:

let len = $('p').length

alert(len) ------------> p 요소들의 길이 '3'이 출력된다

■index() - 형제들 중 몇 번째인지 출력하기

<body>

<div class="fruits"> 과일

</div>

명령문 작성

</script>

</body>

명령문 작성:

let index = $('.tan').index() --------------> let index = $('p').index('.tan') 이렇게 디테일하게 쓸 수도 있다

alert(index) ------------> '2'가 출력된다

■순회하기 each - 여러 개를 불러올 때 반복문처럼 쓸 수 있다

<body>

<div class="fruits"> 과일

</div>

명령문 작성

</script>

</body>

명령문 작성:

let p = $('p')

p.each(function(index, item){ ---> index에는 위치(숫자), item에 p가 들어가서 실행됨

$(item).css('color', 'red')

})

스타일, 애니메이션

■hide - 숨기기

$('p').hide()

■show - 보이기

$('p').show()

■크기 지정

$('p').width(120);

$('p').height(120);

■fadeIn - 서서히 나타나게 하기 - display: none 상태에서

<head>

<style>

p{ background-color: red;

width: 100px;

height: 100px;

display: none;

}

</style>

</head>

<body>

<div class="fruits"> 과일

$('p').fadeIn(1000) ----> 1000초 동안 서서히 나타나게 하기

</script>

■slideDown - 아래로 내려오게 하기

$('p').slideDown(1000)

■애니메이션 종료 후 추가 작업하기

$('p').slideDown(1000, function(){

alert('Animation complete')

})

■animate()- style을 바꾸고 싶을 때

$('p').animate({

width: 200,

height: 200,

opacity: 0.5

}, 1000, function(){

alert('animation complete')

})

속성과 값

■attr: html요소의 수정,추가 등의 작업을 편리하게 사용할 수 있는 라이브러리

알림 추가

let aElements = $("a");

alert(aElements.attr("href"));

링크 추가

$('a').attr('href', 'http://google.com');

$('a').attr({

'attr':'http:google.com',

'target':'_blank'

});

클래스 다루기

클래스 name 가져오기

let pClassName = $("p").attr('class')

alert(pClassName);

클래스 설정하기

$('p').addClass('testing');

클래스 삭제하기

$('p').removeClass('testing');

요소 추가 - append, appendTo, prepend, prependTo

$('div').append('<p>world</p>');

$('<p>Testing</p>).appendTo($('div'));

$('ul').prepend('<li>0</li>');

$('<li>-1</li>').prependTo($('ul));

이동 - insertBefore, before

$('.second').insertBefore($('.first'));

$('.second').before($('.first'))

이벤트

click

$('p').click(function(event){

alert(event.type)

});

resize

$(window).resize(function(event){

alert($(window).width());

})

기타

mouseenter(), mouseleave()

hover(): mouseenter와 mouseleave를 동시에 처리

focus(): input, textarea가 포커스를 얻었을 때

blur(): 포커스를잃었을때

●다양한 이벤트 종류들 https://developer.mozilla.org/en-US/docs/Web/Events

728x90

'MS AI School' 카테고리의 다른 글

DAY 11 - Azure 애저 Cognitive Service (0)	2022.11.01
GitHub 튜토리얼. 깃허브 사용법 (0)	2022.10.21
DAY 6 - JAVASCRIPT 자바스크립트 이벤트 다루기(click, resize) (0)	2022.10.13
DAY 5 - 자바스크립트 기초(데이터 유형, 함수, HTML에서 작성하기) (0)	2022.10.13
DAY 4 - CSS 심화 공부(레이아웃, 반응형) (0)	2022.10.11

아는 것의 미학 🌼