简介
是一个快速小巧、功能丰富的第三方JavaScript库 功能:选取HTML元素 操作HTML元素 CSS操作(改变元素样式) 操作HTML事件 处理Ajax
使用
导入
bootCDN上找到资源,把链接引入到HTML文件中
直接引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
本地引入
<script src="../jquery.min.js"></script>
调用
通过jQuery或者$调用相应的属性和方法
<script>
jQuery();
</script>
<script>
$();
</script>
链式调用
用.分割
<script>
$("#div1").css("color","orange")
.slideUp(200)
.slideDown(200)
.fadeIn(500)
.fadeOut(500);
</script>
$
$(选择器)
jQuery 使用 CSS 选择器来选取 HTML 元素 通过选择器选择符合条件的Element元素,将其保存为jQuery对象
元素选择器
<div id="app"></div>
<script>
var app1=document.getElementById("app");
console.log(app1);
var app2=$("#app")[0];
console.log(app2);
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/8379ba2fdf04441b9b5a692c50b81c6c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_18,color_FFFFFF,t_70,g_se,x_16)
<script>
console.log($("*"));
</script>
<script>
console.log($("p"));
console.log($("div"));
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/36748f3f2bf348c0a440eda7849e7cd4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_19,color_FFFFFF,t_70,g_se,x_16)
<script>
console.log($(".p3"));
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/eb9d46f81336446098ae49c6d3ad2e0a.png)
组合选择器
console.log($("p.p3"));
![在这里插入图片描述](https://img-blog.csdnimg.cn/ffb12561a60c4673a19aec7cc945955d.png)
<p>1</p>
<p>2</p>
<script>
console.log($("p")[1]);
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/5862f6fe38d542dd8d4ca5427184c25e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_17,color_FFFFFF,t_70,g_se,x_16)
属性选择器
<script>
console.log($("[href]"));
</script>
<a href="xxx">xxx</a>
<script>
console.log($("[href='xxx']"));
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/4fbec7c407d94c50a3863bd6d80b750e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_17,color_FFFFFF,t_70,g_se,x_16)
CSS选择器
用于改变 HTML 元素的 CSS 属性
<script>
$("#app").css({
"color":"yellow",
"font-size":"16px"
})
</script>
$(HTML片段)
将HTML片段转换为Element,然后再封装为jQuery对象
<script>
var div=$("<div>myDIv</div>")
console.log(div);
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/435e65b1b0014fe5ac27e57f6481f92c.png)
$(Element元素)
将Element元素转换为jQuery对象
<script>
var div=$("<div></div>")
console.log(div);
</script>
$(匿名函数)
匿名函数会在文档加载完成后执行 防止文档没有加载完成就运行jQuery代码
<button>按钮</button>
<script>
$(function(){
var btn=$("button");
console.log(btn);
})
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/046db74de18b4eecb5184564070de5fd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_20,color_FFFFFF,t_70,g_se,x_16)
<script>
$(document).ready(
function(){
var btn=$("button");
console.log(btn);
}
);
</script>
文档就绪详解: 博客地址
事件
鼠标事件
<div>点我触发事件</div>
<script>
$("div").click(
function(){
alert(1);
}
)
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/6361cc942d324b73b4dcd112223cbe1d.png)
<div>点我触发事件</div>
<script>
$("div").click(
function(){
$(this).hide();
}
)
</script>
<div>点我触发事件</div>
<script>
$("div").dblclick(
function(){
$(this).hide();
}
)
</script>
<script>
<p id="p1">段落1</p>
$("#p1").mouseenter(
function(){
console.log("光标移动到了p1元素上");
}
)
$("#p1").mouseleave(
function(){
console.log("再见,p1元素欢迎您下次再来");
}
)
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/e577f787ba634d4b8af45c75e4b3c439.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_20,color_FFFFFF,t_70,g_se,x_16)
<script>
$("#p1").mousedown(
function(){
console.log("鼠标按下");
}
)
$("#p1").mouseup(
function(){
console.log("鼠标松开");
}
)
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/ca1a13fc3f4e42c399f4303808d2e7ad.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_20,color_FFFFFF,t_70,g_se,x_16) 可以简化代码,使用两个参数(光标移入的回调函数,光标移出的回调函数)
<script>
$("#p1").hover(
function(){
console.log("光标移入");
},
function(){
console.log("光标移出");
}
)
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/39da865cdba6474da10a1dc1556c1da8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_20,color_FFFFFF,t_70,g_se,x_16)
焦点事件
请输入你要提现的金额:<input type="text">
<script>
$("input").focus(
function(){
$(this).css("background-color","pink");
}
)
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/dacb6434bfa0404aabf9f874b180b22d.png)
<script>
$("input").blur(
function(){
$(this).css("background-color","yellow");
}
)
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/c0986c48a0dc4163a2c4d18ccad59286.png)
键盘事件
<script>
$(document).keydown(
function(event){
console.log(event.keyCode);
if(event.keyCode===13){
$("input").hide();
}
}
)
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/49dec242656845fcb6f50b7c58133658.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_20,color_FFFFFF,t_70,g_se,x_16) 按下enter键隐藏效果 ![在这里插入图片描述](https://img-blog.csdnimg.cn/84bd888eb13b4221a7fd4428c1e83d18.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_20,color_FFFFFF,t_70,g_se,x_16) 组合键使用:
<script>
$(document).keydown(
function(event){
console.log(event.keyCode);
if(event.ctrlKey&& event.keyCode===67){
alert("请开通会员再复制")
}
}
)
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/8db4c20617174375a5f8cc6c9fad326d.png)
效果
隐藏显示
去显示或隐藏HTML元素 可选参数(控制速度(数字类型的毫秒/string类型的fast、slow),回调函数(隐藏完成后会执行))
方法 | 描述 |
---|
hide() | 隐藏 | show() | 显示 | toggle() | 切换 hide() 和 show() 方法 |
$("#show").show(1000);
$(this).hide(1000);
$('#show').click(function(){
$("p").show(1000);
$(this).hide(1000);
$("#hide").show(1000);
})
$("#btn").click(function(){
$("p").toggle(1000,function(){
console.log("元素显示状态被切换");
});
})
淡入淡出
参数(speed,callback)
方法 | 描述 |
---|
fadeIn() | 淡入 | fadeOut() | 淡出 | fadeToggle() | 在 fadeIn() 与 fadeOut() 方法之间进行切换 |
<div id="div1"></div>
<button id="div1_btn1">div1按钮1</button>
<button id="div1_btn2">div1按钮2</button>
<script>
$("#div1_btn1").click(function(){
$("#div1").fadeOut();
})
$("#div1_btn2").click(function(){
$("#div1").fadeIn();
})
</script>
滑动
参数(speed,callback)
方法 | 描述 |
---|
slideUp() | 向上滑动元素 | slideDown() | 向下滑动元素 | slideToggle() | 在 slideDown() 与 slideUp() 方法之间进行切换 |
<div id="div1"></div>
<button id="div1_btn1">div1按钮1</button>
<button id="div1_btn2">div1按钮2</button>
<button id="div1_btn3">div1按钮3</button>
<script>
$("#div1_btn1").click(function(){
$("#div1").slideUp();
})
$("#div1_btn2").click(function(){
$("#div1").slideDown();
})
$("#div1_btn3").click(function(){
$("#div1").slideToggle(5000);
})
</script>
操作DOM节点
获取节点 $(选择器)
$("#app")
获取内容
.text();
<div id="app">
这是一个div
<p>p标签</p>
</div>
<script>
console.log($("#app").text());
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/b6693499807148acb7f626d8e84c83fa.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_20,color_FFFFFF,t_70,g_se,x_16) .html();
<div id="app">
这是一个div
<p>p标签</p>
</div>
<script>
console.log($("#app").html());
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/6e9b8bb7a4c547c9aba9b65a9028a88a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_20,color_FFFFFF,t_70,g_se,x_16) .val();
<input id="input" type="text">
<button>获取input的内容</button>
<script>
$("button").click(function(){
console.log($("#input").val());
});
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/b7f62235820e4576908ee1f4eff582d7.png) .attr(); 获取属性
<a href="https://www.baidu.com">百度</a>
<script>
console.log($("a").attr("href"));
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/c204cf05993448e392d6251bc68009ea.png)
设置内容
text();
<div id="app">
这是一个div
<p>p标签</p>
</div>
<script>
$("#app").text("这是id为app的div");
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/d426fd5dd57d42d0b7a2699a042615cb.png) html();
<div id="app">
这是一个div
<p>p标签</p>
</div>
<script>
$("#app").html("<p>hello</p>");
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/59bf75b834a74e219497ff3ebb875c6d.png) val();
<input id="input" type="text">
<button>获取input的内容</button>
<script>
$("button").click(function(){
$("#input").val("999");
});
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/f842151101114c06b226d0b220672a87.png) 设置一个属性
<a href="https://www.baidu.com">百度</a>
<script>
$("a").attr("href","http://taobao.com");
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/344a34fc80994718a03244bff606cc6b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_20,color_FFFFFF,t_70,g_se,x_16)
设置多个属性
<a href="https://www.baidu.com">百度</a>
<script>
$("a").attr({
"href":"http://taobao.com",
"title":"url"
});
</script>
回调函数 参数(i,text) i是被选中元素列表中当前元素的下标,text是旧文本
<div id="app">
这是一个div
<p>p标签</p>
</div>
<script>
$("#app").text(function(i,text){
console.log(i);
console.log(text);
return 123;
});
<script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/df51dc0341bb4850bafcd494445dada7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_20,color_FFFFFF,t_70,g_se,x_16)
添加元素
在当前元素内部操作
append()
<div id="app">
这是一个div
<p>123</p>
</div>
<script>
$("#app").append("追加文本");
<script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/37aca554289c4176868a9a6975867475.png) prepend()
<div id="app">
这是一个div
<p>123</p>
</div>
<script>
$("#app").prepend("在开头追加文本:");
<script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/be8f4be0250d4264ad09a67b7decaaca.png) 追加新元素:
<div id="app">
这是一个div
<p>123</p>
</div>
<script>
var p1 = "<p>p1</p>"
var p2 = "<p>p2</p>"
$("#app").append(p1,p2);
$("#app").prepend(p1,p2);
<script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/c75e80d5002e4d13a88e34dc5e7ec27f.png)
在当前元素外部操作
after()
<div id="app">
这是一个div
<p>123</p>
</div>
<script>
$("#app").after("追加文本");
<script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/6868157743774efcb1c74f55ff0fa068.png) before()
<div id="app">
这是一个div
<p>123</p>
</div>
<script>
$("#app").before("在开头追加文本:");
<script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/c2ddc6a64cdc4eff89bcdf6ed77f3785.png) 追加新元素:
<div id="app">
这是一个div
<p>123</p>
</div>
<script>
var p1 = "<p>p1</p>"
var p2 = "<p>p2</p>"
$("#app").after(p1);
$("#app").before(p1,p2);
<script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/0167aa9aff8042f3bdc17f1022c20074.png)
删除元素
删除被选中的元素以及子元素
<div id="app">
这是一个div
<p>123</p>
</div>
<script>
$("#app").remove();
<script>
<div id="app">1</div>
<div>2</div>
<div>3</div>
<script>
$("div").remove("#app");
<script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/41bd31d959b04449bd2988907fd9a091.png) 删除子元素
<script>
$("#app").empty();
<script>
静态方法
each、map、toArray 静态方法详解: 博客地址
<div id="app">
这是一个div
<p>123</p>
</div>
<div>2</div>
<div>3</div>
<p>p1</p>
<script>
$("div").each(function(){
console.log($(this));
});
<script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/28f477ddc17c4b64b42dfc8ac1a46bb8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YuH5pWi5bCP6Zi1,size_20,color_FFFFFF,t_70,g_se,x_16)
|