jQuery 학습 요약 jQuery events_jquery

먼저, 이전 지식을 심화하는 데 도움이 되는 유용한 예를 살펴보겠습니다. 그 중 일부는 이전에 나타났습니다.

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

jQuery(document).ready(function() {
  jQuery("#btnHide").click(function() {
    jQuery("#imgGoogle").hide("1000");
  });
});

이미지 숨기기를 클릭하면 Google 로고 이미지가 1초 후에 숨겨집니다. 물론 여기서는 hide() 메소드를 사용합니다. 시간을 지정할 필요는 없습니다. 사진을 표시하려면 show() 메소드를 사용해야 합니다.

이제 이 글의 주요 내용인 이벤트부터 시작하겠습니다. 위의 여러 곳에서 이벤트가 사용되었음을 알 수 있습니다. 그 중 document.ready는 문서가 준비되면 jQuery에게 마우스 이동, 클릭, 텍스트 상자 포커스 이탈 등이 모두 실행될 수 있음을 알려주는 이벤트입니다.

과거에는 다음과 같은 내용을 자주 보았습니다.

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

베이징에서

이렇게 써요. 이제부터는 모두 이런 글쓰기 방식을 버려야 합니다. js 코드와 html의 분리를 실현하여 페이지를 더욱 깔끔하고 효율적으로 만듭니다. 현재 작성 방법은 다음과 같습니다.

jQuery("#divRent").click(function() {
  alert("租房贵");
});

요약된 내용이므로 필요할 때 참고하실 수 있도록 앞의 ​​세 글과 마찬가지로 예시를 활용하여 최대한 많은 이벤트 방법을 기록하겠습니다.

제가 공부하면서 느낀 점은 다음과 같습니다.

1.one() 이벤트, 한 번만 실행되는 이벤트를 바인딩합니다.

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

사람들은 베이징에 있습니다

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

jQuery("#divRent").one("클릭", function() {
Alert("임대료가 비싸다");
});

위 내용은 클릭 이벤트에 바인딩되어 있으며, 두 번째 클릭 시 프롬프트가 팝업되지 않습니다.

2. focus() 및 Blur() 이벤트

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

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

jQuery("#tTest").focus(function() {
jQuery(this).css("배경", "노란색")
}).blur(function() {
jQuery(this).css("배경", "흰색")
});

이 예제는 연쇄 쓰기 방식을 사용하므로 이해하기 어렵지 않다고 생각합니다. jQuery 운영 CSS 스타일에 익숙하지 않은 경우 두 번째 요약을 읽어보세요. 이 예에서는 텍스트 상자에 초점이 맞춰지면 배경색이 노란색으로 변경되고, 텍스트 상자를 벗어나면 다시 흰색으로 변경됩니다. 이것의 목적은 사용자 경험을 향상시키는 것이라고 개인적으로 생각합니다.

3. keydown() 및 keyup() 이벤트

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

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

jQuery("#tTest").keyup(function() {
jQuery("#lResult").html(jQuery(this).val())
})

키가 뜨면(여기서 표현하기 힘든 느낌^_^) 텍스트 상자에 있는 내용이 라벨에 표시됩니다. 조작 요소 속성에 대한 부분은 세 번째 요약을 읽을 수 있습니다.

4. submit() 이벤트

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

코드 복사 코드는 다음과 같습니다. jQuery("#form1").submit(function() {

If (jQuery.trim(jQuery("#text").val()).length == 0) {

         거짓 반환
}
});



보시다시피 이 예에서는 서버 컨트롤을 사용합니다. 본질적으로 동일하며 궁극적으로 양식 제출이 발생합니다. 버튼을 클릭하면 양식이 제출됩니다. 텍스트 상자의 내용이 비어 있으면 false를 반환하고 그렇지 않으면 제출하지 마세요. 이러한 응용 프로그램은 웹 개발의 모든 곳에서 볼 수 있습니다.

5. hover() 이벤트

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

나를 가리키세요

코드 복사 코드는 다음과 같습니다. jQuery("#divHover").hover(function() {

jQuery(this).css("배경", "노란색")

}, 함수() {
jQuery(this).css("배경", "빨간색")
});



div 위로 마우스를 이동하면 div의 배경색이 노란색으로 바뀌고, 마우스를 밖으로 이동하면 배경색이 빨간색으로 변합니다.

위의 이벤트는 비교적 흔하고 일반적으로 사용되는 이벤트입니다. 물론, 이 글은 극히 일부만을 요약한 것입니다. 학습 중에 문제가 발생하면 jQuery 문서를 사용하여 참조해야 합니다.