jQuery 복합 선택기의 몇 가지 예

ef34efdee793fd752bca62ed2782713a

1. 체크박스의 복합 선택기 관련 작업

<input type="checkbox" id="ckb_1" /> 
<input type="checkbox" id="ckb_2" disabled="true" /> 
<input type="checkbox" id="ckb_3" /> 
<input type="checkbox" id="ckb_4" /> 
<input type="button" id="btn" value="点击">

예: 확인란 유형의 요소를 설정하고 "사용 가능"을 "선택됨"으로 설정해야 합니다

방법 ① 속성 필터 선택기 [type='checkbox'] 및 [disabled!=disabled]를 사용합니다

$("input[type='checkbox'][disabled!=disabled]").attr("checked",true);

이 복합 선택기에서는 "사용 가능한" 요소를 선택하려면 비활성화!=비활성화를 사용해야 하고, 속성을 설정할 때는 attr("checked",true)를 사용해야 합니다. 비활성화된 속성은 확인된 속성과 유사하게 사용됩니다.

방법 ②양식 선택기 사용:체크박스 및 속성 필터 선택기 [비활성화!=비활성화]

$('input:checkbox[disabled!=disabled]').attr("checked",true);

방법 ③ 양식 선택기 사용:체크박스 및 양식 객체 속성 필터 선택기:활성화

$(':checkbox:enabled').attr("checked",true);

방법 ④ .each()를 사용하여 순회

$("input[type=checkbox]").each(function(){

if ($(this).attr("disabled") != "disabled") {

$(this).attr("checked",true);
}
});

복합 선택자는 사용되지 않습니다. 주의할 점은 방법 ①과 동일하다. 속성을 판단할 때 거짓, 참이 아닌 '비활성화'인지 '활성화'인지를 판단해야 한다. 속성을 설정할 때 "disabled" 또는 "enable"을 사용하거나 false 또는 true를 사용할 수 있습니다.

2. 복합 선택자의 다른 예

<ul>
<li >第一行</li>
<li class="showli">第二行</li>
<li class="showli">第三行</li>
<li>第四行</li>
<li style="display:none">第五行</li>
<li class="showli">第六行</li>
<li>第七行</li>
</ul>

예: showli 클래스가 있는 첫 번째 li 요소의 배경을 빨간색으로 설정합니다

$("ul li[class=showli]:eq(0)").css("background":"red");

결과적으로 'ce538ea8997393b61c570ccb63e01b38두 번째 줄>'의 배경이 빨간색으로 변합니다. 속성 필터 선택기 [class=showli] 및 기본 필터 선택기 eq(0)

이 사용됩니다.

예시. 다섯 번째로 보이는 리의 배경을 빨간색으로 설정

$("ul li:visible:eq(4)").css({"display":"blaock","background":"red"});

결과적으로 'ce538ea8997393b61c570ccb63e01b38여섯 번째 줄>'의 배경이 빨간색으로 변합니다. display:block은 숨겨진 li가 다음으로 필터링되는지 여부를 감지하는 것입니다. : 없음에서는 빨간색 배경이 보이지 않습니다. 사용된 가시성 필터 선택기 :visible

예(다소 복잡함) showli 클래스를 사용하여 두 번째 li 뒤에 보이는 두 번째 li의 배경을 빨간색으로 설정합니다

$("ul li.showli:eq(1)").nextAll("li:visible:eq(1)").css({"display":"block","background":"red"});

그 결과 'ce538ea8997393b61c570ccb63e01b386번째 줄>'의 배경이 빨간색으로 변했습니다.