종료하기 전 티스토리 네이버 로그아웃 할 것
1. 툴
동일
추가시:
2. 폴더
동일
추가시:
3. 사용할 사이트
동일
추가시:
4. 공부하는 것
[01] jQuery 설치, Selector - CSS, CSS2
1. Javascript 라이브러리, jQuery
1) 장점
- jQuery는 JavaScript Library 입니다.
- jQuery는 상당히 단순한 JavaScript programming 입니다. 또한 간결하게 코딩하고
많은 일을 해주는 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>Insert title here</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
- $("*") : 전체태그 - li의 자손 모든 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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") :복수의 셀렉터
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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
- $("부모태그명 > 자식태그명") : 특정 태그의 바로 밑에 자식태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(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>Insert title here</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>
------------------------------------------------------
[02] Selector - CSS3
1. CSS3 Selector
1) 간접 selector
- $("태그1~태그2") : 특정 태그 뒤에 나타나는 태그
>>>> css3_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(){
$("#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>
+로 한거는 인접한 거 하나만 되는 건데
~로 하면 그 뒤에 애들 다 되는 거십니다
2) 부정유사 클래스(Negation pseudo-class)
- $("태그1:not(태그2)") : 태그1 안에서 태그2를 제외한 태그
>>>> css3_02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Negation pseudo-class</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:not(:first-child)").css("color","red");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
3) empty 유사 클래스
- $("태그:empty") : 자식태그 혹은 문자열을 포함하지 않는 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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:empty").css("color","red");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 </li>
<li></li>
<li> 텍스트 텍스트 텍스트 텍스트 </li>
<li></li>
</ul>
</body>
</html>
4) nth-child 유사클래스
- $("태그:nth-child(번호)") : 특정 태그안에서 지정한 번호의 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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:nth-child(3)").css("color", "gold");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
5) last-child 유사클래스
- $("태그:last-child") : 동일 태그안의 가장 마지막 태그
>>>> css3_05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>last-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:last-child").css("color","red");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
6) only-child 유사클래스
- $("태그:only-child") : 특정태그가 하나만 포함된 태그
>>>> css3_06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>only-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 span:only-child").css("color","red");
});
</script>
</head>
<body>
<ul>
<li><span> 텍스트</span> 텍스트 텍스트 텍스트 텍스트</li>
<li><span> 텍스트</span> 텍스트<span> 텍스트</span>
텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
[03] Selector - CSS 속성
1. Selector - CSS 속성
1) [attribute]
- $("[속성명]") : 특정 속성을 가진 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("[id]").css("color", "red");
});
</script>
</head>
<body>
<ul>
<li id = "first"> 텍스트 텍스트 텍스트 텍스트 </li>
<li class = "second"> 텍스트 텍스트 텍스트 텍스트 </li>
<li id = "third"> 텍스트 텍스트 텍스트 텍스트 </li>
<li class = "fourth"> 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
2) [attribute='value']
- $("[속성명='값']") : 특정 속성이 지정한 값을 가진 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("[title='second']").css("color", "red");
});
</script>
</head>
<body>
<ul>
<li title = "first"> 텍스트 텍스트 텍스트 텍스트 </li>
<li title = "second"> 텍스트 텍스트 텍스트 텍스트 </li>
<li title = "third"> 텍스트 텍스트 텍스트 텍스트 </li>
<li title = "fourth"> 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
3) [attribute!='value']
- $("태그명[속성명!='값']") : 특정 속성이 지정한 값을 갖지 않은 태그
>>>> attr_03.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[title!='first']").css("color","red");
});
</script>
</head>
<body>
<ul>
<li title="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
4) [attribute^='value']
- $("태그명[속성명^='값']") : 특정 속성이 지정한 값으로 시작되는 태그
>>>> attr_04.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(){
$("[title^='f']").css("color","red");
});
</script>
</head>
<body>
<ul>
<li title="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
5) [attribute$='value']
- $("태그명[속성명$='값']") : 특정 속성이 지정한 값으로 끝나는 태그
>>>> attr_05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("[title$='d']").css("color","red");
});
</script>
</head>
<body>
<ul>
<li title="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
6) [attribute*='value']
- $("태그명[속성명*='값']") : 특정 속성이 지정한 값을 포함하고 있는 태그
>>>> attr_06.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(){
$("[title*='ir']").css("color","red");
});
</script>
</head>
<body>
<ul>
<li title="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
7) [attributeFilter1]
[attributeFilter2]
- $("[태그셀렉터1]
[태그셀렉터2]") : 복수 속성 셀렉터에 해당하는 태그 - AND인것
>>>> attr_07.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(){
$("[title^='f'][title*='th']").css("color","red");
});
</script>
</head>
<body>
<ul>
<li title="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li title="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
[04] jQuery 필터
1. jQuery 필터
1) first/last 필터
- $("태그:first/last") : 지정된 태그의 첫태그/마지막 태그
>>>> jfilter_01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first/last filter</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").css("color","red");
$("li:last").css("color","blue");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
first child나 last child 는 ul의 단락마다 구별하는건데
이거는 ul이 두개 있어도 첫 / 마지막 것만 칠해줌
2) even/odd 필터
- $("태그:even/odd") : 지정된 태그의 짝수/홀수 번째 태그
>>>> jfilter_02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>even/odd filter</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:odd").css("color","red");
$("li:even").css("color","blue");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
3) eq/gt/lt 필터
- $("태그명:eq(번호)") : 지정된 번호의 태그(0부터 시작)
$("태그명:gt(번호)") : 지정된 번호보다 뒤의 태그(0부터 시작)
$("태그명:lt(번호)") : 지정된 번호보다 앞의 태그(0부터시작)
>>>> jfilter_03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>eq/gt/lt filter</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:lt(2)").css("color","red");
$("li:eq(2)").css("color","blue");
$("li:gt(2)").css("color","green");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
4) header/contain/has/parent 필터
- $("태그:header") : h1 ~ h6까지의 heading태그
$("태그:contains(문자열)") : 특정 문자열을 포함하고 있는 태그
$("태그1:has(태그2)") : 특정 태그를 포함하고 있는 태그
$("태그:parent) : 자식태그 혹은 문자열을 포함하고있는 태그
>>>> jf_header.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:header</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(){
$(":header").css("color","red");
});
</script>
</head>
<body>
<h1> 텍스트 텍스트 텍스트 텍스트 텍스트 </h1>
<p> 텍스트 텍스트 텍스트 텍스트 텍스트 </p>
<h6> 텍스트 텍스트 텍스트 텍스트 텍스트 </h6>
</body>
</html>
>>>> jf_contain_has.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:contains,:has</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:contains('샘플')").css("color","red");
$("li:has(strong)").css("color","green");
});
</script>
</head>
<body>
<ul>
<li><strong> 텍스트</strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 샘플 샘플 샘플 샘플 샘플 샘플 </li>
</ul>
</body>
</html>
>>>> jf_parent.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>parent 필터</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:parent").css("color","red");
});
</script>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li></li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li></li>
</ul>
</body>
</html>
[05] jQuery 기본 명령어
1. jQuery 명령어
1) 텍스트 변경과 가져오기
- text(...)/text()
>>>> jquery_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(){
$("p#first").text("변경후");
$("p#second").text($("p#first").text());
});
</script>
</head>
<body>
<p id="first"> 변경전</p>
<p id="second">변경전</p>
</body>
</html>
2) HTML 변경과 취득
- html(...)/html()
>>>> jquery_02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("p#first").html("<strong> 변경후</strong>");
$("p#second").html($("p#first").html());
});
</script>
</head>
<body>
<p id="first"> 변경전</p>
<p id="second"> 변경전</p>
</body>
</html>
--------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("p#second").html($("p#first").html());
$("p#first").html("<strong> 변경후의 first </strong>");
});
</script>
</head>
<body>
<p id="first">변경전인 first</p>
<p id="second">변경전인 second</p>
</body>
</html>
------------
3) HTML 삽입
- prepend(...)/append(...) : 태그 안의 맨앞/맨뒤에 HTML을 삽입함 - 접두어 & 접미어
before(...)/after(...) : 태그 앞/뒤에 HTML을 삽입함 - 앞&뒤
>>>> jquery_03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML삽입</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(){
$("p#first").prepend("<strong> 앞부분에 삽입</strong>");
$("p#first").append("<strong> 뒷부분에 삽입</strong>");
$("p#second").before("<h1> 태그 앞에 삽입</h1>");
$("p#second").after("<h1> 태그 뒤에 삽입</h1>");
});
</script>
</head>
<body>
<p id="first"> 텍스트 텍스트</p>
<p id="second"> 텍스트 텍스트</p>
</body>
</html>
4) HTML 이동
- prependTo(...)/appendTo(...) : 다른 태그 안의 맨앞/맨뒤로 이동
insertBefore(...)/insertAfter(...) : 다른 태그의 앞/뒤로 이동
>>>> jquery_04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html이동</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(){
$("strong:first").prependTo("p");
$("strong:last").appendTo("p");
$("h1:first").insertBefore("p");
$("h1:last").insertAfter("p");
});
</script>
</head>
<body>
<p> 텍스트 텍스트 </p>
<strong> 앞으로 문자</strong>
<strong> 뒤로 이동</strong>
<h1>태그도 앞으로 이동</h1>
<h1>태그도 뒤로 이동</h1>
</body>
</html>
5) 다른 태그로 묶음
- wrap(...) : 태그를 다른 태그로 묶는다
wrapAll(...) : 태그 전체를 모아서 다른 태그로 묶는다
wrapInner(...) : 자식 태그/텍스트를 다른 태그로 묶는다
>>>> jquery_05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("strong").wrap("<h1></h1>"); //개별
$("div").wrapAll("<h1></h1>");//전체
$("p").wrapInner("<strong></strong>");//내부
});
</script>
</head>
<body>
<strong> 텍스트텍스트111 </strong>
<strong> 텍스트텍스트222 </strong>
<div> 텍스트텍스트111 </div>
<div> 텍스트텍스트222 </div>
<div> 텍스트텍스트333 </div>
<p> 텍스트텍스트 </p>
<p> 텍스트텍스트 </p>
</body>
</html>
-------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("strong").wrap("<h1></h1>");
$("div").wrapAll("<h3></h3>");
$("b").wrapInner("<strong></strong>");
// - wrap(...) : 태그를 다른 태그로 묶는다
// wrapAll(...) : 태그 전체를 모아서 다른 태그로 묶는다
// wrapInner(...) : 자식 태그/텍스트를 다른 태그로 묶는다
});
</script>
</head>
<body>
<strong> 텍스트텍스트111 </strong>
<strong> 텍스트텍스트222 </strong>
<div> 텍스트텍스트111 </div>
<div> 텍스트텍스트222 </div>
<div> 텍스트텍스트333 </div>
<p> 텍스트텍스트<b>yhkihk</b> </p>
<p> 텍스트텍스트 </p>
</body>
</html>
----------------------------------
6) 태그변경/제거
- replaceWith() : 태그를 다른 태그로 변경
remove() : 태그를 제거
>>>> jquery_06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("p").replaceWith("<h1> 변경후</h1>");
$("div strong").remove();
});
</script>
</head>
<body>
<p> 변경전 </p>
<div><strong> 제거할 태그</strong> 텍스트텍스트텍스트</div>
</body>
</html>
7) 속성값 변경과 취득
- attr(...,...) : 지정한 속성값 변경
- attr(...) : 지정한 속성값 가져옴
- removeAttr(...) : 지정한 속성값 제거
>>>> jquery_07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a:first").attr("href","http://daum.net/");
$("a:first").text( $("a").attr("href") );
$("a:last").removeAttr("target");
});
</script>
</head>
<body>
<a href="http://naver.com">링크</a>
<a href="http://naver.com/" target="_blank">링크</a>
</body>
</html>
-------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a:first").attr("href", "http://daum.net/");
$("a:first").text($("a").attr("href"));
$("a:last").removeAttr("target");
});
</script>
</head>
<body>
<a href="http://naver.com">링크</a>
<a href="http://naver.com/"target="_blank">링크</a>
<!-- "target="_blank" - 이게 있어야 새창으로 열림 - 이게 없으면 여기서 그냥 열림 -->
</body>
</html>
-------------------
8) class속성 추가/제거
- addClass(...) : class 속성 추가
- removeClass(...) : class 속성 제거
>>>> jquery_08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
.red{
color:red;
}
</style>
<script type="text/javascript">
$(function(){
$("p:first").addClass("red");
$("p:last").removeClass("red");
});
</script>
</head>
<body>
<p> 텍스트 텍스트 텍스트 텍스트</p>
<p class="red"> 텍스트 텍스트 텍스트 텍스트 텍스트</p>
</body>
</html>
9) css 제어
- css(...,...) : 지정한 CSS 속성값 설정
- css(..) : 지정한 CSS 속성값 가져옴
>>>> jquery_09.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("p").css({
backgroundColor : "yellow",
fontWeight : "bold",
color : "red"
});
$("div").text( $("p").css("color") );
});
</script>
</head>
<body>
<p> 텍스트 텍스트 텍스트 텍스트 텍스트 </p>
<div>텍스트</div>
</body>
</html>
[06] jQuery 이벤트
[01] jQuery 이벤트
1. 이벤트가 발생한 태그 얻기
- $(function(){........}) : 아래 명령어의 생략형
$(document).ready(function()(......) : 웹 페이지를 모두 읽어드리고, 준비가 되었다면 처리하시오 라는 뜻
두개 다 같은것입니다.
- eq 필터: 특정 태그안의 지정한 순서의 태그를 취득하는 셀렉터
- function() 안의 return false사용이유 : a 태그의 click 이벤트가 발생하면 jquery명령이 실행되고 href속성에 연결된 url을 열어버림. 이문제를 해결하기 위해 사용.
>>>>>>> event01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("a:eq(0)").click(function(){
$("img").attr("src","flower.jpg").attr("alt","꽃");
return false;
});
$("a:eq(1)").click(function(){
$("img").attr("src","sea.jpg").attr("alt","바다");
return false;
});
$("a:eq(2)").click(function(){
$("img").attr("src","Jellyfish.jpg").attr("alt","해파리"); //src도 바꾸고 alt도 바꾼다.
return false;
});
$("a:eq(3)").click(function(){
$("img").attr("src","building.jpg").attr("alt","건물");
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" alt="꽃" /></p>
</body>
</html>
Alt 속성
HTML의 img 태그에서 쓰이는 alt 속성은 그림이 렌더링되지 못할 때 나타날 문자열을 지정하기 위한 값이다. 다음과 같은 이유로 사용된다.
- 그림의 링크가 죽었거나, 인터넷 연결 속도나 품질이 낮다든지 화면이 제한적인 이동형 장비에서 그림을 내려받지 않고 문자열만 보여주기 위해 사용된다.
- lynx나 w3m과 같은 텍스트 전용 웹 브라우저에서 사용된다. 텍스트 브라우저들은 일반적으로 그림을 직접 보여줄 수 없으므로
alt 속성에 있는 값을 보여주는 경우가 많다. 그러나 예외적으로 w3m-img는 그림을 직접 보여 준다.
- 수많은 검색 엔진은 그림에 대한 정보를
alt 속성을 읽어서 얻는다.
예를 들어 아래와 같이 사용하면 그림이 표시되지 않는 웹 브라우저에서는 '그림'이라는 문자열이 표시되며 스크린 리더를 이용할 경우 이미지의 URL이나 링크 대신 alt 속성으로 지정한 문구 '그림'이 목소리로 출력된다.
<img src="주소" alt="그림" />
별다른 의미 없이 화면을 꾸미기 위해 사용된 그림 등이 웹 브라우저나 스크린 리더가 잘못 인식하는 것을 방지하려면 alt=""처럼 빈 속성값을 지정하면 된다.
이미지 위에 마우스 커서를 올려 놓을 때 나오는 툴팁 문구를 지정하기 위한 방법으로 여러 인터넷 브라우저에서는 alt 속성을 전통적으로 사용해왔지만 실제 그림의 제목을 지정하기 위해서는 title 속성이 따로 사용된다.
출처: https://ko.wikipedia.org/wiki/Alt_%EC%86%8D%EC%84%B1
2. 클릭할 때마다 다른 처리하는 toggle()
- function(){.....}를 ,(콤마)로 구분하여 여러가지 설정하고 클릭된 순서대로 처리 실행
>>>>>>> event02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("button").toggle(function(){
$("img").attr("src","sea.jpg").attr("alt","바다");
},function(){
$("img").attr("src","Jellyfish.jpg").attr("alt","해파리");
},function(){
$("img").attr("src","building.jpg").attr("alt","건물");
},function(){
$("img").attr("src","flower.jpg").attr("alt","꽃");
});
});
</script>
</head>
<body>
<button>화면을 변경</button>
<p><img src="flower.jpg" alt="꽃" /></p>
</body>
</html>
3. mouseover()/mouseout()
>>>>>>> event03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("img").mouseover(function(){
$(this).attr("src","sea.jpg").attr("alt","바다");
}).mouseout(function(){
$(this).attr("src","flower.jpg").attr("alt","꽃");
});
});
</script>
</head>
<body>
<img src="flower.jpg" alt="꽃" />
</body>
</html>
4. 이벤트 발생시에 한 번만 처리를 실행하는 one()
- 지정한 태그에서 발생한 이벤트에 대해 한 번만 실행되도록 하는 명령어
$(셀렉터).one("이벤트 발생 조건", function(){
이벤트 발생시에 실행하는 처리 내용
}
>>>>>>>> event04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("a").one("click",function(){
$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" alt="꽃" /></p>
</body>
</html>
5. 설정되어 있는 이벤트 처리를 취소하는 unbind()
>>>>>>> event05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("a").click(function(){
$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
return false;
})
$("button").click(function(){
$("a").unbind("click");
});
});
</script>
</head>
<body>
<button>취소</button>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" alt="꽃" /></p>
</body>
</html>
6. 앞으로 추가될 태그에 이벤트 처리를 설정할 수 있는 live()
- 실행한 시점에 존재하는 태그와 더불어 앞으로 추가될 태그에도 이벤트 처리를
설정할 수 있는 명령어가 live() 입니다.
>>>>> event06.html(live사용안함)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("a").click(function(){
$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
return false;
});
$("button").click(function(){
$("ul").append("<li><a href='building.jpg'>건물</a></li>");
});
});
</script>
</head>
<body>
<button>li 요소를 추가</button>
<ul>
<li><a href="flower.jpg"> 꽃</a></li>
<li><a href="sea.jpg"> 바다</a></li>
<li><a href="Jellyfish.jpg"> 해파리</a></li>
</ul>
<p><img src="flower.jpg" alt=" 꽃" /></p>
</body>
</html>
>>>>> event07.html(live사용)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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(){
$("a").live("click",function(){
$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
return false;
});
$("button").click(function(){
$("ul").append("<li><a href='building.jpg'>건물</a></li>");
});
});
</script>
</head>
<body>
<button>li 요소를 추가</button>
<ul>
<li><a href="flower.jpg"> 꽃</a></li>
<li><a href="sea.jpg"> 바다</a></li>
<li><a href="Jellyfish.jpg"> 해파리</a></li>
</ul>
<p><img src="flower.jpg" alt=" 꽃" /></p>
</body>
</html>
5. 수업
진도:
hw:
6. 할것
http://aboooks.tistory.com/210
킵
first child나 last child랑 first/last 필터 비교
3) eq/gt/lt 필터
- $("태그명:eq(번호)") : 지정된 번호의 태그(0부터 시작) equal
$("태그명:gt(번호)") : 지정된 번호보다 뒤의 태그(0부터 시작) greater than
$("태그명:lt(번호)") : 지정된 번호보다 앞의 태그(0부터시작) less than
4) header/contain/has/parent 필터
- $("태그:header") : h1 ~ h6까지의 heading태그
$("태그:contain(문자열)") : 특정 문자열을 포함하고 있는 태그
$("태그1:has(태그2)") : 특정 태그를 포함하고 있는 태그
$("태그:parent) : 자식태그 혹은 문자열을 포함하고있는 태그
^: 캐럿
~: 틸드
이거 배경화면 넣는거임.txt
배경화면 코드
