博客

jQuery——JavaScript 库

  • Post author:
  • Post category:java




jQuery——JavaScript 库



jQuery下载安装

在官网下载：压缩的和未压缩的版本，在学习过程中可以使用未压缩版，线上使用压缩版提高效率

Download the compressed, production jQuery 3.6.0 slim build

Download the uncompressed, development jQuery 3.6.0 slim build

将js文件包放到webapp\js文件夹下备用



jQuery选择器实验室

输出要选择的标签名（或者后面的选择器格式），点击选择按钮将页面中所有该标签设置高亮样式

lab.html 

<!DOCTYPE html>
<html>
<head>
<meta 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>&nbsp;<a style="color:darkgreen" href="http://www.so.com">360</a></span>
				<li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a><span>&nbsp;<a style="color:darkgreen" href="http://mail.qq.com">QQ邮箱</a></span>
				<li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a><span>&nbsp;<a style="color:darkgreen" href="http://www.pku.edu.cn">北京大学</a></span>
			</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 calss="left clear-left">
					<input type="submit" value="提交" /><input type="reset" value="重置" />
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
	<script type="text/javascript">
		document.getElementById("btnSelect").onclick = function(){
			var selector = document.getElementById("txtSelector").value;
			//jquery的选择器
			//在增加高亮之前移除所有的highlight类
			$("*").removeClass("highlight");	
			//选择器将输入的标签名进行高亮显示
			$(selector).addClass("highlight");
			
		}
	</script>
</body>
</html>





web页面开发的两个要素

在使用HTML开发页面时，有两个基本要点：


  • 选择

    HTML页面上在哪些元素
  • 在这些元素上做哪些

    动作



jQuery选择器

jQuery选择器用于选中需要操作的页面元素

语法1：jQuery（选择器表达式）

语法2：$（选择器表达式）



基本选择器

基本选择器是jQuery最基础也是最常用的选择器表达式

语法 说明
$(“#id”) ID选择器，指定ID元素的对象
$(“标签”) 元素选择器，选择指定标签名的选择器
$(“.class”) 类选择器，选中拥有指定css类的元素
$(“S1,S2,SN”) 组合选择器，对元素进行组合



层叠选择器

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

语法 说明
$(“ancestor descndant”) 后代选择器（选中祖先节点下所有节点）
$(“ancestor>descendant”) 子选择器（只选中父节点的直接子节点）
$(“prev~siblings”) 兄弟选择器（选中同级的兄弟节点）

例子：

span~p



属性选择器

属性选择器是根据元素的属性值来选择元素的选择器表达式

语法 说明
$(“selector[attribute=value]”) 选中属性值等于具体值的组件
$(“selector[attribute^=value]”) 选中属性值以某值开头的组件
$(“selector[attribute$=value]”) 选中属性值以某值结尾的组件
$(“selector[[attribute*=value]]”) 选中属性值包含某值的组件

例子：

a[href^="http://www.baidu"]



位置选择器

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

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

例子：

.myclass:first


li:eq(2)



表单选择器

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

语法 说明
$(“selector:input”) 所有输入选中
$(“selector:text”) 获取文本框
$(“selector:password”) 获取密码框
$(“selector:submit”) 获取提交按钮
$(“selector:reset”) 获取重置按钮
… …

例子：

:text


:input



操作元素属性

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

sample1.html 下方script部分 

	<script type="text/javascript">
		var href_attr = $("a[href*='163']").attr("href");	//获取属性href
		alert(href_attr);
		$("a[href='163']").attr("href","www.163.com");	//设置属性href
		//如果选择器选择多个属性，则attr会返回第一个属性；但是注意：设置属性值的时候，会设置所有选择的属性值
		var attr = $("a").attr("href");	
		alert(attr);
		//移除a标签的所有href属性
		$("a").removeAttr("href");
	</script>



操作元素CSS属性

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

sample2.html 下方script部分 

	<script type="text/javascript">
		//设置单个css属性
		//$("a").css("color","red");
		//传入json设置多个css属性
		$("a").css({"color":"red","font-weight":"bold","font-style":"italic"});
		
		
		//$("li").addClass("highlight");
		$("li").addClass("highlight mycalss");	//设置多个标签定义的css类
		
		$("p").removeClass("myclass");	//移除指定标签的css类
		
		var color = $("a").css("color");
		alert(color);
	</script>



设置元素内容

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

sample3.html 下方script部分 

	<script type="text/javascript">
		$("input[name='uname']").val("administrator");	//设置属性值
		var v = $("input[name='uname']").val();	//获取属性值
		alert(v);
		//text与html方法最大的区别在于对文本中的html标签是否进行转义；text不转义，html转义
		$("span.myclass").text("<b>你好啊啊啊啊啊</b>");	//设置元素的纯文本
		//$("span.myclass").html("<b>你好啊啊啊啊啊</b>");	
		
		//不传参数获取内容；在平时开发中没有特别的需要使用text()方法，如果需要获取html处理则用html()
		var vspan =  $("span.myclass").text();
		alert(vspan);
	</script>



jQuery事件处理方法

on(“click”, function) – 为选中的页面元素绑定单机事件

click(function) – 是绑定事件的简写形式，和上面功能相同

处理方法中提供了event参数包含了事件的相关信息


jQuery常用事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click单机 keypress完整的键盘按下，弹起的一次过程 submit提交 load文档加载时
dblclick双击 keydown某键按下 change输入项内容变化 resize文档或窗口尺寸发生变化时
mouseenter鼠标移入 keyup某键弹起 focus某一个表单获得焦点 scroll窗口滚动时
mouseleave鼠标移出 blur某一个表单失去焦点 unload窗口关闭或卸载时
mouseover鼠标在组件上移动的过程

sample3.html 下方script部分 

	<script type="text/javascript">
		$("p.myclass").on("click",function(){
			//$(this)是指当前事件产生的对象
			$(this).css("background-color","yellow");
		});
		
		$("span.myclass").click(function(){
			$(this).css("background-color","lightgreen");
		});
		//设置当键盘输入空格变为红色,通过控制台可以看到空格的keyCode32
		$("input[name='uname']").keypress(function(event){
			console.log(event);
			if(event.keyCode==32){
				$(this).css("color","red");
			}
		});
	</script>


Tags: