Verwenden Sie JQ, um mit der Demonstrationsanimation_jquery den grundlegendsten Ein- und Ausblendeffekt zu schreiben-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 16:32:27

Original

1248 Leute haben es durchsucht

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>

Nach dem Login kopieren

(1)

<head>部分主要是实现核心代码部分，放在后面来讲，先说<body>部分

<body> 
<!--这是定义一段ID为text的文本，便于脚本控制--> 
<p id="text"> 
被折腾的文本 
</p> 

<!--分别设置ID为hide,show,toggle的按钮--> 
<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body>

Nach dem Login kopieren

(2)

<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>

Nach dem Login kopieren