728x90
반응형
사용 예 1 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 |
<textarea name="code" class="brush:js"><!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><style type="text/css"> div { width:60px; height:60px; margin:10px; float:left; border:2px solid blue ; } .blue { bac kground:blue; } .lightblue { background:lightblue; } .orange { background:orange; }</style><script type="text/javascript">$(document).ready(function() { $("div").eq(0).addClass("lightblue"); $("div").filter(":odd") .eq(0).css("background", "orange") .end() .eq(1).css("background", "blue") .end() .css("color", "red"); var $myDiv = $("div").eq(5); if ($myDiv.is("div")) $myDiv.css("border", "4px solid yellow"); if ($myDiv.is(".orange, .blue, .lightblue")) $myDiv.text("칼라"); var arr = $("div").map(function() { return $(this).text().toUpperCase(); });});</script></head><body><div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div class="orange">f</div><div>g</div></body></html> |
사용 예 2 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 |
<!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><style type="text/css">* { font-size:12px; font-family:돋움; }div { width:60px; height:60px; margin:10px; float:left; border:1px solid silver; padding: 5px }</style><script type="text/javascript">$(document).ready(function() { $("div:eq(1)") .siblings().css("border", "1px solid blue") .end() .next().text("third") .end() .nextAll().css("background", "yellow"); $("div").find("p").css("color", "blue") .add("span").css("border", "1px solid red");});</script></head><body> <div>A <p>p a</p> </div> <div>B <p>p b</p></div> <div>C <p>p c</p></div> <div>D <br /><span>span d</span></div> <div>E <br /><span>span e</span></div></body></html> |
사용 예 3 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74 |
<!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><style type="text/css"> td { border: 1px solid #333333;}</style><script type="text/javascript">$(document).ready(function(){ $('#eq').click(function(){ $('td:eq(2)').css('background-color', 'red'); //index : 2 }); $('#lt').click(function(){ $('td:lt(4)').css('background-color', 'red'); //4 이전 }); $('#gt').click(function(){ $('td:gt(3)').css('background-color', 'red'); // 3 이후 }); $('#even').click(function(){ $('td:even').css('background-color', 'red');//짝수 }); $('#odd').click(function(){ $('td:odd').css('background-color', 'red');//홀수 }); $('#first').click(function(){ $('td:first').css('background-color', 'red');//처음 }); $('#last').click(function(){ $('td:last').css('background-color', 'red');//끝 }); $('#not').click(function(){ $('td:not(:eq(5))').css('background-color', 'red'); // 5이외 }); $('#clear').click(function(){ $('td').css('background-color', 'white'); });});</script></head><body> <form> <input type="button" id="eq" value="eq(2)"> <input type="button" id="lt" value="lt(4)"> <input type="button" id="gt" value="gt(3)"> <input type="button" id="even" value="even"> <input type="button" id="odd" value="odd"> <input type="button" id="first" value="first"> <input type="button" id="last" value="last"> <input type="button" id="not" value="not(5)"> <input type="button" id="clear" value="clear"> </form> <table> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> </table> </body></html> |
728x90
반응형
'JQUERY > 소스코드' 카테고리의 다른 글
| 인풋박스에서 글씨 적혀있다가 커서 위치시 사라지는. (0) | 2014.09.05 |
|---|---|
| [jQuery] DOM요소 추가하기 (0) | 2014.09.05 |
| for문 출력 컨트롤 거꾸로 똑바로 등 (0) | 2014.09.05 |
| jQuery API: Core, Selector, Traversing (0) | 2014.08.19 |
| jQuery API: Attribute, CSS (0) | 2014.08.19 |
| uery attr(), removeAttr() 함수를 이용해서 속성 변경, 속성값 가져오기,제거 해보자 (0) | 2014.08.19 |
| Jquery 부모창 컨트롤!! opener.document (0) | 2014.08.08 |
| [jquery] 부모창 > opener > 객체 접근 (0) | 2014.08.08 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!