- 체인 컨텍스트를 유지하면서 제어의 대상이 되는 엘리먼트를 변경하는 기법
- http://api.jquery.com/category/traversing/
📍 예제
<!-- http://opentutorials.org/example/jquery/example.traversing.html -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body{
font-size:11px;
width:1000px;
}
#panel div,#panel li,#panel ul{
border:2px solid black;
margin:10px;
padding:10px;
}
#panel ul{
list-style: none;
}
#panel .s{
border:2px solid red;
background-color: #808080;
}
#panel #root{
## margin-top:0;
}
textarea{
#### width:1982px;
height:100px;
font-size:11px;
overflow: visible;
}
#help{
float:left;
width:500px;
height:450px;
overflow-y: scroll;
overflow-x: hidden
}
``` #panel{
float:left;
width:2500px;
}
#help table{
border:1px solid gray;
border-collapse: collapse;
width:100%;
``` }
#help table td{
border:1px solid gray;
padding:5px;
}
#help .title{
color:white;
background-color:#555;
padding:3px;
}
#help .title.checked{
background-color:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="wrapper">
<p>
javascript을 입력 한 후에 엔터를 눌러주세요.
<textarea id="code"></textarea></p>
<div id="help">
<table>
<tr id="add"><td><div class="title">.add(selector)</div>엘리먼트를 추가한다</td></tr>
<tr id="andSelf"><td><div class="title">.andSelf()</div>현재 엘리먼트 셋에 이전 엘리먼트 셋을 더 한다</td></tr>
<tr id="children"><td><div class="title">.children([selector])</div>자식 엘리먼트를 선택한다</td></tr>
<tr id="closet"><td><div class="title">.closest(selector)</div>가장 가까운 selector 조상 엘리먼트를 탐색한다</td></tr>
<tr id="each"><td><div class="title">.each(function(index,Element))</div>현재 엘리먼트 셋에 반복 작업을 실행한다</td></tr>
<tr id="end"><td><div class="title">.end()</div>이전 체인 컨텍스트로 돌아간다.</td></tr>
<tr id="eq"><td><div class="title">.eq(index)</div>현재 엘리먼트 셋에서 index에 해당하는 엘리먼트를 선택한다</td></tr>
<tr id="filter"><td><div class="title">.filter(selector)</div>현재 엘리먼트 셋에서 selector에 해당하는 엘리먼트를 선택한다</td></tr>
<tr id="find"><td><div class="title">.find(selector)</div>현재 엘리먼트 셋에서 selector에 해당하는 자손 엘리먼트를 선택한다</td></tr>
<tr id="first"><td><div class="title">.first()</div>현재 엘리먼트 셋 중 첫번째 엘리먼트를 선택한다</td></tr>
<tr id="last"><td><div class="title">.last()</div>현재 엘리먼트 셋 중 마지막 엘리먼트를 선택한다</td></tr>
<tr id="next"><td><div class="title">.next()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트를 선택한다</td></tr>
<tr id="nextAll"><td><div class="title">.nextAll()</div>각각의 엘리먼트에 대한 다음 형재 엘리먼트 전부를 선택한다</td></tr>
<tr id="prev"><td><div class="title">.prev()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트를 선택한다</td></tr>
<tr id="prevAll"><td><div class="title">.prevAll()</div>각각의 엘리먼트에 대한 이전 형재 엘리먼트 전부를 선택한다</td></tr>
<tr id="siblings"><td><div class="title">.siblings()</div>각각의 엘리먼트에 대한 형재 엘리먼트 전부를 선택한다</td></tr>
<tr id="slice"><td><div class="title">.slice(start, [end])</div>현제의 엘리먼트 셋 중 start에서 end까지의 엘리먼트를 선택한다</td></tr>
</table>
</div>
<div id="panel">
<div id="root">
div#root
<div>
div
</div>
<div>
div
<ul>
ul
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</div>
<div>
div
</div>
</div>
</div>
</div>
<script>
var $wrapper = $('#root').addClass('selected');
$('#code').keydown(function(e){
if(e.keyCode == 13){
eval($(this).val());
return false;
}
}).change(function(){
eval($(this).val());
});
$('tr').click(function(){
$(this).find('.title').toggleClass('checked');
})
</script>
</body>
</html>
- 자바스크립트와 CSS를 이용해서 HTML엘리먼트에 동적인 효과를 줄 수 있다.
- jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다.
📍 예제1
<!DOCTYPE html>
<html>
<head>
<style> span {
color:red;
cursor:pointer;
}
div {
margin:3px;
width:80px;
height:80px;
}
div {
background:#f00;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="button" id="fadeout" value="fade out" />
<input type="button" id="fadein" value="fade in" />
<input type="button" id="hide" value="hide" />
<input type="button" id="show" value="show" />
<input type="button" id="slidedown" value="slide down" />
<input type="button" id="slideup" value="slide up" />
<input type="button" id="mix" value="mix" />
<div id="target">
target
</div>
<script>$('input[type="button"]').click( function(e) {
var $this = $(e.target);
switch($this.attr('id')) {
case 'fadeout':
$('#target').fadeOut('slow');
break;
case 'fadein':
$('#target').fadeIn('slow');
break;
case 'hide':
$('#target').hide();
break;
case 'show':
$('#target').show();
break;
case 'slidedown':
$('#target').hide().slideDown('slow');
break;
case 'slideup':
$('#target').slideUp('slow');
break;
case 'mix':
$('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')});
break;
}
})
</script>
</body>
</html>
📍 예제2
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">
» Run
</button>
<div id="block">
Hello!
</div>
<script>/* Using multiple unit types within one animation. */
$("#go").click( function() {
$("#block").animate({
width: "300px",
opacity: 0.4,
marginLeft: "50px",
fontSize: "30px",
borderWidth: "10px"
}, 3000);
});</script>
</body>
</html>
📍 예제1-1. 웹페이지
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="result"></div>
<input type="text" id="msg" />
<input type="button" value="get result" id="getResult" />
<script>
$('#getResult').click( function() {
$('#result').html('');
$.ajax({
url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',
dataType:'json',
type:'POST',
data:{'msg':$('#msg').val()},
success:function(result){
if(result['result']==true){
$('#result').html(result['msg']);
}
}
});
})
</script>
</body>
</html>
📍 예제 1-2. 서버 쪽 로직
<?
echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));
?>