基本jQuery使用CSS的方法
選擇所有元素
$('*').addClass('line');
使用HTML標籤名稱元素
例如:p、div、a、h2、h1 等
$('p').addClass('blue');
使用 id 屬性元素
$('#list').addClass('red');
相當於JavaScript的document.getElementById('list');
使用 class 屬性元素
$('.item').addClass('green');
相當於JavaScript的document.getElementByClassName('item');
程式範例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS選擇元素</title>
<style type="text/css">
.red{color:red;}
.blue{color:blue;}
.green{color: green;}
.line{border:1px solid #AD14C1}
</style>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$('*').addClass('line');
$('p').addClass('blue');
$('#list').addClass('red');
$('.item').addClass('green');
});
</script>
<body>
<p>HTML 標籤名稱元素</p>
<ol id="list">
<li>你好</li>
<li>什麼</li>
<li class="item">快樂</li>
</ol>
</body>
</html>
留言列表