<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>JQuey 연습</title>
<script src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
/* $(function() {
$('.divText').text('<img src = "images/puppy.jpg">');
$('.divHtml').html('<img src = "images/puppy.jpg">');
$('.divEmpty').empty();
var grim = $('#grim')
grim.hover(function() {
grim.attr('src', 'images/cat.jpg');
},
function() {
grim.attr('src', 'images/puppy.jpg');
});
//$('#grim').attr('src','images/cat.jpg');
});*/
/* $(function(){
//1.텍스트필드에 :"이름을 입력하세요" 출력
var it = $('input');
it.val('이름을 입력하세요');
//2.텍스트에어리어에 "여기에 작성하세요" 출력
var ta = $('textarea');
ta.val('여기에 작성하세요');
//3.셀렉트태그에서 마산을 선택하세요
var se = $('select');
se.val('마산');
//->val()이용
}); */
$(function() {
$('#textarea').keyup(function() {
var len = $(this).val().length;
//1.남은 글자 수를 구하기
var remain = 15 - len;
//2. 그 남은 글자수를 <h1> 태그 쓰기
$('h1').text(remain);
//3. 남은 글자수가 0보다 작으면 <h1>빨강색 적용
//4. 0보다 크면 <h1>검정색 적용
if (remain > 0) {
$('h1').css('color', 'black');
} else {
$('h1').css('color', 'red');
}
});
$('.data').each(function() {
$(this).click(function() {
alert($(this).text());
});
});
var actress = $('#actress');
var song = $('#song');
var kim = $('#kim');
var jo = $('#jo');
actress.append(song);
kim.appendTo(actress);
});
</script>
</head>
<body>
<p>
<div id="actress">여배우</div>
<div id="song" class="data">송혜교</div>
<div id="kim" class="data">김태희</div>
<div id="jo" class="data">조문기여자</div>
</p>
<p>
<input type="text" value="이름" /> <span>15자 이내로 작성하세요</span>
<h1>15</h1>
<textarea rows="10" cols="80" id="textarea">내용</textarea>
<select>
<option>서울</option>
<option>부산</option>
<option>울산</option>
<option>마산</option>
<option>창원</option>
</select>
</p>
<div class="divText">여기1</div>
<div class="divHtml">여기2</div>
<div class="divEmpty">여기3</div>
그림 :
<img src="images/puppy.jpg" id="grim">
</body>
</html>
'it > jQuery' 카테고리의 다른 글
| 뭔가 되긴 되는거 같은데 (0) | 2014.08.21 |
|---|---|
| 글 숨기기. 테이블 마우스오버,. 색넣기 (0) | 2014.08.21 |
| <li>글자추가 삭제 (0) | 2014.08.21 |
| http://hyeonstorage.tistory.com/ (0) | 2014.08.21 |
| JQuery 기초기초 (0) | 2014.08.21 |
