Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung häufig verwendeter Methoden in Jquery_jquery

Zusammenfassung häufig verwendeter Methoden in Jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:41:251438Durchsuche

//Vorteile von jQuery:

1 Leichtgewicht
​ ​ 2 leistungsstarke Selektoren
​ ​ 3 Hervorragende Kapselung von DOM-Operationen
​ ​ 4 Zuverlässiger Mechanismus zur Ereignisbehandlung
​ ​ 5 Perfektes Ajax
​ ​ 6 Verunreinigen Sie keine Variablen der obersten Ebene
​ ​ 7 Hervorragende Browserkompatibilität
                                                                                     Kettenbetriebsmodus
          9 Implizite Iteration
10 Verhalten wurde von der Strukturschicht getrennt
11 Umfangreiche Plug-in-Unterstützung
12 Vollständige Dokumentation
13 Open Source

629e799adbc9dadfcd341ee6c7f26ebfHier ist kein Code erlaubt2cacc6d41bbb37262a98f745aa00fbf0

$("#foo") und jQuery("#foo") sind gleichwertig
$.ajax und jQuery.ajax sind gleichwertig. Das $-Symbol ist die Abkürzung für jQuery

// window.onload : $(function(){ })
$(function(){ }) entspricht dem window.onload-Ereignis in js. Es wird sofort nach dem Laden der Seite ausgeführt. Dies ist jedoch dasselbe wie window.onload
Aber window.onload kann nur einen schreiben, aber $(function(){ }) kann mehrere
schreiben Wenn keine Abkürzung vorhanden ist, ist es $(document)ready(function(){ })

//Kettenbetriebsstil:

    $(".level1>a").click(function(){
      $(this).addClass("current") //给当前元素添加"current"样式
      .next().show(); //下一个元素显示
      .parent().siblings()//父元素的同辈元素
      .children("a") //子元素<a>
      .removeClass("current")//移出"current"样式
      .next().hide();//他们的下一个元素隐藏
    return false;
    })

//JQuery-Objekt in DOM-Objekt konvertieren:

1 Das jQuery-Objekt ist ein Array-ähnliches Objekt, und das entsprechende DOM-Objekt kann über die [index]-Methode
abgerufen werden

var $cr = $("#cr");//jQuery-Objekt
          var cr = $[0]; //DOM-Objekt

2 Eine weitere Methode wird von jQuery selbst bereitgestellt, und das entsprechende DOM-Objekt wird über die get(index)-Methode
abgerufen

var $cr = $("#cr");//jQuery-Objekt
          var cr = $cr.get(0);//DOM object

//DOM-Objekt in jQuery-Objekt konvertieren:

Bei einem DOM-Objekt müssen Sie das DOM-Objekt nur mit $() umschließen, um ein jQuery-Objekt zu erhalten.
Die Methode lautet: $(DOM object);

var cr = document.getElementById("cr");//DOM object
        var $cr = $(cr); //jQuery-Objekt

//Konflikte lösen:

1 Wenn andere JS-Bibliotheken mit der jQuery-Bibliothek in Konflikt geraten, können wir jederzeit die Funktion jQuery.noConflict() aufrufen, um die Kontrolle über die Variable $ an andere JavaScript-Bibliotheken zu übertragen

    var $jaovo = jQuery.noConflict();
    $jaovo(function(){
      $jaovo("p").click(function(){
        alert($jaovo(this).text());
      });
    });

2 Sie können „jQuery“ direkt verwenden, um einige jQuery-Arbeiten zu erledigen

    jQuery(function(){
      jQuery("p".click(function(){
        alert(jQuery(this).text());
      }));
    });

//jQuery-Selektor

1 Basisauswahl
Der Basisselektor ist der am häufigsten verwendete Selektor in jQuery und auch der einfachste Selektor. Er sucht nach DOM-Elementen anhand der Element-ID, der Klasse und des Tag-Namens

//jQuery :

Holen Sie sich einfach das Label-Objekt. Es ist ein Array

//jQuery-Objekterfassung:

$("p");//Alle p-Tag-Objekte abrufen ---- Das erhaltene Objekt ist ein Array
$("#aa");//Erhalten Sie das Objekt des Tags mit der ID aa --- Das erhaltene Objekt ist ein Array
$(".aaa");//Erhalten Sie das Objekt des Tags mit der Klasse aaa --- Das erhaltene Objekt ist ein Array

//Konvertierung zwischen jQuery-Objekt und DOM-Objekt:

jQuery-Methoden und DOM-Methoden können nicht miteinander verwendet (aufgerufen) werden, Objekte können jedoch ineinander konvertiert werden
$("p");//ist ein jQuery-Objekt
Document.documentElementsTagName("p");//Es ist ein DOM-Objekt
$(document.documentElementsTagName("p"));//DOM-Objekt in jQuery-Objekt konvertieren
$("p").get(1);//Es ist ein DOM-Objekt,
Get(1); stellt die zweite Ziffer des Arrays p dar (der Index 1 ist die zweite Ziffer)
$($("p").get(1));//Das jQuery-Objekt wird in

konvertiert

//jQuery-Objekt in DOM-Objekt konvertiert:

1 Das jQuery-Objekt ist ein Array-ähnliches Objekt, und das entsprechende DOM-Objekt kann über die [index]-Methode
abgerufen werden         var $cr = $("#cr");//jQuery-Objekt
          var cr = $[0]; //DOM-Objekt
2 Eine weitere Methode wird von jQuery selbst bereitgestellt, und das entsprechende DOM-Objekt wird über die get(index)-Methode
abgerufen         var $cr = $("#cr");//jQuery-Objekt
          var cr = $cr.get(0);//DOM object

//DOM-Objekt in jQuery-Objekt konvertiert:

Bei einem DOM-Objekt müssen Sie das DOM-Objekt nur mit $() umschließen, um ein jQuery-Objekt zu erhalten.
Die Methode lautet: $(DOM object);

var cr = document.getElementById("cr");//DOM object
        var $cr = $(cr); //jQuery-Objekt

//Element erstellen:

        $("1a13e0f18c2398e8800483d008584a7e123bed06894275b65c1ab86501b08a632eb");//Erstellen Sie das Tag 25edfb22a4f469ecb59f1190150159c6 mit dem Attribut title=other und dem Inhalt 123
​​​​Elementknoten (Labelname) Attributknoten (Attributtitel='xxx') Textbeschriftung (123)

//text() Textknoten:

text(): Funktion/Methode zum Abrufen des internen Textes des ausgewählten Tags (für das menschliche Auge sichtbarer Inhalt)
                                                                                                            var li = $("li").text();//Erhalten Sie die Daten im Textknoten von li (dh den Inhalt von 123)

//attr() Attribute abrufen/Attribute festlegen/Attribute ändern:

            f9c858b17a39ec55ef2776c60045f8c494b3e26ee717c64999d7867364b1b4a3;

var i = $("p").attr("title");//Dies dient dazu, den Wert des Titelattributs im p-Tag abzurufen

           $("p").attr("title"," bbb");//Ändern Sie den Wert des Titelattributs im p-Tag in bbb

//removeAttr() löscht den Attributwert des angegebenen Elements:  

removeAttr(xx,xx); Attributwert löschen

e4b6507e2d4396a5b4ec229ea5050e20Was ist Ihre Lieblingsfrucht?94b3e26ee717c64999d7867364b1b4a3
$("p").removeAttr('title',"Ihr am wenigsten Favorit");//Es dient dazu, den Wert des Titelattributs im p-Tag (Ihr am wenigsten Favorit) zu löschen

//append() zum Hinzufügen von Elementen:

Fügen Sie das übereinstimmende untergeordnete Element zum angegebenen übergeordneten Element hinzu.

Funktionskettenaufrufe: Warum können Kettenaufrufe verwendet werden?
Dies liegt daran, dass die vorherige Funktion immer noch das Objekt mit dem Namen
zurückgibt Beispielsweise ist a.append(b).append(c) unter a ein übergeordnetes Tag-Objekt, um b hinzuzufügen, und der zurückgegebene Wert ist immer noch das Objekt von a, sodass Sie die Funktion auch aufrufen können füge c hinzu

//a, b und c sind alle Etikettenobjekte

var $li_1 = $("25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb");//Es werden nur Elementknoten erstellt
            var $li_2 = $("25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb");
            var $parent = $("ul");

$parent.append($li_1).append($li_2);
a.append(b);// Fügen Sie b am Ende von a hinzu (anhängen), a ist das übergeordnete Tag und b ist das untergeordnete Tag
a.append(c);// Fügen Sie c am Ende von a hinzu (append), a ist das übergeordnete Tag und c ist das untergeordnete Tag
a.append(b).append(c);//Füge b und c zu a hinzu. B und c sind Peers, aber b liegt über c (verkettete Aufrufaddition)
a.prepend(b)//Füge b vor a hinzu. a ist das übergeordnete Tag, b ist das untergeordnete Tag
a.insertAfter(b);//Füge a hinter b (der gleichen Generation) hinzu

a.insertBefore(b);// Fügen Sie a vor b (der gleichen Generation) hinzu
//Mobilknoten anrufen
//Fügen Sie unser angegebenes Element vor dem übereinstimmenden Element ein (angegebenes element.insertBefore("matched element"))

//appendTo() fügt Elemente hinzu:

//a ist das Objekt, b ist der Tag-Name
appendTo(): ​​​​Fügt das angegebene Element zum Satz übereinstimmender Elemente

hinzu

$("li").appendTo("ul");//Füge den li-Tag zu ul hinzu
a.appendTo("b"); //Ja, b wird zu a hinzugefügt (a ist ein Label und b ist ein Label)
Angegebenes element.appendTo(matching element);

//Element löschen (versteckt) remove():

a.remove();//A aus HTML entfernen (versteckt)
var $li = $("ul li:eq(1)").remove();//Entferne das zweite li-Tag in ul eq(1); das ist das li-Element mit dem Index 1, das ist das li-Element Zwei , weil der Index bei 0
beginnt            $li.appendTo("ul");//Das gerade gelöschte Element erneut zu ul hinzufügen
            $("ul li").remove("li[title !=Apple]");//Alle li-Elemente im ul-Element löschen, deren Titelattribut nicht von Apple stammt

//removeAttr() löscht den Attributwert des angegebenen Elements:

removeAttr(xx,xx); Attributwert löschen
e4b6507e2d4396a5b4ec229ea5050e20Was ist Ihre Lieblingsfrucht?94b3e26ee717c64999d7867364b1b4a3
$("p").removeAttr('title',"Ihr am wenigsten Favorit");//Es dient dazu, den Wert des Titelattributs im p-Tag (Ihr am wenigsten Favorit) zu löschen

//Leere leer():

         $("ul li:eq(1)").empty();//Suche das zweite li-Element in ul und lösche den Inhalt, (text node,25edfb22a4f469ecb59f1190150159c6content(text node)a20ea7188248fd227adb1c5e613bf0f1Die am wenigsten Lieblingsobst deiner Freundin ist???128dba7a3a77be0113eb0bea6ea0a5d0");//Ersetze das gesamte p-Tag durch < ;strong>Was ist das deiner Freundin? am wenigsten Lieblingsfrucht???128dba7a3a77be0113eb0bea6ea0a5d0

//Wenn mehrere PS vorhanden sind und Sie nur eines ersetzen möchten

          $($("p").get(1)).replaceWith("8e99a69fbe029cd4e2b854e244eab143Die am wenigsten geliebte Frucht deiner Freundin ist???128dba7a3a77be0113eb0bea6ea0a5d0");//Ersetze nur die ersten 2 p Tags ersetzt
Sie können dem zu ersetzenden Tag auch eine ID hinzufügen, d. h. es wird nur eines ersetzt
              $("#abc").replaceWith("25edfb22a4f469ecb59f1190150159c6Ich habe das Tag durch die ID abcbed06894275b65c1ab86501b08a632eb ersetzt")

//replaceAll():
$("8e99a69fbe029cd4e2b854e244eab143Was ist die unbeliebteste Frucht deiner Mama???128dba7a3a77be0113eb0bea6ea0a5d0").replaceAll("#abc");//Das erstere ersetzt das letztere durch die ID #abc Dieses Tag
               $("25edfb22a4f469ecb59f1190150159c6Ich habe alle p-Tags ersetztbed06894275b65c1ab86501b08a632eb").replaceAll("p");//Die Vorderseite ersetzt das folgende

//Wrap wrap() wraoAll() wrapInner() :

//wrap() :

wrap(): Umschließt das übereinstimmende Element mit einem neuen HTML-Tag.
ein Label-Objekt (umwickelt) b ist ein Label (umwickelt mit b-Label)
         Alle a-Tags werden umbrochen
            a.wrap(b);
//Wenn ein A-Tag vorhanden ist, wickeln Sie es ein in:
                                                                                                                                                                                          out              a4b561c25d9afb9ac8dc4d70affff419 //Wenn es mehrere a-Tags gibt, packen Sie sie ein in:
                                                                                                                                                                                          out              a4b561c25d9afb9ac8dc4d70affff419                                                                                                                                                                                           out              a4b561c25d9afb9ac8dc4d70affff419                                                                                                                                                                                           out              a4b561c25d9afb9ac8dc4d70affff419 Jeder wird von der Verpackungstrennung getrennt
          a.wrap("b");//Es fügt ein übergeordnetes Tag zu a hinzu, das von b umschlossen wird
                                                                                          $("p").wrap("5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6");// Fügen Sie dem p-Tag ein übergeordnetes Tag hinzu, d. h. umschließen Sie das p-Tag mit dem 5a8028ccc7a7e27417bff9f05adf5932 ;i> ;e388a4556c0f65e1904146cc1a846beeIch bin p tag94b3e26ee717c64999d7867364b1b4a372ac96585ae54b6ae11f849d2649d9e6
           /*
                                                                                                                                                                                                                                                                           72ac96585ae54b6ae11f849d2649d9e6
             */


//wrapAll() :

wrapAll(): Wickelt alle Etiketten zusammen, auch wenn die zu verpackenden Etiketten nicht zusammenliegen und sich andere Etiketten in der Mitte befinden, werden die zu verpackenden Etiketten zusammen verschoben und zusammen verpackt
//Vor dem Paket
                                                                                                                                                        e388a4556c0f65e1904146cc1a846beeaaa94b3e26ee717c64999d7867364b1b4a3
                                                                                                         ​​​​ a.wrapAll(b);//Alle Pakete
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             e388a4556c0f65e1904146cc1a846beeaaa94b3e26ee717c64999d7867364b1b4a3
Nach einem solchen Umbruch ändert sich die Ausgabeposition und auch der Effekt


//wrapInner() :


wrapInner(): Füge ein bestimmtes Tag zum Inhalt des passenden Tags hinzu (entspricht dem Hinzufügen eines Unter-Tags zum Original-Tag und dem Speichern des Textinhalts des übergeordneten Tags)
                                                                                                                             a.wrapInner("b");//Das Ergebnis ist: 3499910bf9dac5ae3c52d5ede7383485a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed Verwenden Sie das b-Tag, um den Inhalt in ein

einzuschließen                                                                                                                                                                                                                    $("li").wrapInner("5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6");//Das Ergebnis ist: d5b01ed333f292e161ef5c96ce4fe97f5a8028ccc7a7e27417bff9f05adf5932Apple72ac96585ae54b6ae11f849d2649d9e62867e861ba23559b572f230426ab14ea           6ec3bfc2be99a37ee6d43b930f84f6a0

                                         5a8028ccc7a7e27417bff9f05adf5932Apple72ac96585ae54b6ae11f849d2649d9e6                                                                                  

//Effektumschaltung toggleClass():




Es bezieht sich auf das Umschalten zwischen Effekten. Es gibt einen Effekt, wenn zum ersten Mal kein Umschalten erfolgt. Beim Umschalten bezieht es sich auf den Effekt, der aus allen Klassen besteht Es bedeutet, zwischen dem aktuellen Effekt und dem angegebenen Effekt hin und her zu wechseln
           080b747a20f9163200dd0a7d304ba388
         .high{
                      font-weight:bold;     /* Fettschrift */
                                                                                                Farbe: rot; }

.another{

               Font-Style:Italic;               Farbe:blau; }
                                                                                                1a64b16145f8ad1dfbda153c71a03605Was ist Ihre Lieblingsfrucht?94b3e26ee717c64999d7867364b1b4a3

$("p").toggleClass("another");//Tatsächlich ist es eine Änderung der Klasse, wenn diese Funktion ausgelöst wird, wie oben festgelegt, wenn die Klasse hoch ist ist in roter Schrift. Wenn die Klasse eine andere ist, ist sie in blauer Schrift

Wenn diese Funktion ausgelöst wird, ändert sich die Farbe einmal. Es handelt sich lediglich um einen Wechsel zwischen den Klassen und dem p-Tag nach $("p").toggleClass(". another") Tauschen Sie die ursprüngliche Klasse innerhalb von
aus

//Bestimmen Sie, ob das Element einen bestimmten Stil enthält hasClass():


$("p").hasClass("MyClass");//Bestimmen Sie, ob im p-Tag ein Klassenattribut vorhanden ist, das MyClass ist
​​​​ $("p").is("MyClass");//Das Gleiche wie oben


//html() und text():


          b17c45f86727cfe00a128dedf4587eb38e99a69fbe029cd4e2b854e244eab143Was ist Ihre Lieblingsfrucht?128dba7a3a77be0113eb0bea6ea0a5d094b3e26ee717c64999d7867364b1b4a3
$("p").html();//Es ist das p-Tag (e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3) entspricht dem innerHTML von p, nämlich             $("p").text();//Es handelt sich um die Textdaten (Textknoten) im p-Tag, nämlich: Was ist Ihre Lieblingsfrucht?

//Fokus erhalten und verlieren focus() blur() :

focus(): Fokus erhalten
         Blur(): Fokus verlieren
Fokus (Methoden und Anweisungen, die ausgeführt werden müssen, um die Fokusfunktion () {Anweisung Operation})
zu erhalten                  $("Tag name (#ID name) (.class name)").blur(Methoden und Anweisungen, die ausgeführt werden müssen, wenn der Fokus verloren geht, function(){Anweisungsoperation})

//Wert abrufen/ändern() Wert defaultValue:

                         684b2b8a1751d3b4e5d621b191829ca9 ​​​​​ $("input").val();//Dies ist der Wert, um value
zu erhalten             $("input").val("Account is ****");//Dies ist der Wert, der geändert werden soll
Das Ergebnis ist: 861541d1892dad25bf51b4cd90478721

//defaultValue:

Stellt den Standardwert von value dar. Dies ist der Wert, der beim Schreiben von Code festgelegt wird, und dann der Standardwert
         Wird im Allgemeinen zur Beurteilung verwendet
If (txt_value == ""){//Das bedeutet, wenn der Wert leer ist, weisen Sie dem Wert den anfänglichen Standardwert zu
Wird verwendet, um das Eingabefeld festzulegen. Wenn das Eingabefeld nichts ausgibt, wird der Standardwert eingegeben. (Wenn das Eingabefeld nicht den Fokus erhält, wird der Standardwert im Eingabefeld angezeigt. Nach dem Fokussieren wird der Standardwert angezeigt Wenn der Kunde keine Eingaben macht, wird der Standardwert wieder dem Wert zugewiesen, der den Kunden daran erinnert, dass nichts eingegeben wurde.
          $("input").val($("input").defaultValue)
}

//Anzahl der untergeordneten Elemente anzeigen children() (nur untergeordnete Elemente, untergeordnete Elemente von untergeordneten Elementen, nicht gezählt, direkte untergeordnete Elemente sind untergeordnete Elemente):

$("tag").children();

Das jQuery-Objekt von tag.children();
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    5db79b134e9f6b82c0b36e0489ee08ed
           $("a").children();//Das sind 2, weil die untergeordneten Elemente von a nur b und d sind

$("b").children();//Es ist 1, weil b nur ein untergeordnetes Element hat, c

$("d").children();//Es ist 0, weil d keine untergeordneten Elemente hat

//Geschwisterelemente, next(), prev(), siblings():

next();//Das nächste Element derselben Generation

          prev();//Vorheriges Element derselben Generation

siblings();//Alle Geschwisterelemente a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a e4b6507e2d4396a5b4ec229ea5050e20Was ist Ihre Lieblingsfrucht?94b3e26ee717c64999d7867364b1b4a3 ff6d136ddc5fdfeffaf53ff6ee95f185

d5b01ed333f292e161ef5c96ce4fe97fApplebed06894275b65c1ab86501b08a632eb

e1afc09f2ea87e08b572bd30c564df6fOrangebed06894275b65c1ab86501b08a632eb
7b0baccfcb080b732e507f200c89df46Ananasbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
5a8028ccc7a7e27417bff9f05adf593245672ac96585ae54b6ae11f849d2649d9e6

// Beispiel: next()

var p= $("p").next();
p.html();// Der Inhalt des nächsten Elements des Peers des p-Elements (entspricht innerHTML), das Ergebnis ist:
& Lt; li title = 'apple' & gt; apple & lt;/li & gt;                                                                                                                                                                          e1afc09f2ea87e08b572bd30c564df6fOrangebed06894275b65c1ab86501b08a632eb
In Das nächste Tag von ps Peer ist ul,ff6d136ddc5fdfeffaf53ff6ee95f185Hier ist der Stoff von html()929d1f5ca49e04fdcb27f9465b944689
----------
// prev()

var p = $("p").prev();

           p.html();//Es ist die vorherige Ziffer des Peer-Elements von p, das das b-Element ist. Das html() des b-Elements ist 123, also 123


123

------------

// Geschwister()


var p = $("p").siblings();//Alle Elemente sind jetzt Arrays

p.html(); //Dies ist nur 123, da es sich um ein Array handelt. Wenn es ausgegeben wird, ist der Inhalt des b-Tags 123. Sie müssen durchlaufen, um den gesamten Inhalt zu sehen 🎜> for(var i =0;p.length;i ){

Alert(p[i].innerHTML);//Das ist der gesamte Inhalt, warum innerHTML verwenden?
//Da p ein jQuery-Objekt ist, handelt es sich, wenn auf das jQuery-Objekt ein Index folgt, um ein DOM-Objekt, sodass Sie nur innerHTML verwenden können. Dies hat dieselbe Funktion wie die html()-Methode des jQuery-Objekts,
                  //alert(); ist ein gewöhnliches Popup-Fenster
​​​​​​ //Das Ergebnis ist:
123
Was ist deine Lieblingsfrucht?
Apfel
Orangen
Ananas
              456
}


//Ereignisdelegierungsmechanismus:


Ereignisdelegierungsmechanismus: Wir müssen ein Element finden und seine Attribute ändern, aber wir wissen nicht, ob wir dieses Element finden können, also verwenden wir eine temporäre Variable, um das Ereignis an es zu delegieren, und suchen dann nach dem Element . Sobald wir den Vorfall gefunden haben, leiten wir ihn an
weiter

// $(custom variable.target).closest("das gesuchte Element").css("ein Attribut nach dem Finden", "Ändern des Attributwerts")

 

// Hier starten Sie die Suche, indem Sie auf das Objekt klicken (wenn Sie auf a klicken, suchen Sie zuerst nach a, dann nach span, dann nach p und dann nach body, bis Sie das richtige Tag gefunden haben Hören Sie auf, online zu suchen)

                $(document).bind("click",function(e){
                   $(e.target).closest("body").css("color","red");
                 })
//$(document).bind("click",function("p"){
// $ ("p"). Css ("color", "red");                                                                                                                                                                                                                                                                                          //

                      //Dokument: Stellt das gesamte Dokument dar. Ich möchte ein unsicheres Objekt im Dokument abgleichen, daher habe ich dieses Formular verwendet
                        //e: bezieht sich auf ein bestimmtes Element, nach dem wir suchen, es ist ein unspezifischer Wert, $(e.target) ist das unspezifische Objekt
                    // Aus unserem unspezifischen Matching geht hervor, dass derjenige derjenige ist, der übereinstimmt
                                                                                                      b17c45f86727cfe00a128dedf4587eb3
                                                                                                          
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      In In In                                                  929d1f5ca49e04fdcb27f9465b944689
                                                                                     

//Ermitteln Sie den linken und oberen Rand des Objekts offset():


Verwendung:
               jQuery object.offset();
               jQuery object.offset().left/top;
           var $p = $("p").offset();//Erhalte den linken und oberen Rand von p, einem Array
           $p.left;//Der erhaltene Wert ist der linke Rand
           $p.top;//Der erhaltene Wert ist der obere Rand

//Koordinaten festlegen und anzeigen, show():

Object.css().show("slow(slow)"/"normal(normal)"/"fast(fast)");

​ Eine Zeichenfolge mit einer von drei vorgegebenen Geschwindigkeiten („langsam“, „normal“, „schnell“) oder ein Millisekundenwert, der die Animationsdauer darstellt (z. B. 1000)
          $("#id").mouseover(function(e){
//e entspricht event
in nativem js //Erstelle ein div-Element, das Ereignisobjekt, das durch e (Mouseover) ausgelöst wird. Dies stellt das Ereignisquellobjekt (bezogen auf das HTML-Tag) dar, wenn es ausgelöst wird
            var tooltip = "c4f2e5f2cda17ebc51ceca5f4bbed902" this.title "16b28748ea4df4d9c2150843fecfba68";
                                           $("body").append(tooltip); //An das Dokument anhängen

                   $("#tooltip").css({

"top":e.pageY "px", "left":e.pageX "px", „width“: „300px“

}).show("fast"); //Legen Sie die x-Koordinate und die y-Koordinate fest und zeigen Sie sie an, wenn die Ereignisquelle dieses Ereignis auslöst repräsentieren dies Die Koordinaten der oberen linken Ecke der Box

                 })

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