A> jquery 기본
1.특징
다른 스크립트 보다 jquery 부터 로드를 해야한다.
jQuery() 또는 $() 로 jQuery 함수를 로드한다.
$ -- jQuery 의 별칭이다.
선택자가 존재하며 따옴표로 묶는다.
2.종류
$(document).ready()
-- 브라우저에 html 이 로드되고
이미지가 로드 되기 전에 호출되는
이벤트 핸들러
--예시
|
1
2
3
4
5
|
function testfn{
$('span').addClass('redtext');
}
$(docuement).ready(testfn);
|
cs |
단 한번만 호출되는 함수일 경우에는 익명함수로 구현
|
1
2
3
4
5
|
$(docuement).ready(function(){
$('span').addClass('redtext'); }); |
$()cs |
3.선택자(selector)
검색된 엘리멘트의 개수는 기본적으로 배열로 들어온다.
복수의 선택도 가능하다.
--예시
|
1
|
var $searchEles = $('p,span,div.simpletext1');
|
cs |
a> n번째의 엘리먼트 접근
$('태그:eq(2)') -- 인덱스 2의 엘리먼트에 접근
b> n번째 엘리멘트 이후 혹은 이전에 위치한 엘리먼트 접근 도 가능하다
$('태그:lt(2)')
$('태그:gt(2)')
c> n번째 자식에 접근
nth-child(' 인덱스 -1 ') -- 파라미터는 인덱스가 1부터 시작한다.
d> not 조건 선택자
$('태그:not(:조건)')
--예시
|
1
|
$('input:not(:checked) + span')
|
cs |
e> 일반 형제 선택자
형태 예시 : $('#아이디 ~ 태그')
jquery2> 입력 양식 필터 선택자
B> 메소드들
text() : 해당하는 요소의 innterHTML 을 가져온다.
text('변경할 값') : 해당하는 요소의 innerHTML 을 '변경할 값'으로 변경한다.
removeClass('클래스 이름') :해당요소의 클래스 삭제
addClass('클래스 이름'): 해당 요소의 클래스 추가
'언어 > javascript' 카테고리의 다른 글
| jQuery3 --attribute 다루기 (0) | 2021.02.16 |
|---|---|
| jQuery2 - 필터( filter) (0) | 2021.02.16 |
| javascipt - 웹 워커(web worker) (0) | 2021.02.15 |
| BOM (0) | 2021.02.15 |
| 자바스크립트 - 이벤트 (0) | 2021.02.09 |
