JQuery 연구 노트 선택기 Six_jquery-JS 튜토리얼-php.cn

코드 복사 코드는 다음과 같습니다. $(function(){ $("#aNth1").click(function(){ $ ( "#ul1 li : nth-Child (균일)"). ) $ ( "#anth2"). 클릭 (function () { $ ( "#ul1 li : nth-Child (2n 1)") ).css("배경","#ff3434"); }) }) $("#aFirst").click(function(){ $("#ul1 li :first-child").each(function(){ $(this).css("Background","#223344"); }) }) $("# aLast").click(function(){ $("#ul1 li:last-child").each(function(){ $(this).css("배경","#99ff88" ); }) }) $("#aOnly").click(function(){ $("ul li:only-child") .each(함수(){ $(this).css("배경","#99ff88"); }) }) }) // --> 제목 없는 문서 🎜> 재설정 &lt ;li>li1 li2 li4 ;li5 🎜> ul1의 짝수 인덱스 하위 요소의 배경색 설정 ｜ ul1의 홀수 인덱스 하위 요소의 배경색 설정 ｜ ul1의 선두 하위 요소의 배경색 설정&lt ;/ a>｜ ul1 ｜ 모든 ul 1.$에서 유일한 하위 요소의 배경색을 설정합니다. ("ParentSelector ChildTagName:nth-child(...)") 참고 - 다음 약어는 다음과 같습니다. nth-child 설명: 인덱스 필터링을 위해 ParentSelector에서 선택한 요소 집합의 하위 요소 집합을 가져옵니다. 예제에서 aNth1을 클릭하면 ID는 ul1 요소의 li 하위 요소가 짝수(짝수) 선택을 수행합니다($("#ul1 li:nth-child(even)")). 키워드 even은 친숙해야 합니다. 3장에서 언급했었습니다. 그래도 헷갈린다면 3장으로 가셔서 보시면 됩니다 ^^ 물론 여기서도odd를 써도 되지만 3장과는 조금 다릅니다. 3장에서는 인덱스가 0부터 시작하는데 여기서는 인덱스가 1부터 시작해야 합니다. 디자인이 별로 좋지 않은 느낌이에요--! 이 방법은 또한 예제의 aNth2 클릭 이벤트와 마찬가지로 매우 유연한 사용법을 가지고 있으며 $("#ul1 li:nth-child(2n 1)") 방법은 유사한 $("#ul1 li를 완료하는 데 사용됩니다. :nth- child(odd)") 함수, 2n 1은 설명할 필요가 없습니다. 중학교 수학에서 자주 사용되는 함수입니다. 정말 이해가 안가시면 댓글 남겨주세요--! 이 방법은 "2"와 같은 특정 인덱스를 따를 수도 있지만 여기서 인덱스는 1부터 시작한다는 점을 기억하세요! ! 반환값: Array(Element); 2.:first-child 설명: 선택한 요소 컬렉션의 헤드 요소를 가져옵니다. 여기 글은 간단해서 이해가 되실 텐데요, 예시를 들어봐도 이해가 안 되시면 올려주세요 - -! 반환값: Array(Element); 3.:last-child 설명: 선택한 요소 컬렉션의 마지막 요소를 가져옵니다. 반환 값: Array(Element); 4.:only-child 설명: 형제 노드 없이 요소를 가져옵니다. 예를 들어, 예제에서 두 번째 ul 요소에는 li 하위 요소가 하나만 있습니다. $( "ul li:only-child") 메소드는 li7만 얻습니다. 반환값: Array(Element);