jquery 이벤트: 1. 클릭 이벤트, 마우스오버 이벤트 등을 포함한 마우스 이벤트 2. keydown, keyup 등을 포함한 키보드 이벤트 3. 포커스 획득, 흐림 포커스 손실 등을 포함한 양식 이벤트; 4. 바인딩 이벤트, 바인딩 바인딩 이벤트 5. hover 메서드에 의해 트리거된 이벤트,ggle() 메서드에 의해 트리거된 이벤트 등을 포함한 복합 이벤트
이 튜토리얼의 운영 환경: windows10 시스템, jquery3.4.1 버전, Dell G3 컴퓨터.
jQuery 이벤트는 JavaScript 이벤트를 캡슐화한 것입니다. 일반적으로 사용되는 이벤트에는 마우스 이벤트, 키보드 이벤트, 양식 이벤트, 바인딩 이벤트, 복합 이벤트 등이 있습니다.
$(function () { $("input").click(function () { $("li").mouseover(function () { $(this).css("background", "green"); }).mouseout(function () { //this.style.background = ""; this.style.cssText = "background:"; }); }); });
2. 키보드 이벤트:
$(function () { $("p input").keyup(function () { $("#events").append("keyup"); }).keydown(function () { $("#events").append("keydown"); }).keypress(function () { $("#events").append("keypress"); }); $(document).keydown(function (event) { if (event.keyCode == "13") { //按enter键 alert("确认要提交么?"); } }); });
3. 양식 이벤트:
// 查询输入框 $("input[name='search']").focus(function(){ $(this).val(""); }); $("input[name='search']").blur(function(){ $(this).val("请输入要查询的问题"); });2,
$(function () { //给文本框添加边框样式 $("input").focus(function() { $(this).addClass("myclass"); }).blur(function() { $(this).removeClass("myclass"); }); });
4, 바인딩 이벤트:
$("input[name=event_1]").bind("click",function() { $("p").css("background-color","#F30"); });Bind multiple,
$("input[name=event_1]").bind({ mouseover: function () { $("ul").css("display", "none"); }, mouseout: function () { $("ul").css("display", "block"); } });Remove 메서드: unbind([type],[fn])은 반대입니다. 메서드에 매개변수가 없으면 모든 이벤트를 제거한다는 의미입니다. 여러 개의 바인딩 해제를 제거하려면 두 이벤트 사이에 공백을 추가하면 됩니다. 코드 예:
$(function () { $("li").unbind("click"); $("li").unbind("mouseover mouseout"); });참고: unbind()가 매개변수를 사용하지 않는 경우 , 이는 모든 바인딩된 이벤트를 제거한다는 의미입니다. hover() 메서드
이 메서드는 mouseover 및 mouseout 이벤트의 조합과 동일합니다. 코드 예:
$("li").hover(function() { $("li").css("background", "gray"); }, function() { $("li").css("background", "green"); });
toggle( ) 메서드
toggle() 메서드는 연속적인 마우스 클릭 이벤트를 시뮬레이션하는 데 사용됩니다.코드 예:$("body").toggle( function () { }, //第一次点击触发 function () { }, //第二次点击触发 function () { } //第三次点击触发 ... //... );동시에ggle() 메서드에는 또 다른 기능도 있습니다. 요소의 표시 상태 전환
$('input').toggle( function () { $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示 }, function () { $('ul').toggle(); //是显示的则隐藏,是隐藏的则显示 } );비디오 튜토리얼 권장 사항:
jQuery 비디오 튜토리얼
위 내용은 Jquery 이벤트란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!