JQuery下载链接：jQuery下载
/*
id选择器使用"#id值"进行选择
// 给id=btnSelect的元素添加高亮类 id选择器
$("#btnSelect").addClass("highlight");
css选择器使用".css类名"进行选择
// 给class = myclass的元素添加高亮类 CSS类选择器
$(".myclass").addClass("highlight");
标签选择器使用标签名进行选择
$("p").addClass("highlight");
组合选择器 对元素进行组合
$("p,.myclass,input,#btnSelect").addClass("highlight");
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery实验室</title>
<script src="js/jquery-3.5.1.js"></script>
<style>
.myclass {
font-style: italic;
color: darkblue;
}
/* 高亮CSS类 */
.highlight {
color: red;
font-size: 30px;
background: lightblue;
}
</style>
</head>
<body>
<div class="section">
<h2>JQuery选择器实验室</h2>
<input style="height: 24px" id="txtSelector" />
<button id="btnSelect" style="height: 30px;">选择</button>
<hr>
<div>
<p id="welcome">欢迎来带选择器实验室</p>
<ul>
<li>搜索引擎：
<a href="http://www.baidu.com">百度</a>
<span>
<a style="color: darkgreen;" href="http://www.so.com">360</a>
</span>
</li>
<li>电子邮箱：
<a href="http://mail.163.com">网易邮箱</a>
<span>
<a style="color: darkgreen;" href="http://mail.qq.com">QQ邮箱</a>
</span>
</li>
<li>中国名校：
<a href="http://www.tsinghua.edu.cn">清华大学</a>
<span>
<a style="color: darkgreen;" href="http://www.pku.edu.cn">北京大学</a>
</span>
</li>
</ul>
<span class="myclass">我是拥有myclass类的span标签</span>
<p class="myclass">我是拥有myclass类的p标签</p>
<form id="info" action="#" method="GET">
<div>
用户名： <input type="text" name="uname" value="admin">
密码：<input type="password" name="upsd" value="123456">
</div>
<div>
婚姻状况：<select id="marital_status">
<option value="1">未婚</option>
<option value="2">已婚</option>
<option value="3">离异</option>
<option value="4">丧偶</option>
</select>
</div>
<div class="left clear-left">
<input type="submit" value="提交" />
<input type="reset" value="重置">
</div>
</form>
</div>
</div>
<script>
/*
id选择器使用"#id值"进行选择
// 给id=btnSelect的元素添加高亮类 id选择器
$("#btnSelect").addClass("highlight");
css选择器使用".css类名"进行选择
// 给class = myclass的元素添加高亮类 CSS类选择器
$(".myclass").addClass("highlight");
标签选择器使用标签名进行选择
$("p").addClass("highlight");
组合选择器 对元素进行组合
$("p,.myclass,input,#btnSelect").addClass("highlight");
*/
document.getElementById("btnSelect").onclick = function () {
var selector = document.getElementById("txtSelector").value;
//jQuery的选择器
//选择器
// 给所有的元素中拥有高亮的class去除掉
$("*").removeClass("highlight");
// 给input中输入的元素添加高亮的class
$(selector).addClass("highlight");
}
</script>
</body>
</html>
评论区