jQuery 학습 요약 jQuery events_jquery

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

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

c2927140466346f8989b95bca6593c33
124f9ff87cdbf720185e2ae693e98c9f

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

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

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

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

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

c030ea420ed2ba74e029e84b436f920d베이징에서16b28748ea4df4d9c2150843fecfba68

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

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

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

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

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

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

220dad31e9953ce1caefcfa84705a250사람들은 베이징에 있습니다16b28748ea4df4d9c2150843fecfba68

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

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

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

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

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

d98f0c487087b05cd3d419ae72cd7696

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

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

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

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

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

4b2764a3c367b627d6153bdf397b9c24 98f415770703c711e9c2bd3c6f6867da8c1ecd4bb896b2264e0711597d40766c

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

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

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

4. submit() 이벤트

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

21450525e974e9be578136fc32da3f7c
a9aafc0e48dc1e40a299f1198237c1bc 976559bbc6f1fbf8c3657ed3cc58e825 a04d9f4776e891c351f235c4615595a5 7a33799f8193b66b772692aa1ea9dc3c

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

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

         거짓 반환
}
});



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

5. hover() 이벤트

코드 복사 코드는 다음과 같습니다. 7f0eda05e93e41d7a8baaa89a79f95f9나를 가리키세요16b28748ea4df4d9c2150843fecfba68

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

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

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



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

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