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>

效果:

2021-06-28

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是选择器表达式

效果:点击选择后,超链接出现高亮

2021-06-28

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

2021-06-28

输入p:
2021-06-28

输入input:
2021-06-28

总结: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") 组合选择器,对元素进行组合

上一篇:ES--highlight(高亮)查询


下一篇:mybtis入门