jquery 기본 선택기-JS 튜토리얼-php.cn

jquery 기본 선택기

无忌哥哥

풀어 주다： 2018-06-29 11:04:35

원래의

1229명이 탐색했습니다.

jquery 기본 선택기

1 jquery의 선택기는 기본적으로 CSS의 선택기와 동일하므로 CSS에 익숙한 개발자도 쉽게 익힐 수 있습니다. #🎜🎜 ##🎜 🎜#2. 대부분의 CSS 선택자는 jquery에서 직접 사용할 수 있습니다

3. 기본 선택자 또는 항목 선택자라고도 하는 기본 선택자는 jquery #🎜🎜를 제공하는 기능을 가진 간단한 선택자입니다. #

첫 번째 수준 요소는 후속 필터가 작동하는 데 사용됩니다. 태그, ID, 클래스, *

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!