JQUERY

Oct 31, 2016 am 11:25 AM
jquery

jQuery-Elementselektoren

jQuery verwendet CSS-Selektoren, um HTML-Elemente auszuwählen.

$("p") wählt das

-Element aus.

$("p.intro") wählt alle

Elemente mit class="intro" aus.

$("p#demo") wählt das erste

-Element mit der ID="demo" aus.

jQuery-Attributauswahl

jQuery verwendet einen XPath-Ausdruck, um Elemente mit einem bestimmten Attribut auszuwählen.

$("[href]") wählt alle Elemente mit dem href-Attribut aus.

$("[href='#']") wählt alle Elemente mit einem href-Wert gleich „#“ aus.

$("[href!='#']") wählt alle Elemente mit einem href-Wert ungleich „#“ aus.

$("[href$='.jpg']") wählt alle Elemente aus, deren href-Wert mit „.jpg“ endet.

jQuery-CSS-Selektoren

jQuery-CSS-Selektoren können verwendet werden, um CSS-Eigenschaften von HTML-Elementen zu ändern.

Das folgende Beispiel ändert die Hintergrundfarbe aller p-Elemente in Rot:

Dies ist eine Überschrift

Dies ist ein Absatz.

Dies ist ein weiterer Absatz.

Lassen Sie AJAX diesen Text ändern

jQuery - 获得内容和属性

jQuery DOM 操作

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法:

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容(包括 HTML 标记)

val() - 设置或返回表单字段的值

 

 

<script></script>

$(document).ready(function(){

  $("#btn1").click(function(){

    alert("Text: " + $("#test").text());     >>>>>>>text()方法

  });

  $("#btn2").click(function(){

    alert("HTML: " + $("#test").html());    》》》》》》》》html()方法

  });

});

 

这是段落中的粗体文本。

 

 

 

 

 

<script></script>

$(document).ready(function(){

  $("button").click(function(){

    alert("Value: " + $("#test").val());      >>>>>>>>>val()方法

  });

});

 

姓名:

 

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值:

 

 

 

<script></script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("#w3s").attr("href"));     》》》》》》》attr()方法

  });

});

 

W3School.com.cn

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

<script></script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text("Hello world!");     》》》》》》设置text()方法

  });

  $("#btn2").click(function(){

    $("#test2").html("Hello world!");    》》》》》设置html()方法

  });

  $("#btn3").click(function(){

    $("#test3").val("Dolly Duck");    》》》》》设置val()方法

  });

});

这是段落。

这是另一个段落。

Input field:

 

 

 

 

 

text()、html() 以及 val() 的回调函数

上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html():

<script></script>

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#test1").text(function(i,origText){

      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

    });     》》》》》回调函数

  });

  $("#btn2").click(function(){

    $("#test2").html(function(i,origText){

      return "Old html: " + origText + " New html: Hello world! (index: " + i + ")";

    });    》》》》》》回调函数

  });

});

这是粗体文本。

这是另一段粗体文本。

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变(设置)链接中 href 属性的值:

<script></script>

$(document).ready(function(){

  $("button").click(function(){

    $("#w3s").attr("href","http://www.w3school.com.cn/jquery");

  });

});

W3School.com.cn

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性:

$(document).ready(function(){

       $("button").click(function(){

       $("#a1").attr({

           "href":"http://www.w3school.com.cn",

           "title":"W3School jQuery 教程"

       });

       });

});

      百度

  

  

 

attr() 的回调函数

jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 attr() 方法:

$(document).ready(function(){

  $("button").click(function(){

    $("#w3s").attr("href", function(i,origValue){

      return origValue + "/jquery";

    });

  });

});

w3school.com.cn

jQuery – Elemente hinzufügen

Neuen HTML-Inhalt hinzufügen

Wir lernen vier jQuery-Methoden zum Hinzufügen neuer Inhalte kennen:

append() – nachdem Inhalt eingefügt wurde Ende des ausgewählten Elements

prepend() – Inhalt am Anfang des ausgewählten Elements einfügen

after() – Inhalt nach dem ausgewählten Element einfügen

before() – Inhalt vor dem ausgewählten Element einfügen

jQuery append()-Methode

jQuery append()-Methode wird verwendet. Inhalt einfügen am Ende des ausgewählten Elements.

$(document).ready(function(){

$("#b2").click(function(){

$("p"). append("Angehängter Text.");》》append() method

});

$("#b3").click(function(){

$("ol").append("

  • Angehängter Text
  • .");

    });

    });

    asdfsdfads

    asdfsa

      bbbbbbb

    1. ccccccc

    2. Text anhängen
    Liste anhängen

    Im obigen Beispiel fügen wir Text nur am Anfang/Ende des ausgewählten Elements /HTML ein.

    function appendText()

    {

    var txt1="

    Text.

    "; // Neues Element in HTML erstellen

    var txt2=$("

    ").text("Text."); // Neues Element mit jQuery erstellen

    var txt3=document.createElement("p");

    txt3.innerHTML="Text."; // Text über DOM erstellen

    $("body").append(txt1,txt2,txt3); //Neue Elemente anhängen

    }

    Dies ist ein Absatz.

    Text anhängen

    Methoden after() und before() abfragen

    Die jQuery-Methode after() fügt Inhalte nach dem ausgewählten Element ein.

    Die jQuery-Methode before() fügt Inhalte vor dem ausgewählten Element ein.

    $(document).ready(function(){

    $("#btn1").click(function(){

    $("img"). before("

    Before

    "); >>>>>>>>Methode

    });

    $("#btn2").click(function() {

    $("img").after("After

    ");

    });

    });

    W3School LogoText vor dem Bild hinzufügen



    Text nach dem Bild hinzufügen

    Die Methoden after() und before() können über Parameter eine unbegrenzte Anzahl neuer Elemente empfangen. Neue Elemente können über Text/HTML, jQuery oder JavaScript/DOM erstellt werden.

    {

    var txt1="

    I

    " // Element in HTML erstellen

    var txt2 =$("

    ").text("love "); // Elemente über jQuery erstellen

    var txt3=document.createElement("big"); // Elemente über DOM erstellen

    txt3.innerHTML="jQuery!";

    $("img").after(txt1,txt2,txt3); // Neues Element nach img einfügen

    }

    W3School LogoText hinter dem Bild hinzufügen



    jQuery - Elemente löschen

    Wenn Sie Elemente und Inhalte löschen müssen, können Sie im Allgemeinen die folgenden zwei jQuery-Methoden verwenden:

    remove() - Ausgewählte Elemente (und ihre untergeordneten Elemente) löschen

    empty() – entfernt untergeordnete Elemente aus dem ausgewählten Element

    jQuery-Remove()-Methode

    jQuery-Remove()-Methode entfernt das Ausgewähltes Element Wählen Sie ein Element und seine untergeordneten Elemente aus.

    $(document).ready(function(){

    $("button").click(function(){

    $("#div1"). remove(); 》》》》kann in die Methode empty() geändert werden

    });

    });

    Dies ist ein Text im div.

    Dies ist ein Absatz im div .

    Dies ist ein weiterer Absatz in der Abteilung


    Gelöschte Elemente filtern

    Die jQuery-Methode „remove()“ akzeptiert auch einen Parameter, der ermöglicht Ihnen, gelöschte Elemente zu filtern.

    Dieser Parameter kann eine beliebige jQuery-Selektorsyntax sein.

    Das folgende Beispiel löscht alle

    -Elemente mit class="italic":

    (document).ready(function(){

    $("button") .click(function(){

    $("p").remove(".italic"); 》》》》Akzeptiert einen Parameter

    });

    });

    Dies ist ein Absatz im div.

    Dies ist ein weiterer Absatz im div.

    》》》》Klasse zum Definieren von Parametern festlegen

    Dies ist ein weiterer Absatz im div.

    Elementselektor

    Der jQuery-Elementselektor wählt Elemente anhand ihres Namens aus.

    Alle

    Elemente auf der Seite auswählen:

    $("p")

    $(document).ready(function(){
    $( "button").click(function(){
    $("p").hide(); ******
    });
    });

    #id-Selektor

    jQuery #id-Selektor 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 eindeutige Element auf der Seite auswählen möchten, müssen Sie den #id-Selektor übergeben.

    Die Syntax zum Auswählen von Elementen anhand der ID lautet wie folgt:

    $(document).ready(function(){
    $("button").click(function(){
    $ ("#test").hide(); *******
    });
    });

    .class selector

    jQuery Klassenselektorelemente können durch Angabe einer Klasse gefunden werden.

    Die Syntax lautet wie folgt:

    $(document).ready(function(){
    $("button").click(function(){
    $( ".test ").hide();
    });
    });

    Was getParameter erhält, ist der String-Typ. Oder es wird verwendet, um den Wert im übermittelten Formular oder die von einem bestimmten Formular übermittelten Daten zu lesen

    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

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    AI Hentai Generator

    AI Hentai Generator

    Erstellen Sie kostenlos Ai Hentai.

    Heißer Artikel

    R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
    2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    Repo: Wie man Teamkollegen wiederbelebt
    1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
    4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung Feb 27, 2024 pm 06:45 PM

    Detaillierte Erläuterung der jQuery-Referenzmethode: Kurzanleitung jQuery ist eine beliebte JavaScript-Bibliothek, die häufig in der Website-Entwicklung verwendet wird. Sie vereinfacht die JavaScript-Programmierung und bietet Entwicklern umfangreiche Funktionen und Features. In diesem Artikel wird die Referenzmethode von jQuery ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern einen schnellen Einstieg zu erleichtern. Einführung in jQuery Zuerst müssen wir die jQuery-Bibliothek in die HTML-Datei einführen. Es kann über einen CDN-Link eingeführt oder heruntergeladen werden

    Wie verwende ich die PUT-Anfragemethode in jQuery? Wie verwende ich die PUT-Anfragemethode in jQuery? Feb 28, 2024 pm 03:12 PM

    Wie verwende ich die PUT-Anfragemethode in jQuery? In jQuery ähnelt die Methode zum Senden einer PUT-Anfrage dem Senden anderer Arten von Anfragen, Sie müssen jedoch auf einige Details und Parametereinstellungen achten. PUT-Anfragen werden normalerweise zum Aktualisieren von Ressourcen verwendet, beispielsweise zum Aktualisieren von Daten in einer Datenbank oder zum Aktualisieren von Dateien auf dem Server. Das Folgende ist ein spezifisches Codebeispiel, das die PUT-Anforderungsmethode in jQuery verwendet. Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliotheksdatei einschließen. Anschließend können Sie eine PUT-Anfrage senden über: $.ajax({u

    Wie entferne ich das Höhenattribut eines Elements mit jQuery? Wie entferne ich das Höhenattribut eines Elements mit jQuery? Feb 28, 2024 am 08:39 AM

    Wie entferne ich das Höhenattribut eines Elements mit jQuery? Bei der Front-End-Entwicklung müssen wir häufig die Höhenattribute von Elementen manipulieren. Manchmal müssen wir möglicherweise die Höhe eines Elements dynamisch ändern, und manchmal müssen wir das Höhenattribut eines Elements entfernen. In diesem Artikel wird erläutert, wie Sie mit jQuery das Höhenattribut eines Elements entfernen, und es werden spezifische Codebeispiele bereitgestellt. Bevor wir jQuery zum Betreiben des Höhenattributs verwenden, müssen wir zunächst das Höhenattribut in CSS verstehen. Das Höhenattribut wird verwendet, um die Höhe eines Elements festzulegen

    jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite Feb 28, 2024 pm 09:06 PM

    Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: &lt

    Eingehende Analyse: Vor- und Nachteile von jQuery Eingehende Analyse: Vor- und Nachteile von jQuery Feb 27, 2024 pm 05:18 PM

    jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek, die häufig in der Front-End-Entwicklung verwendet wird. Seit seiner Veröffentlichung im Jahr 2006 ist jQuery für viele Entwickler zu einem der bevorzugten Tools geworden, hat in der Praxis jedoch auch einige Vor- und Nachteile. In diesem Artikel werden die Vor- und Nachteile von jQuery eingehend analysiert und anhand spezifischer Codebeispiele veranschaulicht. Vorteile: 1. Prägnante Syntax Das Syntaxdesign von jQuery ist prägnant und klar, was die Lesbarkeit und Schreibeffizienz des Codes erheblich verbessern kann. Zum Beispiel,

    Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Feb 28, 2024 pm 05:42 PM

    Titel: Verwenden Sie jQuery, um den Textinhalt aller Tags zu ändern. jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur Verarbeitung von DOM-Operationen verwendet wird. Bei der Webentwicklung müssen wir häufig den Textinhalt des Link-Tags (eines Tags) auf der Seite ändern. In diesem Artikel wird erläutert, wie Sie mit jQuery dieses Ziel erreichen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die jQuery-Bibliothek in die Seite einführen. Fügen Sie den folgenden Code in die HTML-Datei ein:

    Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Feb 29, 2024 am 09:03 AM

    Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wenn Sie jQuery zum Betreiben von DOM-Elementen verwenden, stoßen Sie häufig auf Situationen, in denen Sie feststellen müssen, ob ein Element ein bestimmtes Attribut hat. In diesem Fall können wir diese Funktion einfach mit Hilfe der von jQuery bereitgestellten Methoden implementieren. Im Folgenden werden zwei häufig verwendete Methoden vorgestellt, um festzustellen, ob ein jQuery-Element über bestimmte Attribute verfügt, und um spezifische Codebeispiele anzuhängen. Methode 1: Verwenden Sie die Methode attr() und den Operator typeof //, um zu bestimmen, ob das Element ein bestimmtes Attribut hat

    Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery Feb 28, 2024 pm 01:15 PM

    jQuery ist eine beliebte JavaScript-Bibliothek, die häufig zur DOM-Manipulation und Ereignisbehandlung in Webseiten verwendet wird. In jQuery wird die Methode eq() verwendet, um Elemente an einer bestimmten Indexposition auszuwählen. Die spezifischen Verwendungs- und Anwendungsszenarien sind wie folgt. In jQuery wählt die Methode eq() das Element an einer angegebenen Indexposition aus. Indexpositionen beginnen bei 0 zu zählen, d. h. der Index des ersten Elements ist 0, der Index des zweiten Elements ist 1 und so weiter. Die Syntax der eq()-Methode lautet wie folgt: $("s

    See all articles