本文详细介绍了jQuery库的基础知识，包括其安装方式、链式语法、选择器、事件处理、效果展示、DOM操作、CSS操作以及AJAX请求。jQuery简化了JavaScript的使用，提供了一致的API来操作DOM、处理事件、创建动画和异步数据交互，是前端开发的重要工具。
一、概述
jQuery是一个简单的，快速的 js 库。倡导：写更少的代码，做更多的事
特点
具有独特的链式语法。
支持高效灵活的CSS选择器。
拥有丰富的插件。
兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
二、安装
一种方式：引入式安装
本地引入
cdn引入
jquery-3.4.1.min.js 压缩版，不利于查看源码
jquery-3.4.1.js 正常版 可以产看源码
本地引入:
cdn引入：
什么cdn?
cdn 内容分发网络，内容是静态内容（html,js，图片，css,字体）
cdn优点:
1.提高响应速度
2.大大降低服务器压力 （前端优化策略）
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
三、语法
1.$()
<script>
// jquery 测试
// $ 就是 jQuery 的一个标记 等价于 jQuery 关键字
// $(funciton(){ }) // 当前 页面渲染完成后 加载 内部的 funtion 方法
$(function(){
alert("jquery 测试1");
console.log(" jquery 测试1")
})
// 凡是 $ 出现的地方 都可以使用 jQuery 替换
jQuery(function(){
alert("jquery 测试2");
console.log(" jquery 测试2")
})
// 页面加载完成 执行 和 以上 $(function) jQuery(function)
$(document).ready(function(){
alert("jquery 测试3");
console.log(" jquery 测试3")
})
console.log(" ******")
</script>
2.jQuery 选择器
选择器
id选择器 $(’#id1’)
类选择器 $(’.class1’)
元素/标签选择器 $(‘p’) $(‘div’) $(‘标签名’)
<body>
<p class="cls1">窗前明月光</p>
<p class="cls1">疑是地上霜</p>
<p>举头望明月</p>
<p id="id1">低头思故乡</p>
<script>
// $('p') 获取所有的p 标签 ，并且隐藏
// $('p').hide()
// 通过id 选择器 选择对应的元素 进行隐藏
// $('#id1').hide()
// 类选择器 隐藏
$('.cls1').hide()
</script>
</body>
3.事件
jQuery事件，页面对不同访问者的响应叫做事件。
点击事件
双击事件
鼠标移入，移出
焦点
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
<body>
<button id="btn1" onclick="click1()">按钮1</button>
<button id="btn2" >按钮2</button>
<div id="div1">
<p class="cls1">窗前明月光</p>
<p class="cls1">疑是地上霜</p>
<p>举头望明月</p>
<p id="id1">低头思故乡</p>
</div>
name:<input type="text" id="name" />
<script>
function click1(){
alert("按钮点击");
}
// 通过jquery id 选择器为按钮 增加点击事件
// $('#btn2').click(function(){
// alert("btn2按钮点击");
// })
$('#btn2').dblclick(function(){
alert("btn2按钮双击");
})
// 此时设置点击事件 无效，因为 id 为btn3 元素还未加载，无法找到，所以无效
$('#btn3').click(function(){
alert("btn3按钮点击");
})
//鼠标移入
$('#div1').mouseenter(function(){
// alert('鼠标移入')
console.log('鼠标移入')
})
$('#div1').mouseleave(function(){
alert('鼠标移出')
console.log('鼠标移出')
})
// 设置焦点回调 当输入框得到焦点
$('#name').focus(function(){
// $(this) 当前元素 $('#name')
$(this).css('background-color','green')
})
// 当失去焦点时 回调
$('#name').blur(function(){
// $(this) 当前元素 $('#name')
// $(this).css('background-color','gray')
$('#name').css('background-color','gray')
})
</script>
<button id="btn3" >按钮3</button>
</body>
四、jQuery效果
隐藏显示
显示 show()
隐藏 hide()
<body>
<button id="btn1">显示</button>
<button id="btn2" >隐藏</button>
<button id="btn3" >显示/隐藏</button>
<h1></h1>
<button id="btn4">慢慢显示</button>
<button id="btn5">慢慢隐藏</button>
<div id="div1">
<p class="cls1">窗前明月光</p>
<p class="cls1">疑是地上霜</p>
<p>举头望明月</p>
<p id="id1">低头思故乡</p>
</div>
<h1>是否占用</h1>
<script>
// 显示
$('#btn1').click(function(){
$('#div1').show()
});
// 隐藏
$('#btn2').click(function(){
$('#div1').hide()
});
$('#btn3').click(function(){
// div1 隐藏和显示互相切换
$('#div1').toggle()
});
$('#btn4').click(function(){
//第一个参数 "slow"、"fast" 或毫秒
$('#div1').fadeIn(3000,function(){
// 显示之后的回调方法
alert('显示完成')
})
})
$('#btn5').click(function(){
//第一个参数 "slow"、"fast" 或毫秒
$('#div1').fadeOut('slow',function(){
// 显示之后的回调方法
alert('隐藏完成')
})
})
</script>
</body>
五、 jQuery DOM操作【重点】
DOM操作 操作document(文档操作)
1.获取值
$(’#div1’).text()
$(’#div1’).html()
$(’#name’).val()
$(’#a1’).attr(‘href’)
<div id="div1">
<p>草</p>
</div>
name:<input type="text" id="name" />
<a id="a1" href="http://www.baidu.com">百度</a>
<button id="btn1">获取值</button>
<script>
$('#btn1').click(function(){
// text() 获取元素对应的文字内容（人眼睛看到文字）
console.log("text()"+$('#div1').text())
// 获取html 源码
console.log("html()"+$('#div1').html())
// 获取input 内容 获取输入框内容
console.log("val()"+$('#name').val())
// 获取属性 href 得值
console.log("attr()"+$('#a1').attr('href'));
})
</script>
2.设置值
$(’#name’).val(“小明”);
<body>
<div id="div1">
<p>草</p>
</div>
name:<input type="text" id="name" />
<a id="a1" href="http://www.baidu.com">百度</a>
<button id="btn1">设置值</button>
<script>
$('#btn1').click(function(){
// text() 设置值
// $('#div1').text("离离原上草")
$('#div1').html("<h1>离离原上草</h1>")
// 设置 input 中的值 // 初始化form 表单用到
$('#name').val("小明");
// 设置属性 href 得值
$('#a1').attr('href','http://www.jd.com')
})
</script>
</body>
3.添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
<body>
<div id="div1">
<div id="div1_1">
<p>离离原上草</p>
</div>
</div>
<script>
$(function(){
// prepend 在div1_1 内部最上方添加 元素 父子关系
$('#div1_1').prepend("河南");
// append 在div1_1 内部最下方添加 元素 父子关系
$('#div1_1').append("郑州");
// after 在 div1_1 外部的下方添加 兄弟关系
$('#div1_1').after('二七')
// before 在 div1_1 外部的上方添加 兄弟关系
$('#div1_1').before('中国')
})
</script>
</body>
4.删除内容
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
<body>
<div id="div1">
<div id="div1_1">
<p>离离原上草</p>
</div>
</div>
<script>
$(function(){
// 将当前div1_1 节点删掉
// $('#div1_1').remove();
// 清空 div1_1 节点中的内容
$('#div1_1').empty();
})
</script>
</body>
5.css 操作
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 本地引入 js 库jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
</script>
<style>
.success{
background-color: blue;
}
.error{
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<div id="div1_1">
<p>离离原上草</p>
</div>
</div>
<button id="btn1">添加class</button>
<button id="btn2">删除class</button>
<button id="btn3">直接使用css 修改</button>
<script>
$(function(){
$('#btn1').click(function(){
$('#div1').addClass('success');
})
})
$(function(){
$('#btn2').click(function(){
$('#div1').removeClass('success');
})
$('#btn3').click(function(){
// 直接操作 style 中的属性
$('#div1').css('background-color','blue');
})
})
</script>
</body>
</html>
6.盒子模型获取盒子大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 本地引入 js 库jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
</script>
<style>
#div1_1{
width: 100px;
height: 100px;
background: red;
}
#div1{
width: 100px;
height: 100px;
background: blue;
padding: 10px;
border: solid 2px black;
margin: 20px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div1_1">
</div>
</div>
<script>
$(function(){
console.log("div1真正宽度"+$('#div1').outerWidth(true));
var str;
str = "width:"+$("#div1").width();
str = str + "--innerWidth:"+$("#div1").innerWidth();
str = str + "--outerWidth:"+$("#div1").outerWidth();
str = str + "--outerWidth--true:"+$("#div1").outerWidth(true);
console.log("str:"+str);
})
</script>
</body>
</html>
六、jQuery遍历
jQuery遍历 主要用于获取 元素
父子关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 本地引入 js 库jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
</script>
<style>
#div1{
width: 500px;
height: 500px;
background-color: blue;
}
#div21,#div22,#div23{
width: 400px;
height: 200px;
background-color: purple;
}
#div22{
background-color: red;
}
#div3{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
<div id="div21" class="divaa" align="center">
<div id="div3" class="cla1" >
</div>
</div>
<div id="div22">
</div>
<div id="div23">
</div>
</div>
<script>
$(function(){
// $('#div3').parent() 获取 div3 父容器（直接父容器）
// $('#div3').parent().css("border",'solid 20px green')
// $('#div3').parent() 获取所有父接点 直到 html
// $('#div3').parents().css("border",'solid 20px green')
// $('#div3').parentsUntil('body') 获取所有父容器 直到 body 不包含
// $('#div3').parentsUntil('body').css("border",'solid 20px green')
// $('#div1').children() 获取所有孩子 节点 直系
// $('#div1').children().css("border",'solid 20px green')
// $('#div1').find("*") 获取所有孩子节点
// $('#div1').find("*").css("border",'solid 20px green')
// $('#div1').find(".divaa")获取所有节点 并过滤 只留下 .divaa的节点
$('#div1').find(".divaa").css("border",'solid 20px green')
})
</script>
</body>
</html>
兄弟关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 本地引入 js 库jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
</script>
<style>
</style>
</head>
<body>
<h1>兄弟关系</h1>
<div id="div0">
<div id="div1"></div>
<div id="div2">div2</div>
<div id="div3"></div>
<div id="div4">
两只老虎
</div>
<div id="div5" class="cla1"></div>
<div id="div6">div6</div>
<div id="div7" class="cla1"></div>
</div>
<script>
$(function(){
// $('#div4').siblings() 获取所有兄弟节点
// $('#div4').siblings().html('siblings 获取所有的兄弟节点');
// $('#div4').next().html("next() 获取下一个节点")
// $('#div4').nextAll().html("nextAll() 获取下面所有兄弟节点")
// $('#div4').nextUntil('#div6').html("nextUntil('#div6')) 获取下面所有兄弟节点 直到div6 不包含div6")
// $('#div4').prev().html("prev() 获取上一个节点");
// $('#div0').children().first().html("获取所有节点，并挑出第一个子节点");
// $('#div0').children().last().html("获取所有节点，并挑出最后一个子节点");
// $('#div0').children().filter(".cla1").html("只过滤 含有类.cla1的节点")
// $('#div0').children().eq(2).html("eq(2) 获取下标未 2 的节点 并赋值");
$('#div0').children().not("#div3").html("not 不等于 div3 的所有节点")
})
</script>
</body>
</html>
七、jQuery-ajax
jQuery AJAX请求有三种实现:
$.get(URL,callback) get请求
$.post(URL,callback) post 请求方式
$.ajax({url:,…}) 高级api 支持 post get
学习网站：https://jquery.cuishifeng.cn/index.html
$.get()
$.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
id:<input type="number" name="id" id="id" >
<button onclick="getEmpById()">获取emp</button>
<p id="content"></p>
<script>
/**
* 使用jquery get 发起请求
*/
function getEmpById() {
var id = $('#id').val();
// {id:id} 参数 对象
// 参数1 路径
// 参数2 数据
// 参数3 接收返回值 默认将 json ---> 转化为js 对象
// $.get("/GetEmpByIdServlet",{id:id},function (data) {
//
// alert(data.name);
//
// $('#content').text(data.name)
// })
// {id:id} 参数 对象
// 参数1 路径
// 参数2 数据
// 参数3 接收返回值 默认将 json ---> 转化为js 对象
// 参数4 表明 将接收的数据 以json 接收 --- js 对象
$.get("/GetEmpByIdServlet",{id:id},function (data) {
alert(data.name);
$('#content').text(data.name)
},'json').fail(function () { // 在服务器异常时回调
alert("服务器出错了")
})
}
</script>
</body>
</html>
$.post()
$.post(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入jquery-->
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
id:<input type="number" name="id" id="id" >
<button onclick="getEmpById()">获取emp</button>
<p id="content"></p>
<script>
/**
* 使用jquery post 发起请求
*/
function getEmpById() {
var id = $('#id').val();
// {id:id} 参数 对象
// 参数1 路径
// 参数2 数据
// 参数3 接收返回值 默认将 json ---> 转化为js 对象
// $.post("/GetEmpByIdServlet",{id:id},function (data) {
//
// alert(data.name);
//
// $('#content').text(data.name)
// })
// {id:id} 参数 对象
// 参数1 路径
// 参数2 数据
// 参数3 接收返回值 默认将 json ---> 转化为js 对象
// 参数4 表明 将接收的数据 以json 接收 --- js 对象
$.post("/GetEmpByIdServlet",{id:id},function (data) {
alert(data.name);
$('#content').text(data.name)
},'json').fail(function () { // 在服务器异常时回调
alert("服务器出错了")
})
}
</script>
</body>
</html>
$.ajax()
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
id:<input type="number" name="id" id="id" >
<button onclick="getEmpById()">获取emp</button>
<p id="content"></p>
<script>
/**
* 使用jquery post 发起请求
*/
function getEmpById() {
var id = $('#id').val();
$.ajax({
type:'get',// get 请求方式
url:'/GetEmpByIdServlet',
data:{id:id},
success:function (data) { // 服务器响应成功数据回调
alert(data);
$('#content').text("name:"+data.name+"--age:"+data.age);
},
error:function () { // 服务器失败时调用
alert("服务器错误")
},
dataType:'json' // 接收json 数据 转化为 js 对象
})
}
</script>
登录示例
LoginServlet.java
/**
* 检验登录
*/
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/json;charset=utf-8");
String username = req.getParameter("username");
String password = req.getParameter("password");
ResponseData<String> responseData = new ResponseData();
if ("root".equals(username)&& "123456".equals(password)){//成功
responseData.setStatus(1);
responseData.setMsg("success");
responseData.setData("登录成功");
}else {
responseData.setStatus(0);
responseData.setMsg("fail");
responseData.setData("用户名或者密码错误");
}
resp.getWriter().write(JSON.toJSONString(responseData));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
ResponseData.java
package com.qfedu.servlet;
import java.io.Serializable;
/**
* @author xue_yun_xiang
* @create 2021-05-04-22:12
*/
public class ResponseData<T> implements Serializable {
//0：错误 1：成功
private int status;
//msg:当前信息状态
private String msg;
//返回的数据
private T data;
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
@Override
public String toString() {
return "ResponseData{" +
"status=" + status +
", msg='" + msg + '\'' +
", data=" + data +
'}';
}
}
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<form id="loginform">
username:<input type="text" id="username" name="username" ><br>
password:<input type="password" id="password" name="password" ><br>
<!--
type="submit" 触发表单提交
-->
<input type="button" onclick="login()" value="登录">
</form>
<p id="content"></p>
<script>
//登录
function login() {
// 获取参数
var username = $('#username').val();
var password = $('#password').val();
// $.ajax({
// type:'get',// get 请求方式
// url:'/login',
// data:{username:username,password:password},
// success:function (data) { // 服务器响应成功数据回调
// alert(JSON.stringify(data));
// // data 第一个 返回对象引用 第二data 是里面的数据
// $('#content').text(data.data);
// },
// error:function () { // 服务器失败时调用
// alert("服务器错误")
// },
// dataType:'json' // 接收json 数据 转化为 js 对象
// })
// get 请求
// 传递参数 第一种方式
// $.get("/login",{username:username,password:password},function (data) {
// alert(JSON.stringify(data));
// // data 第一个 返回对象引用 第二data 是里面的数据
// $('#content').text(data.data);
// },'json');
// 第二种方式
// $('#loginform').serialize()=username=root&password=123456
// $('#loginform').serialize() 获取表单中的输入的内容 组装为参数拼接 注意一定要写 input 对应的name
// console.log("$('#loginform').serialize()="+$('#loginform').serialize());
// $.get("/login",$('#loginform').serialize(),function (data) {
// alert(JSON.stringify(data));
// // data 第一个 返回对象引用 第二data 是里面的数据
// $('#content').text(data.data);
// },'json');
// 第三种方式 手动拼接 慎用
$.get("/login","username="+username+"&password="+password,function (data) {
alert(JSON.stringify(data));
// data 第一个 返回对象引用 第二data 是里面的数据
$('#content').text(data.data);
},'json');
}
</script>
</body>
</html>
八、jquery $ 符号替换
$ == jQuery
但是有可能其他框架也有 $ 符号，此时如果也使用$,会发生冲突，如何解决？
第一种直接使用 jQuery
第二种方式 重命名
var jQ = $.noConflict()
jQ == $
<script>
$(function () {
alert('快要放学了');
})
// 此时 jQ == jQuery == $
// $.noConflict(); 释放了 $ ,后面再 使用$ 无效，只能使用 jQ ,jQuery 才起作用
var jQ = $.noConflict();
jQ(function () {
alert("真的快要放学了")
})
// 此时 $ 已经失效了
$(function () {
alert('真的么');
})
</script>
4734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
