new.divs.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>New <div>s Example</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$("<div class='foo'>I have foo!</div><div>I don 't</div>")
.filter(".foo").click(function() {
alert("I'm foo!");
}).end().appendTo("#someParentDiv");
});
</script>
</head>
<body>
<div>Div 1</div>
<div id="someParentDiv">Div 2</div>
<div>Div 3</div>
</body>
</html>
============================================================================
dimensions.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width() and height() Test</title>
<link rel="stylesheet" type="text/css" href="../common.css">
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
$(function(){
report();
});
function report() {
$('#display').html(
$('#testSubject').width()+'x'+$('#testSubject').height()
);
}
</script>
<style>
#testSubject {
background-color: #cfeace;
border: 1px solid #00457b;
padding: 8px;
font-size: .85em;
}
</style>
</head>
<body onresize="report()">
<div id="testSubject">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam eget enim id neque aliquet porttitor. Suspendisse
nisl enim, nonummy ac, nonummy ut, dignissim ac, justo.
Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum
sed neque vehicula rhoncus. Nam faucibus pharetra nisi.
Integer at metus. Suspendisse potenti. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Proin quis eros at metus pretium elementum.
</div>
<div id="display"></div>
</body>
</html>
=================================================================================
zebra.stripes.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Disco Zebra Stripes!</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function() {
$("table tr:nth-child(even)").addClass("striped");
});
function swap() {
$('tr').toggleClass('striped');
}
</script>
<style>
body,td {
font-size: 10pt;
}
table {
background-color: black;
border: 1px black solid;
border-collapse: collapse;
}
th {
border: 1px outset silver;
background-color: maroon;
color: white;
}
tr {
background-color: white;
margin: 1px;
}
tr.striped {
background-color: coral;
}
td {
padding: 1px 8px;
}
</style>
</head>
<body>
<table onmouseover="swap()" onmouseout="swap()">
<tr>
<th>Year</th>
<th>Make</th>
<th>Model</th>
</tr>
<tr>
<td>1965</td>
<td>Ford</td>
<td>Mustang</td>
</tr>
<tr>
<td>1970</td>
<td>Toyota</td>
<td>Corolla</td>
</tr>
<tr>
<td>1979</td>
<td>AMC</td>
<td>Jeep CJ-5</td>
</tr>
<tr>
<td>1983</td>
<td>Ford</td>
<td>EXP</td>
</tr>
<tr>
<td>1985</td>
<td>Dodge</td>
<td>Daytona</td>
</tr>
<tr>
<td>1990</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>1995</td>
<td>Ford</td>
<td>Ranger</td>
</tr>
<tr>
<td>1997</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>2000</td>
<td>Chrysler</td>
<td>Jeep Wrangler Sahara</td>
</tr>
<tr>
<td>2005</td>
<td>Chrysler</td>
<td>Jeep Wrangler Unlimited</td>
</tr>
<tr>
<td>2007</td>
<td>Dodge</td>
<td>Caliber R/T</td>
</tr>
</table>
</body>
</html>
'jQuery' 카테고리의 다른 글
| jQuery 빠른 처리를 위한 CSS 셀렉터 사용팁 (0) | 2009.09.25 |
|---|---|
| jQuery 샘플 링크 (퍼옴) (0) | 2009.09.25 |
| jQuery 셀렉터로 기능 확장할 엘리먼트 선택하기 (0) | 2009.09.25 |
| 기본 CSS 셀렉터 사용하기 (0) | 2009.09.24 |
| jQuery1-1 (0) | 2009.09.23 |