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

Change Content

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（）方法

  });

});

 

这是段落中的粗体文本。

显示文本

显示 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

显示 href 值

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:

设置文本

设置 HTML

设置值

 

 

 

 

 

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 + ")";

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

  });

});

这是粗体文本。

这是另一段粗体文本。

显示旧/新文本

显示旧/新 HTML

设置属性 - attr()

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

下面的例子演示如何改变（设置）链接中 href 属性的值：

<script></script>

$(document).ready(function(){

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

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

  });

});

W3School.com.cn

改变 href 值

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

改变 href 值

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
ccccccc
3. Text anhängen

Liste anhängen

Mehrere neue Elemente über append() hinzufügen und prepend()-Methoden

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

Die Methoden append() und prepend() können jedoch über Parameter eine unbegrenzte Anzahl neuer Elemente empfangen. Text/HTML kann über jQuery (wie im Beispiel oben) oder über JavaScript-Code und DOM-Elemente generiert werden.

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

");

});

});

Text vor dem Bild hinzufügen

Text nach dem Bild hinzufügen

Mehrere neue Elemente über die Methoden after() und before() 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.

function afterText()

{

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

}

Text hinter dem Bild hinzufügen

jQuery - Elemente löschen

Elemente/Inhalte 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

Div-Elemente löschen

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.

Entfernen Sie alle p-Elemente mit class="italic"

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