<div class="codetitle"> <span><a style="CURSOR: pointer" data="7481" class="copybut" id="copybut7481" onclick="doCopy('code7481')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code7481"> <br><html xmlns="http://www. w3.org /1999/xhtml"> <br><head> <br><!-- <BR>1. 단순 필터 선택기: 특정 유형의 필터링 규칙에 따라 요소를 일치시키며 다음과 같이 작성됩니다. 콜론(:) 처음에는 간단한 필터 선택기가 가장 널리 사용되는 유형의 필터 선택기입니다 <BR> jQuery 선택기에 대한 자세한 설명 <BR> 얻은 페이지의 다양한 요소에 따라 jQuery 선택기는 다음과 같이 나눌 수 있습니다. 선택기, 계층적 선택 선택기, 필터 선택기, 양식 선택기의 네 가지 범주가 있습니다. 그 중 필터 선택기에는 단순 필터 선택기, 콘텐츠 필터 선택기, 가시성 필터 선택기, 속성 필터 선택기, 하위 요소 필터 선택기, 양식 개체 속성 필터 선택기 등 6가지 유형이 있습니다. <BR> --> <BR>< title>jQuery 기본 필터 선택기 사용</title> <br><!--jQuery 기본 필터 선택기를 사용하여 요소 선택: 페이지에서 <h1> 태그를 설정합니다. 사용자는 테마를 표시하고 <ul> 태그를 추가하고 그 안에 4개의 <li> 태그를 배치한 다음 <span> 태그를 생성하여 애니메이션 효과를 수행합니다. 간단한 필터 선택기를 통해 요소를 얻고 선택한 요소의 클래스 이름을 변경하여 선택한 상태를 강조표시합니다.-->script src="jquery-1.9.1.js" type="text/ javascript"> ;</script> <br><style type="text/css"> <br>body{font-size:12px;text-align:center;} <br>div{width:240px ;height: 83px;border:solid 1px #eee} <br>he{font-size:13px;} <br>ul{list-style-type:none;padding:0px} <br>.DefClass,.NotClass{ 높이:23px ;너비:60px;라인 높이:23px;float:왼쪽;border-top:solid 1px #eee;border-bottom:solid 1px #eee} <br>.GetFocus{width:58px;border:solid 1px #666; background-color:#eee} <br>#spnMove{width:234px;height:23px;line-height:23px;} <br></style> <br><script type="text/ javascript"> ; <br>$(function () { //첫 번째 요소의 카테고리 추가 <br>$('li:first').addClass('GetFocus'); <br>}) <br>$ (함수 ( ) { //마지막 요소의 카테고리 추가 <br>$('li:last').addClass('GetFocus') <br>}) <br>$(function () { //모든 요소 제거 추가; 주어진 선택기와 일치하는 카테고리 <br>$('li:not(.NotClass)').addClass('GetFocus') <br>}) <br>$(function () { //짝수가 포함된 모든 요소 카테고리 추가; 0부터 계산되는 인덱스 값 <br>$('li:even').addClass('GetFocus'); <br>}) <br>$(function () { //홀수 인덱스 값을 가진 모든 요소 카테고리를 추가합니다. 0부터 계산 <br>$('li:odd').addClass('GetFocus'); <br>}) <br>$(function () { //지정된 인덱스 값의 요소 범주에 1을 추가합니다. 0부터 계산 <br>$('li:eq(1)').addClass('GetFocus') <br>}) <br>$(function () { //주어진 인덱스보다 큰 모든 요소 카테고리 추가 0부터 계산되는 값 <br>$('li:gt(1)').addClass('GetFocus') <br>}) <br>$(function () { // 주어진 인덱스 값(0부터 계산)<br>$('li:lt(4)').addClass('GetFocus') <br>}) <br>$(function () { //제목 요소 카테고리 추가 <br>$('div h1').css('width', '238') <br>$(':header').addClass('GetFocus') <br>}) <br>$(함수 () { <br>animateIt(); //애니메이션 효과 요소 카테고리 추가 <br>$('#spnMove:animated').addClass('GetFocus') <br>}) <br>function animateIt() { //애니메이션 효과<br>$('#spnMove').slideToggle('slow', animateIt) <br></script> <br> </head> ; <br><div> <br><h1>기본 필터 선택기</h1> <br><ul> <br><li class="DefClass"> <br><li class="DefClass">항목 1</li> <br><li class="NotClass">항목 2</li> <br><li class="DefClass"> 3</li> <br> </ul> <br><span id="spnMove">스팬 이동</span> <br> </div> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
