一.jQuery的简介
1.jQuery是什么？
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）【jQuery就是javascript的一个库】把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。
极大地简化了 JavaScript 编程。
2.jQuery的版本
1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
3.jQuery与JavaScript的区别
Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。
4.jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
二.jQuery的使用
1.下载jQuery文件
Download the compressed, production jQuery 3.6.0---jquery-3.6.0.min.js
Download the uncompressed, development jQuery 3.6.0---jquery-3.6.0.js
Jquery是以“.js”结尾的，说明他是一个javascript文件。可以按照javascript的用法使用。
jquery-3.6.0.min.js--jquery的发布版，它的特点小，节省内存。因为它里面的内容被压缩了。
jquery-3.6.0.js---jquery的开发版，它的特点有注释可以查看具体的内容。它是没有压缩的。
2.导入jQuery的函数库文件
导入本地的
<script src="js/jquery-3.5.1.js"></script>导入网络的
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>3.jQuery的初始化函数
jQuery初始化函数
$(document).ready(function() {
alert("jQuery初始化函数");
});jQuery初始化函数简化版
$(function() {
alert("jQuery初始化函数简化版");
});jQuery==$
jQuery(function() {
alert("jQuery==$");
});4.jQuery与JavaScript的区别
5.jQuery对象与JavaScript对象的转换
- javascript对象----》Jquery对象-------【$(javascript对象)】
- Jquery对象------》javascript对象-----【Jquery对象.get()】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<!-- 导入jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//得到p1的DOM对象
var src1=document.getElementsByClassName(".p1");
//alert(src1);//[object HTMLCollection]
//DOM对象转换为jQuery对象
var src2=$(src1);
alert(src2);//[object Object]
//得到p2的jQuery对象
var src3=$(".p2");
//alert(src3);//[object Object]
//jQuery对象转换为DOM对象
var src4=src3.get();
alert(src4);//[object HTMLParagraphElement]
});
</script>
</head>
<body>
<p class="p1">DOM对象转jQuery对象</p>
<p class="p2">jQuery对象转DOM对象</p>
</body>
</html>
三.jQuery的选择器
1. #id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
相同的id值，只选取最前的一个。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<!-- 导入jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function() {
//p1字体增大到30px
$("#p1").css("font-size", "30px");
//p2字体增大到20px【但只执行最前面的id值】
$("#p2").css("font-size", "20px");
});
</script>
</head>
<body>
<p id="p1">测试$("#id")</p>
<p id="p2">测试$("#id")</p>
<p id="p2">测试$("#id")</p>
</body>
</html>
2. 元素选择器
jQuery 元素选择器基于元素名选取元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<!-- 导入jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function() {
//p元素字体增大到30px
$("p").css("font-size", "30px");
$("p").css("color", "red");
});
</script>
</head>
<body>
<p>测试$("元素")</p>
<p>测试$("元素")</p>
<p>测试$("元素")</p>
</body>
</html>
相比JavaScript来说，jQuery相对简便一些。【不用使用数组下标一个一个赋值】
3. .class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<!-- 导入jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function() {
//p1字体增大到30px
$(".p1").css("font-size", "30px");
//p2字体增大到20px
$(".p2").css("font-size", "20px");
$(".p2").css("color", "blue");
});
</script>
</head>
<body>
<p class="p1">测试$(".class属性值")</p>
<p class="p2">测试$(".class属性值")</p>
<p class="p2">测试$(".class属性值")</p>
</body>
</html>
当有相同的属性值时，id选择器只选取最前面的一个，class选择器则是全选
4.其他类型的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<script>
$(function() {
//元素选择器
$("p").css("background-color", "black");
//.class选择器
$("p.test1").css("color", "red");
//id选择器
$("#test2").css("color", "blue");
$("p:first").css("color", "green");
$("ul li:first").css("font-size", "30px");
$("ul li:last-child").css("font-size", "40px");
$("[href]").css("font-size", "20px");
$(":button").css("width", "180px");
$("table").css("width", "480px");
$("tr:even").css("background-color", "red");
$("tr:odd").css("background-color", "blue");
});
</script>
</head>
<body>
<p>测试jquery的基础语法1</p>
<p class="test1">测试jquery的基础语法2</p>
<p>测试jquery的基础语法3</p>
<p id="test2">测试jquery的基础语法4</p>
<ul>
<li>name=zhangsan</li>
<li>age=23</li>
<li>address=xian</li>
</ul>
<ul>
<li>name=lisi</li>
<li>age=23</li>
<li>address=xian</li>
</ul>
<ul>
<li><a href="#">name=wangwu</a></li>
<li><a href="#">age=23</a></li>
<li><a href="#">address=xian</a></li>
</ul>
<input type="button" value="测试button1" />
<input type="button" value="测试button2" />
<table border="1px">
<tr>
<td>1001</td>
<td>zhangsan</td>
<td>23</td>
<td>西安</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>24</td>
<td>西安</td>
</tr>
<tr>
<td>1002</td>
<td>lisi</td>
<td>25</td>
<td>西安</td>
</tr>
<tr>
<td>1001</td>
<td>zhangsan</td>
<td>23</td>
<td>西安</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>24</td>
<td>西安</td>
</tr>
<tr>
<td>1002</td>
<td>lisi</td>
<td>25</td>
<td>西安</td>
</tr>
</table>
</body>
</html>
三.jQuery语法
1.HTML元素选取和修改
<1.>.text
得到的只是内容中的文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<!-- 导入jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//得到p元素中的值
var src1=$("p").text();
alert(src1);//我知道错了，你回来好不好！
//修改p元素中的值
var src2=$("p").text("别离开我！");
});
</script>
</head>
<body>
<p>我知道错了，你<a href="#">回来</a>好不好！</p>
</body>
</html>
<2.>.html
得到的是元素中的所有内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<!-- 导入jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//得到p元素中的值
var src1=$("p").html();
alert(src1);//我知道错了，你<a href="#">回来</a>好不好！
//修改p元素中的值
var src2=$("p").html("别<a href='#'>离开<a>我！");
});
</script>
</head>
<body>
<p>我知道错了，你<a href="#">回来</a>好不好！</p>
</body>
</html>
<3.>.input
得到文本框初始的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<!-- 导入jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//得到文本框的内容
var src1=$("#int1").val();
alert(src1);//你还会回来吗？
//修改文本框的内容
var src2=$("#int1").val("我爱你！");
});
</script>
</head>
<body>
<input type="text" id="int1" value="你还会回来吗？" />
</body>
</html>
2.HTML元素操作
<1.>添加元素
append() - 在被选中元素中插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
background-color: aqua;
}
</style>
<!-- 导入本地jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function() {
//before是给被选中的元素前插入内容
$("#div1").before("<h2 style='color:blue;'>对不起，我错了！</h2>")
//append是给被选中的元素中插入内容
$("#div1").append("<h2 style='color:red;'>对不起，我错了！</h2>")
//after是给被选中的元素后插入内容
$("#div1").after("<h2 style='color:yellow;'>对不起，我错了！</h2>")
});
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
<2.>删除元素
remove() - 删除被选元素（及其子元素）【有过滤功能】
<script>
$(function() {
//remove() - 删除被选中元素（及其子元素）
$("元素").remove();
});
</script>empty() - 删除从被选元素中的子元素
<script>
$(function() {
//empty() - 删除从被选元素中的子元素
$("元素").empty();
});
</script>
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
background-color: aqua;
}
#div2 {
width: 250px;
height: 250px;
background-color: chartreuse;
}
</style>
<!-- 导入本地jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
<script>
$(function() {
//empty() - 删除从被选元素中的子元素
$("#div1").empty();
});
</script>
$(function() {
//remove() - 删除被选中元素（及其子元素）
$("#div2").remove();
});
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<img src="img/avatar.png">
</div>
<p>真的要这样吗？</p>
</div>
</body>
</html>
3.CSS 选取和修改
<1.>为元素添加不存在的样式
css(样式属性名称，属性值) 设置被选元素的具有这个样式。
css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
//得到p元素中字体的颜色
alert($("p").css("font-size"));//30px
//修改p元素中字体的颜色
var src=$("p").css({"color":"blue","font-size":"20px"});
});
</script>
</head>
<body>
<p style="font-size: 30px;color: red;">憨憨</p>
</body>
</html>
<2.>为元素添加已经存在的样式
addClass() - 向被选元素添加一个或多个样式类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style type="text/css">
.div2 {
width: 300px;
height: 300px;
background-color: blueviolet;
}
</style>
<!-- 导入jquery的函数库文件-->
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function() {
//得到按钮的对象
$("#but1").click(function() {
//jquery对象.addClass("class属性值")----为有class属性值的html元素设置style中的样式
$("#div1").addClass("div2");
});
$("#but2").click(function() {
//jquery对象.removeClass() - 从被选元素删除一个或多个类
$("#div1").removeClass("div2");
});
$("#but3").click(function() {
//jquery对象.toggleClass() - 对被选元素进行添加/删除类的切换操作
$("#div1").toggleClass("div2");
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="给div设置样式">
<input id="but2" type="button" value="删除">
<input id="but3" type="button" value="切换">
<div id="div1"></div>
</body>
</html>
4.HTML 事件函数
<1.>点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- 导入本地jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
//初始化事件
$(function() {
//点击事件
$("input").click(function(){
alert("从新认识一下！");
})
});
</script>
</head>
<body>
<input type="button" value="按钮" />
</body>
</html>
<2.>双击点击事件【点两次才会执行】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- 导入本地jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
//初始化事件
$(function() {
//双击元素发生点击事件
$("input").dblclick(function(){
alert("从新认识一下！");
})
});
</script>
</head>
<body>
<input type="button" value="按钮" />
</body>
</html>
<3.>mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
<4.>mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- 导入本地jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
//初始化事件
$(function() {
$("img").mouseenter(function(){
alert("从新认识一下！");
})
$("img").mouseleave(function(){
alert("就这样结束了吗？");
})
});
</script>
</head>
<body>
<img src="img/2048378.jpg" style="width: 800px;height: 500px;">
</body>
</html>
<5.>hover(function)方法用于模拟光标悬停事件。
<6.>focus(function)当元素获得焦点时，发生 focus 事件。
<7.>blur(function)当元素失去焦点时，发生 blur 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- 导入本地jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
//初始化事件
$(function() {
$("#id1").hover(function() {
alert("我是第一个！");
})
$("#text1").focus(function() {
$(this).val("background-color");
});
$("#text1").blur(function() {
alert($(this).val());
});
});
</script>
</head>
<body>
<a id="id1" href="#">测试hover</a>
<hr>
<input id="text1" type="text" value="测试获得焦点和失去焦点事件">
</body>
</html>
5.JavaScript 特效和动画[元素的隐藏和显示]
特效<第一组>
hide([毫秒数],[success-function]) 隐藏元素
show([毫秒数],[success-function]) 显示元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- 导入本地jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function() {
$("#input1").click(function() {
//得到按钮的文字
var inp = $("#input1").val();
//alert(inp);
//判断
if (inp == "隐藏") {
//hide([毫秒数],[success-function]) 隐藏元素
$("img").hide(6000, function() {
$("#input1").val("显示");
});
} else {
//show([毫秒数],[success-function]) 显示元素
$("img").show(6000, function() {
$("#input1").val("隐藏");
});
}
});
});
</script>
</head>
<body>
<input type="button" id="input1" value="隐藏" /><br>
<img src="img/avatar5.png">
</body>
</html>
特效<第二组>
fadeIn([毫秒数],[success-function]) 显示元素。
fadeOut([毫秒数],[success-function]) 隐藏元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- 导入本地jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function() {
$("#input1").click(function() {
//得到按钮的文字
var inp = $("#input1").val();
//alert(inp);
//判断
if (inp == "隐藏") {
//fadeOut([毫秒数],[success-function]) 隐藏元素。
$("img").fadeOut(4000, function() {
$("#input1").val("显示");
});
} else {
//fadeIn([毫秒数],[success-function]) 显示元素。
$("img").fadeIn(4000, function() {
$("img").css({"border":"10px solid yellow"});
$("#input1").val("隐藏");
});
}
});
});
</script>
</head>
<body>
<input type="button" id="input1" value="隐藏" /><br>
<img src="img/avatar5.png">
</body>
</html>
特效<第三组>
slideDown([毫秒数],[success-function]) 显示元素
slideUp([毫秒数],[success-function]) 隐藏元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- 导入本地jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function() {
$("#input1").click(function() {
//得到按钮的文字
var inp = $("#input1").val();
//alert(inp);
//判断
if (inp == "隐藏") {
//slideUp([毫秒数],[success-function]) 隐藏元素。
$("img").slideUp(3500, function() {
$("#input1").val("显示");
});
} else {
//slideDown([毫秒数],[success-function]) 显示元素。
$("img").slideDown(3500, function() {
$("img").css({"border":"10px solid yellow"});
$("#input1").val("隐藏");
});
}
});
});
</script>
</head>
<body>
<input type="button" id="input1" value="隐藏" /><br>
<img src="img/avatar5.png">
</body>
</html>
jQuery开始动画
jQuery animate() 方法允许您创建自定义的动画。
语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
jQuery 停止动画
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
#img1{
position: relative;
padding-top: 0;
padding-left: 0;
}
</style>
<!-- 导入本地jquery函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function() {
//开始的点击事件运作
$("#id1").click(function(){
//点击事件后做的事
$("#img1").animate({"padding-top": "200px","padding-left": "400px"},6000)
});
//停止的点击事件运作
$("#id2").click(function(){
//点击事件后使动画停止
$("#img1").stop();
});
});
</script>
</head>
<body>
<input type="button" id="id1" value="开始" />
<input type="button" id="id2" value="停止" /><br>
<img src="img/avatar2.png" id="img1">
</body>
</html>
6.HTML DOM 遍历和修改
jQuery each() 方法
语法：$(selector).each(function(index,element){ })
each函数中的function的
参数1-index--被遍历出的每一个元素在数组中的位置[下标]
参数2-element--被遍历出的每一个元素具体元素【DOM对象】
each函数中的function中没有element时，可以被this代替
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<!-- 导入jquery的函数库 -->
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function(){
//数组
var parray=$("p");
//$(selector).each(function(index,element){ });
//each函数中的function的
//参数1-index--被遍历出的每一个元素在数组中的位置[下标]
//参数2-element--被遍历出的每一个元素具体元素【DOM对象】
parray.each(function(index,element){
var size=index*10+20;
$(element).css("font-size",size+"px");
});
/*
//each函数中的function中没有element时，可以被this代替
parray.each(function(index){
var size=index*10+20;
$(this).css("font-size",size+"px");
});
*/
});
</script>
</head>
<body>
<p>测试用的p元素1</p>
<p>测试用的p元素2</p>
<p>测试用的p元素3</p>
<p>测试用的p元素4</p>
</body>
</html>
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
