前端Jquery详细教程
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端Jquery详细教程相关的知识，希望对你有一定的参考价值。
❤️Jquery必备知识详解❤️
👇
👉🚔直接跳到末尾🚔👈 ——>领取专属粉丝福利💖
☝️
👻我又仔细想了想，html、CSS、javascript系列都做了，怎么能缺少Jquery呢？👻
😬所以！本博主又加班加点产出了Jquery版本的入门级教程！！！😬
😜在本篇博文中，本博主就带领小伙伴们认真地学习一下Jquery~😜
第一部分：JQ是什么？
-
什么是JQ？
JQ是JS写的插件库，说白了，就是一个js文件。 -
JS和JQ的区别：
凡是用jq能实现的，js都能实现；js能实现的，jq却不一定能实现。可以理解为js是jq他爹，爹会的比儿子多~ -
JQ的理念：
Write less,do more！
1.JQ的引入：
JQuery官方网址：https://www.bootcdn.cn/jquery/
进入JQ官网之后：
我们选择第二个或者第三个都可以，第一个和最后两个只是JQ的部分，有些功能没有。
第二个和第三个的区别：第二个是正常版；第三个是压缩版。
（1）第一种引入方式：网址引入！
选择第二个或者第三个两个选项都可以，效果一样!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ的引入</title>
</head>
<body>
<!--第一种方法：网址引入-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// $是JQ里面的代表符号
$(function () //如果页面弹出123，则证明引入JQ正常！
alert(123)
)
</script>
</body>
</html>
（2）第二种引入方式：本地引入！
直接将JQuery复制粘贴到本地保存即可!
<script src="本地的Jquery地址"></script>
2.JQ的选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ的选择器</title>
</head>
<body>
<p>我是一个段落标签</p>
<script src="JQuery.js"></script>
<script>
// JQ选择器获取元素的方法和CSS一模一样！！！ 固定格式：$("") 双引号里面写选择器！！！
$("p").click(function () //注意：JQ里的单击事件是click，注意这个写法和JS是有所不同的！
alert("我出来了");
);
</script>
</body>
</html>
第二部分：基本使用
（效果都很直观，自己动手实操哦~一步步琢磨，有不懂的可以文末公众号咨询！）
1.基本使用一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ的基本使用一</title>
</head>
<body>
<div>
<p id="p1">我是段落</p>
<p id="p2">我是段落666</p>
</div>
<script src="JQuery.js"></script>
<script>
// 1.修改内容
// JS的写法
var p = document.getElementById("p1");
p.innerText = "我不是段落";
// JQ的写法
$("#p1").text("我不是段落1");
$("#p1").html("我就是段落2");
// 2.JQ和JS相互转换
// JQ转JS $("#p1")是JQ的获取元素； .get([0])是将JQ转换为JS； innerText = "111"是使用JS方法。
$("#p1").get([0]).innerText = "111";
$("#p1")[1].innerText = "222";
// JS转JQ 先是JS的方法获取元素； $(p11)是将JS转换为JQ； text("123")是使用JQ方法。
var p11 = document.getElementById("p1");
$(p11).text("123");
// 3.单击事件
// 如果不加下标，JQ可以同一时间给多个元素设置同一事件；下面代码会给选中的两个段落标签都设置单击事件；但是JS就不行，需要加下标！
// 如果只想选中段落标签里的某一个，那就加下标 .eq(下标) 加在获取元素之后。 即$("p")之后！
$("p").click(function ()
alert(456);
);
// 4.鼠标滑入滑出事件
$("#p1").hover(function ()
$("#p1").text(111);
,function () //如果只写第一个函数，就只是鼠标滑入事件；两个都写，就是滑入滑出事件。
$("#p1").text(222);
);
// 5.追加和添加 注意：这是加到p1标签里面，是p1的子元素！！！
$("#p1").append("<p>111</p>"); //追加 后缀
$("#p1").prepend("<p>222</p>"); //添加 前缀
// 6.前和后 注意：这里加之后是p1的同级标签，是p1的兄弟元素。
$("#p1").after("<p>333</p>");
$("#p1").before("<p>444</p>");
// 7.清空 清空所选元素里面的所有东西（包括文本内容和标签）
$("div").empty();
// 8.移除 清空所有，包括自己本身以及其内所有东西！
$("div").remove();
</script>
</body>
</html>
2.基本使用二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ的基本使用二</title>
<style>
div
width: 1200px;
height: 1200px;
</style>
</head>
<body>
<div>
<p id="p1">我是段落1</p>
<p id="p2">我是段落2</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script src="JQuery.js"></script>
<script>
// 操作标签属性
// 第一部分：自定义属性
// 1.增加属性
$("div").attr("id","div1");
// 2.改变属性
$("div").attr("id","div2");
// 3.删除属性
$("div").removeAttr("id");
// 4.查
console.log($("div").attr("id"));
// 第二部分：合法属性
// 1.增加属性
$("div").addClass("div1");
// 要注意：常规的如果增加重复标签属性就是变相的改，但是此处不是改，仍然是增，一个class可以对应多个值！！！
$("div").addClass("div2");
// 2.修改属性 得先删然后增，变相的改！
$("div").removeClass("div1").addClass("div2");
// 3.删除属性
$("div").removeClass("div2");
// 查
console.log($("div").hasClass("div2"));
// 注意：如果只是删除属性，那么只是删除了属性对应的属性值，属性名还会存在
$("div").removeClass("div2"); //就像这样，删的不彻底哎，所以用下面的移除方法：
$("div").removeAttr("class"); //这样就删除的很彻底了！ 属性名也没了！
// 遍历
$("li").each(function ()
alert($(this).text()); //this代表当前元素。
);
//索引 获取当前文本的下标！
$("li").click(function ()
alert($(this).index());
);
//滚动条事件 scroll()里面写函数，当网页的滚动条发生变化时，执行其内的函数！
$(window).scroll(function ()
console.log("顶部："+$(document).scrollTop()); //弹出滚动条相对于浏览器顶部的偏移
console.log("左边："+$(document).scrollLeft()); //弹出滚动条相对于浏览器左边的偏移
)
</script>
</body>
</html>
3.基本使用三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ的基本使用三</title>
<style>
div
position: relative;
</style>
</head>
<body>
<div>
<p id="p1">我是段落1 </p>
<p id="p2">我是段落2 </p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button id="btn1">移除事件</button>
</div>
<script src="JQuery.js"></script>
<script>
// 查找父元素
console.log($("#p1").parent()); //div
// 查找子元素
console.log($("div").children());
// 查找兄弟元素
console.log($("#p1").siblings());
// 查找后代元素 必须要指明要查找的是哪个后代，不然查找不到哦！
console.log($("div").find("p"));
//查找祖先元素
console.log($("div").parents()); //body html
// 定位父级（绝对定位，参考对象是设置了定位的父级，没有即为浏览器） 当前元素距离它父级的位置，单位是px
var box = $("#p1").position(); //id为p1的标签的父级是div，而且我们给div设置了定位，所以绝对定位参考对象是div。
console.log(box.left); //0px
console.log(box.top); //-16px
//定位窗口 相对于当前文档偏移的坐标！ 注意：如果定位父级的父级没有设置定位，那么这两个定位效果一样！
var box1 = $("div").offset();
console.log(box1.left); //8
console.log(box1.top); //16
// 宽高
console.log($("div").width());
console.log($("div").height());
// 循环添加 添加的是事件
$("p").on("click",function ()
$(this).css("background-color","red"); //.css是JQ里设置样式的方法
);
//移除 移除的也是事件。注意：移除的是后续的事件。
//比如：下面是通过点击按钮移除上面的循环添加事件，在没有点击按钮之前事件可以执行，如果点击按钮，也只是后续事件，
//再点击按钮之后事件不能实现，但是之前实现的事件仍存在！
$("#btn1").click(function ()
$("p").off("click");
);
</script>
</body>
</html>
第三部分：操作样式
<!DOCTYPE html>
<html lang="en">
<headWeb前端： JQuery最强总结（每个要点都附带完全案例 详细代码！）
Web前端： JQuery最强总结（每个要点都附带完全案例 详细代码！）