4. HTML을 움직이게 만드세요.
jQuery를 사용하여 몇 가지 기본 애니메이션과 효과를 수행할 수 있습니다. 애니메이션 효과의 핵심은 언제든지 지정된 CSS 스타일을 변경할 수 있는 animate() 함수입니다. 예를 들어 애니메이션의 속도, 너비, 투명도 또는 위치를 변경할 수도 있습니다. 속도를 변경할 때 밀리초(milliseconds)를 사용하거나 미리 결정된 속도 값(느림, 보통 또는 빠름)을 사용할 수 있습니다.
다음은 요소의 너비와 높이를 동시에 변경하는 예제 애니메이션입니다. 초기 값은 없고 최종 값만 있습니다. 동시에 초기 값을 기존 요소에서 직접 가져올 수 있습니다.
$('#grow').animate({ height: 500 , width: 500 }, "slow", function() {alert('요소 성장이 완료되었습니다!');}); jQuery에 내장된 이러한 기능을 사용하면 매우 쉽게 애니메이션 효과를 만들 수 있습니다. 요소를 표시하고 숨기는 show() 함수와 hide() 함수는 즉시 실행되거나 지정된 속도로 실행되도록 설정할 수 있습니다. fadeIn() 및 fadeOut() 함수 또는 SlideDown() 및 SlideUp() 함수를 사용할 수도 있습니다. 원하는 효과에 따라 요소를 표시하거나 숨깁니다. 다음은 탐색 모음의 슬라이드 다운 효과를 보여주는 간단한 예입니다.
$('#nav').slideDown('slow'); 스크립팅 및 이벤트 처리 jQuery는 아마도 DOM을 조작하는 데 가장 적합하며 이벤트 처리는 실제로 DOM을 탐색하고 조작하는 것이 매우 쉽습니다. 이벤트 바인딩, 제거 및 호출도 매우 자연스럽고 사용하기 쉽습니다. 이러한 코드를 작성하면 오류를 크게 줄일 수 있습니다. 실제로 jQuery는 DOM 다양한 작업을 단순화합니다. 추가() 함수를 사용하여 요소를 생성하고 다른 요소에 연결할 수 있으며, clone()을 사용하여 요소를 복사할 수 있습니다. html()을 사용하여 콘텐츠를 설정하고,empty()함수를 사용하여 콘텐츠를 삭제할 수 있으며,()함수를 사용하여 요소와 콘텐츠를 삭제하고,wrap()함수를 사용하여 이 요소를 다른 요소로 래핑할 수도 있습니다. DOM을 탐색하여 jQuery 객체 자체의 내용을 변경할 수 있는 함수입니다. 또한 요소의 형제(), parent() 또는 children()을 가져올 수도 있습니다. find siblings.find()는 아마도 이러한 함수 중 가장 강력할 것입니다. 이 함수를 사용하면 jQuery 개체 및 해당 하위 노드 내에서 검색할 수 있습니다. end() 함수는 실행 취소처럼 작동하여 jQuery 객체가 find() 또는 parent()를 호출한 시간이나 위에서 언급한 메서드 링크를 사용하기 전의 다른 상태로 되돌아가게 합니다. Listing7에서는 로그인 양식을 찾아 해당 요소에 대한 일부 작업을 수행하는 예를 보여줍니다. Listing 7. DOM을 쉽게 탐색하고 조작하기$('form#login')// 모두 숨기기 '선택적' class.find( 'label.ional').hide().end()// form.find('input:password') 의 비밀번호 필드에 빨간색 테두리를 추가하는 양식 내부의 레이블 .css('border', '1px solid red'). end()// 양식에 제출 핸들러를 추가합니다.submit(function(){return verify('제출하시겠습니까?');}) ; 믿거나 말거나, 이 예제에는 실제로 중간에 공백이 있는 단일 링크만 있습니다. 그런 다음 내부에서 선택적 레이블을 찾아 숨긴 다음 end( )를 사용하여 폼으로 돌아왔습니다. 비밀번호 입력 상자를 찾아 테두리를 빨간색으로 변경한 다음 다시 end()를 호출하여 폼으로 돌아왔습니다. 특히 이 폼에 제출 시간 처리 기능을 추가했습니다. 흥미로운 점은 매우 간결한 코드 외에도 jQuery는 모든 작업이 잘 연결되면 요소를 두 번 찾을 필요가 없도록 모든 작업을 자체적으로 최적화한다는 것입니다. 일반 이벤트를 처리하는 것도 마찬가지로 매우 간단합니다. click(), submit() 또는 mouseover() 함수를 호출한 다음 이를 이벤트 리스너에 전달합니다. 함수는 동일합니다. 또한 바인딩('eventname', function(){})을 사용하여 수행할 수도 있습니다. 이벤트 처리 함수를 지정합니다. unbind('eventname')을 사용하여 이벤트를 바인딩 해제하거나 unbind()를 사용하여 모든 이벤트를 바인딩 해제할 수 있습니다. 이 함수 시리즈와 사용 방법에 대한 자세한 내용은 jQuery의 애플리케이션 프로그래밍을 참조하세요. 6. jQuery 선택기의 기능 공개
일반적으로 ID를 사용하여 #myid와 같은 요소를 선택하거나 div.myclass와 같은 클래스 이름을 사용합니다. 단일 선택기를 사용하여 요소 조합을 찾을 수 있는 선택기 구문
jQuery의 선택기 구문은 주로 CSS3 및 XPath를 기반으로 합니다. CSS3 및 XPath에 대해 더 많이 알수록 jQuery 선택기에 대한 더 많은 정보를 얻을 수 있습니다. , CSS3 및 XPath를 포함하여 이 기사 끝에 있는 리소스 링크를 참조하세요.
CSS3에는 모두에서 지원되는 일부 구문이 포함되어 있으므로 자주 볼 수는 없지만 jQuery에서 요소를 선택하는 데는 여전히 사용할 수 있습니다. jQuery에는 자체 사용자 정의 선택기 구문 분석 엔진이 있기 때문입니다. 예를 들어 테이블의 각 빈 열에 대시를 추가하려면 :empty 의사 연산자를 사용할 수 있습니다:
$('td:empty').html('- '); 특정 클래스 이름을 포함하지 않는 모든 요소를 찾는 방법은 무엇입니까? CSS3에는 :not 의사 연산자를 사용하는 특정 구문이 있습니다. 다음 코드는 필수 항목을 포함하지 않는 모든 텍스트 입력 상자 요소를 숨깁니다. $('input:not(.required)').hide( ); CSS에서처럼 쉼표를 사용하여 여러 선택기를 함께 연결할 수도 있습니다. 동시에 $('ul, ol, dl' ).hide();XPath는 문서에서 요소를 찾는 강력한 도구이며 CSS를 사용하여 찾을 수 없는 많은 항목을 찾을 수 있습니다. 예를 들어 테두리의 경우 다음을 수행할 수 있습니다. $("input:checkbox/..").css('border', '1px solid #777'); 예를 들어, 테이블의 가독성을 높이기 위해 홀수 및 짝수 행을 설정하여 다른 클래스 이름을 사용할 수 있습니다. 이를 jQuery로 수행하는 것은 매우 쉽습니다. :odd 선택기 덕분에 다음은 스트라이프 클래스를 사용하여 테이블에서 홀수 행의 배경색을 변경하는 방법을 보여주는 코드입니다: $('table.striped > tr:odd').css('Background', ' #999999'); 참고하세요. jQuery의 강력한 선택기는 영향을 미치고 싶은 요소가 무엇이든, 그것이 아무리 명확하거나 흐릿하더라도 항상 간단한 jQuery 선택기를 사용하여 대상을 지정할 수 있는 방법을 찾을 수 있습니다. 플러그인을 사용하여 jQuery 확장하기 다른 소프트웨어와 달리 jQuery 플러그인을 작성하는 것은 결코 복잡한 API를 많이 사용하는 고통스러운 시련이 아닙니다. 실제로 jQuery용 플러그인을 작성하는 것은 너무 간단해서 원할 수도 있습니다. 코드를 더욱 간결하게 만들려면 나중에 플러그인을 작성하세요. 작성하려는 플러그인의 가장 기본적인 부분은 다음과 같습니다. $.fn.donothing = function(){return this;}; , 약간의 설명이 필요합니다. 먼저 각 jQuery 개체에 함수를 추가해야 하며, 이를 $.fn에 할당해야 합니다. 두 번째로 함수는 메서드 연결을 중단하지 않도록 이(jQuery 개체)를 반환해야 합니다. 위에서 언급한 규칙을 쉽게 확장할 수 있습니다. CSS('배경')을 사용하는 대신 플러그인의 배경색을 변경하려면 다음을 수행하세요. {return this.css('Background', bg);}; CSS() 함수는 이미 jQuey 객체 자체이므로 직접 반환할 수 있으므로 메서드 연결이 잘 작동할 때 jQuery 플러그인을 사용하는 것이 좋습니다. 예를 들어, 동일한 일을 계속해서 처리하기 위해 각각( ) 함수를 사용하는 경우 플러그인 사용을 고려할 수 있습니다. [주석: 명확하지 않음.] 사용하기 매우 쉽고 수천 개의 플러그인을 사용할 수 있습니다. jQuery에는 테이블, 둥근 모서리, 슬라이드쇼, 날짜 선택 및 생각할 수 있는 거의 모든 애플리케이션에 대한 플러그인이 있습니다. 이 기사 마지막 부분에 있는 리소스 목록에서 플러그인 전체 목록을 확인하세요. 가장 복잡하고 널리 사용되는 플러그인은 정렬, 드래그 효과, 다양하고 복잡한 특수 효과 및 기타 기능을 처리하는 애니메이션 플러그인인 인터페이스입니다. 흥미롭고 복잡한 사용자 인터페이스 효과입니다. jQuery의 인터페이스는 Prototype의 Scriptaculous입니다. 똑같이 인기 있고 유용한 플러그인은 Form 플러그인으로, 이 플러그인은 ajax를 사용하여 백그라운드에서 간단하게 제출할 수 있습니다. 이 상황: 양식 제출 이벤트를 하이재킹해야 하는 경우 다양한 텍스트 출력 필드를 모두 찾아 이를 사용하여 ajax 호출을 작성합니다. 8. jQuery 그 후 jQuery에 대한 몇 가지 피상적인 사항에 대해 이야기했습니다. 여러분이 배우는 새로운 기능과 새로운 방법은 매우 자연스럽고 논리적이기 때문에 사용하기가 흥미로울 것입니다. 일단 jQuery를 사용하면 작업이 Javascript 및 Ajax 개발을 단순화할 수 있다는 것을 알게 될 것이며, 무언가를 배울 때마다 코드가 더 단순해질 것입니다. jQuery
를 배운 후 Javascript 프로그래밍에 많은 재미를 느꼈고 지루한 부분도 모두 잘 처리되므로 jQuery를 사용한 후에는 마지막으로 for를 사용한 것이 거의 기억나지 않습니다. 루프. 심지어 다른 Javascript 라이브러리를 사용하는 것도 두렵습니다. jQuery는 Javascript 프로그래밍에 대한 나의 견해를 완전히 바꿔 놓았습니다.