JavaScript/JQuery
jquery - selector
Bohemian life
2012. 6. 18. 12:15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>
<script src="./jquery-1.7.2.min.js">
</script>
<script>
$(document).ready(function(){
$('button:last').click(function(){
// 사용자가 입력한 값을 가져와라
id =$('.id:text').val();
if(id.trim()==""){ alert('id가 없음');}
$('div').html(id);
pw =$('.pw:password').val();
pw2 =$('.pw2:password').val();
if(pw!=pw2){ alert('비번이 다름'); }
});
// id 입력할때 : 키보드를 눌렀다가 떼는 순간 호출
$('.id:text').keyup(function(){
$('div').html( $(this).val() );
});
// filter div중에서 class=line 인것만 가져와라
$('button:first').click(function(){
$('div').filter('.line')
.css('width','100px');
});
// filter의 반대 not : div중에서 class=line 이 아닌것만
$('button:eq(1)').click(function(){
$('div').not('.line').css('height', '100px'); });
//slice(시작, 끝) : 2이상 4 미만
$('button:eq(2)').click(function(){
$('div').slice(2,4).css(
{ backgroundColor:'yellow', margin: '2px'}); });
//slice(시작) : 3이상
$('button:eq(3)').click(function(){
$('div').slice(3).css(
{ backgroundColor:'brown', margin: '2px'}); });
//children() : 자식 찾기
$('button:eq(4)').click(function(){
$('div').children().addClass("box");
});
//contents( 내용 탐색 및 바꾸기)
$('button:eq(5)').click(function(){
// div 의 내용을 찾아서 'span'을 지워라
$('div').contents().remove('span');
});
//next () 다음에 나온 형제 Element 찾기
$('button:eq(6)').click(function(){
$('div:eq(2)').next().addClass('box');
});
//next () 다음에 나온 class=line 인 형제 Element 찾기
$('button:eq(7)').click(function(){
$('div:eq(0)').next('.line').addClass('box');
});
//nextAll() 이후의 형제를 모두 찾아라
$('button:eq(8)').click(function(){
$('div:eq(0)').nextAll().addClass('box');
});
//prev () 이전에 나온 형제 Element 찾기
$('button:eq(9)').click(function(){
$('div:eq(2)').prev().addClass('box');
});
//prev () 이전에 나온 class=line 인 형제 Element 찾기
$('button:eq(10)').click(function(){
$('div:eq(4)').prev('.line').addClass('box');
});
//prevAll() 이전의 형제를 모두 찾아라
$('button:eq(11)').click(function(){
$('div:eq(4)').prevAll().addClass('box');
});
var parents = new Array(); //배열 생성
//parents 조상을 모두 찾아라 body, html 까지 찾는다.
// 조상 : 0:div, 1:body, 2:html <- this로 참조한다.
$('button:eq(12)').click(function(){
$('span:first').parents().addClass('box')
.each(function(index){
parents[index]=this.tagName;
});
//alert(parents);
// 마지막 div에 차일드를 추가해라
// parents=["DIV", "BODY", "HTML"]; join(붙이기)
$('div:last').append(parents.join(","));
});
//parent 부모를 찾아라
$('button:eq(13)').click(function(){
$('span:first').parent().addClass('box');
});
$('button:eq(14)').click(function(){
$('body').find('.line').addClass('box'); //$('body .line') 와 같다
//$('line' , 'body') 와 같다.
$('div').css("font-size","2em") //em 기본끌꼴크기 =1
.find('.line').css("font-size","3em");
});
//map() 객체를 만든다.
$('button:eq(15)').click(function(){
$('p').append(
$('ul li').map(function(){
return $(this).text();
}
).get().join(",")
)
});
//andSelf();
$('button:eq(16)').click(function(){
// ul찾고 그 아래의 li를 찾고 box 클래스추가
// li 3개 + ul에 linebox 클래스 추가
$('ul').find('li').addClass("box")
.andSelf().addClass("linebox");
});
//end();
$('button:eq(17)').click(function(){
// ul찾고 그 아래의 li를 찾고 box 클래스추가
// method chainging
// ul에만 linebox 클래스 추가
$('ul').find('li').addClass("linebox")
.end().addClass("box");
});
});
</script>
<style>
.linebox{ border:2px solid black; }
.box{ background-color:#09F; width:70px; height:70px;
margin:2px;
border:2px solid black;
}
div{ background-color:#69F; width:50px; height:50px;
float:left; margin:1px; }
br { clear:both; } <!-- clear: 그전의 float 속성 캔슬 -->
</style>
</head>
<body>
<div> </div>
<div class="line"> </div>
<div > </div>
<div class="line">
<span>1</span><span>2</span><br />
</div>
<div>
<span>3</span><span>4</span>
</div>
<br/>
<button> filter() </button>
<button> not() </button>
<button> slice(begin, end) </button>
<button> slice(begin) </button>
<button> children() </button>
<button> contents() </button>
<button> next() </button>
<button> next(이름)</button>
<button> nextAll()</button>
<button> prev() </button>
<button> prev(파라미터) </button>
<button> prevAll() </button>
<button> parents() </button>
<button> parent() </button>
<button> find() </button>
<button> map() </button>
<button> andSelf() </button>
<button> end() </button>
<br/>
<input type="text" name="id" size="10" class="id"
placeholder="id를 입력하세요" />
<input type="password" name="pw" size="10" class="pw"
placeholder="pw를 입력하세요" />
<input type="password" name="pw2" size="10" class="pw2"
placeholder="pw를 입력하세요" />
<button > 보내기 </button><br/>
<ul>
<li> 첫번째 </li><li> 두번째 </li><li> 세번째 </li>
</ul>
<p> </p>
</body>
</html>
