jQuery 시작 튜토리얼: 선택기와 이벤트 사용하기

jQuery 시작 튜토리얼 - 선택기와 이벤트 사용
jQuery는 html의 요소를 선택하는 두 가지 방법을 제공합니다.

첫 번째는 CSS와 Xpath 선택기를 결합하는 것입니다. jQuery의 생성자(예: $("div > ul a"))로 전송됩니다.

두 번째는 jQuery 개체의 여러 메서드(메서드)를 사용하는 것입니다. 이 두 가지 방법을 조합하여 사용할 수도 있습니다.

이러한 선택기를 테스트하려면 starterkit.html에서 첫 번째 순서가 지정된 목록을 선택하고 수정해 보겠습니다.

처음에는 목록 자체를 선택해야 합니다. 목록에는 "orderedlist"라는 ID가 있으며 일반적인 자바스크립트 작성 방법은 document.getElementById("orderedlist")입니다. jQuery에서는 다음과 같이 합니다. $(document).ready(function() {
$ ("#orderedlist ").addClass("red");
}); 여기 스타터킷의 CSS 스타일 빨간색이 주문 목록에 첨부됩니다(Keel 번역자 참고: 테스트 패키지의 css 디렉토리에 있는 코어를 참조하세요. css, in 빨간색 스타일이 정의됨). 따라서 starterkit.html을 새로 고치면 첫 번째 순서가 지정된 목록의 배경색이 빨간색으로 변경되고 두 번째 순서가 지정된 목록의 배경색은 변경되지 않는 것을 볼 수 있습니다.
이제 새로운 스타일을 추가해 보겠습니다. 목록의 하위 노드. $(document).ready(function() {
$("#orderedlist > li").addClass("blue");
}); 주문 목록에는 "파란색" 스타일이 첨부되어 있습니다.

이제 좀 더 복잡한 작업을 해보겠습니다. 마우스를 li 개체에 놓고 다른 곳으로 이동하면 스타일이 전환되지만 목록의 마지막 요소에만 적용됩니다. } , function() {
                                                                          $(this).removeClass("green"); (번역자 Keel의 메모: 시작하려면 이 기사를 읽으십시오. 재배는 개인에 따라 다릅니다. 시작한 후에 더 많은 것을 알고 싶다면 조만간 이 단락의 링크를 읽어야 합니다!)

모든 onXXX 이벤트 onclick, onchange, onsubmit 등과 같이 모두 유효하며 모두 jQuery와 동등한 표현 방법을 가지고 있습니다(번역자 Keel의 참고: jQuery는 onXXX를 좋아하지 않으므로 XXX로 변경되고 on이 제거되었습니다). Ready 및 hover와 같은 일부 다른 이벤트도 해당 메서드를 제공합니다.

Visual jQuery의 이벤트 열에서 전체 이벤트 목록을 찾을 수 있습니다.

이러한 선택기와 이벤트를 사용하여 이미 많은 작업을 수행할 수 있지만 여기에 더 나은 것이 있습니다. 물건! $(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this) .html() + " BAM! " + i );
      });
});


find()를 사용하면 선택한 요소에서 조건부 검색을 수행할 수 있으므로 $("#orderedlist).find("li")는 $("#orderedlist li")와 같습니다.

each()는 모든 li를 반복하고 이 기반 처리를 기반으로 더 많은 작업을 수행할 수 있습니다. 다음과 같은 대부분의 방법 addClass()는 자체적인 Each()를 사용할 수 있습니다. 이 예에서는 html()을 사용하여 각 li의 html 텍스트를 가져와 일부 텍스트를 추가하고 이를 li의 html 텍스트로 설정합니다(번역자 Keel의 메모: 여기에서). 예를 들어, .html() 메소드는 객체의 html 코드를 가져오고 .html('xxx')는 'xxx'를 html 코드로 설정하는 것을 볼 수 있습니다.

자주 발생하는 또 다른 작업은 jQuery에서 다루지 않는 DOM 요소에 대해 일부 메서드를 호출하는 것입니다. AJAX를 사용하여 성공적으로 제출한 후 재설정을 상상해 보세요. $(document).ready( function() {
                                                                                                          작성하려면 ID를 form1 또는 testForm으로 변경한 다음 $("#form1") 또는 $("#testForm")을 사용하여 표현한 다음 테스트할 수 있습니다)

이 코드는 ID가 "form"이고 재설정()이 있는 요소가 첫 번째 요소에서 호출됩니다. 양식이 두 개 이상인 경우 다음과 같이 할 수 있습니다: $(document).ready(function() {
// 여러 양식을 한 번에 재설정하려면 이 방법을 사용하세요
$("#reset").click( 함수() {
                                                                                                                    });(번역자 Keel의 메모: 이러한 코드를 custom.js에 직접 작성하고 starterkit.html에서 효과를 테스트해야 이를 경험해 볼 수 있다는 점에 유의하세요! 필요한 경우 starterkit.html의 html 코드를 관찰하세요. )

이렇게 하면 재설정 링크를 클릭한 후 문서의 모든 양식 요소가 선택되고 모든 요소에 대해 재설정()이 실행됩니다.

직면할 수 있는 또 다른 문제는 특정 요소가 선택되는 것을 원하지 않는다는 것입니다. jQuery는 이 문제를 해결하기 위해 filter() 및 not() 메서드를 제공합니다. filter()는 필터 표현식과 일치하지 않는 선택된 항목을 줄이기 위해 필터 표현식을 사용하고, not()은 필터 표현식과 일치하는 선택된 모든 항목을 취소하는 데 사용됩니다. ul 하위 요소가 없습니다. $(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});This 코드는 모든 li 요소를 선택한 다음 ul 하위 요소가 없는 li 요소를 제거합니다. 브라우저를 새로 고치면 ul 하위 요소의 li 요소를 제외한 모든 li 요소에 테두리가 있습니다.

(번역자 Keel의 주: 매우 편리한 css() 메서드에 주의하시고 실제로 효과를 테스트하고 관찰하도록 다시 한번 상기시켜 주십시오. 예를 들어 CSS 스타일을 변경하는 것은 어떻습니까? 또 다른 CSS를 추가하는 것은 어떻습니까? 스타일을 선택하세요. ：$("li").not("[ul]").css("border", "1px solid black").css("color","red");)

위 코드의 [expression] 구문은 XPath에서 파생되었으며 요소 및 속성에 대한 필터로 사용할 수 있습니다. 예를 들어 이름 속성이 있는 모든 링크를 선택할 수 있습니다: $(document).ready( 함수 () {
$("a[@name]"). background("#eee");
}) 이 코드는 name 속성이 있는 모든 링크에 배경색을 추가합니다. (번역자 Keel의 주: 이 색상은 너무 미묘하므로 $("a[@name]").ground("red");로 작성하는 것이 좋습니다.)

더 일반적인 상황은 선택하는 것입니다. 이름별 링크를 사용하려면 특징적인 href 속성이 있는 링크를 선택해야 할 수도 있습니다. 따라서 브라우저마다 href에 대한 이해가 일치하지 않을 수 있으므로 전체 일치("=") 대신 부분 일치("*=")를 사용합니다. $(document).ready(function() {
                                                                                       ~                   /content/gallery
});
}) 지금까지 선택기는 하위 요소를 선택하거나 요소를 필터링하는 데 사용되었습니다. 또 다른 상황은 FAQ 페이지와 같은 이전 요소 또는 다음 요소를 선택하는 것입니다. 질문을 클릭하면 답변이 다음과 같이 표시됩니다. $(document).ready( function() { $ ('#Faq').Find('dd').Hide().End();
if(answer.is(':visible')) {
답변. SlideUp();
} else {
Answer.slideDown();
}
});
});여기에서는 코드 양을 줄이고 더 직관적이고 이해하기 쉽게 보이도록 몇 가지 연쇄 표현식을 사용합니다. '#faq'가 한 번만 선택되는 것처럼 end() 메서드를 사용하면 첫 번째 find() 메서드가 종료(실행 취소)되므로 나중에 $( '#faq')를 쓰지 않고도 find('dt')를 계속할 수 있습니다. .find('dt').

클릭 이벤트에서는 $(this).next()를 사용하여 dt 바로 아래에 있는 dd 요소를 찾아 클릭한 질문 아래의 답변을 빠르게 선택할 수 있습니다.

(번역자 Keel의 주: 이 예제는 정말 멋집니다. FAQ의 답변이 줄어들 수 있습니다! next()를 사용하는 아이디어부터 이러한 효과를 구현하는 것까지 우리가 소화해야 할 곳이 많습니다. . if (답변. is(':visible'))에 주의하세요. 이해가 안 되는 부분이 있으면 제가 언급한 두 가지 필수 API 문서를 확인하세요. 시작)

같은 레벨의 요소를 선택하는 것 외에도 상위 요소를 선택할 수도 있습니다. 사용자가 마우스를 움직일 때 기사의 특정 단락에 있는 링크의 상위 요소를 강조 표시하고 싶을 수도 있습니다. $(document).ready(function() {
       $("a").hover (기능() {
                                                                                                
  });
}); 테스트 결과에서 볼 수 있듯이 기사의 특정 문단으로 링크를 걸면 해당 문단이 완전히 사용된 경우 하이라이트 스타일을 적용하고 제거한 후 원래 상태로 복원합니다.

(번역자 Keel의 메모: 하이라이트는 core.css에 정의된 스타일입니다. 변경할 수도 있습니다. 여기에 두 번째 function()이 있다는 점에 유의하세요. 이는 호버 메소드의 기능입니다. 확인해주세요. API 문서에 hover, 위의 예가 있습니다)
계속하기 전에 이 단계를 살펴보겠습니다. jQuery는 코드를 더 짧고 이해하고 유지하기 쉽게 만듭니다. 다음은 $(document)의 약어입니다. .ready(callback) 메서드: $(function() {
// DOM이 준비되었을 때 실행할 코드
}) Hello world 예제에 적용하면 다음과 같습니다. $(function() {
$( "a").click(function() {
                    Alert("Hello world!");
         });

더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!