라이브러리(library)란?
자주 사용하는 코드를 재활용, 유통하여 재사용할 수 있는 형태로 가공된 프로그래밍 효율을 높여주는
코드들이다. JavaScript 라이브러리에는 prototype, jQuery, YUI 등이 있다.
제이쿼리(jQuery)란 ?
- jQuery는 자바스크립트의 생산성을 10배 이상 향상 시켜주는 자바스크립트 라이브러리이다.
- html element를 제어하는것이 JS의 역할인데 그러려면 내가 제어하고자 하는 element를
선택해야 한다. 그 선택을 하기 쉽도록 혹은 한 번에 선택할 수 있도록 해주는 등 여러 방법을
제공 하는 것이 jQuery이다. - jQuery UI는 파생된 라이브러리를 가지고있다.
- jQuery UI는 jQuery 기반의 GUI 라이브러리이다. 이것을 이용해 윈도우 어플리케이션과 같은
기능성의 UI를 만들 수 있다. - jQuery Mobile도 있는데 이것은 모바일용 웹app을 만드는데 도움이 된다.
jQuery 사용 방법
- https://jquery.com/download/ 에서 jquery 소스코드를 다운로드 한다. 다운로드한 파일을
자바스크립트 파일에 넣는다. - 위 사이트에서 Google CDN을 찾은 후 링크를 src에 넣는다.
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 시작</title>
<!-- jQuery js 파일 다운로드 -->
<!-- <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script> -->
<!-- jQuery cdn -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>jQuery 시작</h2>
<p>
<ul id="list">
<li>셀렉터 표현식</li>
<li>DOM 탐색 메소드</li>
<li>DOM 검색 메소드</li>
<li>이벤터 메소드</li>
<li>이펙트 메소드</li>
<li>AJAX 메소드</li>
<li>기타 등등</li>
</ul>
</p>
<p>
<button type="button" onclick="imgSize()">이미지 크기 변경</button>
<button type="button" onclick="highLight()">리스트 선택</button>
<button type="button" onclick="addImg()">이미지 추가</button>
<button type="button" onclick="hideImg()">이미지 숨기기</button>
<button type="button" onclick="showImg()">이미지 보이기</button>
<button type="button" onclick="toggleImg()">이미지 토글</button>
</p>
<div>
<img alt="피카츄" src="./images/img02.jpg">
</div>
<script type="text/javascript" src="./js/jQuery01.js"></script>
</body>
</html>javascript 코드
// javascript 작성법
// => document.getElementById('id').style.color = 'red';
// jQuery 작성법 => $('css 선택자').메소드()
// => $('#id').css('color', 'red');
// javascript onload
// => window.onload = function() { }
// => onload = function() { }
// jQuery onload
// => $(document).ready(function() { });
// => $(function() { });
// 이미지 크기 변경
function imgSize() {
// javascript
// width만 지정하거나 height만 지정하면 지정하지 않은 부분은 비율을 계산해서 같이 변경된다.
// width와 height를 각각 지정하면 지정된 크기만큼 커지고 작아진다.
// document.getElementsByTagName('img')[0].style.width = '100px';
// document.getElementsByTagName('img')[0].style.height = '200px';
// $('img').css('width', '100px');
// $('img').css('height', '200px');
// 아래와 같이 1줄에 여러개의 스타일 속성을 지정할 수 있다.
// $('img').css('width', '100px').css('height', '200px');
// $('img').css({'width': '100px', 'height': '200px'});
$('img').css({'width': '100px', 'height': '200px'}).css('opacity', '0.5');
}
function highLight() {
// document.getElementById('list').style.backgroundColor = 'tomato';
// $('#list').css('backgroundColor', 'skyblue');
// $('#list').css('background-color', 'yellowgreen');
$('#list').css('background', 'pink');
// document.getElementsByTagName('li')[1].style.backgroundColor = 'chocolate';
$('#list > li').first().css('background-color', 'chocolate');
$('#list > li').last().css('background-color', 'tomato');
$('#list > li').eq(1).css('background-color', 'skyblue');
$('#list > li').slice(2, 5).css('background-color', 'yellowgreen');
}
function addImg() {
$('div').append('<img alt="샤미드" src="./images/img03.jpg">');
$('div').prepend('<img alt="이브이" src="./images/img01.jpg">');
$('div').before('<img alt="고라파덕" src="./images/img04.jpg">');
$('div').after('<img alt="이브이" src="./images/img05.jpg">');
}
function hideImg() {
// document.getElementsByTagName('img')[0].style.display = 'none';
// var imgs = document.getElementsByTagName('img');
// for (var i = 0; i < imgs.length; i++) {
// imgs[i].style.display = 'none';
// }
// $('img').css('display', 'none'); // img 전체
// $('img').first().css('display', 'none');
// $('img').first().hide();
// $('img').first().hide(5000);
// $('img').first().fadeOut(1000);
$('div').first().slideUp(1000);
}
function showImg() {
// document.getElementsByTagName('img')[0].style.display = 'block';
// $('img').first().show();
// $('img').first().fadeIn(1000);
$('div').first().slideDown(1000);
}
function toggleImg() {
// $('img').first().toggle();
// $('img').first().fadeToggle(1000);
$('div').first().slideToggle(1000);
}jQuery의 중요한 특징
- 중간에 html이라는 메서드가 끼어있어도 뒤에다 점을 붙여 css를 사용할 수 있다.
- jQuery가 제공하는 모든 메서드들은 그 메서드가 리턴될 때, 그 메서드가 제어했던 대상을 리턴해준다.
그렇기 때문에 꼬리에 꼬리를 물며 계속 뒤에 여러가지 메서드를 붙여넣을 수 있다. 사슬처럼 얽혀있다
고 해서 체인(chain)이라고 한다.
jQuery는 주어와 서술어로 구분되어 있다.
- 주어는 제어하는 대상 $로 시작해서 그 인자로 제어 대상을 전달한다. 거기에는 css 셀렉터로
해당되는 문자열이 들어올 수도 있다. - .을 찍고 method1()을 하게 되면 이 제어 대상의 method1()의 어떤 명령을 한꺼번에 내릴 수가 있다.
마치 코딩을 글 쓰듯이 한다고 보면 된다.
| jQuery 문법 | |
| $(제어대상) | .method1().method2() |
| 주어 | 서술어 |
필터링 메소드
- .first(): 선택된 요소 중 첫 번째 요소를 선택한다.
- .last(): 선택된 요소 중 마지막 요소를 선택한다.
- .eq(index): 선택된 요소 중 index 번째 요소를 선택한다.
- .slice(): 선택한 요소 중 전달받은 인덱스 범위에 해당하는 요소만 선택한다.
- .filter(): 선택된 요소 중 전달받은 선택자에 해당된거나, 함수 호출 결과가 참인 모든 요소를 선택한다.
- .not(): 선택된 요소 중 전달받은 선택자에 해당된거나, 함수 호출 결과가 거짓인 모든 요소를 선택한다.
- .has(): 선택된 요소 중 전달받은 선택자에 해당되는 요소의 모든 자손 요소를 선택한다.
- .is(): 선택된 요소 중 전달받은 선택자에 해당되는 요소가 하나라도 존재하면 true를 리턴한다.
- .map(): 선택한 요소 집합의 각 요소마다 콜백 함수를 실행하고 리턴값으로 구성된 객체를 리턴한다.
요소(Element)의 추가
선택된 요소의 내부에 추가
- .append(): 선택된 요소의 마지막에 추가한다.
- .prepend(): 선택된 요소의 첫 번째에 추가한다.
선택된 요소의 외부에 추가
- .before(): 선택된 요소의 앞에 추가한다.
- .after(): 선택된 요소의 뒤에 추가한다.
요소의 표시와 숨김
- .hide(): 선택한 요소의 css를 자동으로 조정해서 사라지게 한다.
- .show(): 선택한 요소의 css를 자동으로 조정해서 표시되게 한다.
- .toggle(): 선택한 요소의 css를 자동으로 조절해서 hide(), show() 메소드가 번갈아 적용된다.
hide(), show() 메소드의 인수로 시간(밀리초)을 설정하거나 "slow", "fast"와 같은 예약어를 전달해
속도를 설정할 수 있다.
페이드 효과
- .fadeIn(): 선택한 요소의 css 중 opacity 속성의 값을 높여가며 나타나게 한다.
- .fadeOut(): 선택한 요소의 css 중 opacity 속성의 값을 줄여가며 사리지게 한다.
- .fadeToggle(): fadeIn(), fadeOut() 메소드가 번갈아 적용된다.
fadeIn(), fadeOut() 메소드의 인수로 시간(밀리초)을 설정하거나 "slow", "fast"와 같은 예약어를 전달해
속도를 설정할 수 있다.
슬라이드 효과
- slideUp(): 선택한 요소의 css 중 height 속성의 값을 낮춰가며 사라지게 한다.
- slideDown(): 선택한 요소의 css 중 height 속성의 값을 높여가며 나타나게 한다.
- slideToggle(): slideUp(), slideDown() 메소드가 번갈아 적용된다.
slideUp(), slideDown() 메소드의 인수로 시간(밀리초)을 설정하거나 "slow", "fast"와 같은 예약어를
전달해 속도를 설정할 수 있다.
태그와 태그에 지정된 속성 및 속성값으로 요소 찾기
태그이름[속성이름]: 지정된 속성을 가지고 있는 모든 요소를 선택한다.
- 태그이름[속성이름=문자열]: 속성 값이 지정된 문자열과 일치하는 모든 요소를 선택한다. 완전일치
- 태그이름[속성이름~=문자열]: 지정된 문자열이 공백을 경계로 포함된 모든 요소를 선택한다. 단어포함
- 태그이름[속성이름*=문자열]: 지정된 문자열이 포함되는 모든 요소를 선택한다. 문장포함
- 태그이름[속성이름$=문자열]: 지정된 문자열로 끝나는 모든 요소를 선택한다.
- 태그이름[속성이름^=문자열]: 지정된 문자열로 시작하는 모든 요소를 선택한다.
- 태그이름[속성이름!=문자열]: 지정된 문자열과 같지 않은 모든 요소를 선택한다.
- 태그이름[속성이름|=문자열]: 지정된 문자열로 정확히 시작하거나 문자열-로 정확히 시작하는 모든 요소를 선택한다.
속성과 프로퍼티의 차이점
속성이란 html 요소가 추가적인 정보를 가지고 있는 이름과 값의 한 쌍을 말한다.
프로퍼티란 속성을 객체화 했을 때 html DOM 트리 내부에서의 값을 말한다.
<input type="checkbox" name="chk" checked="checked"/>
위의 <input> 태그 요소는 checked 라는 속성을 가지고 있으며 속성 값은 "checked" 이며 만약에 해당 체크 박스가
선택되었을 때 checked 속성의 프로퍼티는 "true" 이다.
속성과 프로퍼티 설정
- .attr(): 선택된 요소 집합의 첫 번째 요소로 지정된 속성 값을 리턴하거나 선택된 요소의 지정된 속성을 전달받은
값으로 설정한다. - .removeAttr(): 지정된 속성을 제거한다.
- .prop(): 선택된 요소 집합의 첫 번째 요소로 지정된 프로퍼티 값을 리턴하거나 선택된 요소의 지정된 프로퍼티를
전달받은 값으로 설정한다. - .removeProp(): 지정된 프로퍼티를 제거한다.
input 요소의 선택
- :button: type 속성이 'button'인 모든 요소를 선택한다.
- :checkbox: type 속성이 'checkbox'인 모든 요소를 선택한다.
- :file: type 속성이 'file'인 모든 요소를 선택한다.
- :image: type 속성이 'image'인 모든 요소를 선택한다.
- :password: type 속성이 'password'인 모든 요소를 선택한다.
- :radio: type 속성이 'radio'인 모든 요소를 선택한다.
- :reset: type 속성이 'reset'인 모든 요소를 선택한다.
- :submit: type 속성이 'submit'인 모든 요소를 선택한다.
- :text: type 속성이 'text'인 모든 요소를 선택한다.
- :checked: type 속성이 'checkbox' 또는 'radio'인 요소 중에서 체크된 모든 요소들를 선택한다.
- :selected: option 요소 중에서 선택된 모든 요소들를 선택한다.
- :focus: 현재 포커스를 가지고 있는 요소를 선택한다.
- :disabled: 비활성화 되어있는 모든 요소를 선택한다.
- :enabled: 활성화 되어있는 모든 요소를 선택한다.
예시
var text1 = $('input:text').eq(0);
console.log(text1.val());
var text2 = $('input:radio').eq(1);
console.log(radio.val());형제(sibling) 요소 탐색
- .siblings() : 선택된 요소의 형제 요소 중에서 지정한 선택자에 해당되는 모든 요소를 선택한다.
- .next() : 선택된 요소 바로 다음에 위치한 형제 요소 1개를 선택한다.
- .nextAll() : 선택된 요소 바로 다음에 위치한 형제 요소를 모두 선택한다.
- .nextUntil() : 선택된 요소 바로 다음에 위치한 형제 요소 중에서 지정한 선택자에 해당되는 요소
바로 이전까지의 요소를 모두 선택한다. - .prev() : 선택된 요소 바로 이전에 위치한 형제 요소 1개를 선택한다.
- .prevAll() : 선택된 요소 바로 이전에 위치한 형제 요소를 모두 선택한다.
- .prevUntil() : 선택된 요소 바로 이전에 위치한 형제 요소 중에서 지정한 선택자에 해당되는 요소
바로 다음까지의 요소를 모두 선택한다.
마우스 이벤트
- hover(): 자바스크립트의 mouseenter, mouseleave 이벤트를 하나의 이벤트로 연결하고 선택된 요소에서
mouseenter, mouseleave 이벤트가 발생되었을 때 설정한 함수를 실행한다.
mouseenter: 마우스가 선택된 요소 위로 올라오면서 발생되는 이벤트
mouseleave: 마우스가 선택된 요소에서 빠져나가면 발생되는 이벤트
hover(mouseenter 이벤트가 발생되면 실행할 함수, mouseleave 이벤트가 실행되면 실행할 함수)
태그 만들기
$('<태그>')는 태그를 만든다. 태그를 만들고 태그에 데이터를 두번째 {}로 묶어서 넣어준다.
jQuery에서 사용할 태그 변수는 앞에 '$'를 붙여서 만든다.
templete literals
템플릿 리터럴은 여러줄로 어우러진 문자열을 허용하는 문자열 리터럴이다.
내장된 표현식은 '${' 와 '}' 사이에 변수 이름을 입력하면 변수에 저장된 데이터가 템플릿 리터럴에 삽입된다.
템플릿 리터럴은 작은 따옴표가 아닌 그레이브 (')를 사용해서 만든다.
제이쿼리의 장점
- 웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있다.
- 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어나다.
- 워크, 애니메이션 등 다양한 기능을 제공한다.
- 메소드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원한다.
- 플러그인들이 웹상에 공개되어 있으며 플러그인을 직접 구현하거나 확장할 수 있다.
- 웹사이트(www.jquery.com)와 수많은 레퍼런스를 통해 쉽게 접근 가능하다.
JacaScript와 jQuery
css부분
JavaScript 코드
jQuery 코드
이렇게 30여줄을 단 4줄로 줄일 수 있다.
제이쿼리의 인기가 낮아지는 원인
웹 프론트엔드(Web Frontend) 영역에서 제이쿼리(jQuery)의 입지가 위태로워 보인다.
그동안 자바스크립트(JavaScript) 프레임워크와 라이브러리는 제이쿼리에 의존해왔다고 해도
과언이 아니나, 최근 들어 의존도 하락 추세가 확연해지고 있기 때문이다. 유명한 오픈소스
프론트엔드 프레임워크인 부트스트랩(Bootstrap)이 차기 버전(v5)부터 제이쿼리에 대한
의존성을 제거하겠다고 발표한 것도 이 같은 상황을 방증한다. 이에 더해 개발자들 또한
제이쿼리가 더 이상 필요하지 않다는 의견을 내놓고 있는 실정이다.
자료 출처 : https://shuchong.tistory.com/178 ,
'JavaScript' 카테고리의 다른 글
| [JavaScript] #27 - Cookie (0) | 2023.02.08 |
|---|---|
| [JavaScript] #26 - Ajax (jQuery) (0) | 2023.02.07 |
| [JavaScript] #24 - 노드(Node) (0) | 2023.02.02 |
| [JavaScript] #23 - 문자열 함수 (0) | 2023.01.30 |
| [JavaScript] #22 - eval() 함수 (0) | 2023.01.29 |