选择器
基本选择器
| 基本选择器 | 描述 |
|---|---|
$(“元素名”) |
标签选择器 |
$("#id名") |
id选择器 |
$(".类名") |
类选择器 |
$(“选择器1，选择器2，…”) |
并集选择器 |
$( " * " ) |
通用选择器，选择所有元素 |
- 在CSS中使用的选择器，在jQuery中同样可以使用，而且不用做循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
$(function(){
// id选择器
$("#div1").css("color", "blue");
// 类选择器
$(".div").css("color", "green");
// 标签选择器
$("div").css("color", "red");
// 通用选择器
$("*").css("color", "orange");
})
</script>
</head>
<body>
<div id="div1">div1111</div>
<div class="div">div2222</div>
<div class="div">div3333</div>
<div>div4444</div>
<p>ppp11111</p>
<span>span11111</span>
</body>
</html>
ID选择器实现原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
window.onload = function(){
function $(str){
// 获取从指定的下标开始到结束的字符串
var ID = str.substring(1);
var obj = document.getElementById(ID);
obj.css = function(key, value){
// this.style.key = value; 不可以通过这种方式添加及赋值，这样key会是一个固定的对象属性名，且不是一个参数
this.style[key] = value;//该方式才是正确传参
}
return obj;
}
$("#div1").css("color", "blue");
$("#div1").css("fontSize", "30px");
}
</script>
</head>
<body>
<div id="div1">div1111</div>
</body>
</html>
多种选择器实现原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
window.onload = function(){
function $(str){
//获取第一个字符
var fir = str.substring(0, 1);
//获取第二个及后面的字符
var sec = str.substring(1);
// 判断到底是哪种选择器
if(fir == "#"){
var obj = [document.getElementById(sec)];//转为数组，和下面保持一致
}else if(fir == "."){
var obj = document.getElementsByClassName(sec);//获取的是一个数组
}else{
var obj = document.getElementsByTagName(str);//所有字符
};
obj.css = function(key, value){
for (var i = 0; i < obj.length; i++){
this[i].style[key] = value;
}
}
return obj;
}
$("#div1").css("color", "blue");
$(".ddd").css("color", "red");
$("p").css("color", "orange");
$("*").css("color", "green");
}
</script>
</head>
<body>
<div id="div1">div1111</div>
<div class="ddd">div2222</div>
<p>ppp3333</p>
<span>span4444</span>
</body>
</html>
后代、并集、交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
$(function(){
// 1、后代选择器，所有指定的子元素
$("#div1 p").css("color", "red");
$("#div2 .ddd").css("color", "blue");
// 2、并集选择器
$("#div1 p, #div2 div").css("color", "green");
$("#div1 .ddd, #div2 p").css("color", "orange");
// 3、交集选择器
$("#div1 p.ddd").css("fontSize", "30px");
})
</script>
</head>
<body>
<div id="div1">
<div class="ddd">dddd1111</div>
<div class="ddd">dddd2222</div>
<div class="ddd">dddd3333</div>
<p class="ddd">pppppppppp44444</p>
<p>pppppppppp55555</p>
</div>
<hr>
<div id="div2">
<div class="ddd">dddd6666</div>
<div class="ddd">dddd7777</div>
<div class="ddd">dddd8888</div>
<p>ppppppppppp99999</p>
<p>ppppppppppp00000</p>
</div>
</body>
</html>
层级选择器
层级选择器就是通过元素之间的层级关系获取元素。常见的层级关系包括：父子、后代、兄弟、相邻
| 层级选择器 | 描述 |
|---|---|
$(“M N”) |
后代选择器，选择M元素内部后代所有的N元素（包括子代后的N元素等） |
$(“M>N”) |
子代选择器，选择M元素内部子代N元素（不包括子代后的N元素） |
$(“M~N”) |
兄弟选择器，选择M元素后所有的同级N元素 |
$(“M+N”) |
相邻选择器，选择M元素相邻的下一个元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_层级选择器</title>
<script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<h4>层级选择器</h4>
<p>层级选择器，就是通过元素之间的层次关系来获取元素。常见的层次冠词包括：
父子、后代、兄弟、相邻
</p>
<ul>
<li id="li1">$("M N")
<p>后代选择器，选择M元素内部后代N元素</p>
</li>
<li id="li2">$("M>N")
<p>子代选择器，选择M元素内部子代N元素</p>
</li>
<li id="li3">$("M~N")
<p>兄弟选择器，选择M元素后所有的同级N元素</p>
</li>
<li id="li4">$("M+N")
<p>相邻选择器，选择M元素相邻的下一个N元素</p>
</li>
</ul>
</div>
<script>
// $("div p").css("color", "red");
// $("div>p").css("color", "orange");
$("#li2~li").css("color", "blue");
// $("#li2+li").css("color", "green");
</script>
</body>
</html>
属性选择器
HTML元素通常包含很多属性，jQuery的属性选择器就是把各种属性作为选择器
| 属性选择器 | 描述 |
|---|---|
$(“selector[attr]”) |
选择有指定属性的元素 |
$("selector[ attr= ’ value’ ] ") |
选择指定属性是某个特定值的元素 |
$(“selector[attr != ‘value’]”) |
选择指定的属性，但不是某个特定值的元素 |
$(“selector[attr *= ‘value’ ]”) |
选择指定的属性包含某些值的元素 |
$(“selector[ attr ^= ‘value’ ]”) |
选择指定的属性以某些值开始的元素 |
$(“selector[ attr $= ‘value’ ]”) |
选择指定的属性以某些值结尾的元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_属性选择器</title>
<script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="attr">
<h4>属性选择器</h4>
<p class="intro">HTML元素通常包含很多属性，jQuery的属性选择器就是把各种属性作为选择器</p>
<ul>
<li class="sel-1">$("selector[attr]")：选择包含给定属性的元素</li>
<li class="sel-1">$("selector[attr = 'value']")：选择给定属性是某个特定值的元素</li>
<li class="_sel">$("selector[attr ！= 'value']")：选择所有含有指定的属性，但属性不等于特定值的元素</li>
<li class="_sel">$("selector[attr *= 'value']")：选择给定的属性是以包含某些值的元素</li>
<li class="_sel2">$("selector[attr ^= 'value']")：选择给定的属性是以某些值开始的元素</li>
<li class="_sel2">$("selector[attr $= 'value']")：选择给定的属性是以某些值结尾的元素</li>
</ul>
</div>
<script>
//选择含有class属性的元素
// $("[class]").css("color", "red");
//$("[id]").css("color", "blue");
//选择含有class属性的li元素
// $("li[class]").css("color", "blue");
//选择class属性值为intro的元素
// $("[class = 'intro']").css("color", "green");
// $(".intro").css("color", "green");//两者效果相同
// $("div [class != intro]").css("color", "red");
//选择class属性值是以包含sel的元素
// $("div [class *= 'sel']").css("color", "red");
//选择class属性值是以_开始的元素
// $("[class ^= '_']").css("color", "red");
//选择class属性值是以2结尾的元素
$("[class $= '2']").css("color", "red");
</script>
</body>
</html>
伪类选择器
伪类选择器也称作过滤选择器
jQuery伪类选择器都是以英文冒号：开头，可以在冒号前加上限定元素，和css中的伪类选择器用法相似，使得我们可以快速地选择我们想要获取的元素
简单伪类选择器
| 伪类选择器 | 描述 |
|---|---|
:not(selector) |
选择除了某个选择器之外的所有元素 |
:first或first() |
选择某元素的第一个元素（非子元素） |
:last或last() |
选择某元素的最后一个元素（非子元素） |
:odd |
选择某元素的索引值为奇数的元素，从0开始 |
:even |
选择某元素的索引值为偶数的元素，从0开始 |
:eq(index) |
选择给定索引值的元素，索引值index是一个整数，从0开始 |
:lt(index) |
选择所有小于索引值的元素，索引值index是一个整数，从0开始 |
:gt(index) |
选择所有大于索引值的元素，索引值index是一个整数，从0开始 |
:header |
选择h1~h6的标题元素 |
:focus |
选取当前具有焦点的元素 |
:root |
选择页面的根元素 |
:animated |
选择所有正在执行动画效果的元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_简单伪类选择器</title>
<script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<h2>伪类选择器</h2>
<p>jQuery伪类选择器都是以英文冒号：开头，和css中的伪类选择器用法相似，使得我们可以快速地选择我们想要获取的元素</p>
<hr>
<h3>简单伪类选择器</h3>
<ul>
<li id="one">：not(selector) 选择除了某个选择器之外的所有元素</li>
<li>：first或first() 选择某元素的第一个元素（非子元素）</li>
<li>：last或last() 选择某元素的最后一个元素（非子元素）</li>
<li>：odd 选择某元素的索引值为奇数的元素</li>
<li>：even 选择某元素的索引值为偶数的元素</li>
<li>：eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始</li>
<li>：lt(index) 选择所有小于索引值的元素，索引值index是一个整数，从0开始</li>
<li>：gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始</li>
<li>：header 选择h1~h6的标题元素</li>
<li>：focus 选取当前具有焦点的元素</li>
<li>：root 选择页面的根元素</li>
<li>：animated 选择所有正在执行动画效果的元素</li>
</ul>
<input type="text" value="测试">
</div>
<script>
$(function(){
// $("li:not(#one)").css("color", "red");
// $("li:first").css("color", "red");
// $("li:last").css("color", "blue");
// $("li:odd").css("color", "red");
// $("li:even").css("color", "blue");
// $("li:eq(6)").css("color", "orange");
// $("li:lt(6)").css("color", "blue");
// $("li:gt(6)").css("color", "red");
// $(":header").css("color", "red");
// $("input").focus();
// $(":focus").css("background-color", "red");
// $(":root").css("color", "blue");
})
</script>
</body>
</html>
子元素伪类选择器
| 子元素伪类选择器 | 描述 |
|---|---|
:first-child |
选择父元素的第一个子元素 |
:last-child |
选择父元素的最后一个子元素 |
:nth-child(n) |
选择父元素下的第n个元素或奇偶元素，n的值为“整数 | odd | even” |
:only-child |
选择父元素中唯一的子元素（该父元素只有一个子元素） |
:first-of-type |
选择同元素类型的第一个同级兄弟元素 |
:last-of-type |
选择同元素类型的最后一个同级兄弟元素 |
:nth-of-type |
选择同元素类型的第n个同级兄弟元素，n的值可以是“整数 | odd | even” |
:only-of-type |
匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_子元素伪类选择器</title>
<script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
<div><h3>简单伪类选择器</h3></div>
<ul>
<li id="one">：not(selector) 选择除了某个选择器之外的所有元素</li>
<li>：first或first() 选择某元素的第一个元素（非子元素）</li>
<li>：last或last() 选择某元素的最后一个元素（非子元素）</li>
<li>：odd 选择某元素的索引值为奇数的元素</li>
<li>：even 选择某元素的索引值为偶数的元素</li>
<li>：eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始</li>
<li>：lt(index) 选择所有小于索引值的元素，索引值index是一个整数，从0开始</li>
<li>：gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始</li>
<li>：header 选择h1~h6的标题元素</li>
<li>：focus 选取当前具有焦点的元素</li>
<li>：root 选择页面的根元素</li>
<li>：animated 选择所有正在执行动画效果的元素</li>
</ul>
<h3>子元素伪类选择器</h3>
<ul>
<li>：first-child 选择父元素的第一个子元素</li>
<li>：last-child 选择父元素的最后一个子元素</li>
<li>：nth-child(n) 选择父元素下的第n个元素或奇偶元素，n的值为“整数 | odd | even”</li>
<li>：only-child 选择父元素中唯一的子元素（该父元素只有一个子元素）</li>
<li>：first-of-type 选择同元素类型的第一个同级兄弟元素</li>
<li>：last-of-type 选择同元素类型的最后一个同级兄弟元素</li>
<li>：nth-of-type 选择同元素类型的第n个同级兄弟元素，n的值可以是“整数 | odd | even”</li>
<li>：only-of-type 匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）</li>
</ul>
</div>
<script>
//区别：first-child可以选择多个
// $("li:first").css("color", "red");
// $("li:first-child").css("color", "blue");
// $("ul:first-child").css("color", "blue");//无匹配，以为ur不是父元素的一个子元素
// $("li:nth-child(odd)").css("color", "orange");
// $("div :only-child").css("color", "red");
// $("h3:first-of-type").css("color", "red");
</script>
</body>
</html>
可见性伪类选择器
| 可见性伪类选择器 | 描述 |
|---|---|
:hidden |
选取所有不可见元素（不仅包含样式为display：none所有元素，而且还包括属性type=“hidden”和样式为visibility：hidden的所有元素） |
:visible |
选取所有可见元素 |
内容伪类选择器
内容伪类选择器就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位
| 内容伪类选择器 | 描述 |
|---|---|
:contains(text) |
选择包含给定文本内容的元素 |
:has(selector) |
选择含有选择器所匹配元素的元素 |
:empty |
选择所有不包含子元素或者不包含文本的元素 |
:parent |
选择含有子元素或者文本的元素（跟：empty相反） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_可见性和伪类选择器</title>
<script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
<style type="text/css">
/* ul{display: none;} */
/* ul{visibility: hidden;} */
</style>
</head>
<body>
<div>
<h1>h1</h1>
<p>p1 p标签表示段落</p>
<p>p2 <span>我是span</span></p>
<span>span1</span>
<span>span2</span>
<br>
<ul>
<li>1</li>
<li>2</li>
<li>3 <span>我在li标签里</span></li>
<li>4</li>
<li>5 <p>pppp</p></li>
<li>6</li>
<li>7</li>
<li></li>
<li></li>
</ul>
</div>
<input type="button" id="btn1" value="隐藏">
<input type="button" id="btn2" value="显示">
<script>
$(function(){
// 可见性伪类选择器
//隐藏ul内容
// $("ul").css("display", "none");
// $("ul").css("visibility", "hidden");
$("#btn1").click(function(){
$("div :visible").css("display", "none");
})
$("#btn2").click(function(){
$("ul:hidden").css("display", "block");
})
})
//内容伪类选择器
$(function(){
$("p:contains(段落)").css("background", "red");
$("p:has(span)").css("background", "blue");
$("li:empty").css("background", "orange");
$("li:parent").css("background", "green");
})
</script>
</body>
</html>
表单伪类选择器
| 表单伪类选择器 | 描述 |
|---|---|
:input |
选择所有input元素 |
:button |
选择所有type=‘button’的input或button元素 |
:submit |
选择所有type=‘submit’的input元素 |
:reset |
选择所有type=‘reset’的input元素 |
:text |
选择所有单行文本框 |
:textarea |
选择所有多行文本框 |
:password |
选择所有密码文本框 |
:radio |
选择所有单选按钮 |
:checkbox |
选择所有复选框 |
:image |
选择所有图像域 |
:hidden |
选择所有隐藏域 |
:file |
选择所有文件域 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_表单伪类选择器</title>
<script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
<form action="">
<p>用户名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p>爱好：<br>
<input type="radio" name="rad" value="A">新闻
<input type="radio" name="rad" value="B">小说
<input type="radio" name="rad" value="C">音乐
</p>
<p>上传文件: <input type="file"> </p>
<p>
<input type="reset" value="重置">
<input type="submit" value="提交">
<input type="button" value="input button">
<button>button button</button>
</p>
</form>
<script>
// $(":input").css("background", "pink");
// $(":button").css("background", "green");
// $(":submit").css("background", "blue");
$(":text").css("background", "#ccc");
$(":password").css("background", "#a00");
// $(":radio").hide(3000);
// $(":radio").show(3000);
$(":file").css("background", "orange");
</script>
</body>
</html>
表单属性伪类选择器
| 表单属性伪类选择器 | 描述 |
|---|---|
:enabled |
选择所有可用input元素 |
:disabled |
选择禁用的input元素 |
:selected |
选择所有被选中的option元素 |
:checkbox |
选择所有被选中的表单元素，一般用于radio和checkbox |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_表单伪类选择器</title>
<script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<body>
<form action="">
<p>用户名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p>爱好：<br>
<input type="radio" name="rad" value="A">新闻
<input type="radio" name="rad" value="B">小说
<input type="radio" name="rad" value="C">音乐
</p>
<p>
<input type="reset" value="重置" disabled>
<input type="submit" value="提交">
<input type="button" id="btn" value="隐藏单选框">
</p>
<select onchange="selVal()">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</form>
<script>
// $(":enabled").css("background", "red");
// $(":disabled").css("background", "green");
$("#btn").click(function(){
$(":checked").hide();
})
function selVal(){
var str = $(":selected").val();
alert(str);
}
</script>
</body>
</html>
筛选方法
筛选匹配表达式的元素
filter()：筛选出与指定表达式匹配的元素集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_属性选择器</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#box div").filter("#pink1, .pink2").css("color", "red");
})
</script>
</head>
<body>
<div id="box">
<div>筛选表达式匹配的元素1</div>
<div id="pink1">筛选表达式匹配的元素2</div>
<div class="pink2">筛选表达式匹配的元素3</div>
<div>筛选表达式匹配的元素4</div>
<div>筛选表达式匹配的元素5</div>
</div>
</body>
</html>
移除匹配表达式的元素
not()：移除与指定表达式匹配的元素集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_属性选择器</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#box div").not("#pink1, .pink2").css("color", "red");
})
</script>
</head>
<body>
<div id="box">
<div>筛选表达式匹配的元素1</div>
<div id="pink1">筛选表达式匹配的元素2</div>
<div class="pink2">筛选表达式匹配的元素3</div>
<div>筛选表达式匹配的元素4</div>
<div>筛选表达式匹配的元素5</div>
</div>
</body>
</html>
筛选子元素及后代元素
children()：筛选出匹配表达式的子元素，只考虑子元素而不考虑其他后代元素
find()：筛选出匹配表达式的后代元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_属性选择器</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
$(function(){
// 只匹配子元素
$("#box").children("#pink1, .pink2").css("color", "red");
// 匹配所有后代元素
$("#box").find(".pink2").css("color", "blue");
})
</script>
</head>
<body>
<div id="box">
<div>筛选表达式匹配的元素1</div>
<div id="pink1">筛选表达式匹配的元素2</div>
<div class="pink2">筛选表达式匹配的元素3</div>
<div>筛选表达式匹配的元素4</div>
<div>
<span class="pink2">筛选表达式匹配的元素5</span>
</div>
</div>
</body>
</html>
筛选父元素及祖先元素
parent()：筛选出匹配表达式的父元素，只考虑父元素而不考虑祖先元素
parents()：筛选出匹配表达式的祖先元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_属性选择器</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
$(function(){
// 筛选出匹配表达式的父元素，只考虑父元素而不考虑祖先元素
// $("div.ddd").parent().find("span").css("color", "red").css("border", "1px solid red");
// $("span").parent(".div1").children("#ppp").css("color", "red");
//筛选出匹配表达式的祖先元素
// $("span").parents().css("border", "1px solid red").css("margin", "5px");
$("span").parents("#box").find("[class=aaa]").css("border", "1px solid red").css("margin", "5px");
})
</script>
</head>
<body>
<div id="box">
<div class="div1">
<p id="ppp">筛选表达式匹配的元素1</p>
<span class="aaa">筛选表达式匹配的元素2</span>
<p>
<span class="bbb">筛选表达式匹配的元素3</span>
</p>
</div>
<div class="div2">
<p>筛选表达式匹配的元素4</p>
<span class="ccc">筛选表达式匹配的元素5</span>
<div class="ddd">筛选表达式匹配的元素6</div>
</div>
</div>
</body>
</html>
筛选兄弟元素
siblings()：筛选出匹配表达式的所有兄弟元素
prevAll()：筛选出前面所有匹配表达式的兄弟元素
prev()：筛选出紧邻的前一个匹配表达式的兄弟元素
nextAll()：筛选出后面所有匹配表达式的兄弟元素
next()：筛选出紧邻的后一个匹配表达式的兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器_属性选择器</title>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
$(function(){
// 筛选出匹配表达式的所有兄弟元素
// $(".aaa").siblings().css("border", "1px solid red");
// $(".aaa").siblings("div").css("border", "1px solid red");
// 筛选出前面所有匹配表达式的兄弟元素
// $(".aaa").prevAll().css("border", "1px solid red");
// $(".aaa").prevAll("div").css("border", "1px solid red");
// 筛选出紧邻的前一个匹配表达式的兄弟元素
// $(".aaa").prev().css("border", "1px solid red");
// 筛选出后面所有匹配表达式的兄弟元素
// $(".aaa").nextAll().css("border", "1px solid red");
// $(".aaa").nextAll("div").css("border", "1px solid red");
// 筛选出紧邻的后一个匹配表达式的兄弟元素
$(".aaa").next().css("border", "1px solid red");
})
</script>
</head>
<body>
<div id="box">
<div class="div1">
<div>div嘿嘿嘿嘿</div>
<p id="ppp">筛选表达式匹配的元素1</p>
<span class="aaa">筛选表达式匹配的元素2</span>
<p>
<span class="bbb">筛选表达式匹配的元素3</span>
</p>
<div>div哈哈哈哈</div>
</div>
</div>
</body>
</html>