jquery基本選擇器

无忌哥哥原創: 2018-06-29 11:04:351212瀏覽

jquery基本選擇器

1.jquery中的選擇器與css中基本上是一致的,便於熟悉css的開發人員快速掌握

2.絕大多數css選擇器可以在jquery中直接使用

3.基本選擇器,也叫基礎選擇器,或者入口選擇器,簡單選擇器,功能就是向jquery提供

一級元素,供後面的過濾器進行操作,最主要的有四類: tag,id,class,*

<!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>

以上是jquery基本選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何解決使用vue打包時vendor檔案過大或是app.js檔案很大的問題下一篇：如何解決使用vue打包時vendor檔案過大或是app.js檔案很大的問題

看更多