1. jQuery
2. 선택자(Selector)
3. 이벤트(Event)
1. jQuery
[ 정의 ]
- 클라이언트 측 HTML 스크립팅을 간소화하기 위해 고안된 크로스 플랫폼 자바스크립트 라이브러리다
- Lightweight footprint, 경량
- CSS3 Comliant, CSS3 선택자를 지원한다. (태그 검색하는 도구로 제공)
- Cross-Browser(Chrome, Edge, FireFox, IE, Safari, Android, iOS)
[ 설치 방법 ]
1) 로컬 설치 방법
- http://jquery.com 에 접속한뒤 필요한 버전을 다운로드한다. ( 마우스 우클릭 -> 다른이름으로 링크 저장 )
- 다운받은 링크를 내 현재 프로젝트 폴더에 넣는다.
- 설치한 파일 경로를 head 태그 안에 넣는다. ( 저는 js폴더에 jquery파일을 넣었습니다. )
<script src="js/jquery-3.6.0.js"></script>
2) CDN 설치방법
- jQuery 홈페이지에서 CDN 설치 주소를 찾고 들어간다.
- 필요한 버전을 클릭 후 코드를 복사한다.
- 복사한 코드를 head 태그 안에 넣는다.
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
3) npm 설치방법
- VSCode에서 ( Ctrl + ` ) 키를 눌러 콘솔화면을 띄운다. (cmd창)
- npm init 입력 (초기화)
- npm install jQuery 입력
- 설치완료. (내 프로젝트에 폴더명 "node_modules"이 생겼으면 정상적으로 설치 완료)
- 설치된 폴더의 경로를 head 태그 안에 넣는다.
<script src="node_modules/jquery/dist/jquery.js"></script>
[ jQuery() ]
- CSS 선택자 or 기타 요소를 사용해서 태그를 검색 후 반환하는 함수
- 태그 검색 함수
- jQuery 함수의 결과는 무조건 배열이다. ( 유사배열(jQuery Collection) )
- jQuery의 대부분의 기능은 자동으로 내부 루프를 처리한다.
- JQuery 반환값은 배열이므로 이 배열에 직접 메소드를 적용하면 개발자가 따로 루프 처리를 하지 않아도 자동으로 루프를 돌면서 개별 요소에게 그 기능이 적용된다.
- 표기법은 jQuery()를 써도 되고, '$' 을 써도 된다.
<body>
<input type="button" value="버튼" id="btn">
<script>
$('#btn').click(function() {
alert('테스트');
});
</script>
</body>
2. 선택자(Selector)
[ 태그 선택자 ]
- $( '태그명' ).css( '속성명', '속성값' );
$( 'div' ).css( 'color', 'red' );
$( 'h1' ).css( 'color', 'blue' );
[ id 선택자 ]
- $( 'id명' ).css( '속성명', '속성값' );
$( '#box1' ).css( 'color', 'blue' );
[ class 선택자 ]
- $( 'class명' ).css( '속성명', '속성값' );
$( '.box' ).css( 'color', 'red' );
[ 나머지 ]
$( '.box:nth-child(even)' ).css( 'color', 'red' );
[ 순수 자바스크립트 CSS 선택자 ]
- document.querySelector : 태그 1개 검색
- document.querySelectorAll : 태그 여러개 검색
// 단일 검색 (id)
document.querySelector( '#box' ).style.color = 'gold';
// 여러개 검색 (class)
document.querySelectorAll( '.box' ).forEach(function(item) {
item.style.color = 'blue';
});
3. 이벤트(Event)
[ 전용 이벤트 함수 ]
- 객체.이벤트함수명(함수);
<script>
$('#btn').click(function() {
alert('전용 이벤트 test');
});
</script>
[ 범용 이벤트 함수 ]
- 객체.bind('이벤트명', 함수);
- 객체.live('이벤트명', 함수);
- 객체.on('이벤트명', 함수);
<script>
$('#btn').on('click', function() {
alert('범용 이벤트 test');
});
</script>
'교육 > jQuery' 카테고리의 다른 글
| jQuery 개발자 수업 69일차(3) - 자식-부모-형제 찾기, Box Model, Scroll (0) | 2021.07.06 |
|---|---|
| jQuery 개발자 수업 69일차(2) - Effect, HTML 조작 (0) | 2021.07.05 |
댓글