jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
一、jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
二、jQuery 安装：（jQuery的使用需要引入类库）
（1）从 jquery.com 下载 jQuery 库
选择自己需要的版本，我下载的开发版，右键链接另存为即可，下面写jQuery代码就可以直接引用了。
（2）从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery（可以在菜鸟教程查看详细方法https://www.runoob.com/jquery/jquery-install.html）
三、基础语法：
1、$(selector).action()：
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
2、文档就绪事件：
$(document).ready(function(){
// 开始写 jQuery 代码...
});
3、选择器：
基本选择器：
#id：id选择器
.class：类选择器
$("*")：选取所有元素
$("div") 标签选择器，用于获取多个元素
层级选择器：
ancestor descendant: 祖先与儿子，孙子，重孙子
parent > child: 父与子
prev + next:紧挨着的，相当于同桌
prev ~ siblings: 兄弟
基本过滤选择器：
$("p:first")：选取第一个 <p> 元素
$("p:last")：选取最后一个 <p> 元素
$("tr:even")：选取偶数位置的 <tr> 元素
$("tr:odd")：选取奇数位置的 <tr> 元素
属性选择器：
例：$("input [name = '输入框1'] ") //选择input中name为“输入框1”的input
4、jQuery中的事件：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click 鼠标点击 | keypress 键被按下 | submit 提交 | load 已废弃 |
| dblclick 鼠标双击 | keydown 键按下的过程 | change 元素值被修改 | resize 调整窗口大小 |
| mouseenter 鼠标穿过元素 | keyup 键被松开 | focus 聚焦 | scroll 滚动 |
| mouseleave | blur 失去焦点 | unload 已废弃 | |
| hover 鼠标停留在元素上 |
四、JQuery与JS的不同：
1、JQuery页面加载速度比JS快
加载顺序如下：
练习：
<!DOCTYPE html>
<html>
<head>
<title>JQ和JS页面加载的区别</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script>
window.onload = function () {
alert('张三');
}
//传统页面加载会存在覆盖问题，加载比JQ慢
//整个页面加载完毕
window.onload = function() {
alert('老王');
}
//JQ的加载比JS快
//当整个dom树结构绘制完毕就会加载
//JQ不存在覆盖问题，按顺序执行
jQuery(document).ready(function() {
alert('赵四');
});
$(document).ready(function() {
alert('李四');
});
//简写
$(function(){
alert('汾九');
});
</script>
</head>
<body>
</body>
</html>2、获取元素的方式不同：
方法不同，效果相同
练习：
<!DOCTYPE html>
<html>
<head>
<title>JQ对象的获取</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script>
$(function(){
//js方式获取
/* document.getElementById("btn").onclick = function() {
location.href = "surprise.html";
}*/
//JQ方式获取
$("#btn").click(function(){
location.href = "surprise.html";
});
});
</script>
</head>
<body>
<input type="button" value="点我有惊喜" id="btn" />
</body>
</html>
3、DOM操作的不同：
DOM对象无法操作JQ里的属性和方法。
JQ对象也无法操作DOM里的属性和方法。
练习：
<!DOCTYPE html>
<html>
<head>
<title>JQ中DOM操作</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script>
function writed(){
//JS的DOM操作
document.getElementById("span1").innerHTML="可不咋的";
}
//JQ的DOM操作
$(function() {
$("#btn").click(function(){
//JQ中无法操作JS里的属性和方法，所以不能用innerHTML
$("#span1").html("呵呵");
})
})
</script>
</head>
<body>
<input type="button" value="JS写入" onclick="writed()">
<input type="button" value="JQ写入" id="btn"></br>
空心:<span id="span1">你好帅！</span>
</body>
</html>DOM与对象与JQ对象的转换：
<!DOCTYPE html>
<html>
<head>
<title>JQ中DOM操作</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script>
function writed(){
///将DOM对象转换为JQ对象
var sspan = document.getElementById("span1");
$(sspan).html("好看好看！");
}
//将JQ对象转换成DOM对象
$(function() {
$("#btn").click(function(){
//方法一
$("#span1").get(0).innerHTML="嗯呐嗯呐！";
//方法二
$("#span1")[0].innerHTML="你最好看！";
})
})
</script>
</head>
<body>
<input type="button" value="JS写入" onclick="writed()">
<input type="button" value="JQ写入" id="btn"></br>
空心:<span id="span1">你好帅！</span>
</body>
</html>4、JQ的定时功能：
JQ定时弹出广告
代码：
<!DOCTYPE html>
<html>
<head>
<title>JQ实现广告弹出</title>
<meta charset="utf-8">
<style type="text/css">
body {
width: 1200px;
height: 1200px;
margin: 0 auto;
border: 1px solid lightsalmon;
background-color: azure;
}
.dd1 {
height: 60px;
border: 1px solid pink;
float: left;
/*设置向左浮动*/
}
.dd2 {
width: 1200px;
height: 60px;
background-color: black;
border: 1px solid palevioletred;
}
a {
text-decoration: none;
}
/* 清除浮动 */
#clear {
clear: both;
}
</style>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script>
$(function () {
time = setInterval("showAd()",3000);
});
function showAd(){
//定时弹出广告图片
//方法一：
$("#img2").show(1000); //show(1000)是弹出耗时一秒
/*方法二：向下滑动显示广告slideDown()
$("#img2").slideDown(5000);*/
/*方法三：淡入淡出
$("#img2").fadeIn(4000);*/
//清除图片定时操作
clearInterval(time);
//隐藏图片的定时
time = setInterval("hiddenAd()",3000);
}
function hiddenAd() {
//方法一：隐藏图片
$("#img2").hide();
/*方法二：向上滑动隐藏广告slideUP()
$("#img2").slideUp(5000);*/
/*方法三：
$("#img2").fadeOut(6000);*/
//清除隐藏图片的定时
clearInterval(time);
}
</script>
</head>
<body onload="init()">
<!--第一层-->
<div>
<img src="p1.jpg" height="400px" width="1200px" id="img2" style="display:none"/>
<div class="dd1">
<img src="tb1.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb2.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb3.png" width="398px" height="60px" />
</div>
</div>
<!-- 清除浮动 -->
<div id="clear"></div>
<!--第二层-->
<div class="dd2">
<p>
<a href="#"><font color="white" size="5px"> 首页 </font></a>
<a href="#"><font color="white" size="3px">手机数码</font></a>
<a href="#"><font color="white" size="3px">电脑办公</font></a>
<a href="#"><font color="white" size="3px">鞋靴箱包</font></a>
<a href="#"><font color="white" size="3px">家用电器</font></a>
</p>
</div>
<!-- 第三层 -->
<div>
<img src="s1.jpg" width="1200px" height="715px" id="img1" />
</div>
</body>
</html>五、jQuery的使用：
使用jQuery来使表格实现隔行换色和全选全不选
效果：
实现：
<!DOCTYPE html>
<html>
<head>
<title>表格颜色交替显示</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script>
$(function () {
//选择器选出tbody中的每一行，实现隔行换色
$("tbody tr:odd").css("background-color","lightyellow");
$("tbody tr:even").css("background-color","pink");
})
$(function () {
$("#select").click(function () {
//获取body中所有的复选框并将其选中状态与全选复选框状态一致
$("tbody input").prop("checked",this.checked);
})
})
</script>
</head>
<body>
<table border="1" id="tbl" width="500px" height="240px" align="center">
<thead>
<tr>
<td colspan="12">
<input type="button" value="删除">
</td>
</tr>
<tr>
<td><input type="checkbox" id="select"></td>
<th>用户Id</th>
<th>用户名</th>
<th>年龄</th>
<th>毕业学校</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="select1"></td>
<td>1</td>
<td>小明</td>
<td>20</td>
<td>光明小学</td>
<td>优秀班干部</td>
</tr>
<tr>
<td><input type="checkbox" id="select2"></td>
<td>2</td>
<td>小刚</td>
<td>19</td>
<td>光明小学</td>
<td>学习委员</td>
</tr>
<tr>
<td><input type="checkbox" id="select3"></td>
<td>3</td>
<td>小红</td>
<td>25</td>
<td>光明小学</td>
<td>副班</td>
</tr>
<tr>
<td><input type="checkbox" id="select4"></td>
<td>4</td>
<td>李磊</td>
<td>18</td>
<td>光明小学</td>
<td>服务股长</td>
</tr>
<tr>
<td><input type="checkbox" id="select5"></td>
<td>5</td>
<td>韩梅梅</td>
<td>21</td>
<td>光明小学</td>
<td>心理委员</td>
</tr>
</tbody>
</table>
</body>
</html>2、数组的遍历操作：
（1）each(callback)
（2）$.each(object,[callback])
3、文档处理操作：
（1)添加：
append():A.append(B); 把B追加到A内容的末尾处
appendTo():A.appendTo(B); 把A追加到B内容的末尾处
（2）删除：
empty(): $("p").empty(); 把p里面的内容移除
remove(): $("p").remove; 把p及其里面的内容都移除
练习：JQuery实现省市二级联动
效果：
实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intial-scale=1">
<title>注册网页</title>
<style type="text/css">
body {
width: 1200px;
height: 1200px;
margin: 0 auto;
border: 1px solid lightsalmon;
background-color: azure;
}
.dd1 {
height: 60px;
border: 1px solid pink;
float: left;
/*设置向左浮动*/
}
.dd2 {
width: 1200px;
height: 60px;
background-color: black;
border: 1px solid palevioletred;
}
table tr {
height: 10px;
}
a {
text-decoration: none;
}
/* 清除浮动 */
#clear {
clear: both;
}
</style>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script>
$(function () {
//创建一个二维数组
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","商丘市");
$("#province").change(function(){
//先清空城市下拉列表的内容
$("city").empty();
//获取用户选取的省份
var pro = this.value;
//遍历二维数组中的省份
$.each(cities,function (i,n) {
if(pro==i){
//遍历省份下的所有城市
$.each(cities[i],function (j,m) {
//创建城市文本节点
var textNode = document.createTextNode(m);
//创建option元素节点
var op = document.createElement("option");
//把城市节点添加到option节点中
$(op).append(textNode); //$(op)强制转化类型
//把option节点添加到第二个下拉列表中
$(op).appendTo($("#city"));
});
}
});
});
})
</script>
</head>
<body>
<!--第一层-->
<div>
<div class="dd1">
<img src="tb1.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb2.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb3.png" width="398px" height="60px" />
</div>
</div>
<!-- 清除浮动 -->
<div id="clear"></div>
<!--第二层-->
<div class="dd2">
<p>
<a href="#"><font color="white" size="5px"> 首页 </font></a>
<a href="#"><font color="white" size="3px">手机数码</font></a>
<a href="#"><font color="white" size="3px">电脑办公</font></a>
<a href="#"><font color="white" size="3px">鞋靴箱包</font></a>
<a href="#"><font color="white" size="3px">家用电器</font></a>
</p>
</div>
<!--第三层-->
<div >
<br /><br/>
<form action="#" method="get" name="regform" οnsubmit="return checkForm()">
<table border="1px" align="center" cellspacing="0px" cellpadding="0px" width="700px" height="500px">
<tr>
<td colspan="2">会员注册 USER REGISTER</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" id="username" name="username"/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" id="password" name="password"/>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" id="repassword" name="repassword"/>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="email" id="email" name="email"/>
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" id="name" name="name"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" value="男" name="sex" checked="checked"/>男
<input type="radio" value="女" name="sex"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" id="date" name="date"/>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<!-- 省 -->
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<!-- 市 -->
<select id="city">
</select>
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" id="checkcode" name="checkcode">
<img src="4.jpg" height="35px" width="80px"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="重置" />
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>六、jQuery的效果：
1、隐藏和显示：（还可以设置速度）
show() //显示
hide() //隐藏
toggle() //切换隐藏和显示
2、淡入和淡出：
fadeIn() //淡入
fadeOut() //淡出
fadeToggle() //淡入和淡出中切换
3、滑动：
slideDown() //向下滑动
slideUp() //向上滑动
slideToggle() //向下向上滑动切换
七、jQuery - AJAX：
1、简介：
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。
2、load() 方法：
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
3、AJAX get() 和 post() 方法：
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
使用：
(1)jQuery $.get() 方法
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
(2)jQuery $.post() 方法
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
