suchen

Heim >Web-Frontend >js-Tutorial >Verwendung und Beispiele für vier jQuery-Selektoren

Verwendung und Beispiele für vier jQuery-Selektoren

巴扎黑
巴扎黑Original
2017-06-20 16:31:311125Durchsuche

Dieser Artikel gibt Ihnen eine Zusammenfassung der vier Selektoren und Beispiele von jQuery. Ich hoffe, dass er für alle hilfreich ist.

jQuery Element Selector

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

$("p") wählt das e388a4556c0f65e1904146cc1a846bee-Element aus.

$("p.intro") wählt alle e388a4556c0f65e1904146cc1a846bee-Elemente mit class="intro" aus.

$("p#demo") wählt alle e388a4556c0f65e1904146cc1a846bee-Elemente mit id="demo" aus.

Beispielcode:

jquery-Teil


$(document).ready(function(){//页面加载完成后执行
  tagName();
// idName();
// className();
});


function tagName(){
  $('p').addClass('heighlight');
}

function idName(){
  $('#p').addClass('heighlight2');
}
function className(){
  $('p.pClass').addClass('heighlight2');
}

HTML-Teil


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/select.js" ></script>
    <link rel="stylesheet" href="css/select.css" />
  </head>
  <body>
    <p id="p">
      <p>this is my name!!</p>
      <p class="pClass">class is import!</p>
      <a href="#">you cai!!</a>
    </p>
  </body>
</html>

CSS-Teil


.heighlight {
  background-color: blue;
  
}
.heighlight2 {
  background-color: red;
}

.alt{
  background-color:#ccc;
}

jQuery Attributauswahl

Abfrage mit 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-Teil, andere Teile sind die gleichen wie oben. 


$(document).ready(function(){
  attribute();
});

function attribute(){
  $(&#39;[href="#"]&#39;).addClass(&#39;heighlight&#39;); 
}

jQuery CSS-Selektor

.addClass() oder .css()


$(document).ready(function(){
 cssName();
});

function cssName(){
  $(&#39;p&#39;).css("background-color","pink");
}

jQuery Custom Selector


$(document).ready(function(){
 custom();
});

function custom(){
  $(&#39;tr:odd&#39;).addClass(&#39;alt&#39;);
}

Anhang

Selektor Instanz Auswählen
* $(" * ") Alle Elemente
#id $("#lastname") Element mit id="lastname"
.class $(".intro") Alle Elemente mit class="intro"
Element $("p") Allee388a4556c0f65e1904146cc1a846bee-Elemente
. Klasse .class $(".intro.demo") Alle Elemente mit class="intro" und class="demo"
:first $("p:first") Firste388a4556c0f65e1904146cc1a846bee element
:last $("p:last") Das letztee388a4556c0f65e1904146cc1a846bee-Element
:even $(" tr:even" ) Alle geradena34de1251f0d9fe1e645927f19a896e8 Elemente
:odd $("tr:odd") Alle ungeraden868c3f8d39a371013a78a87c30e1b0d8 Elemente
:eq(index) $(" ul li:eq(3)") Das vierte Element in der Liste (Index beginnt bei 0)
:gt(no ) $("ul li:gt(3)") Elemente mit Index größer als 3 auflisten
:lt( no ) $("ul li:lt(3)") Elemente mit einem Index von weniger als 3 auflisten
:not(selector) $("input:not(:empty)") Alle Eingabeelemente, die nicht leer sind
:header $(":header") Alle Titelelemente4a249f0d628e2318394fd9b75b4636b1 - 4e9ee319e0fa4abc21ff286eeb145ecc
:animiert Alle animierten Elemente
:contains(text) $(" :contains('W3School')") Enthält alle Elemente der angegebenen Zeichenfolge
:empty $(":empty") Alle Elemente ohne untergeordnete (Element-)Knoten
:hidden $("p:hidden") Alle ausgeblendeten Die e388a4556c0f65e1904146cc1a846bee Element
:visible $("table:visible") Alle sichtbaren Tabellen
s1,s2,s3 $("th,td,.intro") Alle mit passenden ausgewählten Elementen
[Attribut] $("[href]") Alle Elemente mit href-Attribut
[attribute=value] $("[href='#']") Der Wert aller href-Attribute Elemente gleich „#“
[attribute!=value] $("[href!=' # ']") Alle Elemente, deren href-Attributwert nicht gleich „#“ ist
[attribute$=value] $("[href$='.jpg']") Der Wert aller href-Attribute enthält Elemente, die mit „.jpg“ enden
:input $(":input") Alled5fd7aea971a85678ba271703566ebfd-Elemente
:text $(":text") Alle
:password $(":password") Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="password"
:radio $(":radio") Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="radio"
:checkbox $(":checkbox") Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="checkbox"
:submit $(":submit") Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="submit"
:reset $ (":reset") Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="reset"
:button $(":button") Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="button"
:image $(":image") Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="image"
:file $(":file") Alle d5fd7aea971a85678ba271703566ebfd-Elemente vom Typ="file"
:aktiviert $(":enabled") Alle aktivierten Eingabeelemente
:deaktiviert $(":disabled") Alle deaktivierten Eingabeelemente
:selected $(":selected") Alle ausgewählten Eingabeelemente
:checked $(":checked") Alle ausgewählten Eingabeelemente

Das obige ist der detaillierte Inhalt vonVerwendung und Beispiele für vier jQuery-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Vorheriger Artikel：Einführung in die Verwendung des jQuery-SelektorelementsNächster Artikel：Einführung in die Verwendung des jQuery-Selektorelements

In Verbindung stehende Artikel

Mehr sehen