Erfahrungsanalyse von Methoden für den Einstieg in Jquery-js-Tutorial-php.cn

Erfahrungsanalyse von Methoden für den Einstieg in Jquery

黄舟

Freigeben： 2017-07-31 11:04:20

Original

1285 Leute haben es durchsucht

Verstehen Sie zunächst den Unterschied zwischen jquery und js. Der Code ist prägnant, die Semantik ist leicht zu verstehen, das Lernen ist schnell und die Dokumentation ist umfangreich. jQuery ist ein leichtes Skript und sein Code ist sehr klein. Die neueste Version des JavaScript-Pakets ist nur etwa 20 KB groß. jQuery unterstützt CSS1-CSS3 sowie grundlegendes xPath. jQuery ist browserübergreifend und unterstützt unter anderem IE 6.0+, FF 1.5+, Safari 2.0+ und Opera 9.0+. Es ist einfach, andere Funktionen für jQuery zu erweitern. Es kann JS-Code und HTML-Code vollständig trennen, was das Codieren, Warten und Ändern erleichtert.

Es gibt viele Möglichkeiten, jQuery zu einer Webseite hinzuzufügen. Sie können die folgenden Methoden verwenden:

jQuery-Bibliothek von jquery.com herunterladen

jQuery vom CDN laden, z. B. jQuery von Google laden

Erfahrungsanalyse von Methoden für den Einstieg in Jquery

Empfohlene LernkurseJQuery-Einführungs-Tutorial

1.jQuery-Nutzung

Laden Sie jQuery herunter

Es stehen zwei Versionen von jQuery zum Download zur Verfügung:

Produktionsversion – wird in tatsächlichen Websites verwendet und wurde optimiert und komprimiert .

Entwicklungsversion – zum Testen und Entwickeln (unkomprimierter, lesbarer Code)

Beide oben genannten Versionen können von jquery.com heruntergeladen werden.

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

Nach dem Login kopieren

Kurslink: http://www.php.cn/code/3688.html

2. Syntax von jquery: Die Syntax ist der Schlüssel für die zukünftige Anwendung von jquery.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>表格</title>
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
 <script>
// window.onload=function(){
// alert(1)
// };
// window.onload=function(){
// alert(2)
// };
// $(document).ready(function(){
// alert(1)
// });
// $(document).ready(function(){
// alert(2)
// })
 </script>
</head>
<body>
<div id="box">jQuery语法</div>

</body>
</html>

Nach dem Login kopieren

Kurslink: http://www.php.cn/code/3692.html

3.jQuery-Selektor; Elementselektor, #id-Selektor, .class-Selektor usw.

 <title>php中文网(php.cn)</title>
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("button").click(function(){
 $("#test").hide();
 });
 });
 </script>
</head>

<body>
<h2>标题</h2>
<p>段落</p>
<p id="test">#id选择器，点击我会隐藏</p>
<button>点我</button>
</body>

Nach dem Login kopieren

Kurslink: http://www.php.cn/code/3695.html

4.jQuery-Ereignisse

<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#p1").mouseenter(function(){
 alert("您的鼠标移到了 id=p1 的元素上!");
 });
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>

Nach dem Login kopieren

Kurslink: http://www.php.cn/code/3704.html

5.jQuery-Effekte; Ein- und Ausblenden, Animation, Stoppanimation usw.

<head>
 <meta charset="utf-8">
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("button").click(function(){
 $("p").toggle();
 });
 });
 </script>
</head>
<body>

<button>隐藏/显示</button>
<p>真正的失败不是你没有做成事，而是你甘心于失败。</p>
<p>一切都会好起来的，即使不是在今天，总有一天会的。</p>
</body>

Nach dem Login kopieren

Kurslink:http://www.php.cn/course/113.html Kapitel 2 jQuery-Effekt

6.jQuery-Traversal, Vorfahren, Nachkommen, Landsleute, Filterung Warten

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <style>
 .ancestors *
 {
 display: block;
 border: 2px solid lightgrey;
 color: lightgrey;
 padding: 5px;
 margin: 15px;
 }
 </style>
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("span").parent().css({"color":"red","border":"2px solid red"});
 });
 </script>
</head>
<body>

<div class="ancestors">
 <div style="width:300px;">div (曾祖父元素)
 <ul>ul (祖父元素)
 <li>li (父元素)
 <span>span</span>
 </li>
 </ul>
 </div>

 <div style="width:300px;">div (祖父元素)
 <p>p (父元素)
 <span>span</span>
 </p>
 </div>
</div>

</body>
</html>

Nach dem Login kopieren

Kurslink: http://www.php.cn/course/113.html Kapitel 4 jQuery Traversal

7. Muss jQuery-Handbuch lernen.

JQuery-Lernen ist ein Prozess der kontinuierlichen Anwendung und Innovation. Das Wichtigste ist Beharrlichkeit.

Das obige ist der detaillierte Inhalt vonErfahrungsanalyse von Methoden für den Einstieg in Jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!