suchen

Heim >Web-Frontend >js-Tutorial >Die erste Vorlesung über die Grundlagen von JQuery: Verständnis von JQuery_JQuery

Die erste Vorlesung über die Grundlagen von JQuery: Verständnis von JQuery_JQuery

WBOY
WBOYOriginal
2016-05-16 15:10:281562Durchsuche

jQuery ist eine hervorragende JavaScript-Bibliothek. Mit ihrer prägnanten Syntax und plattformübergreifenden Kompatibilität vereinfacht sie Entwicklern das Durchlaufen von HTML-Dokumenten, die Bedienung von DOM, die Verarbeitung von Ereignissen, die Durchführung von Animationen und die Entwicklung von Ajax-Operationen.

jQuery-Vorteile:

1.Leicht

2. Leistungsstarker Selektor

3. Hervorragende Kapselung von DOM-Operationen

4. Zuverlässiger Mechanismus zur Ereignisbehandlung

5. Perfektes Ajax

6. Variablen der obersten Ebene nicht verunreinigen

7. Hervorragende Browserkompatibilität

8. Kettenbetriebsmodus

9. Implizite Iteration

10. Trennung von Verhaltensschicht und Strukturschicht

11. Umfangreiche Plug-in-Unterstützung

12. Vollständige Dokumentation

13. Open Source

(1) Schreiben Sie einfachen jQuery-Code:

Hinweis: $ ist die Abkürzung für jQuery. 

 <!-- 引入 jQuery -->
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {   //等待DOM元素加载完毕.（可能DOM元素关联的文件没有加载完）
      alert("Hello World!");     //弹出一个框
    });

　　　　 $(document).ready(function () {   //可以同时编写多个
      alert("Hello again!");
    });

    $(function () {           //简写形式
      alert("Hello jQuery!");
    });
  </script>

(2) jQuery-Codestil

Hinweis: Kettenbetrieb.

1. Es können nicht mehr als 3 Operationen für dasselbe Objekt in eine Zeile geschrieben werden.　　　　

2. Wenn es viele Operationen für dasselbe Objekt gibt, wird empfohlen, eine Operation pro Zeile zu schreiben.

3. Für eine kleine Anzahl von Operationen an mehreren Objekten können Sie eine Zeile für jedes Objekt schreiben. Wenn Unterelemente beteiligt sind, kann eine entsprechende Einrückung berücksichtigt werden.

4. Für weitere Operationen an mehreren Objekten können 2 oder 3 kombiniert werden.

Fügen Sie die erforderlichen Kommentare hinzu. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-4-3</title>
<style type="text/css">
#menu { 
  width:300px; 
}
.has_children{
  background : #555;
  color :#fff;
  cursor:pointer;
}
.highlight{
  color : #fff;
  background : green;
}
div{
  padding:0;
}
div a{
  background : #888;
  display : none;
  float:left;
  width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
  $(".has_children").click(function(){
    $(this).addClass("highlight")      //为当前元素增加highlight类
      .children("a").show().end()      //将子节点的a元素显示出来并重新定位到上次操作的元素
    .siblings().removeClass("highlight")    //获取元素的兄弟元素，并去掉他们的highlight类
      .children("a").hide();        //将兄弟元素下的a元素隐藏
  });
});
</script>
</head>
<body>
<div id="menu">
  <div class="has_children">
    <span>第1章-认识jQuery</span>
    <a>1.1-JavaScript和JavaScript库</a>
    <a>1.2-加入jQuery</a>
    <a>1.3-编写简单jQuery代码</a>
    <a>1.4-jQuery对象和DOM对象</a>
    <a>1.5-解决jQuery和其它库的冲突</a>
    <a>1.6-jQuery开发工具和插件</a>
    <a>1.7-小结</a>
  </div>
  <div class="has_children">
    <span>第2章-jQuery选择器</span>
    <a>2.1-jQuery选择器是什么</a>
    <a>2.2-jQuery选择器的优势</a>
    <a>2.3-jQuery选择器</a>
    <a>2.4-应用jQuery改写示例</a>
    <a>2.5-选择器中的一些注意事项</a>
    <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
    <a>2.7-还有其它选择器么？</a>
    <a>2.8-小结</a>
  </div>
  <div class="has_children">
    <span>第3章-jQuery中的DOM操作</span>
    <a>3.1-DOM操作的分类</a>
    <a>3.2-jQuery中的DOM操作</a>
    <a>3.3-案例研究——某网站超链接和图片提示效果</a>
    <a>3.4-小结</a>
  </div>
</div>
</body>
</html>

(3) DOM-Objekt und jQuery-Objekt

DOM (Dokumentobjektmodell, Dokumentobjektmodell), jedes DOM kann als Baum dargestellt werden. GetElementById oder getElementByTagName werden in JavaScript verwendet, um Elementknoten abzurufen. Solche DOM-Elemente sind DOM-Objekte.

jQuery-Objekte sind Objekte, die durch Umschließen von DOM-Objekten durch jQuery generiert werden. Das jQuery-Objekt ist einzigartig für jQuery. Sie können die Methoden in jQuery verwenden, aber Sie können nicht die Methoden des DOM-Objekts verwenden.

Hinweis: JQuery-Objekte werden alle über die Funktion $() hergestellt, bei der es sich um eine Fabrik zur Herstellung von jQuery-Objekten handelt. 

<!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>
  <title>1-4</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- 引入 jQuery -->
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function () {
      var domObj = document.getElementsByTagName("h3")[0];  // Dom对象
      var $jQueryObj = $(domObj);     //jQuery对象
      alert("DOM对象：" + domObj.innerHTML);  
      alert("jQuery对象：" + $jQueryObj.html());
    });
  </script>
</head>
<body>
  <h3>例子</h3>
  <p title="选择你最喜欢的水果.">你最喜欢的水果是&#63;</p>
  <ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
  </ul>
</body>
</html>

DOM-Objekte und jQuery-Objekte können ineinander konvertiert werden. Die Beispiele sind wie folgt:
1.DOM-Objektmethode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>1-6-2</title>
  <!-- 引入 jQuery -->
  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function () {
      var $cr = $("#cr");     //jQuery对象
      var cr = $cr.get(0);    //DOM对象获取 2种方式 $cr[0] 或者 $cr.get(0)
      $cr.click(function () {
        if (cr.checked) {    //DOM方式判断
          alert("感谢你的支持!你可以继续操作!");
        }
      })
    });
  </script>
</head>
<body>
  <input type="checkbox" id="cr" />
  <label for="cr">我已经阅读了上面制度.</label>
</body>
</html>

2.jQuery-Objektmethode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>1-6-1</title>
  <!-- 引入 jQuery -->
  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function () {
　　　　　　 var cr = document.getElementById("cr");   //DOM对象
      var $cr = $(cr);     //jQuery对象
      $cr.click(function () {
        if ($cr.is(":checked")) { //jQuery方式判断
          alert("感谢你的支持!你可以继续操作！");
        }
      })
    });
  </script>
</head>
<body>
  <input type="checkbox" id="cr" />
  <label for="cr">我已经阅读了上面制度.</label>
</body>
</html>

Das Obige ist die erste Lektion zum JQuery-Lernen. Ich hoffe, Sie werden weiterhin aufmerksam sein.

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：Implementierung eines Multiroom-Chats basierend auf socket.io+express_node.jsNächster Artikel：Implementierung eines Multiroom-Chats basierend auf socket.io+express_node.js

In Verbindung stehende Artikel

Mehr sehen