JQuery 선택기 주요 내용 :
1. 기본 선택기 (* 강조)
- 태그 선택기 (요소 선택기)
-> 구문 : $ ( "태그 이름") 일치하는 모든 요소 태그 이름을 가져옵니다. - id selector-
> 구문 : $ ( "# id attribute value")는 지정된 id 속성 값과 일치하는 요소를 가져옵니다. - 클래스 선택기
-> 구문 : $ ( ". class attribute value") 지정된 클래스 속성 값과 일치하는 요소를 가져옵니다. - 그리고 선택기 설정 : *
-> 구문 : $ ( "선택기 1, 선택기 2 ...") 모든 요소를 선택한 복수의 선택기를 획득
示例如下：
$("div").css("background-color","red");; //元素选择器
$("#user").css("background-color","red");; //id选择器
$(".user").css("backgroundColor","red");; //id选择器
$("span,#two").css("backgroundColor","pink"); //获取span标签对象和id为two的元素对象
2. 레벨 선택기 (* 요점)
-
하위 선택자
-> 구문 : $ ( "AB") A 요소 내의 모든 B 요소 선택 (A 내의 모든 B, 하위 항목, 손자 ...) -
자식 선택기
-> 구문 : $ ( "A> B")는 A 요소 내의 모든 B 자식 요소를 선택합니다.
3. 속성 선택기 (* 강조)
- 속성 이름 선택기
-> 구문 : $ ( "A [속성 이름]")에는 지정된 속성의 선택기가 포함됩니다. - 속성 선택기 (본질 !!! 정규 표현식에 따라 필터링, 자세한 내용은 예 참조)
-> 구문 : $ ( "A [attribute name = 'value']")는 지정된 속성이 지정된 값과 동일한 선택자를 포함합니다. - 복합 속성 선택기
-> 구문 : $ ( "A [attribute name = 'value'] [] ...") 여러 속성 조건을 포함하는 선택기
//将包含class属性的span元素,背景色设置为蓝色
$("span[class]").css("backgroundColor","blue");
// 将属性title值等于test1的span元素,背景色shezhi为蓝色
$("span[title='test1']").css("backgroundColor","blue");
// 选中有title，并且title属性的值以te开头的div元素
$("div[title^='te']").css("backgroundColor","blue");
// 选中有title，并且title属性的值以est结尾的div元素
$("div[title$='est']").css("backgroundColor","blue");
//选中title属性的值不为test的div元素(注：没有属性title的也将被选中)
$("div[title!='test']").css("backgroundColor","blue");
//只yao有title，并且title属性包含es的div元素,都会被选中
$("div[title*='es']").css("backgroundColor","blue");
//选中有id和title属性的div元素,并且属性title的值包含有“es”
$("div[id][title*='es']").css("backgroundColor","blue");
4. 필터 선택기 (* 이해)
- 첫 번째 요소 선택자
-> 구문 : : first는 선택한 요소의 첫 번째 요소를 가져옵니다
. 2. 마지막 요소 선택자
-> 구문 : : last는
선택한 요소의 마지막 요소를 가져옵니다. 3. 비 요소 선택자
-> 구문 : : Not (selector )는 지정된 내용의 요소를 포함하지 않습니다
. 4. 짝수 선택기
-> 구문 : : 짝수, 0부터 계산
5. 홀수 선택자
-> 구문 : : 홀수, 0부터 계산
6. 인덱스 선택기와 같음
-> 구문 : : eq (index) 인덱스 요소 지정
7. 인덱스 선택자보다 큼
-> 구문 : : gt (index) 지정된 인덱스 요소보다 큼
8. 인덱스 선택자보다 작음
-> 구문 : : lt (index) 지정된 인덱스 요소보다 작음
9 . 제목 선택기
-> 구문 : : header 제목 (h1 ~ h6) 요소 가져 오기, 고정 쓰기
如：
$("div:first").css("backgroundColor","blue");
$("div:last").css("backgroundColor","blue");
//注意：标题选择器为固定写法
$(":header").css("backgroundColor","pink");
5. 양식 필터 선택기 (* 이해)
- 사용 가능한 요소 선택기
-> 구문 : : 사용 가능한 요소 가져
오기 2. 사용할 수없는 요소 선택기
-> 구문 : : 사용할 수없는 요소 가져 오기
3. 선택기 확인
-> 구문 : : 선택된 라디오 / 확인란을 가져 오려면 선택 요소
4. 선택기
-> 구문 : : selected 드롭 다운 상자에서 선택한 요소 가져 오기
작성하기가 쉽지 않습니다.이 글이 도움이된다면 블로거를 팔로우하거나 북마크하고 싶습니다. 글의 내용에 문제가 있으면 메시지를 남기고 토론 할 수 있습니다. 함께 배우고 진행합시다. 함께! !