jQuery를 이용한 css 변경
선택된 DOM object에서 .css(attribute, value) 로 변경이 가능하다.
신기하고 재미있는 기능들이 많은 것 같다. 여러모로.
<html>
<head>
<title>This is my first web file</title>
<script type="text/javascript" language="javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
function append_table_context() {
$("#tableContext").append("<tr><td>F.Name</td><td>L.Name</td></tr>");
}
</script>
<style type="text/css">
#box
{
background : red;
width : 300px;
height : 400px;
}
p a
{
color:Red;
}
</style>
<script type="text/javascript" language="javascript">
$(function() {
$('a').click(function() {
$('#box').slideDown();
$('p a').css('color', 'blue');
});
});
</script>
</head>
<body>
<div id="box" style="display:none"></div>
<a href="#">Click Me!</a>
<br/>
<p>
* Sizzle CSS Selector <a href="#">Engine</a> - v0.9.3Copyright 2009, The Dojo Foundation* Released under the MIT, BSD, and GPL Licenses.*
More information: http://sizzlejs.com/
</p>
<input id="btnInput" type="button" value="click me" onclick="javascript:append_table_context();"/>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tbody id="tableContext">
</tbody>
</table>
</body>
</html>
<head>
<title>This is my first web file</title>
<script type="text/javascript" language="javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
function append_table_context() {
$("#tableContext").append("<tr><td>F.Name</td><td>L.Name</td></tr>");
}
</script>
<style type="text/css">
#box
{
background : red;
width : 300px;
height : 400px;
}
p a
{
color:Red;
}
</style>
<script type="text/javascript" language="javascript">
$(function() {
$('a').click(function() {
$('#box').slideDown();
$('p a').css('color', 'blue');
});
});
</script>
</head>
<body>
<div id="box" style="display:none"></div>
<a href="#">Click Me!</a>
<br/>
<p>
* Sizzle CSS Selector <a href="#">Engine</a> - v0.9.3Copyright 2009, The Dojo Foundation* Released under the MIT, BSD, and GPL Licenses.*
More information: http://sizzlejs.com/
</p>
<input id="btnInput" type="button" value="click me" onclick="javascript:append_table_context();"/>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tbody id="tableContext">
</tbody>
</table>
</body>
</html>
Day 3까지 보니. 코드를 어떻게 적어야지 될지 약간의 감이 오는 것 같다. ^^
<html>
<head>
<title>This is my first web file</title>
<script type="text/javascript" language="javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
function append_table_context() {
$("#tableContext").append("<tr><td>F.Name</td><td>L.Name</td></tr>");
}
</script>
<style type="text/css">
#box
{
background : red;
width : 300px;
height : 300px;
position : relative;
}
p a
{
color:Red;
}
</style>
<script type="text/javascript" language="javascript">
$(function() {
$('#box').click(function() {
$(this).animate({
"left" : "300px"
}, 4000);
$(this).animate( { "width" : "50px" } );
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Click Me!</a>
</body>
</html>
<head>
<title>This is my first web file</title>
<script type="text/javascript" language="javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" language="javascript">
function append_table_context() {
$("#tableContext").append("<tr><td>F.Name</td><td>L.Name</td></tr>");
}
</script>
<style type="text/css">
#box
{
background : red;
width : 300px;
height : 300px;
position : relative;
}
p a
{
color:Red;
}
</style>
<script type="text/javascript" language="javascript">
$(function() {
$('#box').click(function() {
$(this).animate({
"left" : "300px"
}, 4000);
$(this).animate( { "width" : "50px" } );
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Click Me!</a>
</body>
</html>
일단, jQuery에 대한 기본적인 function 사용법을 제대로 익히는 것이 가장 필요한 일인듯.
