jQuery 선택자 Selectors 란 무엇인가?
결과화면
소스
<html>
<head>
<title>Selectors</title>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
function Test()
{
//1.
jQuery("*").css("border", "1px solid red");
//8.
//jQuery(":button").css("border", "1px solid red");
//9.
//jQuery(":checkbox").css("border", "1px solid red");
//10.
//jQuery(":radio").css("border", "1px solid red");
//11.
//jQuery(":input").css("border", "1px solid red");
//12
//jQuery(":password").css("border", "1px solid red");
//15
//xml 기술중 xpath기술:[] 뜻하는건 조건을 뜻한다. [title] title이라는 속성이 발견되면 반환 아니면 스킵
//jQuery("[title]").css("border", "1px solid red");
//16.
//jQuery("[title='홍씨']").css("border", "1px solid red");
//17
//jQuery("[title!='홍씨']").css("border", "1px solid red");
//18. where title like '홍%'
//jQuery("[title^='홍']").css("border", "1px solid red");
//19. where title like '%씨'
//jQuery("[title$='씨']").css("border", "1px solid red");
//20. where title like '% 홍 %'
//jQuery("[title~='홍']").css("border", "1px solid red");
//21. where title like '%홍%'
//jQuery("[title*='홍']").css("border", "1px solid red");
//22 활성화된 애들은 모두 체크하세요.
//jQuery(":enabled").css("border", "1px solid red");
//23 비활성화된 애들만 찾겠다.
//jQuery(":disabled").css("border", "1px solid red");
//24. p태그중에서 태그라는 데이터를 가지는 것을 검색.
jQuery("p:contains('태그')").css("border", "1px solid red");
//31.
jQuery("#div1:parent").css("background-color", "yellow");
}
</script>
</head>
<body>
<h2 title="김씨">jQuery Selectors예제</h2>
<p title="홍 길동">p 태그입니다.</p>
<div title="이순신">div 태그입니다.</div>
<div>안녕하세요 <span title="홍씨">홍길동</span>입니다.</div>
<br />
<input type="checkbox" />예
<input type="checkbox" />아니오
<br />
<input type="radio" />남자 <input type="radio" />여자
<br />
<input type="text" title="하하하" />
<br />
<input type="password" disabled="disabled" />
<br />
<textarea></textarea>
<hr />
<input type="button" value=" 테스트 " onclick="Test();" />
</body>
</html>
결과화면
소스
<html>
<head>
<title></title>
<style type="text/css">
h2 {text-align:center;}
#list {margin:0px auto;}
body, p, div, span, li, a, input, th, td
{
font-size:12px;
color:#333333;
}
#list
{
width:500px;
border:1px solid gray;
border-collapse:collapse;
}
#list th, #list td
{
border:1px solid gray;
padding:2px;
}
#list th
{
background-color:Orange;
}
</style>
<script type="text/javascript">
function Init()
{
//모든 tr 검색
var rows = document.getElementsByTagName("tr");
for (i = 1; i < rows.length; i++)
{
//M1
//if (i % 2 == 0)
// rows[i].style.backgroundColor = "yellow";
//M2
rows[i].onmouseover = function ()
{
//alert(event.srcElement.tagName);
event.srcElement.parentNode.style.backgroundColor = "yellow";
};
rows[i].onmouseout = function ()
{
event.srcElement.parentNode.style.backgroundColor = "transparent";
};
}
}
</script>
</head>
<body onload="Init();">
<h2>자유 게시판</h2>
<table id="list">
<tr>
<th>번호</th>
<th>제목</th>
<th>이름</th>
<th>날짜</th>
<th>조회</th>
</tr>
<tr>
<td>1</td>
<td>게시판 테스트 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입테스트니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>테스트</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>테스트</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 테스트하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>테스트</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
</table>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$("td:contains('테스트')").css("background-color", "yellow").css("color", "red");
$("tr:even").css("background-color", "yellow");
//$("#list td:first").css("text-decoration", "underline");
//$("tr:last").css("text-decoration", "underline");
//$("td:gt(7)").css("background-color", "yellow");
$("tr:lt(7)").css("background-color", "yellow");
</script>
</body>
</html>
