jQuery에서 Class , name이나 id 등을 선택하려면 어떻게 해야 할까요?
<선택자>
-아이디 선택자-
Ex)
<script type="js/jquery-1.11.2.js"></script>
<title>Meta tag</title>
<script type="text/javascript">
$(document).ready(function(){
$('#message');
});// 끝
</script>
</head>
<body>
<p id = "message">Message !</p>
</body>
▲위 소스코드 처럼 $('#');을하고 아이디를 씁니다 (CSS와 같네요..)
-HTML요소 선택자-
Ex)
<script type="js/jquery-1.11.2.js"></script>
<title>Meta tag</title>
<script type="text/javascript">
$(document).ready(function(){
$('p');
});// 끝
</script>
</head>
<body>
<p id = "message">Message !</p>
</body>
▲<p>태그를 모두 선택하고 싶을 때는 저렇게 태그이름을 주면 됩니다.-클래스 선택자-
Ex)
<script type="js/jquery-1.11.2.js"></script>
<title>Meta tag</title>
<script type="text/javascript">
$(document).ready(function(){
$('.message').hide();
});// 끝
</script>
</head>
<body>
<p class = "message">Message !</p>
</body>
▲아까 위에서 설명했던 대로 CSS처럼 $('.');을 주고 이름을 쓰면 됩니다.
▲위를 보면 .hide가 써져있는데 message를 모두 숨기라는 뚯입니다(한번 직접 해보세요^^).
-하위 선택자-
<script type="js/jquery-1.11.2.js"></script>
<title>Meta tag</title>
<script type="text/javascript">
$(document).ready(function(){
$('#header p');
});// 끝
</script>
</head>
<body>
<div id = "header"><p>Message !</p></div>
</body>
▲CSS 처럼 안에있는 것을 선택할 때 위 예제 처럼 해주면 됩니다.
-자식 선택자-
<script type="js/jquery-1.11.2.js"></script>
<title>Meta tag</title>
<script type="text/javascript">
$(document).ready(function(){
$('#header > p');
});// 끝
</script>
</head>
<body>
<div id = "header"><p>Message !</p></div>
</body>
▲자식을 선택할 떄는 '>'를 사용합니다. (header태그의 자식인 p를 선택해 보았다.)
<--인접 형제 선택자-->
<script type="js/jquery-1.11.2.js"></script>
<title>Meta tag</title>
<script type="text/javascript">
$(document).ready(function(){
$('#header + p');
});// 끝
</script>
</head>
<body>
<div id = "header"><p>Message !</p></div>
</body>
▲바로 앞이나 바로 뒤에있는 태그를 선택한다.
△으.. 이 부분은 정확하지 않습니다!!(안 써봣기에..)
<--속성 선택자-->
<script type="js/jquery-1.11.2.js"></script>
<title>Meta tag</title>
<script type="text/javascript">
$(document).ready(function(){
$(a[herf]);
$(a[herf^="http://"]);
$(a[herf$=".com"]);
$(a[herf*="naver.com"]);
});// 끝
</script>
</head>
<body>
<a href="http://www.naver.com"></a>
</body>
▲a[herf]는 herf기능이 있는 <a>태그를 모두 포함 시킨다.
▲a[herf^="http//"]는 http://로 시작하는 <a>태그를 포함 시킨다.
△a[herf$=".com"]은 .com으로 끝나는 <a>태그를 포함시킨다.
△a[herf*="naver.com"]은 herf안에 naver.com이 포함되어 있으면 전부 포함시킨다.
=====================
필터는 선택자를 사용할 떄 보다 정교하게 선택을 가능하게 해줍니다.
<--jQuery 필터-->
<-- :even & :odd -->
- ":even" 필터는 선택한 HTML요소 중에서 짝수 번째 선택자를 선택해 줍니다. (odd는 홀수)
$('tr:even');
▲ 짝수번째에 있는 tr태그만 선택
<-- .striped -->
- .striped는 class를 가진 테이블로 한정 시키는 필터입니다.
$('.striped tr:even');
▲class를 가진 테이블에있는 짝수 번째를 선택
<-- :first & :last -->
- first는 HTML요소중 첫 번째 HTML요소를 선택한다(last는 마지막 요소)
$('tr:first');
▲HTML요소 중 첫번째 tr태그를 선택
<-- :not -->
-not은 특정 선택자에 해당하지 않는 HTML요소를 찾을 떄 사용한다.
$('a:not(.navButton)');
▲.navButton클래스를 가지지않은 a태그를 찾을 떄
<-- :has -->
- has는 또 다른 선택자를 포함하고 있는 HTML요소를 찾을 떄 사용.
$('li:has(a)');
▲a를 포함하고 있는 li태그를 찾아라
<-- :contains -->
-contains태그는 특정 텍스트를 포함하고 있는 HTML요소를 찾을 때 사용합니다.
$('a:contains("Message")');
▲Message라는 텍스트가 a안에 있으면 선택!
<-- :hidden -->
- hidden은 숨겨진 HTML요소를 찾는다. 숨겨진 요소의 기준은 display가 none일때 .hide()함수 라던가 넓이/높이가 둘다 0인 요소 type = hidden인 필드등이 있다.
$('div:hidden').show;
▲숨겨져 있는 div를 찾아서 보여줍니다.
<--함수 체이닝-->
HTML요소에 여러 함수를 한번에 적용하고 싶을 때 사용하는 기술 입니다.
$('#popUp').width(300).height(300).text("Hi!!").fadeIn(1000);
▲#popUp인 것에 width(300)이고 height(300) ...을 한번에 적용이 가능합니다.
'Programming > Java Script + jQuery' 카테고리의 다른 글
| jQuery 이벤트 사용하기! (0) | 2015.12.16 |
|---|---|
| jQuery CSS 속성 읽고 바꾸기 & 익명함수 (1) | 2015.12.14 |
| jQuery 콘텐츠 추가! (0) | 2015.12.14 |
| jQuery 시작! (0) | 2015.12.09 |
KimMinSung