1 什么是jQuery？
jQuery 是一个快速小巧、功能丰富发第三房JavaScript库，为我们封装DOM操作，让我们操作DOM节点更加方便 。
1.1 jQuery的功能：
1.选取HTML元素
2.操作HTML元素
3.可以进行CSS操作，改变元素的样式
4.操作HTML事件
1.2 如何引用jQuery?
有两种方式：
1.直接引入网络资源
一般会用min.js ，但如果要看源码就用jQuery.js
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
2.将网络资源下载到本地使用
<script src="../js/jquery.js"></script>
2 jQuery的选择器
2.1 $(选择器)
这个选择器可以是
标签选择器
类选择器
id选择器
普遍选择器
层次选择器（后代选择器、子代选择器、一般同胞选择器）
多选择器
嵌套选择器
属性选择器
伪类选择器
伪元素选择器
2.2 $(html片段)
将html片段转换为Element，然后再封装为jQuery对象。
<body>
<div id="app"></div>
</body>var div=$('<div>myDiv</div>');
console.log(div);
2.3 $(Element元素)
将Element元素转换为jQuery对象
2.4 $(匿名函数)
匿名函数会在文档加载完成后执行。
<body>
<button>按钮</button>
</body> $(document).ready(
function(){
var btn=$('button');
console.log(btn);
}
)
3 事件
3.1 语法
1. 页面中指定一个点击事件
$("").click();2. 实现点击后触发对应的事件
$("").click(function(){
//动作触发后执行的代码！
})3.2 事件的动作
1.click() 点击
2.bbclick() 双击
3.mouseenter() 当鼠标穿过元素时
4.mouseleave() 当鼠标离开元素时
5.mousedown() 当在元素上按下鼠标键时
6.mouseup() 当在元素上松开鼠标时
7.hover() 光标悬停
8.focus() 当元素聚焦时（鼠标点击选中元素）
例子：用CSS设置input的背景颜色
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});9.blur() 当元素失去焦点时
10.keydown 当键盘按下时
$(document).keydown{
function(event){
console.log(event.keyCode)
if(event.ctrlKey&&event.keyCode){
alter("请开通会员，再复制")
}
}
}4 效果
4.1 隐藏与显示
4.1.1 隐藏
hide()
参数：（都是可选的）
1.速度：数字类型的，毫秒string类型（fast/slow）
2.回调函数：隐藏完成后会执行的方法
4.1.2 显示
例子：
1.html代码
<div>
<p>这是一段文本</p>
<button id="hide">隐藏</button>
<br>
<button id="show">显示</button>
<br>
<button id="btn">按钮</button>
</div>
<div>
<div id="div1">
</div>
<button id="div1_btn1">淡出</button>
<button id="div1_btn2">淡入</button>
<br>
<button id="btn1">向上滑动</button>
<button id="btn2">向下滑动</button>
<button id="btn3">滑动切换</button>
</div>2. css代码
#div1{
width: 100px;
height: 100px;
border: 1px solid orange;
background-color: orangered;
}3.js代码
$("#hide").click(function(){
$(this).hide('fast',function(){
alert("我藏好了，你来找吧")
$("p").hide(1000);
$("#show").show(1000);
});
});
$("#show").click(function(){
$(this).hide(1000);
$("#hide").show(1000);
$("p").show(1000);
});4.2 隐藏
taggle()
$("#btn").click(function(){
$("p").toggle(1000,function(){
console.log("元素显示状态被切换");
})
})4.3 淡入与淡出
4.3.1 淡入
fadeOut();
4.3.2 淡出
fadeIn();
//淡入淡出效果
$("#div1_btn1").click(function(){
$("#div1").fadeOut();
})
$("#div1_btn2").click(function(){
$("#div1").fadeIn();
})4.4 向上滑入与向上滑出
4.4.1 向上滑入
sliedUp();
4.4.2 向下滑出
slideDown();
4.4.3 滑动切换
slideToggle();
$("#btn1").click(function(){
$("#div1").slideUp(1000);
})
$("#btn2").click(function(){
$("#div1").slideDown();
})
$("#btn3").click(function(){
$("#div1").slideToggle();
})4.5 链式调用
会自动执行所写的效果
$("p").css("color","green")
.slideUp(2000)
.slideDown(2000)
.fadeOut(2000)
.fadeIn(2000)5 操作DOM节点
5.1 获取节点
$()
5.2 获取内容
1. .text() 返回元素的文本内容
2. .html() 返回所选元素的内容（包括标签）
3. .val() 返回表单的字段
4. .attr() 返回a标签内容
例子：获取内容
<body>
<div id="app">
你好啊！哈哈哈
</div>
<input type="text" id="input">
<button>获取Input的内容</button>
<a href="http://www/baibu.com">baidu</a>
</body>
<script>
//获取内容
console.log($("#app").text());
console.log($("#app").html());
$("button").click(function(){
console.log($("#input").val());
})
console.log($("a").attr());
</script>5.3 设置内容
1. .text(参数)
2. .html(参数)
3. .val(参数)
4. .attr("属性","内容")
例子：设置内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加元素</title>
//一定要先引用第三方jquery.js
<script src="./js/jquery.js"></script>
</head>
<body>
<div id="app">
你好啊！哈哈哈
</div>
<input type="text" id="input">
<button>获取Input的内容</button>
<a href="http://www/baibu.com">baidu</a>
</body>
<script>
//设置内容
$("#app").text("这是id为app的div");
$("button").click(function(){
$("#input").val("999");
})
console.log($("a").attr("href","http://taobao.com"));
//设置a标签的时候，可以设置它的多个属性
$("a").attr({
"href":"http://taobao.com",
"title":"url"
})
</script>6 添加元素与删除元素
6.1 添加元素
1.append() 在被选元素的结尾插入内容
2.prepend() 在被选元素的开头插入内容
3.after() 在被选元素之后插入内容
4.before() 在被选元素之前插入内容
注意：append()和prepend()与after()和before()的区别
1.append()和prepend()是在当前元素内部添加和删除内容
2.after()和before()是在当前元素外部添加和删除内容
例子：添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加元素</title>
//一定要先引用第三方jquery.js
<script src="./js/jquery.js"></script>
</head>
<body>
<div id="app">
小猪佩奇
<p>蜡笔小新</p>
</div>
<div>
这里什么都没有了
</div>
<div id="app1">哈哈哈哈</div>
<p id="p">不是</p>
</body>
<script>
//在当前元素外部操作
$("#app").after("是动画片");
$("#app").before("1.");
var p1="<p>柯南</p>";
var p2="<p>巴卫</p>";
$("#app").after(p1,p2);
$("#app").before(p1,p2);
//在当前元素内部操作
$("#app1").append("你好");
$("#app1").prepend("妈呀");
//追加新元素
var d1="<div>哇哦<div>";
var d2="<div>害</div>";
$("#p").append(d1);
$("#p").prepend(d2);
</script>
</html>6.2 删除元素
1.remove() 删除被选元素（及子元素）
2.empty() 从被选元素中删除子元素
例子：删除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加元素</title>
<script src="./js/jquery.js"></script>
</head>
<body>
<div id="app">
小猪佩奇
<p>蜡笔小新</p>
</div>
<div>
这里什么都没有了
</div>
<div id="app1">哈哈哈哈</div>
<p id="p">不是</p>
</body>
<script>
//删除元素
// $("#app").remove();
$("div").remove("#app");//删除div标签里的#app的内容
//删除子元素
$("#app1").empty();
</script>
</html>7 jQuery-Ajax
7.1 语法
$.ajax({
url:"http://..."
})通过HTTP请求，加载远程数据，这里指的是JQuery对ajax的实现。
7.2 参数
| 参数 | 类型 | 作用 |
| url | string类型 | 发送请求的地址 |
| type | POST或GET | 默认值是GET |
| options | Object类型 | 进行ajax请求的设置 |
| async | Boolean类型 | 异步（true）请求同步化 |
| success | function | 请求成功的回调函数 |
| error | function | 请求失败时的回调函数 |
7.3 方法
1.$.get get请求
2.$.post post请求
例子：参数的应用
$.ajax({
url: http://ip地址:端口号,
method: "post",
headers: {
"Authorization": sessionStorage.getItem('token')
//sessionStorage是会话存储
},
data: obj,
success: function (res) {
alert(res.message);
$("#myModal").hide();
loadAllUser();
clearSaveModal();
}
})
7693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
