jQuery

最新推荐文章于 2023-05-31 16:56:02 发布

有何不可有

最新推荐文章于 2023-05-31 16:56:02 发布

阅读量198

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_43542011/article/details/118296225

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、简介：

JavaScript库：目的是简化JavaScript开发，由第三方厂商开发。
主流JavaScript库：jQuery，Vue.js，AngularJS，React等。
jQuery：轻量级JS库，使用简单。核心是选择器，用于获取页面元素。提供了大量高效方法，开发速度大幅提升。

二、jQuery下载与安装：

下载见该教程：https://blog.csdn.net/qq_43542011/article/details/118296940
安装：在WebContent目录下新建名为js的文件夹，把jquery文件复制粘贴到其中，如图：

三、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>中添加：

   	<!-- 首先要引用jquery -->
	<script type="text/javascript" src="js/jquery-3.6.0.js">
	</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")	组合选择器，对元素进行组合

例：

修改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>
/*css类*/
.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>
	
	<!-- 首先要引用jquery -->
	<script type="text/javascript" src="js/jquery-3.6.0.js"></script>  	
	<script type="text/javascript">
	/* id选择器用"#id值"进行选择，css选择器用".css"进行选择。 */
	$("#btnSelect").addClass("highlight");  /* 选择器表达式以id获取对象等价于下面 */
	$("#marital_status").addClass("highlight");  
	//按钮绑定单击事件
	  document.getElementById("btnSelect").onclick=function(){
		var selector=document.getElementById("txtSelector").value;//value属性表示文本框内容
		//jquery选择器方法
		$("*").removeClass("highlight"); //在增加高亮CSS类之前，将所有已有的高亮移除
		$(selector).addClass("highlight");  //增加CSS类，a是当前页面的超链接  	
	  }  
	</script>
</body>
</html>

4.层叠选择器：

层叠选择器是根据元素的位置关系来获取元素的选择器表达式。

语法	说明
$("ancestor descendant")	后代选择器（选中父节点下面的所有子节点）
$("ancestor>descendant")	子选择器（只选中父节点的直接子节点）
$("prev~sinlings")	兄弟选择器（选中前面节点之后的所有符合要求的同级节点）

5.属性选择器：

属性选择器是根据元素的属性值来选择元素的选择器表达式。
在原有选择器后添加中括号。

语法	说明
$("selector[attribute=value]")	选中属性值等于具体值的组件（精准匹配）
$("selector[attribute^=value]")	选中属性值以某值开头的组件（头匹配）
$("selector[attribute$=value]")	选中属性值以某值结尾的组件（尾匹配）
$("selector[attribute*=value]")	选中属性值包含某值的组件

注意属性选择器只会匹配明确写了该属性的组件。

例：

6.位置选择器（了解）：

位置选择器是指通过位置获取指定的元素，如“获取第2个元素”。

语法	说明
$("selector:first")	获取第一个元素
$("selector:last")	获取最后一个元素
$("selector:even")	获取偶数位置的元素（从0开始）
$("selector:odd")	获取奇数位置的元素（从0开始）
$("selector:eq(n)")	获取指定位置的元素（从0开始）

例：

7.表单选择器：

表单选择器是获取表单元素的简化形式，如：获取所有文本框。

语法	说明
$("selector:input")	所有输入元素
$("selector:text")	获取文本框
$("selector:password")	获取密码框
$("selector:submit")	获取提交按钮
$("selector:reset")	获取重置按钮

注意与属性选择器相对，只要有该属性（即使未明确书写），也会被选中。

例：

六、操作元素属性：

获取或设置元素属性：attr(name|properties|key)
移除元素属性：removeAttr(name)

注意获取属性值时，会返回第一个符合要求的属性值。而设置属性值时，是将所有选中的元素的属性值进行赋值。

例：

Sample1.html:

<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作元素属性</title>

<style>
/*css类*/
.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>

	<!-- 首先要引用jquery -->
	<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
	<script type="text/javascript">
		var href_attr = $("a[href*=163]").attr("href");
		alert(href_attr);
		$("a[href*='163']").attr("href", "http://www.163.com");
		$("a").removeAttr("href");
	</script>
</body>
</html>

七、操作元素的CSS样式：

获取或设置匹配元素的样式属性：css()
为每个匹配的元素添加指定的类名：addClass()
从所有匹配的元素中删除全部或指定的类：removeClass()

例：

Sample2.html:

<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作元素属性</title>

<style>
/*css类*/
.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>

	<!-- 首先要引用jquery -->
	<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
	<script type="text/javascript">
		$("a").css("color","red");  /* 将当前页面所有超链接的文本变成红色 */
		$("a").css({"font-weight":"bold","font-style":"italic"});  /* 同时设置多个属性值（用类似JSON的格式） */
		var color=$("a").css("color");
		alert(color);
		$("li").addClass("highlight myclass");
		$("p").removeClass("myclass");
	</script>
</body>
</html>

八、设置元素内容：

获取或设置输入项的值：val()
获取或设置元素的纯文本：text()
获取或设置元素内部的HTML：html()

例：

Sample3.html:

<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作元素属性</title>

<style>
/*css类*/
.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>

	<!-- 首先要引用jquery -->
	<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
	<script type="text/javascript">
		$("input[name='uname']").val("administrator");
		var x=$("input[name='uname']").val();  /* 不写参数表示获取 */
		alert(x);
		//text与html方法最大区别是：对文本中的html标签是否进行转义
		$("span.myclass").text("<b>中国健儿加油！</b>");
		$("p.myclass").html("<b>中国只拿干净金牌！</b>");
	</script>
</body>
</html>

九、jQuery事件处理方法：

为选中的页面元素绑定单击事件：on("click",function)
绑定事件的简写形式：click(function)
处理方法中提供了event参数来包含事件的相关信息

鼠标事件

键盘事件

表单事件

文档/窗口事件

click

（单击）

keypress

（键盘完整按下弹起）

submit

（表单提交）

load

（文档加载）

dblclick

（双击）

keydown

（键盘按下）

change

（表单输入项内容发生变化）

resize

（文档/窗口尺寸发生变化）

mouseenter

（鼠标移入）

keyup

（键盘弹起）

focus

（表单输入项获得焦点）

scroll

（窗口滚动）

mouseleave

（鼠标移出）

blur

（表单输入项失去焦点）

unload

（窗口关闭或卸载）

mouseover

（鼠标在其上移动）

例：
Sample4.html:

<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作元素属性</title>

<style>
/*css类*/
.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>

	<!-- 首先要引用jquery -->
	<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
	<script type="text/javascript">
	
	    //参数2是匿名函数
		$("p.myclass").on("click",function(){
			//$(this)指当前事件产生的对象
			$(this).css("background-color","yellow");
		})
		//简化版：
		$("span.myclass").click(function(){
			$(this).css("background-color","lightgreen");
		})
		//按空格时变红色
		$("input[name='uname']").keypress(function(event){
			console.log(event);
			//通过event获取事件信息
			if(event.keyCode==32){  
				$(this).css("color","red");
			}
		})
	</script>
</body>
</html>

通过event属性获取事件信息：

有何不可有

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

一、简介：JavaScript库：简化JavaScript开发。主流JavaScript库：jQuery，Vue.js，AngularJS，React等。jQuery：轻量级JS库，使用简单。核心是选择器，用于获取页面元素。提供了大量高效方法，开发速度大幅提升。二、jQuery下载与安装：见该教程：https://blog.csdn.net/qq_43542011/article/details/118296940三、jQuery选择实验室：实现目标：在选择框输入的标签名
复制链接

扫一扫