//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 반환: 배열 모든 드롭다운 목록에서 선택한 요소와 일치 */
