JQuery에 대한 첫 번째 살펴보기(1) jquery 선택기 필수 지식 points_jquery

본 장의 내용은 제가 개발에서 자주 사용하는 선택자를 예로 들어 설명합니다. 좀 더 일반적으로 사용하는 간단한 예제가 있으면 답변해 주시고, 토론에 참여해 주시고, 함께 공부해 보시기 바랍니다. 일반적으로 사용되는 CSS 선택기를 사용합니다.

CSS 선택기에는 와일드카드 선택기, ID 선택기, 속성 선택기, 포함 선택기, 클래스 선택기 등이 포함됩니다. 기본 형식은 다음과 같습니다.

와일드카드 선택기: $("#ID *")는 모두를 의미합니다. 이 요소 아래의 요소입니다.

ID 선택기: $("#ID")는 지정된 ID를 가진 요소를 가져오는 것을 의미합니다.

속성 선택기: $("input[type=text]")는 유형 속성이 텍스트인 모든 입력 요소를 나타냅니다.

선택기가 포함되어 있습니다. $("ul li a")는 ul 요소 아래의 모든 li 요소에 있는 모든 a 요소를 나타냅니다.

클래스 선택기: $(".Class")는 클래스 스타일을 참조하는 모든 요소를 ​​나타냅니다.

물론 이러한 선택기는 함께 사용할 수 있습니다(예: $("#ID input[type=text]")). 이 작성 방법은 지정된 ID 요소 아래의 유형 속성이 다음과 같은 모든 입력 요소를 나타냅니다. 텍스트. $("ul li").addClass("Class") 및 $("ul > li").addClass("Class")와 같은 JQuery의 일부 미묘한 변경 사항은 매우 흥미롭고 표시되는 효과도 다릅니다. 첫 번째는 ul 아래의 모든 li 요소에 스타일을 추가하는 것이고, 두 번째는 ul 아래의 첫 번째 li 요소에 스타일을 추가하는 것입니다. 보다 구체적인 사용 방법은 직접 테스트해볼 수 있습니다.

")는 해당 요소에 title 속성이 있는 모든 요소를 ​​선택한다는 의미입니다.

　$("[@title^=t]")는 모든 속성 제목 값이 t로 시작하는 요소라는 의미입니다.

　$("[@title$=t]")는 모든 속성 제목 값이 t로 끝나는 요소임을 의미합니다.
　 $("[@title*=t]")는 모든 속성 제목 값이 t를 포함하는 요소라는 의미입니다.

XPath 선택기는 CSS 선택기와 동일하며 함께 사용할 수도 있습니다. 여러 XPath 선택기를 함께 사용하거나 CSS 선택기와 함께 사용할 수 있으므로 원하는 요구 사항을 달성하려면 JQuery 메서드를 사용하세요. 많은 종류가 있습니다.

맞춤 선택기는 콜론(:)으로 시작하는 선택기입니다. 맞춤 선택기의 경우 자주 사용되는 gt(), :eq() , :odd, :even, 이것은 :odd 및 :even과 같이 가장 일반적으로 사용되는 것입니다. 일반적으로 $("#table tr:odd ")와 같이 사용 방법은 매우 간단합니다. addClass("odd") 및 $("#table tr:even").addClass("even")은 두 줄의 코드를 사용하여 원하는 스트라이프 스타일을 만듭니다.

물론 실제 개발에서는 일반적으로 다음과 같은 선택기와 DOM 탐색 방법을 사용하여 작업합니다.

$("#table td:contains('Window window')"). parent().find("td:gt(0)").addClass("highlight")

이 코드는 '창 창' 셀을 가져온 다음 해당 상위 요소를 가져온 다음 이것을 찾는 것을 의미합니다. 요소에는 0보다 큰 숫자가 포함된 모든 셀이 포함됩니다. 물론 일부 메서드는 단순화될 수 있습니다. 여기서는 JQuery의 연결 효과를 보여주고 싶습니다. 이 형식은 일반적으로 다음과 같이 작성합니다.

　$("#table td:contains( ' Window window')")
.parent()　　 // 부모 가져오기
.find("td")　 // td 요소 찾기
.not(":contains('Window window')" ) //창이 아닌 요소
.addClass("highlight"); //스타일을 추가하여

구분하고 나중에 표시하여 가독성을 높입니다.

아래에서는 실제 개발에서 가장 일반적으로 사용되는 몇 가지 코드를 제공합니다(계속 진행하기에는 너무 늦었기 때문입니다!):

　 $("input[type='text']" ) .val(''); //모든 텍스트 상자 지우기
$("#text input:text").val('');//텍스트 요소 아래의 모든 텍스트 상자 지우기

// 선택된 모든 CheckBox의 값을 가져옵니다

　 $("input:checkbox:checked").each(function() {
alert($(this).val());
}) ;

　 $("select option:selected").val()//선택한 드롭다운 상자의 값 가져오기

$("select option:selected" ).text()// 선택한 드롭다운 상자의 텍스트 가져오기

JQuery 선택기에 대한 나의 이해는 여기까지이며 관심 있는 친구들의 토론 참여를 환영합니다. 계속하려면...


데모 패키지 다운로드