[Jquery] Selectors






 all selector ("*")


모든 엘리먼트를 선택한다. 

$("*") 로 선택한다.


<!DOCTYPE html>
<html>
<head>
<style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
<script>var elementCount = $("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
</body>
</html>





 id selector ("#id")


지정된 id 를 가지는 하나의 엘리먼트를 선택한다. / getElementById()

html 에 있는 특정 엘리먼트에 id 를 통해 접근할 수 있다.

$("#id") 로 선택한다.


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 90px;
height: 90px;
float:left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<script>$("#myDiv").css("border","3px solid red");</script>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
float:left;
padding: 2px;
margin: 3px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="myID.entry[0]">id="myID.entry[0]"</div>
<div id="myID.entry[1]">id="myID.entry[1]"</div>
<div id="myID.entry[2]">id="myID.entry[2]"</div>
<script>$("#myID\\.entry\\[1\\]").css("border","3px solid red");</script>
</body>
</html>




 class selector (".class")


주어진 클래스를 가진 모든 엘리먼트를 선택한다. / getElementByClassName()

$(".class") 로 선택한다.


하나의 클래스만 지정한 경우...

<!DOCTYPE html>
<html>
<head>
<style>
div,span {
width: 100px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
<script>$(".myClass").css("border","3px solid red");</script>
</body>
</html>


지정한 두개의 클래스가 모두 포함된 엘리먼트들만 선택하는 경우... (myClass 만 있는 경우 선택 안됨)

<!DOCTYPE html>
<html>
<head>
<style>
div,span {
width: 100px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="myclass">div class="notMe"</div>
<div class="myclass otherclass">div class="myClass"</div>
<span class="myclass otherclass">span class="myClass"</span>
<script>$(".myclass.otherclass").css("border","13px solid red");</script>
</body>
</html>




 element selector ("element") 


주어진 태그를 가지고 있는 모든 엘리먼트를 선택한다. / getElementByTagName()

$("tag") 로 선택한다.


모든 div 엘리먼트를 선택해서 css 를 설정하는 코드.

<!DOCTYPE html>
<html>
<head>
<style>
div,span {
width: 60px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
<script>$("div").css("border","9px solid red");</script>
</body>
</html>










'Web Server > JS & JQuery & JQM' 카테고리의 다른 글

[JQuery] Selectors  (0) 2013.03.03
Posted by croute

댓글을 달아 주세요