Jquery 이벤트란 무엇입니까?-프런트엔드 Q&A-php.cn

Jquery 이벤트란 무엇입니까?

WBOY

풀어 주다： 2022-06-13 16:53:19

원래의

5442명이 탐색했습니다.

jquery 이벤트: 1. 클릭 이벤트, 마우스오버 이벤트 등을 포함한 마우스 이벤트 2. keydown, keyup 등을 포함한 키보드 이벤트 3. 포커스 획득, 흐림 포커스 손실 등을 포함한 양식 이벤트; 4. 바인딩 이벤트, 바인딩 바인딩 이벤트 5. hover 메서드에 의해 트리거된 이벤트,ggle() 메서드에 의해 트리거된 이벤트 등을 포함한 복합 이벤트

Jquery 이벤트란 무엇입니까?

이 튜토리얼의 운영 환경: windows10 시스템, jquery3.4.1 버전, Dell G3 컴퓨터.

jquery 이벤트란 무엇입니까?

jQuery 이벤트는 JavaScript 이벤트를 캡슐화한 것입니다. 일반적으로 사용되는 이벤트에는 마우스 이벤트, 키보드 이벤트, 양식 이벤트, 바인딩 이벤트, 복합 이벤트 등이 있습니다.

1. 메소드 다음과 같습니다

click(): 클릭 이벤트, 지정된 요소의 클릭 이벤트에 함수를 트리거하거나 바인딩

mouseover(): 지정된 요소의 마우스오버 이벤트에 함수를 트리거하거나 바인딩

mouseout(): 트리거 또는 바인드 함수는 지정된 요소의 mouseout 이벤트에 바인딩됩니다.

코드 예:

 $(function () {
            $("input").click(function () {
                $("li").mouseover(function () {
                    $(this).css("background", "green");
                }).mouseout(function () {
                    //this.style.background = "";
                    this.style.cssText = "background:";
                });
            });
        });

로그인 후 복사

2. 키보드 이벤트:

메서드는 다음과 같습니다.

keydown(): 키를 누르면, 지정된 요소에 함수를 트리거하거나 바인딩합니다. keydown 이벤트

keyup(): 키를 놓을 때 지정된 요소에 함수를 트리거하거나 바인딩하는 keyup 이벤트

keypress(): 키를 트리거하거나 바인딩하는 keypress 이벤트 인쇄 가능한 문자가 생성되면 지정된 요소에 함수를 적용합니다.

코드 예:

  $(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. 양식 이벤트:

메서드는 다음과 같습니다.

focus(): 포커스 가져오기, 트리거 또는 포커스에 함수 바인딩 지정된 요소의 이벤트

blur(): 포커스를 잃습니다. 지정된 요소의 흐림 이벤트에 함수를 트리거하거나 바인딩합니다

코드 예:

// 查询输入框
  $("input[name=&#39;search&#39;]").focus(function(){
   $(this).val(""); 
  });
  $("input[name=&#39;search&#39;]").blur(function(){
   $(this).val("请输入要查询的问题"); 
  });

로그인 후 복사

 $(function () {
 //给文本框添加边框样式
     $("input").focus(function() {
          $(this).addClass("myclass");
        }).blur(function() {
          $(this).removeClass("myclass");
    });
  });

로그인 후 복사

4, 바인딩 이벤트:

구문 분석:

bind(type,[data],fn) , 데이터가 필요하지 않습니다

type: 이벤트 유형, 주로 흐림, 초점, 클릭, 마우스아웃 등과 같은 기본 이벤트가 포함됩니다. 맞춤 이벤트

fn: 바인딩에 사용되는 처리 함수

코드 예:

Bind one,

$("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() 메서드

구문: hover(enter,leave)

이 메서드는 mouseover 및 mouseout 이벤트의 조합과 동일합니다. 코드 예:

$("li").hover(function() {
               $("li").css("background", "gray");
           }, function() {
               $("li").css("background", "green");
           });

로그인 후 복사

toggle( ) 메서드

toggle() 메서드는 연속적인 마우스 클릭 이벤트를 시뮬레이션하는 데 사용됩니다.

코드 예:

$("body").toggle(
function () { }, //第一次点击触发
function () { }, //第二次点击触发
function () { } //第三次点击触发
...     //...
);

로그인 후 복사

동시에ggle() 메서드에는 또 다른 기능도 있습니다. 요소의 표시 상태 전환

$(&#39;input&#39;).toggle( 
  function () {
  $(&#39;ul&#39;).toggle(); //是显示的则隐藏，是隐藏的则显示
  },
  function () {
   $(&#39;ul&#39;).toggle(); //是显示的则隐藏，是隐藏的则显示
  }
 );

로그인 후 복사

비디오 튜토리얼 권장 사항:

jQuery 비디오 튜토리얼

위 내용은 Jquery 이벤트란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!