suchen

Heim >Web-Frontend >js-Tutorial >JQuery-Basisselektor

JQuery-Basisselektor

无忌哥哥
无忌哥哥Original
2018-06-29 11:04:351277Durchsuche

jquery-Basisselektor

1 Die Selektoren in jquery sind im Grunde die gleichen wie in CSS, sodass Entwickler, die mit CSS vertraut sind, sich schnell beherrschen können

2 . Die meisten CSS-Selektoren können direkt in jquery

3 verwendet werden. Basisselektoren, auch Basisselektoren oder Eintragsselektoren genannt, sind einfache Selektoren, deren Funktion darin besteht, jquery mit Elementen der ersten Ebene zu versorgen werden für nachfolgende Filter verwendet. Es gibt vier Hauptkategorien: Tag, ID, Klasse, *

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
table, td {
border:1px solid #333;
}
table {
border-collapse: collapse;
margin: 30px auto;
width: 80%;
text-align: center;
}
table caption {
font-size: 1.5em;
margin-bottom: 15px;
}
.bg-orange {
font-weight: bolder;
color: white;
background-color: orange;
}
</style>
</head>
<body>
<table>
<caption>用户信息表</caption>
<tr id="title">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//1. tag标签选择器
// $(&#39;td&#39;).css(&#39;backgroundColor&#39;,&#39;wheat&#39;)
//2.id选择器
//把td上的背景去掉,否则会层叠覆盖
$(&#39;#title&#39;).css(&#39;backgroundColor&#39;,&#39;lightgreen&#39;)
//3.class类选择器
$(&#39;.mark&#39;).addClass(&#39;bg-orange&#39;)
//4.*通配选择符
$(&#39;tr:nth-child(3) ~ *&#39;).css(&#39;backgroundColor&#39;, &#39;pink&#39;)
</script>

Das obige ist der detaillierte Inhalt vonJQuery-Basisselektor. 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：So lösen Sie das Problem, dass die Herstellerdatei oder die Datei app.js zu groß ist, wenn Sie Vue-Pakete verwendenNächster Artikel：So lösen Sie das Problem, dass die Herstellerdatei oder die Datei app.js zu groß ist, wenn Sie Vue-Pakete verwenden

In Verbindung stehende Artikel

Mehr sehen