Jquey Selectors
$(function(){
// $("#list").css("border","1px solid silver");
// $("p").css("border","2px solid red");
// $("span").css("background-color","pink").css("color","#009999");
// $("span a").css("text-decoration","overline").css("color","#000000");
// $("span.detail").css("color","blue");
// $("div~b").css("background","green");
$("div>b").css("border","1px solid red");
// $("div+b").css("border","2px solid blue");
});
$(document).ready(function() {
$("img[alt]").css("border", "1px solid red");
// img 속성에 alt가 있는것 .
$("input[type='button']").css("background-color", "yellow");
// 인풋 타입이 버튼인것
$("a[href^='mailto:']").css("background-color", "lightblue");
// a테그 중에 href가 mailto: 로 시작 하는것
$("img[id!='hibiscus']", $("div")).css("border", "3px solid blue");
//img id 속성이 hibiscus가 아닌것 $("div"), 안에서 img 테그를 찾아서 적용 하라
$("img[src$='jpg']").css("border", "2px solid #00ffff");
//img 의 src 속성이 .jpg로 끝나는 것($=)
$("a[href*='power2c']").css("text-decoration", "none");
//a 의 href 속성이 포함(*=) 되어 있는것 power2c 가 ..
$("img[id|='little']").css("border", "2px solid green");
//img id 값이 little 이거나 little-xxx 인것. 반드시 '-' 가 있어야 한다.
$("img[title~='named']").css("border", "2px solid pink");
// img의 title 에 named 라는 단어가 있는것 포함이 아니라 하나의 단어로 구성 되어야 한다.
//A puppy named Cozmo <== 는 적용 되나 A puppynamed Cozmo 는 적용 되지 않는다.
});
1. CSS셀렉터
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// $("#list").css("border","1px solid silver");
// $("p").css("border","2px solid red");
// $("span").css("background-color","pink").css("color","#009999");
// $("span a").css("text-decoration","overline").css("color","#000000");
// $("span.detail").css("color","blue");
// $("div~b").css("background","green");
$("div>b").css("border","1px solid red");
// $("div+b").css("border","2px solid blue");
});
</script>
</head>
<body>
<div>
<span>IT교육의 요람<a href="http://ddit.or.kr">(재)대덕인재 개발원</a>으로 오세요</span><br><br>
<a href="mailto:power2c@ddit.or.kr">빠워에게 메일 보내기 </a>
<p>
RIA기술 : <input type="checkbox" name="ria" value="플렉스">플렉스
<input type="checkbox" name="ria" value="실버라이트">실버라이트
<input type="checkbox" name="ria" value="HTML5">HTML5
성별<input type="radio" name="sex" value="여자">"여자"
<input type="radio" name="sex" value="남자">"남자"
<input type="button" value="클릭~~"><br>
</p>
<div id="list">selector의 종류 들입니다.</div>
<b>엘리멘트 : </b><span class="detail"><b>태그명,ID 속성값,CLASS속성값이용</b></span><br>
<b>속성 : </b><span class ="detail">각 요소에 설정된 속성명과 속성값 이용</span><br>
<b>form : </b><span class = "detail">input,select,textarea등의 특성을 이용</span>
</div>
2.속성 관련 CSS셀렉터들
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img[alt]").css("border", "1px solid red");
// img 속성에 alt가 있는것 .
$("input[type='button']").css("background-color", "yellow");
// 인풋 타입이 버튼인것
$("a[href^='mailto:']").css("background-color", "lightblue");
// a테그 중에 href가 mailto: 로 시작 하는것
$("img[id!='hibiscus']", $("div")).css("border", "3px solid blue");
//img id 속성이 hibiscus가 아닌것 $("div"), 안에서 img 테그를 찾아서 적용 하라
$("img[src$='jpg']").css("border", "2px solid #00ffff");
//img 의 src 속성이 .jpg로 끝나는 것($=)
$("a[href*='power2c']").css("text-decoration", "none");
//a 의 href 속성이 포함(*=) 되어 있는것 power2c 가 ..
$("img[id|='little']").css("border", "2px solid green");
//img id 값이 little 이거나 little-xxx 인것. 반드시 '-' 가 있어야 한다.
$("img[title~='named']").css("border", "2px solid pink");
// img의 title 에 named 라는 단어가 있는것 포함이 아니라 하나의 단어로 구성 되어야 한다.
//A puppy named Cozmo <== 는 적용 되나 A puppynamed Cozmo 는 적용 되지 않는다.
});
</script>
<style type="text/css">
*{font-size: 12px; font-family: 돋움}
</style>
</head>
<body>
<div>
<a href="http://ddit.or.kr">(재)대덕인재 개발원</a><br><br>
<a href="mailto:power2c@ddit.or.kr">빠워에게 메일 보내기 </a><br><br>
<div>
<img alt="Hibiscus" src="images/image.1.jpg" id="hibiscus"/>
<img title="A dog nameed Little Bear" src="images/image.2.jpg" id="little-Bear"/>
<img alt="Verbena" src="images/image.3.jpg" id="verbena"/>
<img title="A puppy named Cozmo" src="images/image.4.jpg" id="cozmo"/>
<img alt="Tiger Lily" src="images/image.5.jpg" id="tigerLily"/>
<img title="coffeePot" src="images/image.6.jpg" id="little"/>
</div>
<div id = "someDiv">이곳은 ID속성이 <tt>someDiv</tt>인 <div>테그 입니다</div>
<div title="myTitle"><span>Hello</span></div>
<div title="myTitle"><span>Goodbye</span></div>
<form onsubmit="return false;">
<div>
<label>Text:</label><input type="text" id="aTextFiled" name="someTextField"/>
</div>
<div>
<label>Radio group:</label>
<input type="radio" name="radioGroup" id="radioA" value="A">A
<input type="radio" name="radioGroup" id="radioB" value="B">B
</div>
<div>
<label>Checkboxes:</label>
<input type="checkbox" name="checkboxes" id="checkbox1" value="1">1
<input type="checkbox" name="checkboxes" id="checkbox2" value="2">2
</div>
<button type="submit" id="submitButton">Submit</button>
<input type="button" value="클릭~~">
</form>
</div>
3.Form 관련 셀렉터들
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":input").css("border", "2px solid red");
// 모든 form 테그 적용 안에 적용
$(":input:button").css("background-color", "yellow");
// input 테그중 type 이 button 에 적용
$(":button").css("background-color", "yellow");
//input 테그중 type이 button 과 button 테그 에 모두 적용
$(":submit").css("background-color", "pink");
// 이하 같음 form 안에 type이 submit 인것에 모두 적용
$(":reset").css("background-color", "yellow");
$(":checkbox").css("border", "2px solid red");
$(":radio").css("border", "2px solid red");
$(":text").css("border", "2px solid red");
$(":password").css("border", "2px solid red");
$(":file").css("border", "2px solid red");
$(":image").css("border", "2px solid red");
});
</script>
<style type="text/css">
* {
font-size: 12px;
font-family: 돋움
}
</style>
</head>
<body>
<form onsubmit="return false;">
Text : <input type="text" /> <br /> Password : <input type="password" />
<br />
<br /> Radio : <input type="radio" name="radioGroup" id="radioA"
value="A" />A <input type="radio" name="radioGroup" id="radioB"
value="B" />B <br />
<br /> CheckBox : <input type="checkbox" name="checkboxes"
id="checkbox1" value="1">1 <input type="checkbox"
name="checkboxes" id="checkbox2" value="2">2<br />
<br /> Textarea : <br>
<textarea rows="15" cols="50" id="myTextarea" id="myTextarea"></textarea>
<br />
<br /> Images : <input type="image" src="images/image.1.jpg"><br />
<br /> File : <input type="file"><br />
<br /> Buttons :
<button type="submit" id="submitButton">Submit</button>
<input type="button" value="일반버튼"> <input type="submit"
value="전송버튼"> <input type="reset" value="초기화버튼">
</form>
</body>
4.기본 필터
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
$("tr").css("text-align", "center");
// 모든 tr 테그 안에 text를 정렬 하라. 가운데로.
$(":header:eq(1)").css("font-weight", "bold").css("color", "blue");
//header 테그 중(h1~h2~h3~ 등)에 2번째 것의 두깨를 bold 색깔을 블루로 변경 하라.
$("tr:first").css("background", "silver");
//tr 테그 중에 맨 처음 것의 배경색을 실버로
$("tr:last").css("background", "yellow");
//tr 테그 중에 맨 마지막 것의 배경색을 실버로
$("tr:odd").css("background", "#efefef");
// tr 테그중 홀수 번째 1.3.5 번째 (0부터 시작 0은 짝수)
$("tr:even").css("background", "#3388cc");
// tr 테그중 짝수 번째 0.2.4 번째 (0부터 시작 0은 짝수)
$("tr:gt(4)").css("background", "silver");
// tr 테그중 4번째 이전것 을 모두 적용
$("tr:lt(4)").css("background", "silver");
// tr 테그중 4번째 이후것 을 모두 적용
});
</script>
<style type="text/css">
* {
font-size: 12px;
font-family: 돋움
}
.scoreTable {
background: white;
border-collapse: collapse
}
</style>
</head>
<body>
<h1>수학 시험 점수1</h1>
<h2>수학 시험 점수2</h2>
<h3>수학 시험 점수3</h3>
<table class="scoreTable" border="1" cellpadding="10">
<tr>
<td width="100">이름</td>
<td width="100">점수</td>
</tr>
<tr>
<td>홍길동</td>
<td>80</td>
</tr>
<tr>
<td>일지매</td>
<td>98</td>
</tr>
<tr>
<td>성춘향</td>
<td>85</td>
</tr>
<tr>
<td>이몽룡</td>
<td>96</td>
</tr>
<tr>
<td>강감찬</td>
<td>88</td>
</tr>
<tr>
<td>이순신</td>
<td>90</td>
</tr>
<tr>
<td>박문수</td>
<td>92</td>
</tr>
</table>
</body>
이 글은 스프링노트에서 작성되었습니다.
'J-Query' 카테고리의 다른 글
| 4일차 Methods (0) | 2012.05.08 |
|---|---|
| 3일차 export/change (0) | 2012.05.08 |
| 1일차 get/function (0) | 2012.05.08 |
| 16일차 우편번호검색(json) (0) | 2012.05.08 |
| 16일차 select(DBMS:JSON:) (0) | 2012.05.08 |
