Heim > Web-Frontend > js-Tutorial > Hauptteil

Grundlegendes zur Verwendung der jQuery on()-Funktion

巴扎黑
Freigeben: 2017-06-25 10:33:02
Original
1276 Leute haben es durchsucht

Die

jQuery on()-Methode ist eine offiziell empfohlene Methode zum Binden des -Ereignisses .

$(selector).on(event,childSelector,data,function,map)
Nach dem Login kopieren

Mehrere zuvor gängige Methoden, die daraus erweitert wurden, umfassen.

<span style="font-family: verdana, geneva; font-size: 14px;"><strong>bind()</strong>  $("p").bind("click",function(){
    alert("The paragraph was clicked.");
  });

  <span style="color: #ff0000;">$("p").on("click",function(){
    alert("The paragraph was clicked.");
  });</span><strong>delegate()</strong>  <span style="color: #ff0000;">$("#p1").on("click","p",function(){
    $(this).css("<a href="http://www.php.cn/wiki/894.html" target="_blank">background-color</a>","pink");
  });<br></span>  $("#p2").delegate("p","click",function(){
    $(this).css("background-color","pink");
  });<strong>live()</strong>  <span style="color: #ff0000;">$("#p1").on("click",function(){
    $(this).css("background-color","pink");
  });</span><br>  $("#p2").live("click",function(){
    $(this).css("background-color","pink");
  });<br></span>
Nach dem Login kopieren

Die oben genannten drei Methoden sind in jQuery1 enthalten. Es wird nicht empfohlen um es nach .8 zu verwenden. Der Beamte hat die Verwendung der live()-Methode in 1.9 eingestellt, daher wird empfohlen, die on()-Methode zu verwenden.

Tipp: Wenn Sie die an on() gebundene Methode entfernen müssen, können Sie die Methode off() verwenden.

$(document).ready(function(){
  $("p").on("click",function(){
    $(this).css("background-color","pink");
  });
  $("button").click(function(){
    $("p").off("click");  });
});
Nach dem Login kopieren

Tipp: Wenn Ihre Veranstaltung nur eine Operation erfordert, können Sie die one()-Methode

$(document).ready(function(){
  $("p").one("click",function(){
    $(this).animate({fontSize:"+=6px"});
  });});
Nach dem Login kopieren

trigger() bindet

$(selector).trigger(event,eventObj,param1,param2,...)
Nach dem Login kopieren
$(document).ready(function(){
  $("input").select(function(){
    $("input").after(" Text marked!");
  });
  $("button").click(function(){
    $("input").trigger("select");  });
});
Nach dem Login kopieren

Mehrere Ereignisse binden dieselbe Funktion

$(document).ready(function(){
  $("p").on("mouseover mouseout",function(){
    $("p").toggleClass("intro");
  });
});
Nach dem Login kopieren

Mehrere Ereignisse an verschiedene Funktionen binden

$(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });
});
Nach dem Login kopieren

Benutzerdefinierte Ereignisse binden

$(document).ready(function(){
  $("p").on("myOwnEvent", function(event, showName){
    $(this).text(showName + "! What a beautiful name!").show();
  });
  $("button").click(function(){
    $("p").trigger("myOwnEvent",["Anja"]);
  });
});
Nach dem Login kopieren

Die Übergabe von Daten an die Funktion

function handlerName(event) 
{
  alert(event.data.msg);
}

$(document).ready(function(){
  $("p").on("click", {msg: "You just clicked me!"}, handlerName)
});
Nach dem Login kopieren

funktioniert für nicht erstellte Elemente

Das obige ist der detaillierte Inhalt vonGrundlegendes zur Verwendung der jQuery on()-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage