Heim > Artikel > Web-Frontend > Verwenden Sie JQ, um mit der Demonstrationsanimation_jquery den grundlegendsten Ein- und Ausblendeffekt zu schreiben

Verwenden Sie JQ, um mit der Demonstrationsanimation_jquery den grundlegendsten Ein- und Ausblendeffekt zu schreiben

WBOYOriginal: 2016-05-16 16:32:271177Durchsuche

jQuery ist eine JavaScript-Bibliothek, eine Erweiterung von JavaScript, die verwendet wird, um den steigenden Anforderungen an verschiedene Spezialeffekte gerecht zu werden. Seine Essenz ist JavaScript

Lassen Sie uns ein einfaches JQ-Programm schreiben, um JQ zu veranschaulichen.

1. Grundlegende Ziele

Es gibt die folgenden drei Schaltflächen auf der Webseite: Eine kann nur Text ausblenden, eine kann nur Text anzeigen und man kann Text gleichzeitig ausblenden und anzeigen, erneut klicken, um ihn auszublenden Der Zyklus ist endlos.

2. Produktionsprozess

1. Zuerst müssen Sie eine JQ-Supportdatei von der offiziellen JQ-Website herunterladen und in Ihrem Site-Ordner ablegen. Diese Unterstützungsdatei ist jQuery1.11. Sie können auf der offiziellen jQuery-Website jQuery1.11 herunterladen, das mit dem alten Browser IE6 kompatibel ist, nicht jedoch jQuery2, das nicht mit dem alten Browser IE6 kompatibel ist.

2. Der gesamte Webseitencode lautet wie folgt, zur Erläuterung in Fragmente unterteilt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
$(document).ready(function() { 
$("#hide").click(function() { 
$("#text").hide(); 
}); 
$("#show").click(function() { 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
$("#text").toggle(); 
}); 
}); 
</script> 

<!-- 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

--> 

<title>JQ淡出与显示</title> 

</head> 
<body> 

<p id="text"> 
被折腾的文本 
</p> 

<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body> 

</html>

(1)aea69399be9fe82ba3af51ae8166d2ea

<head> 
<!--网页的编码，声明要使用JQ--> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
<!--JQ的代码编写首先要用$(document).ready(function() {});去定义一个总函数，缺少这个函数提供的框架之后的东西无法执行--> 
$(document).ready(function() { 
<!--之后再于这个函数内编写需要的函数--> 
<!--对于ID为hide这个按钮的click动作进行函数的调用，之后的动作依旧放在这个一个函数的里面--> 
$("#hide").click(function() { 
<!--隐藏ID的为text的文本--> 
$("#text").hide(); 
}); 
$("#show").click(function() { 
<!--显示ID的为text的文本--> 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
<!--在隐藏与显示之间切换ID的为text的文本--> 
$("#text").toggle(); 
}); 
}); 
</script> 

lt;!--这段控制默认是显示还是不显示 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

-> 

<title>JQ淡出与显示</title> 

</head>

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：Oben festgelegte Navigation basierend auf jquery, reagiert auf Browser-Bildlaufleisten-Events_jqueryNächster Artikel：Oben festgelegte Navigation basierend auf jquery, reagiert auf Browser-Bildlaufleisten-Events_jquery

In Verbindung stehende Artikel

Mehr sehen