2장은 [무언가를 가져오기]를 해볼꺼다.
뭘 가져올까?? 당연히 내가 조작하려고 하는 원본을 가져오는 거다.
원본이 뭔지 알아야 색을 바꾸던, 지우던, 글씨를 키우던 뭔가를 할꺼 아닌가.
가져오는 것을 셀렉터라고 부른다.
2.1 셀렉터란 뭔가??
가져오기는 1장에서 봤듯이 $('셀렉터') 이다.
저 셀렉터 부분이 바뀜에 따라 어떤 형태 것을 가져올껀지 결정되는거다.
뭐 이것저것 엄청 많은데 이 장에서는 대표적인 4개를 소개하고 있다.
1) ID 셀렉터 - #idValue
$('#idValue')
#뒤에 등장한 문자열이 id의 속성이고 이 속성으로 지정된 요소를 취득한다.
코드를 보자.
----------------index.html-------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<ul>
<li>fox</li>
<li id="cat">cat</li>
<li>fish</li>
<li id="dog">dog</li>
<li>bird</li>
</ul>
</body>
</html>
--------------------------------------------
빨강 부분이 id를 지정한 부분이다.
---------------------scripts.js----------------------
$(function(){
$('#cat').css('background','pink');
$('#dog').css('background','yellowgreen');
});
---------------------------------------------------
저걸 실행하면 cat과 dog 부분이 각각 색이 바뀐다.
한마디로 id로 지정한 곳이 다 바뀌게 된다는 것이다.
하지만 이 셀렉터의 단점은 모든 id에게 같은 색을 입히려면
다 일일히 지정해 줘야 한다는 것이다. 지금이야 2개 밖에 없으니 쿨하게 해주겠지만
역시 100개 1000개 넘어갔는데 같은 코드 쭉 늘여놓으면
사장에게 퇴사 크리를 맞을 수 있다. 그래서 나온게 "클래스 셀렉터"다
2) 클래스 셀렉터 - .className
복수의 요소를 함께 취득하고 싶은 경우에 클래스 셀렉터를 쓴다.
클래스 셀렉터를 사용하면 지정한 모든 클래스에 속한 요소를 모두 취할수 있다.
사용법은
$('.className')
코드를 보자
--------------------index.html--------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<ul>
<li class="man">John</li>
<li class="man">Bob</li>
<li class="woman">Mary</li>
<li class="man">Taro</li>
<li class="woman">Hanako</li>
</ul>
</body>
</html>
--------------------------------------------------------------------
----------------------scripts.js---------------------------------
$(function(){
$('.man').css('background','lightblue');
$('.woman').css('background','pink');
});
----------------------------------------------------------------
코드를 보면 남자는 파랑으로 여자는 핑크로 지정하고 복수의 요소를 바꾸었다.
3) 타입 셀렉터
타입 셀렉터는 지정한 요소명의 요소를 전부 가져올 수 있다.
작성법은
$('div')
원하는 요소명을 그대로 넣음으로써 다입 셀렉터의 기능을 수행한다.
-----------------------index.html------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<h1>Heading</h1>
<p>The quick brown fox jumps over the lazy dog.</p>
<ul>
<li>The quick brown fox jumps over the lazy dog.</li>
<li>The quick brown fox jumps over the lazy dog.</li>
</ul>
</body>
</html>
--------------------------------------------------------------
------------------------scripts.js-----------------------------
$(function(){
$('p').css('background','pink');
$('li').css('background','yellowgreen');
});
-------------------------------------------------------------
$('p')라면 모든 p요소를, $('li') 라면 모든 li요소를 취득한다.
3.1) 조합해보기
위에서 공부한 3개를 조합해서 써보자.
-타입 셀렉터 + ID 셀렉터
$('div#hoge').css('background', 'red'); //id가 hoge인 div 요소를 취득한다.
-ID 셀렉터 + 클래스 셀렉터
$('#hoge.foo').css('background', 'red'); //id가 hoge인 클래스 foo 요소를 취득한다.
-타입 셀렉터 + ID셀렉터 + 클래스 셀렉터
$('div#hoge.foo').css('background', 'red');
//id가 hoge이고 클래스 foo에 속한 div 요소를 취득한다.
셀렉터의 조합 = 검색 이다.
4)자손 셀렉터
자손 셀렉터는 요소의 계층 구조를 판단하여 원하는 요소를 취득하기 위한 셀렉터
작성법
$('p strong') //p요소 안에 있는 strong 요소다.
자손 셀렉터는 조합한 것에서 띄어쓰기를 한 것 뿐이다.
코드를 보장~
---------------------------index.html----------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div>
<p>I have a <strong>pen</strong>.</p>
</div>
<ul>
<li>His <strong>pen</strong> is red.</li>
<li>I need his <strong>pen</strong>.</li>
</ul>
<p>She doesn't need a <strong>pen</strong>.</p>
</body>
</html>
----------------------------------------------------------------
----------------------scriots.js----------------------------------
$(function(){
$('div strong').css('background','lightblue');
$('ul strong').css('background','pink');
});
----------------------------------------------------------------
코드를 보면 strong 요소가 4개 있다.
가장 위에 있는 요소는 div의 p안에 있고,
다음 2개는 ul의 li안에 있다.
마지막은 body의 바로 아래에 있는 p안에 있다.
실행시키면 p안에 strong를 취득해서 사용하는데.
index.html에서 빨갛게 표시한 부분만 작동하게 된다.
2.2 가져온 것에서 좀 더 검색하기
이번에는 변수를 사용해서 요소를 검색하는 법을 알아보자.
변수가 뭔지는 설명 안할란다 ㅡ.ㅡ 그정도는 알겠지.....;;
두 가지를 이해하면 된다
-변수에 보관한다는 것
-거기에서 좀 더 요소를 검색한다는 것
변수에 보관하기
var lastName = '서현'; //변수에 서현을 저장
alert(lastName); //다이얼로그에 서현을 표시
너무 쉬워서 오줌 지릴꺼 같다.
자~ 저 변수에 이것 저것 넣어보자.
var lastName = '서현';
var me = lastName + ' 나';
var father = lastName + ' 아빠';
var mother = lastName + ' 엄마';
alert(me);
alert(father);
alert(mother);
이걸 실행하면 다이얼로그 창이 3번 뜨면서 문장이 나온다.
+는 문자열 연결 명령이다
응용해보자.
$('#hoge').css('background', 'pink'); //원본
var hoge = $('#hoge'); //변수에 넣었다.
hoge.css('background', 'pink');
hoge.css('border', '1px solid red');
hoge.fadeIn();
이런식으로 응용이 가능하다.
이로써 2장도 끝났다 3장에서는 메소드, 스타일 변경, 이벤트 등을 다루겠다~
댓글 없음:
댓글 쓰기