카테고리 없음
jQuery Selectors(선택자)
James Wetzel
2011. 8. 6. 15:28
jQuery Element Selectors(요소 선택자)
jQuery Atrribute Selectors(속성 선택자)
$("p") selects all <p> elements.
$("p.intro") selects all <p> elements with class="intro".
$("p#demo") selects all <p> elements with id="demo".
jQuery Atrribute Selectors(속성 선택자)
$("[href]") select all elements with an href attribute.
$("[href='#']") select all elements with an href value equal to "#".
$("[href!='#']") select all elements with an href attribute NOT equal to "#".
$("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".
jQuery Css Selectors(css 선택자)
$("p").css("background-color","yellow");
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Selectors Sample 1</title>
<script src="../Script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[name=cssAdd]").click(function () {
$("p").css("background-color", "silver");
});
$("[name=cssDelete]").click(function () {
$("p").css("background-color", "");
});
});
</script>
</head>
<body>
<p>Background Color를 jQury가 컨트롤 한다.</p>
<button name="cssAdd">backgroud color 생성</button>
<button name="cssDelete">backgroud color 제거</button>
</body>
</html>
| Syntax | Description |
|---|---|
| $(this) | Current HTML element |
| $("p") | All <p> elements |
| $("p.intro") | All <p> elements with class="intro" |
| $("p#intro") | All <p> elements with id="intro" |
| $("p#intro:first") | The first <p> element with id="intro" |
| $(".intro") | All elements with class="intro" |
| $("#intro") | The first element with id="intro" |
| $("ul li:first") | The first <li> element of each <ul> |
| $("[href$='.jpg']") | All elements with an href attribute that ends with ".jpg" |
| $("div#intro .head") | All elements with class="head" inside a <div> element with id="intro" |
728x90
반응형