제이쿼리(jquery) 기초 1
// h1=[] 배열
/*
var i=10; int
var i=10.0; double
var i=”aaa”; String
var i=[]; 배열
var i={}; 객체
var m={name:”aaa”,sex:”bbb”,dept:”ccc”};
m.name
m.sex
m.dept ====> JSON방식(자바스크립트 데이터 표현법)
====> 몽고디비.
$(document.ready(function(){})); 와
$(function(){}); 는 똑같은 window.onload 이다.
css의 기능들과 같다. ‘셀렉터’라고 한다.(원하는 태그들을 바꿔나간다)
getElementsByTagName
$(‘h1’).css(‘color’,’red’); getElementsByTagName
$(‘h1#a’).css(‘color’,’red’);
$(‘#a’).css(‘color’,’red’); document.getElementById
$(‘.d’).css(‘color’,’red’);
태그와 태그 사이 가져오기
var str=$(‘.d’).text();
태그와 태그 사이 값바꾸기
$(‘#e’).text(str); 매개변수를 넣으면 값이 바뀐다.
한쪽 값을 가져와서 다른 쪽 값에 뿌리기
$(‘#btn’).click(function(){
var inData=$(‘#in’).val();
$(‘#out’).val(inData);
});
필터
$(function(){
$(‘tr:eq(0)’).css(‘background’,’#eeeeee’);
$(‘tr:nth-child(2n)’).css(‘background’,’#eeeeee’);
//2n -> 0,2,4,6
//2n+1->1,3,5,7
$(‘tr:lt(3)’).css(‘color’,’green’);
//tr<3 0,1,2
$(‘tr:gt(3)’).css(‘color’,’red’);
//tr>3 4,5
$(‘tr:not(#aaa)’).css(‘color’,’blue’);
});
<table border=1 width=300>
<tr id=”aaa”>
<th>이름</th>
<th>성별</th>
<th>주소</th>
</tr>
<tr>
<td>우</td>
<td>121</td>
<td>131</td>
</tr>
<tr>
<td>홍</td>
<td>121</td>
<td>131</td>
</tr>
<tr>
<td>김</td>
<td>121</td>
<td>131</td>
</tr>
<tr>
<td>박</td>
<td>121</td>
<td>131</td>
</tr>
<tr>
<td>이</td>
<td>121</td>
<td>131</td>
</tr>
</table>
$(‘input:button’)
와
$(‘input[type=”button”]’)는 같다.
$(function(){
$(‘input:button’).click(function(){
var a=$(‘#aaa input:text’).val();
$(‘#bbb input:text’).val(a);
}
);
});
아이디가 없을 땐
$(function(){
$(‘input:button’).click(function(){
var a=$(‘input:text:eq(0)’).val();
$(‘#input:text:eq(1)’).val(a);
}
);
});
투명도 조절
$(function(){
$(‘img’).animate({“opacity”:.3});
$(‘img’).hover(function(){
$(this).animate({“opacity”:1});
},function(){
$(this).animate({“opacity”:.3});
});
});
태그와 태그 사이 text()
밸류값 가져오기 val()
속성값 가져오기 attr(‘href’)
//////////////////////////////////////////////////////////////////////////
<%@ page language=”java” contentType=”text/html; charset=EUC-KR”
pageEncoding=”EUC-KR”%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-KR”>
<title>Insert title here</title>
<style type=”text/css”>
#bigimg{
text-align:center;
position: absolute;
margin: 0 auto;
border: 1px solid #AAAAAA;
}
</style>
<script type=”text/javascript”></script>
<script type=”text/javascript” src=”../js/jquery.js”></script>
<script type=”text/javascript”>
$(function(){
var ox=20;
var oy=10;
$(‘#wrap a’).hover(function(e){
var href=$(this).attr(‘href’);
$(‘<img id=”bigimg” src=”‘+href+'”>’).css(‘top’,e.pageY+oy).css(‘left’,e.pageX+ox).appendTo(‘body’);
},
function(){
$(‘#bigimg’).remove();
});
});
</script>
</head>
<body>
<div id=”wrap”>
<a href=”../image/a.jpg”><img src=”../image/a.jpg” width=100 height=120></a>
<a href=”../image/b.jpg”><img src=”../image/b.jpg” width=100 height=120></a>
<a href=”../image/c.jpg”><img src=”../image/c.jpg” width=100 height=120></a>
<a href=”../image/d.jpg”><img src=”../image/d.jpg” width=100 height=120></a>
<a href=”../image/e.jpg”><img src=”../image/e.jpg” width=100 height=120></a>
</div>
</body>
</html>
퀵메뉴
<%@ page language=”java” contentType=”text/html; charset=EUC-KR”
pageEncoding=”EUC-KR”%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-KR”>
<title>Insert title here</title>
<style>
#wrap{
text-align: center;
margin: 0 auto;
width: 600px;
}
#menu{
background: #ededed;
position: absolute;
width: 100px;
top: 50px;
right: 10px;
}
</style>
<script type=”text/javascript” src=”../js/jquery.js”></script>
<script type=”text/javascript”>
$(function(){
var cp=parseInt($(‘#menu’).css(‘top’));
$(window).scroll(function(){
var pos=$(window).scrollTop();//맨위의 위치
$(‘#menu’).stop().animate({‘top’:cp+pos+”px”},500);
});
});
</script>
</head>
<body>
<div id=”wrap” style=”border:1px solid #000000″>
</div>
<div id=”menu” style=”border: 1px solid #000000″>
<ul>
<li><a href=”#”>메뉴1</a></li>
<li><a href=”#”>메뉴2</a></li>
<li><a href=”#”>메뉴3</a></li>
<li><a href=”#”>메뉴4</a></li>
<li><a href=”#”>메뉴5</a></li>
</ul>
</div>
</body>
</html>
체크박스와 라디오버튼 선택
<script>
$(function(){
$(‘input[name=”f”]:radio’).click(function(){
$(‘#cb>option[value=”‘+$(this).val()+'”]’).attr(“selected”,”selected”);
$(‘input:text’).val($(this).parent().prev().text());
});
$(‘#cb’).change(function(){
var value=$(‘#cb option:selected’).val();
$(‘input:radio[value=”‘+value+'”]’).attr(“checked”,”checked”);
$(‘input:text’).val($(‘#cb option:selected’).text());
});
});
</script>
텍스트 값 전달(keyup)
<script type=”text/javascript” src=”../js/jquery.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘#second’).attr(“disabled”,”disabled”);
$(‘#first’).keyup(function(){
$(‘#second’).val($(‘#first’).val());
});
});
</script>
MVC패턴 흐름도
