Apakah peristiwa jquery?

Acara jquery: 1. Acara tetikus, termasuk acara klik, acara alih tetikus, dsb. 2. Acara papan kekunci, termasuk keydown, keyup, dsb.; .; 4. Peristiwa pengikatan, peristiwa pengikatan; 5. Peristiwa komposit, termasuk peristiwa yang dicetuskan oleh kaedah tuding, peristiwa yang dicetuskan oleh kaedah toggle(), dsb.

Persekitaran pengendalian tutorial ini: sistem windows10, versi jquery3.4.1, komputer Dell G3.

Apakah peristiwa jquery?

Peristiwa jQuery ialah enkapsulasi acara JavaScript yang biasa digunakan termasuk: acara tetikus, acara papan kekunci, acara bentuk, acara pengikatan, acara komposit, dll.

1. Acara tetikus

Kaedahnya adalah seperti berikut

klik(): klik acara, cetuskan atau ikat fungsi pada acara klik yang ditentukan elemen

mouseover(): Pencetus atau ikat fungsi pada acara mouseover elemen yang ditentukan

mouseout(): Pencetus atau ikat fungsi pada acara mouseout elemen yang ditentukan

Contoh kod :

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

2. Acara papan kekunci:

Kaedahnya adalah seperti berikut:

keydown(): Apabila kekunci ditekan, mencetus atau mengikat fungsi Peristiwa kekunci yang diberikan kepada elemen yang ditentukan

keyup(): Apabila kekunci dilepaskan, cetuskan atau ikat fungsi pada acara keyup elemen yang ditentukan

keypress(): Apabila aksara boleh cetak dijana, Cetuskan atau ikat fungsi pada peristiwa penekan kekunci elemen yang ditentukan

Contoh kod:

  $(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. Acara borang:

Kaedahnya adalah seperti berikut:

fokus(): Dapatkan fokus, pencetus atau ikat fungsi pada acara fokus elemen yang ditentukan

kabur() : Hilang fokus, cetuskan atau ikat fungsi pada acara kabur unsur yang ditentukan

Contoh kod:

// 查询输入框
  $("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 . Peristiwa mengikat:

Analisis sintaks:

bind(type,[data],fn), di mana data tidak diperlukan

jenis: jenis acara, terutamanya termasuk peristiwa asas seperti kabur, fokus, klik, tetikus keluar, dsb., sebagai tambahan. Ia adalah acara tersuai

fn: fungsi pengendali yang digunakan untuk mengikat

Contoh kod:

mengikat satu,

$("input[name=event_1]").bind("click",function() {
 $("p").css("background-color","#F30");
});

mengikat berbilang ,

$("input[name=event_1]").bind({
mouseover: function () {
 $("ul").css("display", "none");
},
mouseout: function () {
 $("ul").css("display", "block");
}
});

Kaedah penyingkiran:

buka ikatan([jenis],[fn]) adalah bertentangan dengan peristiwa mengikat. Jika kaedah tidak mempunyai parameter, ini bermakna mengalih keluar semua acara

Jika anda ingin mengalih keluar berbilang nyahikat, cuma tambahkan ruang di antaranya

Contoh kod:

 $(function () {
            $("li").unbind("click");
            $("li").unbind("mouseover mouseout");
    });

Nota: Apabila unbind() tidak parameter, ini bermakna untuk mengalih keluar semua acara terikat

5 Peristiwa komposit

kaedah hover() <. 🎜> Sintaks: hover(enter,leave);

Kaedah ini bersamaan dengan gabungan peristiwa alih tetikus dan tetikus

Contoh kod:

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

kaedah toggle()

kaedah toggle() digunakan untuk mensimulasikan peristiwa klik tetikus berterusan

Contoh kod:

Di pada masa yang sama, kaedah toggle() juga mempunyai fungsi lain: menukar elemen Status boleh dilihat

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

Cadangan tutorial video:

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

Tutorial video jQuery

Atas ialah kandungan terperinci Apakah peristiwa jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!