<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("span:contains('JQuery')").css("border","1px sllid blue");//JQuery 를 포함 하는span 테그를 변경 .
$("span:not(:contains('JQuery'))").css("border","1px solid red");
});// JQuery를 포함 하지 않는 span 테그를 변경 컨텐츠 를 변경
</script>
<style type="text/css">
*{font-size:12px;font-family:돋음}
</style>
</head>
<body>
<div>Hello,<span>Enjoy developing!</span></div>
<p>It's another sector!<span>Thanks, JQuery!</span></p>
<div class="myClsaa">JQuery!</div>
<span class="notMyclass">It's so easy!</span>
</body>
</html>
//
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("td:empty").text("새로운값").css("background","yellow");
}); // td 중 비어있는 것을 찾아 새로운값및 백그라운드 색상을 변경.
/* $(selector).text(); // selector 의 내용중 문자열만 추출한다.
$(selector).html(); // selector 의 내용중 html코드로 추출한다.
$(selector).text("내용"); // selector자리에 '내용'을 문자열 형태로 넣어 준다.
//내용에 html코드가 포함되어도 이 html 코드를 해석하지 않고 문자열 형태로 그대로 나타낸다.
$(selector).html("내용"); // selector 자리에 '내용'을 html 형식으로 넣어 준다.
*/
</script>
<style type="text/css">
*{font-size:12px; font-family:돋음}
</style>
</head>
<body>
<table border="1">
<tr><td>TD 1-1</td><td></td></tr>
<tr><td>TD 2-1</td><td></td></tr>
<tr><td></td><td>TD 3-2</td></tr>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("div:has(span)").css("border","1px solid blue");
});
// span 테그를 포함 하는 div 테그를 찾아서 변경 하라.
</script>
<style type="text/css">
*{font-size:12px; font-family:돋음}
</style>
</head>
<body>
<div>
Hello,<span>Enjoy developing!</span><div class="myClass">JQuery!</div>
</div>
<p>It's another sector!<span>Thanks,JQuery!</span></p>
<span class="notMyClass">It's so easy!</span>
</body>
</html>
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("td:nth-child(3)").css("backgroundColor","yellow");
//각 td 그룹을 따로 나눈후 3번째 것을 찾아 변경
$("td:nth-child(odd)").css("backgroundColor","cyan");
// 그룹 나눈것중 홀수 번째
$("td:nth-child(even))").css("backgroundColor","red");
//그룹 나눈것중 짝수 번째
$("td:nth-child(3n+1)").css("backgroundColor","pink");
// '3n+1'와 같은 식의 n자리에 0,1,2,3,.. 을 차례로 대입 하여 계산한 결과의 위치를 선택 한다.
$("td:first-child").css("backgroundColor","yellow");
//각 그룹별로 첫번째 것을 찾아 적용 한다.
$("td:last-child").css("backgroundColor","cyon");
//각 그룹별로 마지막 것을 찾아 적용 한다.
$("td:only-child").css("backgroundColor","green");
// 자신이 부모 테그의 유일한 자식일때 적용 .그룹 적용된것에 하나 뿐일때 를 말하는것임
});
</script>
</head>
<body>
<table border="1">
<tr><td>TD #1 </td> <td>TD#2</td><td>TD#3</td><td>TD #4</td></tr>
<tr><td>TD #5 </td> <td>TD#6</td><td>TD#7</td><td>TD #8</td></tr>
<tr><td>TD #9 </td> <td>TD#10</td><td>TD#11</td><td>TD #12</td></tr>
</table>
<hr>
<table border="1">
<tr><td>TD #1 </td> <td>TD#2</td><td>TD#3</td><td>TD #4</td>
<td>TD #5 </td> <td>TD#6</td><td>TD#7</td><td>TD #8</td>
<td>TD #9 </td> <td>TD#10</td><td>TD#11</td><td>TD #12</td></tr>
</table>
<hr>
<table border="1">
<tr><td>TD#1</td><td>TD#2</td><td>TD#3</td></tr>
<tr><td colspan="3">TD#4</td></tr>
<tr><td colspan="2">TD#5</td><td>TD #6</td></tr>
</table>
</body>
</html>
<!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=UTF-8">
<title>New Document</title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
function testChecked() {
var result = "";
$(":checkbox:checked").each(function() {
if (result != "")
result += ",";
result += $(this).val();
$(this).css("border", "3px solid #6600ff ");
});
$(":checkbox:not(:checked)").each(function() {
$(this).css("border", "0px")
});
alert(result == "" ? "취미가 없군요!!" : "취미는 " + result + "이군요!!");
}// testChecked 끝
testChecked();
$(":checkbox").click(testChecked);
// checkbox를 클릭 하면 'testchecked' 함수를 호출 한다.
function testSelected() {
var result = "봄소식 전령사들\n\n";
$("select[name='spring'] option:selected").each(function() {
result += $(this).val() + "\n";
//$(this).css("border", "5px #009999 solid") + "\n";
});
alert(result);
}
testSelected();
//$("select[name='spring']").change(testSelected);
//'select'객체에서 'change'이벤트가 발생 하면 'testSelected'함수를 호출 한다.
$('#viewSelect').click(testSelected);
//
});
</script>
</head>
<body>
<form>
취미 : <input type="checkbox" name="hobby" value="여행" checked>여행
<input type="checkbox" name="hobby" value="장기" />장기 <input
type="checkbox" name="hobby" value="바둑" />바둑 <input type="checkbox"
name="hobby" value="독서" checked>독서 <input type="checkbox"
name="hobby" value="낚시" />낚시<br> 봄소식 : <select name="spring"
multiple="multiple" size="6">
<option>개나리</option>
<option selected>진달래</option>
<option>민들레</option>
<option selected>벚꽃</option>
<option>목련</option>
<option>철쭉</option>
</select><br>
<input type="button" id="viewSelect" value="봄소식보기"/>
</form>
</body>
</html>
이 글은 스프링노트에서 작성되었습니다.
'J-Query' 카테고리의 다른 글
| 5일차 찾기관련()eq().. (0) | 2012.05.08 |
|---|---|
| 4일차 Methods (0) | 2012.05.08 |
| 2일차 Selectors (0) | 2012.05.08 |
| 1일차 get/function (0) | 2012.05.08 |
| 16일차 우편번호검색(json) (0) | 2012.05.08 |
