Verwendung und Beispiele für vier jQuery-Selektoren-js-Tutorial-php.cn

Verwendung und Beispiele für vier jQuery-Selektoren

巴扎黑

Freigeben： 2017-06-20 16:31:31

Original

1127 Leute haben es durchsucht

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

-Element aus.

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

-Elemente mit class="intro" aus.

$("p#demo") wählt alle

-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');
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

CSS-Teil

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

.alt{
  background-color:#ccc;
}

Nach dem Login kopieren

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(){
  $('[href="#"]').addClass('heighlight'); 
}

Nach dem Login kopieren

jQuery CSS-Selektor

.addClass() oder .css()

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

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

Nach dem Login kopieren

jQuery Custom Selector

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

function custom(){
  $('tr:odd').addClass('alt');
}

Nach dem Login kopieren

Anhang

Elemente

Selektor	Instanz	Auswählen
*	$(" * ")	Alle Elemente
#id	$("#lastname")	Element mit id="lastname"
.class	$(".intro")	Alle Elemente mit class="intro"
Element	$("p")	Alle -Elemente
. Klasse .class	$(".intro.demo")	Alle Elemente mit class="intro" und class="demo"

:first	$("p:first")	First element
:last	$("p:last")	Das letzte -Element
:even	$(" tr:even" )	Alle geraden
:odd	$("tr:odd")	Alle ungeraden< tr> 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 Titelelemente -
: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 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")	Alle-Elemente
:text	$(":text")	Alle
:password	$(":password")	Alle -Elemente vom Typ="password"
:radio	$(":radio")	Alle -Elemente vom Typ="radio"
:checkbox	$(":checkbox")	Alle -Elemente vom Typ="checkbox"
:submit	$(":submit")	Alle -Elemente vom Typ="submit"
:reset	$ (":reset")	Alle -Elemente vom Typ="reset"
:button	$(":button")	Alle -Elemente vom Typ="button"
:image	$(":image")	Alle -Elemente vom Typ="image"
:file	$(":file")	Alle -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!