1. jQuery 기초 - 셀렉터
페이지 정보
작성자 관리자 댓글 0건 조회 524회 작성일 22-01-08 05:02본문
1. jQuery 기초 - 셀렉터
제이쿼리에서 가장 기초가 되는 것은 "선택자" 이다.
CSS에서의 선택자와 같은 형식을 사용한다.
jQuery == $
자바스크립트 : document.getElementById('id');명령을 제이쿼리로 표현하면 $('#id')이다. 또는 jQuery('#id')이다.
제이쿼리의 선택자 형식 : $('#id')
실습 : jquery01.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div>제이쿼리1</div>
<div>jQuery</div>
<span>$</span>
</body>
</html>
jQuery를 실습하기 위해 콘솔창을 연다.
div태그의 내용을 숨기기위해 아래 명령을 실행한다.
$('div').hide();
id를 이용하여 내용을 숨겨보도록 하겠다.
실습 : jquery01.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div>제이쿼리1</div>
<div>jQuery</div>
<span>$</span>
<div id="test1">테스트 1</div>
<div class="test2">테스트2</div>
</body>
</html>
id선택자를 이용하여 요소를 숨기는 실습입니다.
$('#test1').hide();
class 선택자를 이용하여 요소를 숨기는 실습니다.
$('.test2').hide();
모든 요소를 선택할 때는 $('*')를 사용한다.
$('*');
제이쿼리의 속성을 실습해보도록 하겠습니다.
실습 : jquery01.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div>제이쿼리1</div>
<div>jQuery</div>
<span>$</span>
<div id="test1">테스트 1</div>
<div class="test2">테스트2</div>
<div name="div1">div 첫번째</div>
<div name="div2">div 두번째</div>
<div name="div3">div 세번째</div>
<div name="diav4">div 네번째</div>
<div name="title"> 타이틀 1</div>
<div name="title" level="basic"> 타이틀 2</div>
<div name="title"> 타이틀 3</div>
<div name="title" level="basic"> 타이틀 4</div>
</body>
</html>
속성을 이용해서 요소를 선택하는 방법
$('[name=div2],[name=div3]').hide();
name이 d로 시작하는 요소를 선택
$('[name^=d]').hide();
name이 3로 끝나는 요소를 선택
$('[name$=3]').hide();
name에 iv가 들어가는 요소를 선택
$('[name*=iv]').hide();
name이 div2가 아닌 요소를 선택
$('[name!=div2]');
name이 div2인 요소만 선택한다. 앞뒤에 공백이 있어도 된다.
$('[name~=div2]');
name이 title을 찾고, 첫번째 요소를 선택
$('[name=title]:first').hide();
name이 title을 찾고, 마지막 요소를 선택
$('[name=title]:last').hide();
name이 title을 찾고, 짝수 요소를 선택
$('[name=title]:even').hide();
name이 title을 찾고, 홀수 요소를 선택
$('[name=title]:odd').hide();
name이 title이고, level이 basic가 아닌 요소를 선택
$('[name=title]:not([level=basic])').hide();
div중 첫번째 요소를 선택
$('div:eq(0)').hide();
div중 4번째 보다 큰 요소를 선택
$('div:gt(4)')[0];
div중 4번째 보다 작은 요소를 선택
$('div:lt(4)')[0];
댓글목록
등록된 댓글이 없습니다.