jQuery 선택기 selector_jquery 요약

//jQuery selector$
//$(expression,[context]) return jQuery
//Unit One
//표현식의 CSS 정의자는 CSS 구문을 사용하여 선택할 요소를 나타냅니다.

// $("*"); // 페이지의 모든 요소 태그를 나타냅니다.
// $("th, td") // 모든

요소 태그를 나타냅니다.
// $ ("a") // 모든 요소 태그를 나타냅니다.
// $("div#onlydiv") // id=onlyidv인 $("#ID") 요소를 나타냅니다. CSS 선택은 전체 문서 일치입니다.
// $("#ating"); // id=rated로 요소를 나타냅니다.
// $("#orderedlist > li") // 모든 하위 항목을 나타냅니다. id=orderedlist의 요소, 그러나 하위 요소는 포함하지 않음
// $("#orderedlist li:last") // id=orderedlist에서 li의 마지막 요소를 나타냄
// $("#orderedlist li:first"); // id=orderedlist
에서 li의 첫 번째 요소를 나타냅니다.// $("#orderedlist li:nth- child(0)"); id=orderedlist에서 li의 (N)번째 요소 n은 배열 첨자입니다.
// $("button:only-child") //CSS의 상위 컨테이너에 있는 유일한 요소임을 나타냅니다. Selection
// $(".stuff:empty"); // CSS 선택을 나타냅니다.
의 빈 요소// $(".buttons:enabled") // CSS 선택에서 일반적으로 활성화된 요소를 나타냅니다. 🎜>// $(".buttons:disabled"); // CSS 선택 항목을 나타냅니다.
// $("input:checked") // CSS 선택 항목을 나타냅니다.
/ / $("button:not(.not)"); // CSS 선택에서 not()의 요소 제거를 나타냅니다.
// $("button.not") // 요소가 $(". CSS 선택에 class=not이 있는 CLSS")는 전체 문서 일치입니다
// $("#orderedlist2 li"); // id=orderedlist의 모든 하위 요소를 나타내고 모든 하위 요소의 하위 요소를 포함합니다
// //alert($("#orderedlist ~ li").length) ;
// $("#orderedlist,.buttons,li") //CSS 선택기와 일치하는 요소



//요소 속성에 따라 표현식이 선택됩니다.
// Alert($("button[@class]").length) // 클래스 속성이 있는 요소를 나타냅니다.
// Alert( $("button[@class=not").length); // 클래스 속성과 값이 not
//인 요소를 나타냅니다. Alert($('button[@class^=not'). length); // not
/와 일치하는 not로 시작하는 값과 class 속성이 있는 요소를 나타냅니다. // 다음과 같은 요소를 나타냅니다. not
과 일치하는 클래스 속성 및 not으로 끝나는 값// Alert($('button[@class*=not' ).length) // not//Expression XPATH 필터 선택해야 하는 페이지 요소를 나타내는 XPATH 구문
//$("ol[@id^ ='orderedlist']").find("li:contains('First') ").each(function(i) {
//// $(this).html( $(this).html( ) ​​" BAM! " i );
// $(this).mouseover (function(){
// $(this).css("color","red");
// })
// $(this).mouseout(function(){
// $(this).css("color","#000");
// })
// })//ol 태그가 있는 모든 요소 찾기 속성 id=orderedlist인 경우
//ol[@id='orderedlist']를 작성하여 상위 요소를 찾고 각 반복을 직접 사용하는 두 가지 방법이 있습니다
//ol[@id='orderedlist'] /* find('child- element').each()를 사용하여 상위 요소 아래의 모든 하위 요소를 반복합니다.

//Unit two
///$(html, [ownerDocument]) return jQuery
//이 함수를 사용하면 HTML 요소 텍스트를 전달할 수 있으며 생성자는 이 HTML 텍스트로 생성된 jQuery 개체를 생성합니다. 이 개체는 원래 존재하지 않는 개체이거나
//$( 원래 페이지에 있던 '
안녕하세요
').appendTo("h2"); //마크업 텍스트를 생성하여 페이지의 h2 태그에 추가합니다.
//원본 페이지 요소를 꺼내서 추가할 수도 있습니다.
//$( "input", this).appendTo("h2"); //여기서 가져온 페이지 요소는 복사되지 않고 이동됩니다.

///$(elements) return jQuery
// 이 함수를 사용하면 DOM
//$(document.forms[0].elements).appendTo("h2") // DOM 문서를 참조할 수 있습니다
//$(callback) return jQuery



//다음은 선택기에 대한 몇 가지 지침입니다
/*
기본:

#id: 해당 ID를 기반으로 객체 가져오기 기인하다.
요소: 특정 HTML 태그와 일치하는 모든 개체
.class: 개체의 클래스 속성에 따라 개체 가져오기
*: 모든 개체 가져오기
selector1, selector2, selectorN: 여러 개체 가져오기 selectors 컬렉션, 중복 제거 안 함

레벨 선택기:
ancestorDescendant: 이 선택기는 공간입니다. 즉, 첫 번째 선택기의 모든 개체를 먼저 찾은 다음 해당 하위 노드를 모두 찾습니다. 개체와 일치하는 항목 두 번째 선택자
부모 > 자식: 이 선택기는 보다 큼 기호입니다. 즉, 먼저 첫 번째 선택기의 모든 객체를 찾은 다음 하위 노드(그랜드 노드 아님)에서 두 번째 선택기와 일치하는 모든 객체를 찾습니다.
prev next: 이 선택자는 더하기 기호입니다. 즉, 첫 번째 선택자의 모든 객체를 먼저 찾은 다음 동일한 레벨의 다음 노드를 따르고 두 번째 선택자와도 일치하는 객체를 찾는다는 의미입니다.
prev ~ siblings: 이 선택자는 ~ 기호입니다. 이는 먼저 첫 번째 선택자로 모든 개체를 찾은 다음 동일한 수준의 모든 후속 노드에서 두 번째 선택자와 일치하는 개체를 찾는다는 의미입니다.

기본 필터 문자:
:first: 여러 개체 중 첫 번째 개체 일치
:last: 여러 개체 중 마지막 개체 일치
:not(selector): 항목을 콘텐츠와 일치 제거되지 않은 후 선택기에서
:even: 모든 개체 중 짝수와 일치
:odd: 모든 개체 중 홀수와 일치
:eq(index): 일치 항목 다음 표의 단일 요소
:gt(index): 특정 첨자보다 큰 모든 요소와 일치
:lt(index): 특정 첨자보다 작은 모든 요소와 일치
:header: 모든 헤더 요소와 일치, 예: h1, h2, h3, h4, h5, h6
:animated: 모든 애니메이션 요소와 일치

텍스트 필터:
:contains(text): 간접 콘텐츠를 포함하여 내부 콘텐츠가 있는 텍스트 요소와 일치 유용한 상황
:empty: 하위 요소가 없는 모든 객체와 일치
:has(selector): 하나 이상의 하위 선택기를 포함하는 모든 객체와 일치
:parent: 모든 상위 객체와 일치, 상위 객체에 해당 객체가 포함 텍스트만 포함하는

가시성 필터:
:hidden: 모든 숨겨진 개체 또는 입력의 숨겨진 유형과 일치
:visible: 모든 보이는 개체와 일치

속성 필터:
[속성]: 특정 속성을 가진 모든 객체와 일치
[attribute=value]: 특정 속성 및 값을 가진 객체와 일치
[attribute!= value]: 특정 속성을 가지며 다음과 같은 객체와 일치 특정 값이 아님
[attribute^=value]: 특정 속성을 갖고 특정 값으로 시작하는 개체를 일치
[attribute$=value]: 특정 속성을 갖고 특정 값으로 끝나는 개체를 일치
[attribute*=value]: 특정 속성과 특정 값을 포함하는 개체를 일치시킵니다
[selector1] [selector2][selectorN]: 동시에 여러 속성 선택기와 일치하는 개체를 일치합니다

하위 필터:
:nth- child(index/even/odd/equation): 하위 요소의 특정 첨자 /even/odd/와 일치합니다. 방정식 객체의 경우 :eq(index)는 특성만 일치할 수 있습니다. 단일 개체의 하위 요소 중 이 방법은 여러 개체의 특정 하위 요소의 공통 특성과 일치할 수 있습니다.
: first-child: 첫 번째 하위 요소와 일치
:last-child: 일치 마지막 하위 요소
이 두 매처는 여러 상위 개체의 모든 하위 요소와도 일치할 수 있습니다.
:only-child: 상위 요소에 하위 요소가 하나만 있는 경우 이 하위 요소

형식과 일치하면 됩니다. filter
이름 유형

:input 반환: 배열
양식의 입력 요소와 일치

: 텍스트 반환: 배열
다음과 같은 요소와 일치

형식의 입력 유형 텍스트: 비밀번호 반환: 배열


:radio 형식의 입력 유형 비밀번호가 있는 요소와 일치합니다. 반환: 배열
일치 입력 유형이 라디오인 양식의 요소

:checkbox 반환: 배열
입력 유형이 체크박스인 양식의 요소와 일치

:submit 반환: 배열
양식에서 입력 유형 제출과 요소 일치

:image 반환: 배열
양식에서 이미지와 요소 일치

:reset 반환: 배열
입력 유형이 재설정된 양식의 요소 일치

:버튼 반환: 배열
입력 유형이 버튼인 양식의 요소 일치

:file 반환: Array
양식에서 입력 유형이 파일인 요소를 일치합니다.

:hidden 반환: Array
입력 유형이 요소 양식에 숨겨져 있거나 숨겨진 요소를 일치합니다. Area



:enabled 반환: Array
는 활성화된 모든 요소와 일치

: 비활성화 반환: Array
는 모두 활성화되지 않은 요소와 일치 요소

:checked 반환: 배열
선택한 모든 요소와 일치

:selected 반환: 배열
모든 드롭다운 목록에서 선택한 요소와 일치

*/