jquery - 연산자

jQuery 선택자

jQuery는 html요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다.

jQuery 선택자 형식은 다음과 같습니다.

$("선택자")	$("#gnb")

선택자 종류	설명
태그선택자	$("p")	p 요소를 선택합니다
id선택	$("#gnb")	#gnb 요소를 선택합니다.
class 선택자	$(".logo")	.logo인 요소를 선택합니다.
자식 선택자	$("#gnb>ul>li")	#gnb 하위에 있는 모든 li요소를 선택합니다.
하위 선택자	$("#gnb ul")	#gnb 하위에 있는 모든 ul 요소를 선택합니다.
인접 선택자	$("#visual + #content")	#visual 다음에 오는 #content 요소를 선택합니다.
종속 선택자	$("div.util")	div 요소 중 class가 util인 요소를 선택합니다.
그룹 선택자	$(".left .right, #banner")	.left, .right, #banner 요소들을 선택합니다.
전체 선택자	$("*")	모든 요소를 선택합니다.

JQuery를 사용한 예제 입니다.

선택자를 정해주도록 합니다.

$(document).ready(function() {
    $("p").css("border","4px solid red");
    $("#gnb").css("border","4px solid orange");
    $(".logo").css("border","4px solid yellow");
    $("#gnb > ul > li").css("border", "4px solid green");
    $("#gnb ul").css("border","4px solid blue");
    $("#visual"+"#content").css("border","4px solid navy");
    $("#visual ~ #footer").css("border","4px solid purple");
    $("div.util").css("border","4px solid pink");
    $(".left,.right,#banner").css("border","4px solid gray");
    });

html입니다.

jquery를 사용하여 html에 값을 부여해 주었고 css로 모든 선택자에 margin을 5px를 주었습니다.

<header id="header">
<div class="logo">로고</div>
<div class="util">회원가입</div>
<nav id="gnb">
    <ul>
    <li>매뉴1
        <ul>
        <li>메뉴1_1</li>
        </ul>
    </li>
    </ul>
</nav>
<div id="visual">
    <p>비쥬얼</p>
</div>
<div id="content">
    <div class="left">왼쪽</div>
    <div class="right">
    <div class="util">오른쪽</div>
    </div>
</div>
<div id="banner">배너</div>
<div id="footer">푸터</div>
</header>

결과