2021-06-28
作者：互联网
一、简介：
JavaScript库：简化JavaScript开发。
主流JavaScript库：jQuery，Vue.js，AngularJS，React等。
jQuery：轻量级JS库，使用简单。核心是选择器，用于获取页面元素。提供了大量高效方法，开发速度大幅提升。
二、jQuery下载与安装：
见该教程：
https://blog.csdn.net/qq_43542011/article/details/118296940
三、jQuery选择实验室：
实现目标：在选择框输入的标签名在下面会有高亮显示
1.打开eclipse，在WebContent目录下新建lab.html文件：
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实验室</title>
<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="https://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>
</body>
</html>
效果：
2.修改：在
对中添加：
<script type="text/javascript" src="js/jquery-3.6.0.js">
//引用jquery
</script>
<script type="text/javascript">
//按钮绑定单击事件
document.getElementById("btnSelect").onclick=function(){
$("a").addClass("highlight"); //增加CSS类，a是当前页面的超链接
}
</script>其中：$("a")是选择器方法。a是选择器表达式
效果：点击选择后，超链接出现高亮
3.如何与文本框输入的内容绑定？
获取文本框内容，把选择器表达式替换成文本框内容。
修改刚刚添加的代码：
<script type="text/javascript" src="js/jquery-3.6.0.js">
//引用jquery
</script>
<script type="text/javascript">
//按钮绑定单击事件
document.getElementById("btnSelect").onclick=function(){
var selector=document.getElementById("txtSelector").value;//value属性表示文本框内容
//jquery
$(selector).addClass("highlight"); //增加CSS类，a是当前页面的超链接
}
</script>效果：
输入a
输入p:
输入input：
总结：jQuery选择器用来帮助选择需要的元素。
4.改善：希望输入新元素时，可以不显示前面的高亮。
只需要在“ $(selector).addClass("highlight"); ”前增加一句“ $("*").removeclass("highlight"); ”如下：
$("*").removeClass("highlight"); //在增加高亮CSS类之前，将所有已有的高亮移除
$(selector).addClass("highlight"); //增加CSS类，a是当前页面的超链接 四、Web页面开发的2个要素：
1.选择HTML页面哪些元素？2.在这些元素上做哪些动作？
五、jQuery选择器
1.用途：用于选中需要操作的页面元素
2.语法（2种）：① jQuery(选择器表达式)
② $(选择器表达式)
3.基本选择器表达式：
| 语法 | 说明 |
| $("#id") | ID选择器，指定id元素的对象 |
| $("标签") | 元素选择器，选择指定标签名的选择器 |
| $(".class") | 类选择器，选择有指定CSS类的元素 |
| $("S1,S2,SN") | 组合选择器，对元素进行组合 |
标签：jQuery,06,元素,28,高亮,2021,highlight,选择器,页面 来源： https://blog.csdn.net/qq_43542011/article/details/118296225