1.1 标签选择器
需求描述：选择页面中所有的div标签，设置其背景为红色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div>我是div1</div> <div>我是div2</div> <div>我是div3</div> </body> <script> $('div').css('background', 'red'); </script> </html>
效果
1.2 id选择器
需求描述：选择页面中所有id为btn的按钮，设置其背景为红色
<button>按钮1</button> <button id="btn">按钮2</button> <button>按钮3</button>
$('#btn').css('background', 'red');
1.3 class选择器
需求描述：选择页面中class为content的div下所有元素，设置其背景为红色
<div class="content"> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> </div>
$('.content *').css('background', 'red');
1.5、并集选择器
<p>我是段落</p> <button>我是按钮</button> <div>我是div</div> <h1>我是大标题</h1>
$('p,button').css('background', 'red');
1.6 交集选择器
需求描述：选择页面中所有class为red的段落，设置其背景为红色
<p class="red">我是段落1</p> <p class="red">我是段落2</p> <p class="red">我是段落3</p> <div class="red">我是div1</div> <div class="red">我是div2</div> <div class="red">我是div3</div>
$('p.red').css('background', 'red');
