jQuery의 Selector에 대한 지식 요약

JQuery 선택기 요약, 필요한 친구들이 참고할 수 있으며 일반적으로 사용되는 선택 제어 방법입니다.

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

// $( "* "); // 페이지의 모든 요소 태그를 나타냅니다
// $("th, td") // 모든 요소 태그를 나타냅니다
// $("a") // 모든요소 태그를 나타냅니다
// $("p#onlyp") // CSS 선택에서 id=onlyidv인 요소 $("#ID")가 전체 문서 일치임을 나타냅니다
// $(" #rated"); / / id= rating
인 요소를 나타냅니다.// $("#orderedlist > li"); // id=orderedlist인 모든 하위 요소를 나타내지만 하위 아래의 하위 요소는 포함하지 않습니다. -element
// $("#orderedlist li: last"); // id=orderedlist
// $("#orderedlist li:first") // li의 첫 번째 요소를 나타냅니다. in id=orderedlist
// $("#orderedlist li :nth- child(0)"); //id=orderedlist의 (N)번째 요소 n이 배열 첨자임을 나타냅니다
// $("button: only-child"); //CSS 선택에서 이것이 상위 컨테이너의 유일한 요소임을 나타냅니다
// $(".stuff:empty"); // CSS 선택에서 빈 요소를 나타냅니다
// $(" .buttons:enabled"); // CSS 선택에서 일반 요소를 나타냅니다. Enabled elements
// $(".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와 일치하는 요소 selector



//요소 속성에 따라 표현식이 선택됨
/ / Alert($("button[@class]").length) // 클래스 속성이 있는 요소를 나타냄
// Alert($("button) [@class=not").length); // 클래스 속성이 있는 요소를 나타냅니다. 속성과 값이 not
//인 요소는 not
// Alert($('button[@class^=not').length); // 클래스 속성과 값이 일치하지 않는 것으로 시작하는 요소를 나타냅니다. not
// Alert($('button [@class$=not').length) // 클래스 속성과 값의 끝이 있는 요소가 있음을 나타냅니다. match not
// Alert($('button[@class*=not').length); // 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 요소
텍스트를 전달할 수 있으며 생성자는 jQuery 객체로 생성된 HTML 텍스트를 생성합니다. 이 객체는 원래 존재할 수 없습니다. 또는 원본 페이지에 존재할 수도 있습니다
//$('

hello

').appendTo("h2") //마크업 텍스트를 생성하고 페이지의 h2 태그에 추가합니다
/ /원본 페이지 요소를 꺼내서 추가할 수도 있습니다
//$("input",this).appendTo("h2") //여기에서 가져온 페이지 요소는 복사되지 않습니다. ///$(elements) return jQuery
//이 함수를 사용하면 DOM을 직접 전달할 수 있습니다
//$(document.forms[0].elements).appendTo("h2") // DOM 문서를 참조할 수 있습니다
//$(callback) return jQuery



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

#id: id 속성을 기반으로 개체를 가져옵니다.
element: 특정
HTML 태그와 일치하는 모든 개체 가져오기
*: 모든 개체 가져오기
selector1, selector2, selectorN: 중복 항목을 제거하지 않고 여러 선택기 컬렉션 가져오기 Item

level selector:
ancestorDescendant: 이 선택자는 공백입니다. 즉, 첫 번째 선택자의 모든 개체를 먼저 찾은 다음 하위 노드에서 두 번째 선택자와 일치하는 모든 개체를 찾는다는 의미입니다.
parent > child: 이 선택자는 보다 큼 기호입니다. 즉, 먼저 첫 번째 선택자의 모든 개체를 찾은 다음 하위 노드(손자 노드 아님)에서 두 번째 선택기와 일치하는 모든 개체를 찾습니다.
prev + next: 이 선택자는 더하기 기호입니다. 이는 먼저 첫 번째 선택자의 모든 개체를 찾은 다음 두 번째 선택자와도 일치하는 동일한 수준에서 다음 노드의 개체를 찾는다는 의미입니다.
prev ~ siblings: 이 선택자는 ~ 기호입니다. 이는 먼저 첫 번째 선택자의 모든 개체를 찾은 다음 동일한 수준의 모든 후속 노드에서 두 번째 선택자와 일치하는 개체를 찾는다는 의미입니다.

기본 필터 문자:
:first: 여러 개체 중 첫 번째 개체와 일치
:last: 여러 개체 중 마지막 개체와 일치
:not(selector): 항목이 아닌 후 선택기의 내용과 일치
:even: 일치 모든 개체 중 짝수
:odd: 모든 개체 중 홀수와 일치
:eq(index): 아래 특정 테이블의 단일 요소와 일치
:gt(index): 특정보다 큰 모든 요소와 일치 첨자가 있는 모든 요소
:lt(index): 특정 아래 첨자보다 작은 모든 요소와 일치합니다.
:header: h1, h2, h3, h4, h5, h6과 같은 모든 헤더 요소와 일치합니다.
:animated: 애니메이션 효과가 있는 모든 요소와 일치합니다. 요소

Text 필터:
:contains(text): 간접적으로 유용한 상황을 포함하여 내부적으로 텍스트 요소를 포함하는 개체와 일치합니다.
:empty: 하위 요소가 없는 모든 개체와 일치합니다.
:has(selector): 하나 이상의 개체를 포함하는 모든 개체와 일치합니다. 하위 선택기
:parent: 텍스트만 포함하는 개체를 포함하는 모든 상위 개체와 일치

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

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

하위 필터:
:nth- child (index/even/odd/equation): 자식 요소의 특정 첨자/짝수/홀수/방정식 개체와 일치합니다. :eq(index)는 단일 개체 요소 특성의 자식에만 일치할 수 있으며 이 메서드는 일치할 수 있습니다. 여러 개체의 특정 하위 요소에 대한 공통 특성
:first-child: 첫 번째 하위 요소 일치
:last-child: 마지막 하위 요소 일치
일치하는 두 문자도 모두 일치 작업을 수행할 수 있습니다. 여러 상위 개체의 하위 요소
:only-child: 상위 요소에 하위 요소가 하나만 있는 경우 이 하위 요소와 일치

양식 필터 문자
이름 유형

:input 반환: 배열<요소(들)> 양식의 입력 요소

:text 반환: Array
양식의 입력 유형 텍스트와 일치하는 요소

:password 반환: Array

:radio 형식의 비밀번호입니다. 반환: Array
형식에서 입력 유형이 radio인 요소를 일치시킵니다.

:checkbox 반환: Array 입력 유형이 체크박스인 경우

:submit 반환: Array
입력 유형이 양식에 제출된 요소와 일치

:image 반환: Array 요소

:reset 반환: Array
입력 유형이 양식에서 재설정된 요소 일치

:button 반환: Array form

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

:hidden 반환: Array 숨겨진 또는 숨겨진 영역



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

:disabled 반환: Array
활성화되지 않은 모든 요소와 일치

: 선택됨 반환: Array
선택한 모든 요소 일치

:selected 반환: Array
모두 일치
드롭다운 목록
선택한 요소

*/

위 내용은 jQuery의 Selector에 대한 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!