【技术分享】WEB前端全栈成长计划(二阶段)-jQuery入门篇
学完HTML+CSS+JavaScript后通过课程接触到jQuery，jQuery不能算是前端框架，最多是个Js函数库，但它同样经典。jQuery的对于自己的定义“write less,do more（写得更少，又能做更多的事情），学完js后已经学习过通过JS操作DOM（网页文档对象模型），原生的js语法在使用上非常的繁琐，jQuery的出现很好的帮助了开发者高效的完成效果，减少了代码量。虽然现在bootstrap、vue这类前端框架横空出世，但作为经典之作的jQuery还是很有必要掌握一下它的基本使用。
由于初学，本篇不会过多深入研究，仅从基础使用角度出发研究与学习一下。
一、下载jQuery与HTML文档中加载jQuery库
1、下载jQuery
官网地址：https://jquery.com/download/
jQuery已经历3个版本，目前最新版为3.5.1，简单说明一下
完整版
Download the compressed, production jQuery 3.5.1 （压缩版）
Download the uncompressed, development jQuery 3.5.1 （未压缩版）
移除ajax和effects模块版本
Download the compressed, production jQuery 3.5.1 slim build （压缩）
Download the uncompressed, development jQuery 3.5.1 slim build （未压缩版）
学习使用，下载未压缩的完整版可满足需求
官网下载有时会失败，我的Gitee上存了一份，有需要的可以去下载
https://gitee.com/net_master/Public/tree/master/jQuery
2、HTML文档中加载jQuery库
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<script src="less/jquery-3.5.1.js "></script> <!--src中引用jQuery库文件-->
</head>
<body>
<script>
$("body").append("测试jQuery库是否生效");
</script>
</body>
</html>
如果测试内容能显示，则表示我们的jQuery库成功加载了
二、掌握jQuery语法与选择器
基础语法：$(选择符).操作符()
美元符：jQuery简写 也是我们以后经常使用的
选择符：查询html文档中id、class、元素标记 可以理解为定位
操作符：执行对元素的操作
$("#btn").click(); 为id=btn元素添加点击事件
$("#title").hide(); 隐藏id=title的元素
jQuery入口函数（document ready 文档就绪事件）
这个函数是保证在DOM文档全部加载完毕后才进行相关操作，如果文档还未加载完就运行jQuery进行操作，可能出现失败的情况
两种写法：
$(document).read(function(){
// jQuery代码部分
});
$(function(){
// jQuery代码部分
});
重点：我们只要记住如果我们的HTML页面有很多是jQuery动态处理的，那一定得将代码写在入口函数中，以确保在DOM加载完后才执行操作
jQuery选择器
允许对单个或多个HTML元素进行操作
jQuery基于CSS选择器，支持id、类、属性等查找HTML元素，选择器与$()搭配使用
#id 查询id
.class 查询类
:first 查询第一个
:first-child 查询每个元素的第一个元素
$(".btn-class") 查询class为btn-class的元素
$("span.newBox") 查询class为newBox中的<span>元素
$("h3:first") 查询第一个h3元素
$("ul li:first") 查询第一个<ul>元素中的第一个<li>元素
$("ul li:first-child") 查询每个<ul>元素中的第一个<li>元素
$("*") 查询html中所有元素
$("this") 查询当前html元素
重点：学过CSS选择器应该很容易理解jQuery选择器，但是要特别注意 class中某一元素的查询语法与CSS选择器略有不同
三、理解jQuery事件
当我们在网页中移动鼠标，点击鼠标的时候会有一些响应，这些响应就叫做事件。处理事件是我们提前写了处理逻辑，当网页中触发我们定义事件时，事件将按照我们写的代码逻辑进行处理。
jQuery事件有：鼠标事件、键盘事件、表单事件、文档/窗口事件，在这里我们重点说一下鼠标事件，因为初学CSS后，我们希望尽快掌握一些页面特效
鼠标事件
click 单击
dblclick 双击
mouseenter 移入
mouseleave 移出
hover 悬停
语法结构： $("选择符").事件函数(可选值)
1、click和dblclick事件
为HTML元素添加一个点击事件，不是按钮元素也可以添加点击事件，但是同一个元素只能添加一种点击事件，两种事件是不能叠加的
<div><span id="txtbtn">单击点我看看<span></div>
<div><span id="txtbtn1">双击点我看看<span></div>
<script>
$("#txtbtn").click(function(){
alert("鼠标单击！")
});
$("#txtbtn1").dblclick(function(){
alert("叫你双击,你就双击,真乖!")
});
</script>
2、mouseenter和mouseleave事件
和点击事件不一样，mouseenter和mouseleave事件可以单独使用，也可以搭配使用
<div class="box" style="width:200px;height:200px;background-color:red">我这个无情的DIV</div>
<script>
$(".box").mouseenter(function(){
$(".box").css("background-color","blue"); //鼠标移入，变蓝
});
$(".box").mouseleave(function(){
$(".box").css("background-color","red"); //鼠标移走，恢复红色
});
</script>
3、hover事件
这个事件很有意思,模拟悬停可以触发mouseenter和mouseleave事件,但是需要语法书写上要注意,需要定义两个function(),function(),中间用逗号分隔
<div class="box1" style="width:200px;height:200px;background-color:blue">无情的蓝色DIV</div>
<script>
$(".box1").hover(
function(){
alert("触发mouseenter移入事件");
},
function(){
alert("触发mouseleave移出事件");
}
);
</script>
四、如何利用jQuery操作DOM文档
DOM文档全称为Document Object Model，简称文档对象模型，俗称就是指网页。我们学习jQuery的也是为了更方便的操作网页的各种元素让页面更酷炫动感十足。
为什么我们要使用jQuery，比较代码如下：
<button id="btn">我就是个按钮</button>
<p id="btn1">我不是个按钮</p>
<script>
// javascrip原生语法操作DOM
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("你点到了我！")
}
// jQuery操作DOM
$('#btn1').click(function(){
alert("我不是按钮，你还是点我！")
});
</script>
首先我们对从代码量进行一下对比，jQuery可以帮我们减少非常多的重复代码，书写逻辑更流畅，这也是我们促使我们学会它的原因之一。
1、DOM中元素设置与获取
html() 设置与获取选中文档中元素的内容和标签 若获取为空，返回undefined
text() 设置与获取选中文档中元素的文本内容 若获取为空，返回undefined
val() 设置与获取表单中字段的值
attr() 设置与获取元素属性值
1）通过html()、text()、val()获取元素内容
<div id="divText">这是我们要获取的<b>元素内容</b></div>
<div><span id="spanBtn">通过html()获取</span> <span id="spanBtn1">通过text()获取</span></div>
<script>
$("#spanBtn").click(function(){// 监听鼠标单击事件
alert("获取完整HTML内容:"+ $("#divText").html()); //查询id为divText的元素，使用html()获取元素内容
});
$("#spanBtn1").click(function(){
alert("获取元素文本内容:"+ $("#divText").text());
});
</script>
2）通过val()获取表单的值
<input type="text" id="txtInput" value="100000"></input>
<button id="btn3">获取表单的值</button>
<script>
$("#btn3").click(function(){ // 监听鼠标单击事件
alert("表单中的值为："+ $("#txtInput").val()) // 查询id为txtInput的元素，使用val()获取元素内容
});
</script>
3）通过attr()获取元素属性
attr的获取调用方法：attr("属性名")
<input type="text" id="txtInput2" value="100000"></input>
<button id="btn4">获取表单中输入框的type属性</button>
<script>
$("#btn4").click(function(){ // 监听鼠标单击事件
alert("表单中输入框的type属性为："+ $("#txtInput2").attr("type")); //查询id为txtInput2的元素，使用attr("type")获取表单控件type属性
});
</script>
2、如何设置DOM中的元素
与获取DOM中元素使用的方法相同，不同之处是在函数调用时携带了实参，实参即是需要设置的内容
1）通过html()、text()、vall()设置元素内容
<p id="text11">我是要被修改的文本</p>
<p id="text22">我也是要被修改的文本</p>
<input id="textInput22" type="text" value="改成什么"></input></br>
<button id="btn11">html()设置</button></br>
<button id="btn22">text()设置</button></br>
<button id="btn33">val()设置</button></br>
<script>
$("#btn11").click(function(){ // 监听鼠标单击事件
$("#text11").html("<b>我是被html()修改的</b>"); // 查询id为text11的元素，使用html()设置元素内容
});
$("#btn22").click(function(){
$("#text22").text("我是被text()修改的");
});
$("#btn33").click(function(){
$("#textInput22").val("我是被val()修改的");
});
</script>
2）通过attr设置元素内容
attr属性设置略有不同,设置属性的语法为 attr("属性名","属性值")
<input id="textInput33" type="text" value="type属性设置为password"></input></br>
<button id="btn44">attr()设置,type将被改成password</button></br>
<script>
$("#btn44").click(function(){ // 监听鼠标单击事件
$("#textInput33").attr("type","password"); //查询id为textInput33的元素，使用attr("type","password")将表单输入框的type属性设置为password
});
</script>
3、回调函数方法的运用
当我们通过jQuery设置元素内容或属性时，通过加载回调函数可以获得当前元素新值和原始值，前面讲到的获取和调置元素函数方法如html()、text()、val()、attr()都是支持回调函数方法的。
回调函数方法需要定义两个形参变量 function(当前元素下标,原始值)，比如function(i,oldValue), i定义为被选元素列表中当前元素的下标,oldValue为原始值，形参变量是可以自己定义的。
什么时候会用到回调函数方法？信息更新时和与用户进行确认，超文本链接组合拼接等一些需要利用到原始值和新值的操作。
1）以html()为例演示回调函数的使用
下面这个例子，我们要修改<p>标签元素中的内容，并且弹窗示显出<p>标签元素的未修改前的原始值
<p id="p1">今天是个好天气</p>
<button id="btn55">改变天气</button>
<script>
$("#btn55").click(function(){ // 监听鼠标单击事件
$("#p1").html(function(i,oldValue){ // 初学者，咱们暂时忽略i,只关注oldValue这个形参变量即可
alert('原始值:'+ oldValue);
alert("被选元素列表中当前元素的下标："+ i);
return "突然开始下雨了"; // 必须使用 return 来返回 新值的内容
});
});
</script>
2）以attr()为例演示回调函数的使用
下面这个例子，是一个拼接超文本链接的示例，原始链接指向gitee.com，通过点击按钮将超链接href内容拼接字符串为原始值+新值
<a href="https://gitee.com" target="_blank">gitee.com</a>
<button id="btn66">改变href</button>
<script>
$("#btn66").click(function(){
$("a").attr("href",function(i,origValue){
return origValue + "/net_master"; //返回为 原始值+"/net_master"
});
$("a").text($("a").attr("href")); //方便观察变化，修改a元素内容为href属性值，
});
</script>
重点：在回调函数的学习上，作为初学者回调函数中function(i,oldValue)这个i的形参其实可以忽略掉，因为暂时用不到，还请记住形参是可以自己定义的。
jQuery入门篇就先到这里，只要HTML、CSS、JavaScript这些基础语言掌握了，学起jQuery入门还是很容易的，特别是要理解回调函数方法的运用。
本篇的实践代码已上传到我的Gitee,对着代码敲不出来效果的，可以去下载对比一下区别。https://gitee.com/net_master/Ajax_Node/tree/master/jQuery
书山有路勤为径，学海无涯苦作舟!!!
除了认真学习,还要系统的去学,只有这样才能积蓄力量,勇攀高峰!!!!!
zhoubo
2020.8.4 at Great 108
- 点赞
- 收藏
- 关注作者
评论（0）