Wie verwende ich jQuery? Was sind jQuery-Selektoren?-js-Tutorial-php.cn

Wie verwende ich jQuery? Was sind jQuery-Selektoren?

青灯夜游

Freigeben： 2018-11-13 10:39:38

nach vorne

2210 Leute haben es durchsucht

Der Inhalt dieses Artikels besteht darin, die Verwendung von jQuery vorzustellen. Was sind jQuery-Selektoren? Lassen Sie alle die Verwendung der jQuery-Dateibibliothek, die Verwendung der grundlegenden Syntax und den jQuery-Selektor verstehen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. So verwenden Sie

Die jQuery-Bibliothek befindet sich in einer JavaScript-Datei, die alle jQuery-Funktionen enthält.

Wenn eine Webseite jQuery verwenden muss, muss zuerst die js-Datei von jQuery in die Webseite eingeführt werden.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
</head>
<body>
</body>
</html>

Nach dem Login kopieren

2. jQuery-Syntax

Die jQuery-Syntax besteht darin, HTML-Elemente auszuwählen und bestimmte Operationen an den ausgewählten Elementen auszuführen. [Empfohlene verwandte Video-Tutorials: jQuery-Tutorial]

Grundlegende grammatikalische Form:

 $(selector).action()

Nach dem Login kopieren

Beispiel:

$("p").hide()    // 隐藏所有 <p> 元素
$("#myInfo").hide() // 隐藏所有 id="myInfo" 的元素

Nach dem Login kopieren

Schreiben:

Alle jQuery-Funktionen befinden sich in einer document.ready-Funktion. Wie unten gezeigt.

Damit soll verhindert werden, dass jQuery-Code ausgeführt wird, bevor das Dokument vollständig geladen (bereit) ist, d. h. das DOM kann nicht manipuliert werden, bis das DOM geladen ist.

Wenn Sie die Funktion ausführen, bevor das Dokument vollständig geladen ist, schlägt der Vorgang möglicherweise fehl.

    $(document).ready(function(){     
       // 代码部分写在这里     
    });

Nach dem Login kopieren

kann auch wie folgt abgekürzt werden:

   $(function(){         
      // 这里写代码         
   });

Nach dem Login kopieren

Zum Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").html("Hello JQuery World");
                $("#myDiv1").css("background-color","green");
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <div id="myDiv1">Hello</div>
</body>
</html>

Nach dem Login kopieren

3. Basisauswahl

(1) Elementselektor: Der jQuery-Elementselektor wählt Elemente anhand ihrer Namen aus.

Beispiel: Verwenden Sie die Elementauswahl, um alle

-Elemente auszuwählen und auszublenden.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("p").hide();
            });
         
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

Nach dem Login kopieren

(2) #id selector: Der jQuery #id selector wählt das angegebene Element über das id-Attribut des HTML-Elements aus.

Die ID des Elements auf der Seite sollte eindeutig sein. Wenn Sie also das einzige Element auf der Seite auswählen möchten, müssen Sie den #id-Selektor verwenden.

Beispiel: Verwenden Sie das # id-Selektor zum Auswählen des id="myDiv1"-Elements, um es auszublenden.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

Nach dem Login kopieren

(3) .class selector: Der jQuery-Klassenselektor kann Elemente über die angegebene Klasse finden.

Beispiel: Verwenden Sie den Klassenselektor, um das Element mit Class="myClass1" auszuwählen und auszublenden.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $(".myClass1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
    <div Class="myClass1">你好</div>
</body>
</html>

Nach dem Login kopieren

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWie verwende ich jQuery? Was sind jQuery-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!