07 - 필터 선택기 - 속성

2392 단어

필터 선택기 - 속성


속성 필터 선택기
선택기
묘사
되돌아오다
예제
[attribute]
이 속성을 가진 요소 선택
집합원소
$("div[id]") id 속성을 가진div 요소 선택
[attribute=value]
속성 값이value인 요소 선택
집합원소
$("div[id=test]") id 속성 값이test인 div 요소를 선택합니다.
[attribute!=value]
속성 값이value가 아닌 요소 선택
집합원소
$("div[id!=test]") id 속성 값이 test가 아닌div 요소를 선택하면 id 속성이 없는div도 선택됩니다
[attribute^=value]
속성 값으로value로 시작하는 요소 선택
집합원소
$("div[id^=test]") id 속성 값을 선택하여 테스트로 시작하는 모든div 요소
[attribute$=value]
속성이value값으로 끝나는 요소를 선택하십시오
집합원소
$("div[id$=test]") id 속성 값을 선택하여 테스트로 끝난div 요소
[attribute*=value]
속성에value가 포함된 요소 선택
집합원소
$("div[id*=test]") id 속성 값에 test가 포함된 모든div 요소를 선택합니다.
[A1][A2]…A[N]
속성으로 선택
선택기가 복합 속성 선택기로 통합됩니다.여러 조건을 충족하다.
집합원소
$("div[id][title$=test]") id 속성을 선택하고 title 속성이test로 끝나는 모든div 요소를 선택합니다

사례는 서로 다른 a 링크에 따라 서로 다른 아이콘 배경을 추가한다


html

jquery 속성 우려 자료 다운로드


js
$(function(){
    $("a[href$=html]").addClass("html");
    $("a[href$=txt]").addClass("txt");
    $("a[href^=./]").addClass("fl");
    
})


css
ul,li,a{ 
    margin:0; padding:0; 
    list-style:none;
    text-decoration:none;
    color:#444;}
    a:visited{color:#444;
}

a:hover{ color:#000;}

li{ 
height:30px;
line-height:30px;
border-bottom:1px dashed #444;
width:200px;
}

li a{
display:block; 
height:30px;
line-height:30px;
padding-left:25px;
background-image:url(pkg_comm_z527307bd.png); background-repeat:no-repeat;
}
.pdf{ background-position:0 -2px;}
.fl{ background-position:0 -255px;}
.pptx{ background-position:0 -440px;}
.txt{ background-position:0 -160px;}
.html{background-position:0 -347px;}

좋은 웹페이지 즐겨찾기