속성 선택자

1. 속성 선택자

종류

예시

설명

요소 선택[속성]

$("li[class]")

속성을 선택

요소 선택[속성=값]

$("li[class='list09']")

속성과 속성 값을 선택

요소 선택[속성^=값]

$("li[href^='http']")

속성 값이 http로 시작하는 값을 선택

요소 선택[속성$=값]

$("li[href$='.com']")

속성 값이 .com으로 끝나는 값을 선택

요소 선택[속성*=값]

$("li[href*='naver']")

속성 값에 naver가 포함되는 값을 선택

1.1 예제 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery | sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(function(){
        $("#wrap a[target]")
        .css({"color":"#f00"});

        $("#wrap a[href^=https]")
        .css({"color":"#0f0"});

        $("#wrap a[href$=net]")
        .css({"color":"#00f"});

        $("#wrap a[href*=google]")
        .css({"color":"#000"});

        $("#member_f:text")
        .css({"background-color":"#ff0"})

        $("#member_f:text")
        .css({"background-color":"#0ff"})
    });
</script>
</head>
<body>
<div id="wrap">
    <p>
        <a href="https://easyspub.co.kr" target="_blank">EasyPub</a>
    </p>
    <p>
        <a href="https://www.naver.com">Naver</a>
    </p>
    <p>
        <a href="https://google.co.kr">Google</a>
    </p>
    <p>
        <a href="https://daum.net">Daum</a>
    </p>
</div>
<form action="#" method="get" id="member_f">
    <p>
        <label for="user_id">아이디</label> <input type="text" name="user_id"
        id="user_id">
    </p>
    <p>
        <label for="user_pw">비밀번호</label> <input type="password" 
        name="user_pw" id="user_pw">
    </p>
</form>
</body>
</html>

Previous계층 선택자Next기본 필터 선택자

Last updated

Was this helpful?