waitedForU
[01] jQuery 설치, Selector - CSS, CSS2 본문
1. Javascript 라이브러리, jQuery
1) 장점
- jQuery는 JavaScript Library 입니다.
- jQuery는 JavaScript Library 입니다.
- jQuery는 상당히 단순한 JavaScript programming 입니다. 또한 간결하게 코딩하고
많은 일을 해주는 JavaScript Library 입니다.
많은 일을 해주는 JavaScript Library 입니다.
- Google Trends의 분석중 Prototype.js, Mootools 보다 압도적으로 인기가
높습니다.
높습니다.
- CSS의 selecter를 사용하고 있어서 습득하기 쉬우며, 브러우저의 다양성을 처리해
줌으로 호환성 처리에 시간을 소비할 필요가 없습니다.
줌으로 호환성 처리에 시간을 소비할 필요가 없습니다.
- 복잡한 Javascript의 구현시 DOM 문법을 매우 간결하게 해주어 개발 속도를 향상
할 수 있습니다.
할 수 있습니다.
- jQuery의 기능을 확장할 수 있는 plugin 구조를 지원합니다.
- Ajax를 지원해 줍니다.
2) 설치
- http://jquery.com/ jquery.js 다운로드
<script type="text/javascript" src="../scripts/jquery-1.6.4.js"></script>
- Google 서버에서 jQuery 사용
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
3) Documentation
- http://docs.jquery.com/Main_Page
4) jQuery로 작성된 스크립트
- $("dd:not(:first)").css("display","none");
- 의미:첫번째 dd태그를 제외한 나머지 dd태그의 display를 none로 한다.
>>>>>> sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> 아코디언판넬 </title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/
jquery/1.6.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$(this).siblings("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
dl{
width:400px;
margin:50px auto;
}
dl dt{
background:#7CADB6;
border-bottom:1px solid #FFFFFF;
cursor:pointer;
}
dl dd{
border:1px solid #7CADB6;
border-top:none;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<dl>
<dt> 텍스트1</dt>
<dd>
<p> 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트
텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 </p>
</dd>
<dt> 텍스트 2</dt>
<dd>
<p> 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트
텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 </p>
</dd>
<dt> 텍스트 3</dt>
<dd>
<p> 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트
텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 </p>
</dd>
</dl>
</div>
</body>
</html>
2. selector를 이용한 DOM Element의 검색
1) Selector 기본 문법
- 사용법: $("")
- 용어: 태그 = Element, 속성 = Attribute
2) CSS Selector
1) tag selector
- $("태그명") : HTML tag를 제어
2) id selector
- $("#id명") : id 속성을 가진 tag를 제어
3) class selector
- $(".class명") : class속성을 가진 tag를 제어
4) 자손 selector
- $("태그1 태그2") : 태그안의 자식태그 제어
>>>> selector04.html
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8" />
<title>자손 셀렉터</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".first strong").css("color","red");
});
</script>
</head>
<body>
<ul>
<li class="first"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li class="second"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li class="third"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li class="fourth"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
5) 유니버셜 selector
- $("*") : 전체태그
>>>>> selector05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전체태그</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li *").css("color","red");
});
</script>
</head>
<body>
<ul>
<li><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li><em> 텍스트 </em> 텍스트 텍스트 텍스트 텍스트 </li>
<li><span> 텍스트 </span> 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트텍스트텍스트텍스트 </li>
</ul>
</body>
</html>
6) 그룹 selector
- $("셀렉터1, 셀렉터2") :복수의 셀렉터
>>>>>> selector06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그룹 셀렉터</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#first , #third").css("color","red");
});
</script>
</head>
<body>
<ul>
<li id="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
3. CSS2 Selector
1) 자식 selector
- $("부모태그명 > 자식태그명") : 특정 태그의 바로 밑에 자식태그
>>>>> css2_01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자식 셀렉터</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li > strong").css("color","red");
});
</script>
</head>
<body>
<ul>
<li><strong> 텍스트</strong> 텍스트 텍스트 텍스트 텍스트</li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li><div><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트
<span> 텍스트 </span></div></li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
2) 인접 selector
- $("태그1+태그2") : 특정 태그의 다음 태그
>>>>> css2_02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인접 셀렉터</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#second + li").css("color","red");
});
</script>
</head>
<body>
<ul>
<li id="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
3) first-child유사 클래스
- $("태그:first-child") : 동일 태그 안의 첫 태그
>>>> css2_03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first-child 클래스</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li:first-child").css("color","red");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
'JQuery' 카테고리의 다른 글
| [06] jQuery 이벤트 (0) | 2016.05.20 |
|---|---|
| [05] jQuery 기본 명령어 (0) | 2016.05.20 |
| [04] jQuery 필터 (0) | 2016.05.20 |
| [02] Selector - CSS3 (0) | 2016.05.20 |
Comments