Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie die grundlegende Syntax von jQuery

一个新手
Freigeben: 2017-09-29 09:53:01
Original
1378 Leute haben es durchsucht

1. attr()

attr() Methode legt die Attribute des Elements fest oder gibt sie zurück.

attr(Attribute name):Den Wert des Elementattributnamens abrufen.

attr (Attributname, Attributwert): Legen Sie den Wert des Elementattributnamens fest.

Beispiel:


<a href=”http://127.0.01” id =”a1”>点我就变</a>
   <p>我改变后的地址是:<span id=”tip”></span></p>
   <script type=”text/javascript”>      
   $(“#a1”).attr(“href”,”www.imooc.com”);
       var $url = $(“a1”).attr(“href”);
        $(“#tip”).html($url);   </script>
Nach dem Login kopieren

2. html(), text()

html():Rufen Sie den HTML-Inhalt des Elements ab, und der Formatcode des Originaltexts wird ebenfalls erfasst .

text():Ruft den HTML-Inhalt des Elements ab nicht erfasst.

Wenn die Methode Parameter enthält, bedeutet dies, dass der Parameterwert auf den Elementinhalt festgelegt ist.

Beispiel:


<p id=”html”></p>
<p id=”text”></p>
<script type=”text/javascript”>  
var $content=”<b>你好</b>”;  
$(“#html”).html($content);
  $(“#text”).text($content);</script>
Nach dem Login kopieren

3. addClass(), css()

addClass(): betreibt den Stil im Element und der Parameter ist der Stilname des hinzugefügten Elements.

css(): Schreiben Sie den Attributinhalt des Stils direkt in Klammern.

Beispiel:


<p id=”content”>我穿了一件红衣</p>   …
   $(#content”).css({“background-color”:”red”,”color”:”white”});
Nach dem Login kopieren

4. removeAttr(), removeClass()

removeAttr(name): implementiert den Attributnamen des entfernten Elements.

removeClass(class):Der Stilname, der das entfernte Element implementiert.

Beispiel:


<p id=”content” class=”blue white”>我脱下了一件蓝衣</p>…
$(“#content”).removeClass(“blue”,”white”);
Nach dem Login kopieren

5 🎜>append(content): Fügt Inhalt an das angegebene Element an. Der Inhaltsparameter kann ein Zeichen, ein HTML-Element-Tag oder eine Funktion sein, die einen Zeichenfolgeninhalt zurückgibt.

Beispiel:


6. appendTo()
function rethtml(){   
var $html = “<p id=”test” title=”hi”>我是调用函数创建的</p>”  
return $html;
}
$(“body”).append(rethtml());
Nach dem Login kopieren

appendTo():

Inhalt in das angegebene Element einfügenVerwenden Sie das Format

:$(content).appendTo( selector), content stellt den Inhalt dar, der eingefügt werden muss, und der Parameter selector stellt das ausgewählte Element dar. Beispiel:


7
<p>
  <span class=”green”>小乌龟</span>
</p> var $html = “<span class=”red”>小青蛙</span>
 $($html).appendTo(“p”);
Nach dem Login kopieren

before():

Inhalt vor dem Element einfügen,

Format

:

$(selector).before(content.after():

Inhalt nach dem Element einfügen,

Format

:

$(selector).after(content) Beispiel:


8. clone()

<span class=”green”>交个朋友吧!</span>var $html = “<span class=”red”>兄弟</span>”
$(“.green”).after($html);
Nach dem Login kopieren

clone():

Erzeuge eine Kopie des ausgewählten Elements,

Format

:

$(selector).clone(),selector

Kann ein Element oder

HTMLInhalt sein. Beispiel:


9. replaceWith(), replaceAll()

<span class=”green”>交个朋友吧!</span>
$(“body”).append($(“.green”).clone());
Nach dem Login kopieren

replaceWith():

Ersetzen Sie das Element oder den Inhalt im Element

,Format

:

$(selector).replaceWith(content) replaceAll():

Ersetze das Element oder den Inhalt im Element

,Format

:

$(content).replaceAll(selector)Beispiel:


10. wrap(), wrapInner()

<span class=’green’ title=’hi’>我是屌丝</span>var $html = “<span class=’red’ title=’hi’>我是土豪</span>”;
$($html).repalceAll(“.green”);
Nach dem Login kopieren

wrap():

wird verwendet, um das Element selbst zu umschließen,

Format

:

$(selector).wrap(wrapper)wraplnner():

wird verwendet um den Inhalt in das Element einzuschließen,

Format:

$(selector).wrapInner(wrapper)

wrapper参数为包裹元素的格式

例子:


<span class=”red” title=’hi’>我的身体有点歪</span>
$(“.red”).wrapInner(“<b></b>”);
Nach dem Login kopieren

十一、each()

each():遍历指定的元素集合,通过回调函数返回遍历元素的序列号,

格式:$(selector).each(function(index))

参数function为遍历时的回调函数,index为遍历元素的序列号,从0开始。

例子:


<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
$(“span”).each(function(index){ if(index == 1){
$(this).attr(“class”,”red”);
}
});
Nach dem Login kopieren

十二、remove()、empty()

remove():删除元素本身和子元素,通过添加过滤参数指定需要删除的某些元素;

empty():只删除所选元素的子元素

例子:


<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
<span class=”green”>香蕉</span>
$(“span”).empty(“.green”);
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die grundlegende Syntax von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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