这篇博客介绍了jQuery的基本概念和使用，包括JQuery的导入方式，如本地导入和使用CDN。详细讲解了JQuery的选择器、基本语法以及如何操作HTML标签。此外，重点探讨了JQuery事件处理，如事件绑定、克隆事件、模态框实现、左侧菜单栏、回到顶部功能，以及输入框监控和键盘事件的响应，对于前端开发者学习jQuery非常有帮助。
JQuery简介
JQuery 介绍
内部封装了原生的 JS 代码
能够写更少的代码，完成 JS 操作
类似于 python 中的 模块，在前端中模块不叫模块，叫 ”类库“
兼容多个浏览器，不需要考虑兼容问题
宗旨：write less do more
python 导入模块发生了几件事？
导入模块需要消耗资源
JQuery 在使用时也需要导入，但文件非常小，基本不影响
JQuery 导入
两种导入方式
-
在官网将 JQuery 文件下载到本地，并且导入
-
直接引入 JQuery 提供的 CDN 服务（基于网络直接加载）
CDN：内容分发网络
参考网站：bootcdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
JQuery 基本语法
JQuery("选择器").action()
可以简写成
$("选择器").action()
JQuery 查找标签
JQuery 查找标签的返回结果都是 JQuery 对象。
JQuery 标签对象转化为标签对象
$("span")[0]
标签对象转换为 JQuery 标签对象
$(document.getElementById("d1"))
id 选择器
$("#d1")
class 选择器
$(".c1")
标签选择器
$("span")
组合、分组、嵌套
$("div.c1")
$("dic, .c1, p")
$("div span")
基本筛选器
$("ul li");
$("ul li:first");
$("ul li:eq(2)"); // 索引第二的标签
$("ul li:even"); // 索引为偶数的标签
$("ul li:odd"); // 索引为奇数的标签
$("ul li:gt(2)"); // 索引大于 2 的标签
$("ul li:lt(2)"); // 索引小于 2 的标签
$("ul li:not('#d1')"); // 移除满足条件的标签
$("div:has('p')"); // 选取出包含一个或多个标签在内的标签
属性选择器
$("[username='jason']");
表单关键词，只适用于表单标签
$(":text");
$(":password");
还包括表单对象属性
$(":enabled");
$(":disabled");
$(":checked"); // 如果选中，拿所有被选中的标签，同时也会拿到 selected
$("input:checked");
$(":selected"); // selected 只拿 selected 的标签
筛选器方法
$("d1").next(); // 同级别的下一个标签 $("d1").nextAll(); // 同级别下面所有的标签
$("d1").nextUntil("c1"); // 同级别的所有标签直到 c1 为止，不包含 c1
$(".c1").prev(); // 上一个标签 $(".c1").prevAll(); // 上面所有标签
$(".c1").prevUntil("#d2);
$("#d3").parent(); // 父标签
$("#d3").parent().parent();
$("#d3").parents(); // 所有的父标签，一直到 HTML
$("#d3").parentsUntil("body");
$("#d2").children(); // 所有的子标签
$("#d2").siblings(); // 同级别的所有标签
$("div p");
等价于
$("div").find("p");
$("div span:first);
等价于
$("div span").first();
$("div span").last();
JQuery 操作标签
操作类
JS 版本
classList.add()
classList.remove()
classList.contains()
classList.toggle()
JQuery
addClass;
removeClass;
hasClass;
toggleClass;
一行代码让第一个 P 标签内容文字变成红色，第二个 P 标签内容文字变成蓝色
JQuery 的链式操作，JQuery对象调用一个JQuery方法之后返回的是JQuery对象，就意味着还可以继续调用方法
$("p").first().css("color", "red").next().css("color","blue");
位置操作
offset(); // 当前标签和页面的定位距离
position(); // 当前标签和父标签的距离
$(window).scrollTop(); // 滚动条离页面顶部的距离
scrollLeft();
尺寸
$("p").height() // 文本高度
$("p").width() // 文本宽度
$("p").innerHeight() // 文本 + padding
$("p").innerWidth() // 文本 + padding
$("p").outHeight() // 文本 + padding + border
$("p").outWidth() // 文本 + padding + border
文本操作
操作标签内部文本
JS 中
innerText
innerHtml
JQuery 中
text() // 括号内不加参数就是获取，叫参数就是赋值
html()
获取值操作
JS 中
.value
JQuery 中
.val() // 不加参数是获取，加参数是赋值
文件获取 转成标签对象.files[0]
属性操作
JS 中
setAttribute
getAttribute
JQuery 中
对于标签上有的能够看到的属性和自定义属性用 attr
对于返回布尔值比如 checkbox radio option 是否被选中用 prop
attr(name, value); // 设置属性
attr(name); // 获取属性
removeAttr(name); // 移除属性
prop，如 .prop("checked"), .prop("checked", true);
在用变量存储变量的时候
标签对象：JS 中使用 xxxEle 命名
JQuery对象：JQuery 中使用 $xxxEle 命名
文档处理
创建标签
JS 中
createElement
JQuery 中
$("<p>");
添加标签
JS 中
appendChild();
JQuery 中
标签对象.append(); // 内部尾部追加
JQuery对象.append();
.prepend(); // 内部头部追加
.remove(); // 移除标签
.empty(); // 清空当前标签内部所有的内容
相当于
.html("");
JQuery 事件
事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JQuery3.6.0.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<button id="d1">点我</button>
<script>
// $("#d1").click(
// function () {
// alert("123");
// }
// );
// (功能更强大，支持事件委托)
$("#d1").on("click", function () {
alert("123")
}
)
</script>
</body>
</html>
克隆事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JQuery3.6.0.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<style>
#d1 {
height: 200px;
width: 200px;
border: 3px solid red;
background-color: grey;
color: white;
}
</style>
</head>
<body>
<button id="d1">是兄弟就来砍我</button>
<script>
$("#d1").on("click", function () {
// this 指代的永远是当前被操作的标签对象
// console.log(this);
// 标签对象变成 JQuery 对象
// $(this);
// 克隆对象并添加到 body 中
// 克隆默认不克隆事件
// $(this).clone().insertAfter($("body"));
// 克隆事件
$(this).clone(true).insertAfter($("body"));
})
</script>
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
