目录
一、简介:
- 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属性获取事件信息: