Heim > Web-Frontend > js-Tutorial > Hauptteil

jQuery verwendet Steuerknoten, um die Parameterübertragung nur im Vordergrund über die get-Methode_jquery abzuschließen

WBOY
Freigeben: 2016-05-16 16:16:19
Original
1055 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery Steuerknoten verwendet, um die Parameterübertragung nur im Vordergrund über die get-Methode abzuschließen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Dies ist auch der Inhalt des HTML-DOM. Der Kern von Front-End-Skriptsprachen wie Javascript und JQuery besteht darin, jeden Knoten zu steuern und jeden Knoten nur auf diese Weise hinzuzufügen, zu löschen, zu ändern und zu überprüfen Können wir Front-End-Skripte wie Javascript und JQuery wirklich voll ausnutzen und uns eine großartige Sache nach der anderen einfallen lassen?

Javascript-Steuerknoten, der Autor hat sie in den vorherigen [JavaScript-Verwendungsbeispielen zum Hinzufügen, Löschen, Ändern und Überprüfen von Webseitenknoten] eingeführt, jetzt wird sie über jquery gesteuert, eine erweiterte Javascript-Skriptsprache .Knoten, und auf dieser Basis wird JQuery zum Übertragen von Parametern zwischen verschiedenen Webseiten verwendet. Die Parameterübertragung erfolgt nur über die Get-Methode im Vordergrund und ist nicht an den Server gebunden. Schreiben Sie eine Anfrage und andere Serversprachen, um die Parameter zu erhalten.

1. Grundlegende Ziele

Auf der Webseite befinden sich Span-Knoten unter dem schwarzen div-roten div-blauen p. Nach dem Klicken werden jeweils die IDs der darüber liegenden Knoten abgerufen

Klicken Sie auf die Schaltfläche „Hinzufügen“, um Hyperlink-Knoten hinzuzufügen. Jeder Hyperlink verfügt über die chinesischen Parameter „Hallo 1“, „Hallo 2“, „Hallo 3“ und die Bildlaufleiste scrollt automatisch mit der Anzahl der Knoten in Richtung jqrec-HTML-Übertragung Parameter, die Seite jqrec.html kann diesen chinesischen Parameter

erhalten

Klicken Sie auf die Schaltfläche „Löschen“, um alle Knoten unter ul zu löschen

2. Produktionsprozess

Der vollständige Code von jqrec.html lautet wie folgt: Die verwendeten Funktionen umfassen reguläre Ausdrücke zur Analyse von URL-Adressen, daher ist es nicht erforderlich, auf Details einzugehen. Der einzige Code, der wirklich funktioniert, ist $("#rec").text(unescape(getUrlParam("text")));

Code kopieren Der Code lautet wie folgt:

jqrec

Der Link, auf den Sie geklickt haben, lautet: und wird über die get-Methode im Browser übergeben Die Textparameter sind genau gleich ~

Die im Text übergebenen Parameter sind auf Chinesisch und die Ergebnisse müssen dekodiert werden~

Kehren Sie zu jqsend.html zurück und versuchen Sie es erneut~

<script> /*Diese Funktion kann zusammen mit der Funktion unescape die utf-8-Elemente dekodieren, die von der get-Methode an die URL übergeben werden*/ <br> Funktion getUrlParam(name) <br> { <br> var reg = new RegExp("(^|&)" name "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); <br> if (r!=null) return unescape(r[2]); return null; } <br> $(function() { <br> $("#rec").text(unescape(getUrlParam("text"))); }); <br> </script>


Der vollständige Code von jqsend.html lautet wie folgt: Den spezifischen Code finden Sie in den Kommentaren:




Code kopieren


Der Code lautet wie folgt:
 
 
 
 
jqsend 
 
 
 
 
 
 
 
 

 
 
我的父节点 
 

 
 



    <script> /*$(function(){}); Äquivalent zu $(document).ready(function (){}); die Hauptfunktion, die ausgeführt wird, sobald sie geladen wird*/ <br> $(function() { <br> /*Zähl-ID*/ <br> var id=0; <br> /*Button-Klick-Ereignis hinzufügen*/ <br> $("#add").click(function (){ <br>                id=id 1;                                                          var li="<li id="id" id.toString() ""><a></a></li>"; /*In der Testul-Liste den Li-Knoten wie oben erwähnt hinzufügen*/ <br>                $("#testul").append(li); /*Suchen Sie den a-Knoten unter dem neu hinzugefügten li-Knoten mit der ID idx (wobei x der Wert der Zählervariable id ist) und ändern Sie die darin enthaltenen Elemente in „Hallo x“. html in jquery entspricht innerHTML in Javascript* / <br>                 $("#id" id.toString()).find("a").html("Hallo" id); /*Setzen Sie das href-Attribut dieses a-Elements auf jqrec.html="Hello" id. Da chinesische Zeichen nicht in den Link eingefügt werden können, verwenden Sie Escape zweimal, um es in die UTF-8-Codierung zu kodieren. Wenn Sie es einmal verwenden, liegt ein Fehler vor wird angezeigt. Unescape kann nicht erhalten werden, ich weiß nicht warum*/ <br> $("#id" id.toString()).find("a").attr("href","./jqrec.html?text=" escape(escape("Hallo" id))); >                         /*Stellen Sie die Bildlaufleiste so ein, dass sie mit der Höhe von Testul scrollt. Dieser Code ist unter IE8 ungültig*/ <br>                 $("body").scrollTop($("#testul").height() <br>            });  <br> /*Schaltflächenklick-Ereignis löschen*/ <br> $("#clear").click(function (){ <br>                       /* Alle Elemente unter Testul löschen und den Zähler auf Null zurücksetzen*/                                                                       $("#testul").empty();                 id=0;                                             });  <br> /*findmyfather Inline-Text-Klickereignis*/ <br> $("#findmyfather").click(function(){ <br>                    /*Dies stellt den gedrückten FindMyFather dar, nimm die ID des übergeordneten Knotens der oberen Ebene*/ <br> Thisid=$(this).parents().attr("id"); <br> Alert("Mein übergeordneter Knoten ist: " thisid);                /*Auf diese Weise können Sie sich darauf freuen, die ID des ersten div-Elements zu finden*/ <br> Thisid=$(this).parents("div").attr("id"); <br> Alert("Mein erster div-Elternknoten ist: " <br>                 /*Auf diese Weise können Sie sich darauf freuen, die ID des zweiten div-Elements zu finden*/ <br> Thisid=$(this).parents("div").parents("div").attr("id"); Alert("Mein zweiter Div-Elternknoten ist: " <br>           });                                                   }); <br> </script>


    Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.
    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    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
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage