HTML 문서 안에는 다양한 엘리먼트들이 포함되어 있는데, 이를 컨트롤하기란 결코 간단한 일이 아니다.
일반적으로 자바스크립트에서 element를 얻기 위해 많이 쓰이는 방법은 document.getElementById("엘리먼트 ID 속성 값") 함수를 사용하면 되지만, 간소화된 jquery를 사용하는 것이 더 가독성도 좋고 유용하다.
그렇기 때문에 오늘은 jquery selector에 대해 배워보도록 하자 .
$("")
3. description
입력받은 element와 일치하는 DOM태그명을 찾아 element를 리턴한다.
4. 예제
<script type="text/javaccript">
$(document).ready(function() {
var result="";
$("div").css("border","3px solid red".each(function() {
result += $(this).html; });
</script>
<body>
<div>hi there </div>
<span>how r u ? </span>
< div> i'm fine </div>
</body>
.("#id")
1.parameter
str (string) : DOM형식의 element의 id 속성값
2. return
element
3. description
id 속성에 해당하는 단일의 element를 리턴한다.
.(".class")
1, parameter
class (string) : 검색하기 원하는 class의 속성값
2.return
array<element>
3.description
.으로 시작하는 입력값일 경우 class 속성과 일치하는 모든 element룰 리턴한다.
* id와 class 차이점
id는 하나의 고유한 요소에 대한 스타일을 지정하는데 사용하며, 한 태그에 하나의 id만 지정할 수 있다.
그러나 class는 요소 그룹에 대한 스타일을 지정하는데 사용하며, 여러태그에 지정할 수 있다.
또한 우선 순위는 id가 class보다 우선 순위가 높고, id는 javascript에서 동적으로 제어가 가능하나 class는 그렇지 못하다
(id : 동적 class : 정적 )
'컴퓨터 공부 > 자바스크립트' 카테고리의 다른 글
| [앵귤러] 앵귤러(Angular)js 수명주기 (0) | 2015.04.23 |
|---|---|
| [앵귤러] 앵귤러(Angular) JS 개념 및 예제 1 (5) | 2015.04.23 |
| [jquery] hover 기능에 대하여 알아보자 (1) | 2013.01.18 |
| [jquery] jquery manipulation [3] (요소를 추가하는메소드) (0) | 2013.01.16 |
| [jquery] jquery selectors [2] (:not, :hidden,[attribute=value], :selected, eq(index) ) (0) | 2013.01.16 |