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

코드 복사 코드는 다음과 같습니다.

🎜>< ;STYLE type='text/css'>
.css1{
display:block;
너비:100px
배경색:파란색;
}
.css2{
폭:100px;
높이:100px;
배경색:빨간색; 스타일>


tt 'jquery- 1.3.2.js'>

<script>$(document).ready(function(){ <BR>$("#freee") .hover( function(){ <BR>$(this).addClass("css2"); <BR>}, function(){ <BR>$(this).removeClass("css2"); <BR>} ); <BR>}); <BR> <BR><BR><BR><BR>찾기: 이벤트<BR>jQuery는 HTML 요소를 선택하는 두 가지 방법을 제공합니다. 첫 번째는 CSS와 Xpath 선택기를 결합하여 문자열을 형성하고 이를 jQuery의 생성자(예: $("div > ul a"))로 보내는 것입니다. ;두 번째 방법은 jQuery 객체의 여러 메소드를 사용하는 것입니다. 이 두 가지 방법을 조합하여 사용할 수도 있습니다. <BR><BR>이러한 선택기를 테스트하려면 starterkit.html에서 첫 번째 순서가 지정된 목록을 선택하고 수정해 보겠습니다. <BR><BR>처음에는 목록 자체를 선택해야 합니다. 이 목록에는 다음과 같은 ID가 있습니다. "orderedlist"이며 일반적인 자바스크립트 작성 방법은 document.getElementById("orderedlist")입니다. jQuery에서는 다음과 같이 합니다: <BR><br>$(document).ready(function() { <br> $(" #orderedlist").addClass("red"); </script>

}); 여기서 스타터킷의 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로 변경되고 삭제됩니다.)