jquery 선택 기 부분 정리
가 까 운 시일 내 에 우 리 는 jquery 학습 강 좌 를 점차 발표 할 것 이다.날 카 로 운 jquery 책 을 참고 하 였 습 니 다.$의 선택 기 부분:$를 사용 하면 되 돌아 오 는 값 은 object$선택 기 는 주로 탭 을 선택 하 는 데 사 용 됩 니 다.기본 적 인 용법 은 css 의 선택 기 입 니 다.그러나 매우 흥분 되 는 것 은 그 가 흔히 볼 수 있 는 브 라 우 저 를 지원 하 는 것 입 니 다.css 의 많은 선택 기 는 IE6 가 지원 하지 않 는 것 입 니 다.1.기본 선택 기(3 가지):$("탭 이름"),예 를 들 어$("p")는 모든 p 탭 노드$("\id 이름")를 선택 하 였 습 니 다.예 를 들 어$("\#test")는 id 를 test 로 선택 한 탭 노드$("class 이름")입 니 다.예 를 들 어$("test")는 모든 class 를 test 로 선택 한 탭 노드 위의$("탭 이름")와$("class 이름")는 만 족 스 러 운 노드 를 되 돌려 줍 니 다.한 단계 선별 하면 eq,lt 와 같은 함 수 를 추가 할 수 있 습 니 다.lt 등등.2.그룹 선택 기:다음 과 같은 약속 을 합 니 다."태그 이름 또는\#id 이름 또는"class 이름"을 mix 로 기록 하면 mix 는 하나의 태그 이름 이나\#id 또는 하나의.class 를 표시 합 니 다.$("mix,mix,mix,mix,..."),예 를 들 어$("div,\#test 1,p,test 2,\#test 3")3.후대 선택 기:$("mix mix mix"),물론 여러 개의 끼 워 넣 을 수 있 지만 후대 선택 기 는 심층 서브 세대 일 수 있 습 니 다.그래서$("mix mix mix...")라 는 문법 은 큰 역할 을 하지 않 습 니 다.예:$("div.test"):div 태그 에 있 는 모든 test 를 가 진 class 의 후대 요소(div 에 포 함 된 class 속성 이 test 인 태그)는 DEMO 를 볼 수 있 습 니 다.4.하위 선택 기:$("mix>mix"),이것 은 후대 선택 기 뒤에 두 는 것 은 그것 과 비교 하기 위 한 것 입 니 다.하위 선택 기 는 1 세대 서브 세대 만 선택 할 수 있 습 니 다.심층 내장 을 처리 하지 않 습 니 다.예:$("div>.test")
는 이곳 의 p 단락 라벨 에 유효 하지만).appendo("\#body");/를 body 요소 에$(document):웹 페이지 문서 대상$(document.body):웹 페이지 body 대상,$("body")와 같은$(함수):DOM 을 불 러 오 면 이 함 수 를 실행 합 니 다.그래서$(document).ready()는$()$(선택 기 부분,선택 기 출처)로 쓸 수 있 습 니 다.이 예 는$("input:radio",document.forms[0]):문서 의 첫 번 째 폼 에서모든 체크 단추$("div",xml.responseXML)를 검색 합 니 다.지정 한 XML 문서 의 모든 div 요소 선택 기 원본 을 조회 할 수 있 습 니 다.컨 텍스트 의 DOM 요소,문서 또는 jQuery 대상 으로 두 가지 가 있 습 니 다.$.extend(prop)와$.noConflict()는 플러그 인 및 다른 라 이브 러 리 와 호 환 되 는 사용 입 니 다.나중에 jQuery 의 core 부분 을 쓰 고:eq(숫자):일치 하 는 요소 집합 을 하나의 요소 로 축소 합 니 다.이 요 소 는 일치 하 는 요소 집합 에서 0 으로 변 합 니 다.집합 길 이 는 1lt(숫자)로 변 합 니 다.일치 하 는 요소 집합 을 주어진 위치 에 있 는 모든 요소 lt(숫자)로 줄 입 니 다.일치 하 는 요소 집합 을 포 지 셔 닝 하기 전의 모든 요소 위 에 있 는 세 가지 예 로 줄 입 니 다.$(div:eq(1)/두 번 째 div$(div:lt(2)/세 번 째 div 및 그 후의 div$(div:lt(2)/두 번 째 div 및 이전 div.즉,첫 번 째 div 와 두 번 째 div length 또는 size():현재 일치 하 는 요소 의 수량 each():일치 하 는 요소 마다 문맥 로 함 수 를 수행 합 니 다.이것 은 전달 되 는 함 수 를 실행 할 때마다 함수 중의 this 키 워드 는 서로 다른 요 소 를 가리 키 는 것 을 의미 합 니 다(매번 서로 다른 일치 요소).그리고 함 수 를 실행 할 때마다...함수 에 실행 환경 을 나타 내 는 요소 로 일치 하 는 요소 집합 에 있 는 위 치 를 나타 내 는 숫자 값 을 매개 변수 로 전달 합 니 다.$("img").each(function(i){this.src="test"+i+".jpg";});/그림 을 교체 하고 src 속성 get()을 설정 합 니 다.인자 가 없 으 면 모든 것 을 되 돌려 줍 니 다.대상 배열 입 니 다.인자 가 있 으 면 숫자 여야 합 니 다.기본 값 은 0 부터 시작 합 니 다.예:$("div").get():div 대상 배열$("div")를 되 돌려 줍 니 다.get(1):두 번 째 div 대상 index(필요 한 요소 노드 대상)를 되 돌려 줍 니 다.숫자 를 되 돌려 줍 니 다.예 를 들 어$("div").index($("test")[1]//는 모든 div 노드 에서 class 속성 이 test 인 노드 를 찾 습 니 다.그리고 두 번 째 노드(기본 값 은 0 부터)를 찾 습 니 다.반환 값 은 이 노드 가 div 절 에 있 습 니 다.점 중의 위치.
는 이곳 의 p 단락 라벨 에 유효 하지 않 습 니 다.여 기 는$("div.test)5.근접 선택 기:$("mix+mix")를 사용 하여 다음 형제 노드 를 선택 하 십시오.예 를 들 어$("div+\#test"),id 가 test 인 노드 는 div 의 다음 형제 노드 여야 합 니 다.는$("div+\#test")에서 p 단락 노드 를 찾 을 수 있 습 니 다.는 6 을 찾 을 수 없습니다.속성 선택 기:속성 선택 기 를 css 선택 기 에 두 지 않 는 것 은 jQuery 에서 쓰 는 방법 이 다 르 기 때 문 입 니 다.css 에서 쓰 는 방법 은 제 가 이전에 쓴 css 의 선택 을 참고 할 수 있 습 니 다.선택 기 1 문.jQuery 에 서 는 xPath 와 유사 한 쓰기 입 니 다:$("mix[@attr]"):이 mix 를 선택 하고 attr 속성 을 가 진 노드$("mix[@attr=a")value"]):이 mix 를 모두 선택 하고 attr 속성 을 가 지 며 속성 치 를 a 로 만족 시 킵 니 다.value 의 노드$("mix[@attr^=avalue_head"]:attr 속성의 속성 치 는 avalue_head 시작$("mix[@attr$=avalue_end"]:attr 속성의 속성 치 는 avalue_end 엔 딩 의$("mix[@attr*=avalue"]:attr 속성의 속성 값 에 a 포함value 7.추가 선택 기:이 이름 은 제 가 만 든 것 입 니 다.사실 선택 기 조합 은 모두 진일보 한 의 미 를 가지 고 있 습 니 다.뒤에 소 개 된 지식 을 알 면 됩 니 다.한 정 된 하위 노드 선택 기 가 있 습 니 다.$("mix 1[mix 2]"):mix 2 를 포함 하 는 mix 1 노드 를 되 돌려 줍 니 다.예 를 들 어$("div[a]"):a 라벨 을 포함 하 는 div.이것 은$("div a")와 다 릅 니 다.후 자 는 div 중의 a 라벨 을 표시 하고 a 라벨 대상 을 되 돌려 줍 니 다.전 자 는 div 태그 대상 의 콜론 한정 노드 선택 기 를 되 돌려 줍 니 다.$("mix:condition"):mix 태그 이 고 한정 조건 을 만족 시 킵 니 다.E:root:형식 은 E 이 며 문서 의 루트 요소 E:nth-child(n):부모 요소 의 n 번 째 유형 은 E 의 하위 요소 입 니 다.기 수 는 1 부터 E:first-child:부모 요소 의 첫 번 째 유형 은 E 의 하위 요소 E:last-child 입 니 다.부모 요소 의 마지막 유형 은 E 의 하위 요소 E:only-child 입 니 다.또한 부모 요소 의 유일한 유형 은 E 의 하위 요소 E:empty:하위 요소(text 노드 포함)가 없 는 유형 은 E 의 요소 E:enabled E:disabled d:유형 은 E 입 니 다.허용 되 거나 금 지 된 사용자 인터페이스 요소 E:checked:형식 은 E 이 고 선택 한 상태 에 있 는 사용자 인터페이스 요소(예 를 들 어 단일 선택 단추 나 체크 상자)E:visible:모든 보 이 는 요 소 를 선택 하 십시오(display 값 은 block 또는 visible 이 고 visibility 값 은 visible 요소 이 며 hide 도 메 인 은 포함 되 지 않 습 니 다)E:hidden:모든 숨겨 진 요소(숨겨 진 도 메 인 이 아 닌 display 값 은 block 또는 visible 입 니 다.visibility 값 은 visible 요소)E:not(s):형식 은 E 이 고 선택 기 s E:eq(n),E:lt(n)와 일치 하지 않 습 니 다.E:lt(n):요소 한정 E:first:E:eq(0)E:last 에 해당 하 는 마지막 일치 하 는 요소 E:even:일치 하 는 요소 에서 순 서 를 짝수 로 집중 하 는 요소 E:odd:일치 하 는 요소 에서 순 서 를 홀수 로 집중 하 는 요소 E:parent:하위 요소(text 노드 포함)를 포함 하 는 모든 요소 E:contains('test')를 선택 하 십시오.지정 한 텍스트 를 포함 하 는 모든 요소 폼 선택 기:E:input:폼 요소 선택(input,select,textarea,button)E:text:모든 텍스트 필드 선택(type="text")E:password:모든 암호 필드 선택(type="password")E:radio:모든 체크 단추 선택(type="radio")E:checkbox:모든 체크 상자 선택(type="checkbox")E:submit:모든 제출 버튼 선택(type="submit")E:image:모든 그림 필드 선택(type="image")E:reset:모든 삭제 필드 선택(type="reset")E:button:선택모든 단추 선택(type="button")은 당연히 E:hidden 8.xPath 경로 조회:먼저 xPath 의 문법 을 소개 합 니 다./:루트 노드 선택//:문서 에 있 는 모든 조건 에 맞 는 노드 를 선택 하 십시오.이 노드 가 어디 에 있 든 간 에.:현재 노드 를 선택 하 십시오.:단일 노드 의 부모 노드 선택@:속성 선택,이것 은 앞에서 말 했 듯 이(속성 선택 기)nodename:선택 노드 의 모든 노드 jQuery 에서 의 응용:루트 노드 는 거의 사용 되 지 않 습 니 다.아래 의 예 와 같이 자주 사용 되 는 예:$("div/p")는$("div>p")$("div/p")는$("div p")$("/div/.../p")에 해당 합 니 다.모든 div 노드 의 부모 노드 의 p 태그 와 상대 적 인 경로 의 쓰기 및 지원 하 는 Axis 선택 기 입 니 다.아직 사용 할 수 있 는 것 이 아 닙 니 다.소개 하지 않 습 니 다...$의 다른 용법 이 많이 있 습 니 다:$(html 노드):제 공 된 원본 HTML 태그 문자열 에 따라 jQuery 대상 이 포장 한 DOM 요 소 를 동적 으로 만 듭 니 다.예 를 들 어$(
Hello
Hello
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.