jquery 선택자 정리 종결,항상 헷갈리는 선택자들 정리,이중선택자등[name=test][value=20]

jquery로 개발을 하다보면 항상 선택자를 까먹었었다. 그래서 매번 찾아봤었는데 나에게 해당되는 사례를 찾기까지 시간이 생각보다 걸렸다. 그래서 정리를 해볼려고한다.

 

우선 이런식으로 찾아보는건 정확하게 이해를 못해서 그렇다. 나도 웹개발을 1년반정도 했지만 선택자를 보면 무슨말인지는 알기때문에 그냥 복사하고 붙여놓고 그냥 그렇게 사용해왔다. 나는 이해했고 단순 암기 문제라고 생각을 해왔기에 그렇게 개발을 해온거다. 하지만 정확하게 이해를 하게되면 더이상 찾아보지 않아도 될것이다.

 

1.선택자의 구성 및 원리

$(선택자)

: (괄호) 안에 있는 태그를 찾는다고 생각하자!

 

$("#test")

:#은 id를 의미 즉 test의 id를 가진 태그를 찾는다.

 

$(".test")

: .은 class를 의미 즉 test의 class를 가진 태그를 찾는다.

 

위에 내용은  다알거라고 생각한다.

 

$("태그[속성=값]").

태그:input,div,span,textarea

속성:type,value,name,data속성들

 

태그와 속성은 html의 태그와 속성에 대한 이해가 필요하다.

속성=값은 여러개로 늘릴수도 있다.

늘리게될경우에는

$("태그[속성=값][속성=값]") 이런식으로 늘려나간다.

 

 

1.체크박스 예시

1 2

    <label>
        1
        <input type="checkbox" name="chk" value="1" data-index="#1">
    </label>
    <label>
        2
        <input type="checkbox" name="chk" value="2" data-index="#2">
    </label>

 

위에는 1번 2번 체크박스가 있다.

1번만 체크 되도록 스크립트를 작성해보자

 

$('input').eq(0).prop("checked",true); //태그만 사용
$('input[type=checkbox]').eq(0).prop("checked",true); //태그[속성=값]
$('input[name=chk][value=1]').prop("checked",true); //태그[속성=값][속성=값]
$('[type=checkbox][name=chk][data-val="#1"]').prop("checked",true); //태그[속성=값][속성=값][속성=값]

 

 

 

특수문자를 포함할때는 "값" 값 앞뒤로 "" 를 넣어줘야한다.

[],#,등등

 

 

2.체크박스 배열 예시

 

1 2

 

$('input').eq(0).prop("checked",true); //태그만 사용
$('input[type=checkbox]').eq(0).prop("checked",true); //태그[속성=값]
$('input[name="chk[]"][value=1]').prop("checked",true); //태그[속성=값][속성=값]
$('[type=checkbox][name="chk[]"][data-val="#1"]').prop("checked",true); //태그[속성=값][속성=값][속성=값]

 

추가된거는 값에 ""이거말고는 없다.

값에 특수문자를 포함할때는 잊지말고 ""를 꼭쓰자