제이쿼리(jQuery) 기초 문법 - 선택자 (2) 직접 선택자, 메소드 체이닝 기법
제이쿼리(jQuery) 기초 문법
선택자
선택자는 HTML요소를 선택하여 가져온다. 제이쿼리 선택자는 CSS선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다. 이때 HTML에 작성한 스타일을 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 스타일(CSS)는 정적이다라고 표현한다. 하지만 제이쿼리 선택자를 사용하면 동적으로 스타일을 적용할 수 있다.
기본 선택자
영역에 있는 문서 객체를 선택할 수 있는 선택자를 알아보자. 제이쿼리의 기본 선택자는 다음과 같이 직접 선택자와 인접 관계 선택자로 나눌 수 있다.
직접 선택자
직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자이다. 직접 선택자의 종류로는 전체(*), 아이디(#), 클래스(.), 요소명, 그룹(,) 선택자가 있다.
전체 선택자
전체(Universal)요소를 선택할 때 사용한다. 이 선택자를 사용하면 현재 HTML의 모든 태그를 선택한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$("*").css("border","1px solid red");//전체 선택자
});
</script>
</head>
<body>
<h1>안녕하세요</h1>
<h2>반갑습니다</h2>
</body>
아이디 선택자
아이디 속성에 지정한 값을 포함하는 요소를 선택한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$("#cont").css("border","1px solid red").css("background-color","blue");
//아이디 선택자, 메소드 체이닝 기법으로 선택한 요소의 css메소드를
//연속해서 2회 적용한다.
});
</script>
</head>
<body>
<h1>안녕하세요</h1>
<h2 id="cont">반갑습니다</h2>
</body>
메소드 체이닝 기법
선택한 요소에는 메소드를 연속해서 사용할 수 있는데, 이를 마치 체인이 엮인 모양과 같다고 하여 "체이닝 기법"이라고 한다. 제이쿼리에서 한 객체에 다양한 메소드를 줄줄이 이어서 사용할 수 있다. ㅁㅁ메소드 사용이 완료되면 문장 마지막에는 세미콜론(;)을 작성하여 마무리한다.
$(요소 선택).css(속성1,값1).css(속성2.값2);
클래스 선택자
클래스 속성에 지정한 값을 포함하는 요소를 선택한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$(".cont").css("border","1px solid red").css("background-color","blue");
//클래스 선택자, 메소드 체이닝 기법으로 선택한 요소의 css메소드를
//연속해서 2회 적용한다.
});
</script>
</head>
<body>
<h1>안녕하세요</h1>
<h2 class="cont">반갑습니다</h2>
</body>
요소명 선택자
지정한 요소명(Tag Name)과 일치하는 요소를 모두 선택한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$("h2").css("border","1px solid red").css("background-color","blue");
//요소명 선택자, 메소드 체이닝 기법으로 선택한 요소의 css메소드를
//연속해서 2회 적용한다.
});
</script>
</head>
<body>
<h1>안녕하세요</h1>
<h2>반갑습니다</h2>
</body>
그룹 선택자
한 번에 여러 개의 요소를 선택할 때 사용한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$("#cont, h3").css("border","1px solid red").css("background-color","blue");
//그룹 선택자, 메소드 체이닝 기법으로 선택한 요소의 css메소드를
//연속해서 2회 적용한다.
});
</script>
</head>
<body>
<h1>안녕하세요</h1>
<h2 id="cont">반갑습니다</h2>
<h3>yeony 입니다</h3>
</body>
종속 선택자
선택한 요소의 id 또는 class 값이 일치하는 요소를 선택할 때 사용한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$("h2.cont").css("border","1px solid red").css("background-color","blue");
//종속 선택자, 메소드 체이닝 기법으로 선택한 요소의 css메소드를
//연속해서 2회 적용한다.
$("h3#text").css("border","1px solid red");
});
</script>
</head>
<body>
<h1>안녕하세요</h1>
<h2 class="cont">반갑습니다</h2>
<h3 class="text">yeony입니다</h3>
</body>
하위 선택자와 종속 선택자는 작성하는 방법이 비슷한데, 종속 선택자는 요소명과 id(or class)값 사이에 공백이 없지만 하위 선택자는 공백이 있다.