suchen

Heim >Web-Frontend >js-Tutorial >Analysieren Sie die Rolle und Verwendung der Funktion on() in jQuery

Analysieren Sie die Rolle und Verwendung der Funktion on() in jQuery

巴扎黑
巴扎黑Original
2017-06-25 10:39:181799Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung der on()-Methode in jQuery vorgestellt. Das Beispiel analysiert die Funktion und Definition der on()-Methode sowie die Verwendung der Bindung einer oder mehrerer Ereignisverarbeitungsfunktionen beim Abgleich Tipps für Freunde in Not finden Sie unter

In diesem Artikel wird die Verwendung der on()-Methode in jQuery anhand von Beispielen erläutert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Diese Methode kann eine oder mehrere Ereignisbehandlungsfunktionen an das passende Element binden.
Verwenden Sie die Methode off(), um das durch die Methode on() gebundene Ereignis zu löschen.

Grammatikstruktur eins:

Der Code lautet wie folgt:

$(selector).on(events,[ Selektor], [Daten],fn)

Parameterliste:

Parameter Beschreibung
Ereignisse Ein oder mehrere durch Leerzeichen getrennte Ereignistypen und ein optionaler Namespace.
Auswahl Optional. Ein SelektorString, der zum Filtern der ausgewählten Elemente verwendet wird. Der Handler wird für untergeordnete Elemente dieses Selektors aufgerufen.
Wenn die Auswahl leer ist oder ignoriert wird, wird das Ereignis immer dann ausgelöst, wenn es das ausgewählte Element erreicht.
Daten Optional. Ein zusätzliches Datenobjekt, das als Wert der Eigenschaft „event.data“ an das Ereignisobjekt zur Verarbeitung durch die Ereignishandlerfunktion übergeben wird.
fn Funktion wird ausgeführt, wenn dieses Ereignis ausgelöst wird. Der Wert false kann auch als Abkürzung für eine Funktion verwendet werden, die false zurückgibt.

Beispielcode:

Beispiel 1:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
  width:60px;
  height:60px;
  border:1px solid green;
  font-size:12px;
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("p").on("click",function(){ 
    $(this).text("脚本之家欢迎您"); 
  }) 
}) 
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>

Der obige Code bindet ein Klickereignis an p, klicken Sie auf Wenn p, können Sie einen neuen Textinhalt für p festlegen.

Beispiel 2:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
  width:60px;
  height:60px;
  border:1px solid green;
  font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("p").on("click mousemove",function(){ 
    $(this).text("脚本之家欢迎您"); 
  }) 
}) 
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>

Der obige Code bindet zwei Ereignisse an p. Es wird p sein. Legen Sie den neuen Textinhalt fest.

Beispiel 3:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title> 
<style type="text/css"> 
p{ 
  width:60px; 
  height:60px; 
  border:1px solid green; 
  font-size:12px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  var newtext="这是新文本" 
  $("p").on("click",{"mytext":newtext},function(e){ 
    $(this).text(e.data.mytext); 
  }) 
}) 
</script> 
</head> 
<body> 
  <p>原来内容</p> 
</body> 
</html>

Der obige Code verwendet den Datenparameter, um Daten an die gebundene Ereignisverarbeitungsfunktion zu übergeben.

Beispiel 4:

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
.parent{
  width:160px;
  height:160px;
  border:1px solid green;
  font-size:12px;
}
.children{
  width:100px;
  height:100px;
  border:1px solid red;
}
span{background-color:green;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  var newtext="这是新文本" 
  $(".parent").on("click",".children",{"mytext":newtext},function(e){ 
    $(this).text(e.data.mytext); 
  }) 
}) 
</script>
</head>
<body>
<p class="parent">
  <p class="children"><span>原来内容</span></p>
</p>
<span>大家好</span>
</body>
</html>

Der obige Code verwendet die Auswahlzeichenfolge, um zu filtern, welche der untergeordneten Elemente des übereinstimmenden Elements antworten können zum gebundenen Ereignis. Im obigen Code können das Element mit dem Klassennamen „Children“ und seine untergeordneten Elemente gebundene Ereignisse aufrufen.
Grammatikstruktur zwei:

Der Code lautet wie folgt:

$(selector).on(object,[selector],[data] )

Parameterliste:

参数 描述
object 一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。
selector 可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。
     如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data 可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" /> 
<title>脚本之家</title> 
<style type="text/css"> 
p{ 
  width:160px; 
  height:160px; 
  border:1px solid green; 
  font-size:12px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  var newtext="这是新文本" 
  $("p").on({click:function(e){ 
    $(this).text(e.data.mytext); 
  }},{"mytext":newtext}) 
}) 
</script> 
</head> 
<body> 
  <p>原来内容</p> 
</body> 
</html>

以上代码中，事件类型和事件处理函数以对象的形式绑定的。

Das obige ist der detaillierte Inhalt vonAnalysieren Sie die Rolle und Verwendung der Funktion on() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Beispiele und Vorteile der jQuery on()-MethodeNächster Artikel：Beispiele und Vorteile der jQuery on()-Methode

In Verbindung stehende Artikel

Mehr sehen