jQuery의 선택에는 두 가지 유형이 포함됩니다. 하나는 선택기이고 다른 하나는 필터입니다. 필터는 선택기에 의해 선택된 jQuery 객체를 추가로 선택하는 데 사용됩니다. children()은 이름에서 알 수 있듯이 어린이를 필터링하고, 조건에 맞는 어린이를 필터링하는 필터입니다. 전체 형식은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. .children(expr ) 여기서 children은 필터 이름이고 expr은 표현식입니다. 선택기의 모든 표현식은 태그 이름 "div", 클래스별로 여기에서 사용할 수 있습니다. 이름 ".class" ", 일련 번호 ":first" 등입니다. 표현식이 비어 있으면 모든 하위 항목이 반환되고 반환된 결과는 여전히 jQuery 객체입니다. 예: 코드 복사 코드는 다음과 같습니다. > 좋아하실 수도 있습니다. ; 헤드 앤 숄더 샴푸 리우셴 토일렛 워터 세이프가드 비누 ;Xin Xiang 프린트 티슈 와하하 미네랄 워터 / div> 인기 추천 롱시 올리브 오일 Pampers 기저귀 유기농 쌀 Miaojie 쓰레기 봉투 ; 코드 복사 코드는 다음과 같습니다. <u>// jQuery 코드는 다음과 같습니다 </u>< ;/script></a></span></div>요구 사항 1: 모든 div 하위 항목의 글꼴 색상을 빨간색으로 변경 <div class="codebody" id="code12602"> <br><br><br><br>코드 복사</div> <br><br> 코드는 다음과 같습니다.<div class="codetitle"><span><a style="CURSOR: pointer" data="52123" class="copybut" id="copybut52123" onclick="doCopy('code52123')">$("div").children().css("color","red");//all 텍스트가 빨간색으로 바뀌었습니다<u> </u></a> </span></div> <div class="codebody" id="code52123"> <br>요구 사항 2: 모든 div의 하위 항목에 있는 h2 태그의 글꼴 색상을 빨간색으로 변경 <br> </div> <p><img alt="" src="http://files.jb51.net/file_images/article/201302/20130217181422161.jpg">코드 복사 </p> <p><br> 코드는 다음과 같습니다. </p> <div class="codetitle"><span><a style="CURSOR: pointer" data="33560" class="copybut" id="copybut33560" onclick="doCopy('code33560')">$("div").children("h2").css("color","red");//모든 h2 제목 텍스트가 빨간색으로 변합니다<u> </u></a> </span></div> <div class="codebody" id="code33560"> <br>요구사항 3: 모든 div의 하위 항목에 있는 li 태그의 글꼴 색상을 빨간색으로 변경하세요. <br> </div> <p><img alt="" src="http://files.jb51.net/file_images/article/201302/20130217181422162.jpg">코드를 복사하세요. </p> <p><br> 코드는 다음과 같습니다: </p> <div class="codetitle"><span><a style="CURSOR: pointer" data="15807" class="copybut" id="copybut15807" onclick="doCopy('code15807')">$("div").children("li").css("color","red");//실패했습니다! <u></u></a> </span></div> <div class="codebody" id="code15807"> <br>왜 성공하지 못했나요? 자식은 손자가 아닌 자식만 찾을 수 있고 div의 자식은 h2와 ul이므로 li를 찾을 수 없기 때문입니다 <br> </div>그럼 아이들을 통해 리를 찾으려면 먼저 리의 아버지 ul을 선택해야 합니다<p><img alt="" src="http://files.jb51.net/file_images/article/201302/20130217181422163.jpg"></p> <p>코드 복사</p> <p><br>코드 </p> <div class="codetitle"><span><a style="CURSOR: pointer" data="42510" class="copybut" id="copybut42510" onclick="doCopy('code42510')">$("div ul").children("li").css("color","red");//모든 li 텍스트가 빨간색으로 변합니다<u></u><br>$("div ul")은 계단식 선택기입니다. 이는 div 아래의 ul을 선택한다는 의미입니다. 여기서는 자세히 설명하지 않습니다. <p></p> <p><img alt="" src="http://files.jb51.net/file_images/article/201302/20130217181422164.jpg"><br>요구사항 4: ul의 두 번째 자식 글꼴 색상을 빨간색으로 변경<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="62400" class="copybut" id="copybut62400" onclick="doCopy('code62400')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다: </div> <div class="codebody" id="code62400"> <br>$("div ul").children(":eq(1)").css("color","red");//어느 것인지 맞춰보세요 좋아해요 "Liu Shen Floral Water"의 두 번째 라인이 빨간색으로 변합니다<br> </div> <p><img alt="" src="http://files.jb51.net/file_images/article/201302/20130217181422165.jpg"></p> <p></p> <p>둘째 아이가 빨갛게 변하길 원한다면 왜 eq(1)인가요? 시퀀스 번호는 0부터 시작하므로 첫 번째 자식의 시퀀스 번호는 0이므로 두 번째 자식의 시퀀스 번호는 1입니다. </p> <p>자세히 살펴보면 '좋아요' 모듈의 두 번째 줄만 변경되고 '인기 추천'의 두 번째 줄은 변경되지 않은 이유는 무엇인가요? children 필터로 걸러진 아이들은 함께 정렬되기 때문에 "인기 추천"의 두 번째 줄은 Old 7이 됩니다. 빨간색으로 만들고 싶다면 <br></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="29288" class="copybut" id="copybut29288" onclick="doCopy('code29288')"> 코드 복사<u></u></a> 코드는 다음과 같습니다:</span></div> <div class="codebody" id="code29288">$("div ul").children(":eq(1),:eq(7) ") .css("color","red");//두 번째 줄이 마음에 드는지 맞춰보세요, 인기 추천 두 번째 줄이 빨간색으로 변합니다 <br><br> </div>두 줄 모두 빨간색으로 변합니다]<br> <p><img alt="" src="http://files.jb51.net/file_images/article/201302/20130217181422166.jpg"> </p> <p>요약<strong>: children은 현재 jQuery 객체의 하위 항목을 찾는 필터입니다. children(expr)의 expr은 표현식이 추가된 후 expr과 일치하는 하위 항목만 유지됩니다. 아니요, 일치하는 사람은 죽습니다. 자녀는 자녀만 찾을 수 있습니다. 손자와 증손자를 찾으려면 찾기 필터를 사용해야 합니다. </strong></p></a></span></div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
