Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erläuterung von Beispielen für den effizienten Betrieb von Seitenelementen mit jQuery

零下一度
Freigeben: 2017-06-26 15:17:15
Original
1717 Leute haben es durchsucht

jQuery kann Seitenelemente effizient bedienen.


Über die Auswahl von DOM- und CSS-Seitenelementen:

 $("span"); //Alle Span-Elemente

 $( " #elem"); //Element mit ID elem

$(".classname"); //Element mit Klassenname

$("div#elem");/ /

$("ul li a.menu"); // Tag mit Klasse "menu"

$("p> ;span"); /Das direkte Unterelement span

von p $("input[type=password]"); //Das Eingabeelement des angegebenen Typs

$("p:first ") ; //Der erste Absatz der Seite

$("p:even"); //Alle geraden Absätze

$(":header") ; //Titelelemente (h1 bis h6)

$(":button"); //Alle Schaltflächenelemente

$(":radio");

$ (":checkbox"); 

 $(":checked"); //Ausgewähltes Status-Auswahlfeld oder Segment-Auswahlfeld

    html() Holen Sie sich das Element oder Der HTML-Inhalt einer Reihe von Elementen erhält, ähnlich wie innerHTML von JavaScript, den gesamten HTML-Code (einschließlich Text).
var htmlContent=$("#elem").html();
Nach dem Login kopieren
$("#elem").html("<p>Here is some new content.</p>");/*修改内容*/
Nach dem Login kopieren
    text() ruft nur den Textinhalt des Elements ab, ruft und ab ändert den Inhalt wie folgt:
var textContent=$("#elem").text();
$("#elem").text("new content");     //修改内容
$("#elem").append("<p>Here is some new content.</p>")   //添加文本内容
Nach dem Login kopieren
    attr() gibt bei Verwendung in einer Gruppe einen elementspezifischen Attributwert zurück. gibt den ersten Wert von Elementen zurück.
var title=$("#elem").attr("title");    //返回属性值

$("#elem").attr("title","new title");    //修改属性值
Nach dem Login kopieren
    show() //Anzeigeelement $("div").show();
  • hide() // Elemente ausblenden, der Wert von slow beträgt etwa 600 Millisekunden
  •   $("#elem").hide("slow",function ( ){

                     }); 

Elementanimation

1. Ein- und Ausblenden, wie z.B : $("#elem").fadeOut("slow",funtion(){

// Vorgang nach dem Ausblenden

 });

 

 $("#elem").fadeIn(500,function(){

   //Vorgang nach dem Einblenden

});

 

 $("#elem").fadeTo(3000,0.5,function(){

    // Der Vorgang nach dem Ein- oder Ausblenden, 0,5 bedeutet Deckkraft, was das Finale bedeutet Deckkraft wird auf 0,5 eingeblendet

 });

slideUp(); Ändern Sie beispielsweise die Höhe und Breite des Elements und blenden Sie es dann aus und aus.

Befehlskette

Es gibt keine Begrenzung für die Länge und Viele Operationen können kontinuierlich für dieselbe Gruppe von Elementen ausgeführt werden:

 $("#elem").text("Hello from jQuery" ).fadeOut( ).fadeIn();
$("#elem").animate(
    {
        width:400px;
        height:400px;
       },1500,function(){
               $(this).fadeOut("slow");
                }
  );
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für den effizienten Betrieb von Seitenelementen mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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