초보자가 배우기에 가장 간단한 jQuery 프로그램_jquery

코드 복사 코드는 다음과 같습니다. 🎜>&lt ;STYLE type='text/css'> .css1{ display:block; 너비:100px 배경색:파란색; } .css2{ 폭:100px; 높이:100px; 배경색:빨간색; 스타일> tt 'jquery- 1.3.2.js'> $(document).ready(function(){ $("#freee") .hover( function(){ $(this).addClass("css2"); }, function(){ $(this).removeClass("css2"); } ); }); 찾기: 이벤트 jQuery는 HTML 요소를 선택하는 두 가지 방법을 제공합니다. 첫 번째는 CSS와 Xpath 선택기를 결합하여 문자열을 형성하고 이를 jQuery의 생성자(예: $("div > ul a"))로 보내는 것입니다. ;두 번째 방법은 jQuery 객체의 여러 메소드를 사용하는 것입니다. 이 두 가지 방법을 조합하여 사용할 수도 있습니다. 이러한 선택기를 테스트하려면 starterkit.html에서 첫 번째 순서가 지정된 목록을 선택하고 수정해 보겠습니다. 처음에는 목록 자체를 선택해야 합니다. 이 목록에는 다음과 같은 ID가 있습니다. "orderedlist"이며 일반적인 자바스크립트 작성 방법은 document.getElementById("orderedlist")입니다. jQuery에서는 다음과 같이 합니다: $(document).ready(function() { $(" #orderedlist").addClass("red"); }); 여기서 스타터킷의 CSS 스타일 빨간색이 Orderedlist에 첨부됩니다(번역자 Keel의 참고: 테스트 패키지 .css의 CSS 디렉토리에 있는 코어를 참조하세요) , 빨간색 스타일이 정의됨). 따라서 starterkit.html을 새로 고치면 첫 번째 순서가 지정된 목록의 배경색이 빨간색으로 변경되고 두 번째 순서가 지정된 목록은 변경되지 않는 것을 볼 수 있습니다. 이제 새로운 스타일을 추가해 보겠습니다. 목록의 하위 노드 $(document).ready(function() { $("#orderedlist > li").addClass("blue" ); }); 이러한 방식으로 Orderedlist의 모든 li에는 "blue" 스타일이 추가됩니다. 이제 좀 더 복잡한 작업을 해보겠습니다. 마우스를 li 개체에 놓고 다른 곳으로 이동하면 스타일이 전환되지만 목록의 마지막 요소에만 적용됩니다. $(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green" ); }, function() { $(this).removeClass("green"); }) }); , 더 많은 예제와 목록을 여기에서 찾을 수 있습니다. (번역자 Keel의 주: 시작하려면 이 기사를 읽으십시오. 재배는 개인에 따라 다릅니다. 시작한 후에 더 많은 것을 알고 싶다면 조만간 이 단락의 링크를 읽어야 합니다! 다시 번역할 필요는 없습니다. ..^_ ^!) onclick, onchange, onsubmit 등과 같은 모든 onXXX 이벤트는 유효하며 모두 jQuery와 동등한 표현 방법을 갖습니다(번역자 Keel의 참고: jQuery는 onXXX를 좋아하지 않으므로 XXX로 변경되고 삭제됩니다.)