이 장의 내용 은 본인 이 개발 에서 자주 사용 하 는 선택 문 자 를 예 로 들 어 설명 합 니 다.만약 에 더 자주 사용 하 는 간단 한 예 가 있 으 면 제공 하고 토론 에 참여 하 며 함께 연 구 를 공부 할 수 있 습 니 다.먼저 우 리 는 자주 사용 하 는 CSS 선택 문자 부터 시작 합 니 다.CSS 선택 문 자 는 선택 문자,ID 선택 문자,속성 선택 문자,선택 문자,클래스 선택 문자 등 을 포함 합 니 다.그들의 기본 형식 은 선택 문자:$("\#ID*")로 이 요소 의 모든 요 소 를 표시 합 니 다.ID 선택 문자:$("\#ID")는 지정 한 ID 요 소 를 가 져 오 는 것 을 표시 합 니 다.속성 선택 문자:$("input[type=text]")는 type 속성 이 text 인 모든 input 요 소 를 표시 합 니 다.선택 문자 포함:$("ul li a")는 ul 요소 의 모든 li 요소 중의 모든 a 요 소 를 표시 합 니 다.클래스 선택 문자:$("class")는 Class 스타일 을 참조 하 는 모든 요 소 를 표시 합 니 다.물론 이 선택 부 호 는$("\#ID input[type=text]")와 함께 사용 할 수 있 습 니 다.이 방법 은 ID 요소 의 type 속성 을 text 로 지정 한 모든 input 요 소 를 표시 합 니 다.JQuery 에서 약간의 변경 사항 은 매우 재 미 있 습 니 다.예 를 들 어$("ul li").addClass("Class")와$("ul>li").addClass("Class")는 그들 이 보 여 주 는 효과 가 다 릅 니 다.첫 번 째 는 ul 아래 의 모든 li 요 소 를 스타일 에 추가 하 는 것 입 니 다.두 번 째 는 ul 아래 의 첫 번 째 li 요 소 를 스타일 에 추가 하 는 것 입 니 다.구체 적 으로 더 많은 사용 방법 은 스스로 테스트 할 수 있 습 니 다.XPath 선택 문자(1.3 버 전 이후 지원 되 지 않 지만 알 수 있 습 니 다)에 포 함 된 내용 이 많 지 않 습 니 다.그들의 기본 형식 은$("@title")로 모든 요소 의 속성 에 title 이 있 는 요 소 를 선택 하 는 것 을 표시 합 니 다.$("[@title^=t]")는 모든 속성 title 값 이 t 로 시작 하 는 요소 임 을 표시 합 니 다.$("@title$=t]")는 모든 속성 title 값 이 t 로 끝 나 는 요소 임 을 표시 합 니 다.$("[@title*=t]")는 모든 속성 title 값 이 t 를 포함 하 는 요소 임 을 표시 합 니 다.XPath 선택 문 자 는 CSS 선택 문자 와 마찬가지 로 함께 사용 할 수도 있 고 여러 개의 XPath 선택 문자 와 함께 사용 할 수도 있 으 며 CSS 선택 문자 와 함께 사용 할 수도 있 기 때문에 원 하 는 요 구 를 달성 하기 위해 JQuery 방법 을 사용 하 는 것 은 여러 가지 가 있 습 니 다.사용자 정의 선택 부 호 는 하나의 콜론(:)으로 시작 하 는 선택 부 호 를 선택 하 는 것 입 니 다.사용자 정의 선택 부 호 를 말 하면 우리 가 자주 사용 하 는 것 은 말 할 것 도 없습니다.lt(),eq(),odd,:even.이런 것들 은 우리 가 가장 자주 사용 하 는 것 입 니 다.예 를 들 어 odd 와:even 이 두 가지 우 리 는 보통 그 로 스 트 라 이 프 스타일 의 표를 만 들 고 사용 방법 이 상당히 간단 합 니 다.예 를 들 어$("\#table tr:odd").addClass("odd")와$("\#table tr:even").addClass("even")는 두 줄 코드 만 간단하게 사용 하면 우리 가 원 하 는 스 트 라 이 프 스타일 을 만 들 수 있 습 니 다.물론 실제 개발 에 서 는 DOM 스 트 리밍 방법 에 맞 춰 선택 문 자 를 사용 합 니 다.예 를 들 어$("\#table td:contains('Window 창').parent().find("td:lt(0)").addClass("highlight")라 는 코드 는'Window 창'셀 을 얻 고 부모 급 요 소 를 얻 는 것 을 표시 합 니 다.그리고 이 요소 에 포 함 된 모든 번호 가 0 이상 인 셀 을 찾 습 니 다.물론 간소화 할 수 있 는 방법 이 있 습 니 다.여기 서 저 는 JQuery 의 연결 효 과 를 표시 하기 위해 서 입 니 다.이런 형식 도 추천 하지 않 습 니 다.저 는 보통 이렇게 씁 니 다.$("\#table td:contains('Window 창')").parent()/부모 급.find("td")/td 요 소 를 찾 습 니 다.not("contains('Window 창')")/window 창의 요소 가 아 닙 니 다.addClass("highlight");//가 독성 을 높이 기 위해 스타일 을 추가 하여 분리 하고 뒤에 표시 합 니 다.다음은 제 가 실제 개발 에서 가장 자주 사용 하 는 코드 몇 개 를 제공 하 겠 습 니 다.(너무 늦 어서 견 딜 수 없습니다!) $("input[type='text']").val(''); //모든 텍스트 상자$("\#text input:text").val(');/text 요 소 를 비우 고 모든 텍스트 상자//선택 한 CheckBox 의 값$("input:checkbox:checked")를 가 져 옵 니 다.each(function(){alert($(this).val();});$("selection option:selected").val()//선택 한 드 롭 다운 상자 의 값 을 가 져 옵 니 다$("selection:selected").text()//선택 한 드 롭 다운 상자 의 텍스트 를 가 져 옵 니 다.미 완성 계속...........................................................
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
