jQuery
- 前端
- 2023-01-23
1. jQuery的定义
jQuery是对JavaScript的封装，它是一个免费的、开源的JavaScript函数库，jQuery简化了JavaScript编程
jQuery兼容了现在主流的浏览器，不用去做版本适配；使用原生的js，适配得自己去做
2. jQuery的作用
jQuery和js的作用一样，都是负责网页行为的操作，增加网页和用户的交互效果的；但是jQuery简化了js，使用jQuery实现交互效果更简单
3. jQuery的安装
可以通过两种方式在网页中添加jQuery：
从https://code.jquery.com/下载jQuery库从CDN(内容分发网络)中引用jQuery3.1 从官网下载jQuery库
下载地址：
我们选择jQuery1.x的版本，因为1.x的版本有做浏览器不同版本的适配
uncompressed：没有压缩的版本，保留了空格、缩进minified：压缩版本，删除了空格和换行开发用哪个版本都行，上线都是用压缩版本的
右键minified，选择"在新标签页中打开链接"
右键页面，选择"另存为"把文件保存到本地
将下载下来的文件放在网页同一个目录下，然后通过HTML的标签<script>对它进行引用：
<head>
<script src="jquery-1.12.4.min.js"></script>
</head>
3.2 从CDN中引用jQuery
百度、新浪、微软、谷歌、又拍云......等服务器都存有jQuery，因为我们的站点在国内，最好使用国内的CDN，比如使用百度的CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
4. jQuery的使用
将下载下来的文件放在网页同一个目录下
4.1 引入jQuery
<!-- 导入jQuery对应的js文件 -->
<script src="js/jquery-1.12.4.min.js"></script>
4.2 jQuery的入口函数
使用js获取标签元素，需要页面加载完成后再获取，js的原生做法是通过给onload事件设置一个函数来获取标签元素；而jQuery提供了ready函数来保证获取的标签元素没有问题，它的速度比原生的window.onload更快
window.onload与$(document).ready()的区别：
执行时机：window.onload必须等当前页面的标签和标签使用的资源数据(包括图片)都加载完毕后再执行包裹的代码；而$(document).ready()只需等网页中的DOM结构也就是页面标签加载完毕后就能执行包裹的代码执行次数：window.onload只能执行一次，如果执行第二次那么第一次的执行就会被覆盖；而$(document).ready()可以执行多次，第N次都不会被上一次的覆盖window.onload没有简写方式；(document).ready()的简写方式：$(function(){});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery的使用</title>
<!-- 导入jQuery对应的js文件 -->
<script src="js/jquery-1.12.4.min.js"></script>
<!-- 使用jQuery代码需要重开一个script标签 -->
<script>
// 原生js写法: 当前页面的标签和标签使用的资源数据都加载完成，才会触发onload事件
window.onload = function(){
var oDiv = document.getElementById("div1");
console.log("oDiv:" + oDiv);
};
// $(document).ready(): 等待页面标签加载完成后就执行ready事件，不用等待资源数据加载完成
// $符号：jQuery的象征，$本质就是一个函数，只不过把函数名就叫做$
$(document).ready(function(){
// 获取标签和css样式匹配标签的规则一样
// 使用jQuery变量名都要以$符号开头
var $div = $("#div1");
console.log("$div:" + $div);
});
// jQuery的简写方式
$(function(){
var $div = $("#div1");
console.log("$div:" + $div);
});
</script>
</head>
<body>
<div id="div1">容器标签</div>
</body>
</html>
在浏览器中查看：
5. jQuery选择器
jQuery选择器就是快速选择标签元素，获取标签的；选择规则和css样式一样
5.1 jQuery选择器的种类
标签选择器：根据标签名来选择标签类选择器：根据类名来选择标签id选择器：根据id来选择标签层级选择器：根据层级关系来选择标签属性选择器：根据属性名来选择标签可以使用length属性来判断标签是否选择成功，如果length>0表示选择成功，否则表示选择失败
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery的选择器</title>
<!-- 引入jQuery -->
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// jQuery的入口函数
$(function(){
// 标签选择器
var $h1 = $("h1");
console.log("$h1.length: " + $h1.length);
// 类选择器
var $p1 = $(".p1");
console.log("$p1.length: " + $p1.length);
// id选择器
var $div1 = $("#div1");
console.log("$div1.length: " + $div1.length);
// 层级选择器
var $h2 = $("div h2");
console.log("$h2.length: " + $h2.length);
// 属性选择器: 先根据标签选择html标签，然后再根据属性值进行标签过滤
var $text = $("input[type=text]");
console.log("$text.length: " + $text.length);
});
</script>
</head>
<body>
<h1>一级标题</h1>
<h1>一级标题一级标题</h1>
<p class="p1">段落标签</p>
<div id="div1">容器标签</div>
<div>
<h2>二级标题</h2>
</div>
<input type="text">
<input type="button">
</body>
</html>
在浏览器中查看：
6. 选择集过滤
选择集过滤：在选择标签的集合里面过滤出自己需要的标签
6.1 选择集过滤的操作
has(选择器名称)方法：表示选取包含指定选择器的标签eq(索引)方法：表示选取指定索引的标签<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择集过滤</title>
<!-- 引入jQuery -->
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// jquery入口函数
$(function(){
// 通过jQuery标签选择器获取html标签
var $divs = $("div");
// 获取包含有指定选择器的父标签
$divs.has("p").css({"color":"red"});
// 根据下标选择指定的标签
$divs.eq(0).css({"color":"green"});
});
</script>
</head>
<body>
<div>
<h1>一级标题</h1>
</div>
<div>
<p>段落标签</p>
</div>
</body>
</html>
在浏览器中查看：
7. 选择集转移
选择集转移：以选择的标签为参照，然后获取转移后的标签
7.1 选择集转移操作
选择集操作说明$("#id名称").prev()选择id是"id名称"元素的上一个的同级元素$("#id名称").prevAll()选择id是"id名称"元素的上面所有的同级元素$("#id名称").next()选择id是"id名称"元素的下一个的同级元素$("#id名称").nextAll()选择id是"id名称"元素的下面所有的同级元素$("#id名称").parent()选择id是"id名称"元素的父元素$("#id名称").children()选择id是"id名称"元素的所有子元素$("#id名称").siblings()选择id是"id名称"元素的其他同级元素$("#id名称").find(".类名")选择id是"id名称"元素的class等于"类名"的元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择集转移</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 选择集转移：根据指定标签为参照物，选择其他标签
$(function(){
// 获取id为p1的元素，并把p1作为参照物，获取其他标签
var $div1 = $("#div1");
// 1. 选择上一个同级标签：prev
// 属性名和css里面的属性名保持一致，css是一个js对象
$div1.prev().css({"color": "red"});
// 2. 选择p1上面所有的同级标签：prevAll
// text-indent: 缩进
$div1.prevAll().css({"text-indent": "100px"});
// 3. 选择下一个同级标签：next
$div1.next().css({"color": "green"});
// 4. 选择p1下面所有的同级标签：nextAll
$div1.nextAll().css({"text-indent": "50px"});
// 5. 选择同级的其他标签：siblings
// text-decoration: 设置下划线
$div1.siblings().css({"text-decoration": "underline"});
// 6. 选择父标签：parent
$div1.parent().css({"background": "greenyellow"});
// 7. 选择所有子标签：children
$div1.children().css({"color": "blue"});
// 8. 查找指定的子标签：find
$div1.find(".myh4").css({"color": "red"});
});
</script>
</head>
<body>
<div>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<div id="div1">
<p>段落标签</p>
<h4 class="myh4">四级标题</h4>
<h6>六级标题</h6>
</div>
<h3>三级标题</h3>
<h2>二级标题</h2>
<h1>一级标题</h1>
</div>
</body>
</html>
在浏览器中查看：
8. 获取和设置元素内容
html方法：获取和设置元素内容append方法：给指定元素追加html内容<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取和设置标签的内容</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 选择标签
var $h1 = $("h1");
// 获取标签的内容
var $content = $h1.html();
console.log($content);
// 给指定的标签设置内容：覆盖之前的原有内容
$h1.html("<h3>三级标题</h3>");
// 给指定标签追加内容
$h1.append("<p>段落标签</p>");
})
</script>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
在浏览器中查看：
9. 获取和设置元素属性
prop方法：获取和设置元素属性val方法：获取和设置元素的value属性更加简单方便给标签设置样式属性使用css方法，设置标签的其他属性使用prop方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取和设置标签属性</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取标签
var $h1 = $("h1");
// 获取样式属性
var $px = $h1.css("font-size");
console.log("一级标题的默认字体大小：" + $px);
// 设置样式属性
$h1.css({"font-size": "20px", "color": "green"});
console.log("设置之后的一级标题的字体大小: " + $h1.css("font-size"));
// 除了样式属性相关操作使用css方法外，其他属性的操作都使用prop方法
var $text1 = $("#text1");
// 获取属性
var $name = $text1.prop("name");
console.log("$name: " + $name);
// 设置属性
$text1.prop({"value": "张三", "class": "Tname"});
console.log($text1.prop("value") + " " + $text1.prop("class"));
// 使用val方法获取和设置value属性
// 使用val方法获取value属性
console.log("使用val方法修改前的value: " + $text1.val());
// 使用val方法设置value属性
$text1.val("李四")
console.log("使用val方法修改后的value: " + $text1.val());
});
</script>
</head>
<body>
<h1>一级标题</h1>
<input type="text" name="username" id="text1">
</body>
</html>
在浏览器中查看：
10. jQuery常用的事件
jQuery常用的事件说明click()鼠标点击blur()元素失去焦点focus()元素获得焦点mouseover()鼠标进入(进入子元素也会触发)mouseout()鼠标离开(离开子元素也会触发)ready()DOM加载完成<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery常用的事件</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取div标签
var $div = $("div");
// 获取ul里面所有的li标签
var $lis = $(" div ul li");
// 获取text标签
var $text1 = $("#text1");
// 获取button标签
var $btn1 = $("#btn1");
// 添加点击事件
$lis.click(function(){
// 获取当前点击的标签对象
// 原生js的写法
// this.style.color = "red";
// juqery的写法
$(this).css({"color": "green"});
// 获取点击标签的索引
console.log("您当前点击的索引是：" + $(this).index());
});
$btn1.click(function(){
// 获取文本框的内容
console.log($text1.val());
});
// 给text文本框添加获取焦点事件
$text1.focus(function(){
// 获取得到焦点的文本框，然后设置样式属性
$(this).css({"background": "green"});
});
// 给text文本框添加失去焦点事件
$text1.blur(function(){
// 给失去焦点的文本框设置样式属性
$(this).css({"background": "white"});
});
// 给div设置鼠标悬停(进入)事件
$div.mouseover(function(){
$(this).css({"background": "greenyellow"});
});
// 给div设置鼠标离开事件
$div.mouseout(function(){
$(this).css({"background": "white"});
})
})
</script>
</head>
<body>
<div>
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
<input type="text" id="text1">
<input type="button" id="btn1" value="确定">
</div>
</body>
</html>
在浏览器中查看：
jQuery常用的事件
11. 事件代理
使用场景：当多个相同的子元素绑定同一个事件时，可以使用事件代理
事件冒泡：就是事件会向它的父级一级一级传递
事件代理：利用事件冒泡的原理，把事件加到父级上，通过判断事件来源，执行相应的子元素的操作；事件代理首先可以极大的减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作
事件代理通过使用delegate()方法来完成
delegate(childSelector,event,function)
childSelector：子元素的选择器event：事件名称function：当事件触发时执行的函数<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件代理</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 事件冒泡：事件会一级一级往上(父控件)传递
// 获取标签
$div = $("#div");
$p1 = $("#p1");
// 给标签设置点击事件
$div.click(function(){
console.log("点击了div标签");
});
$p1.click(function(){
console.log("点击了p标签");
// 默认事件会进行冒泡，通过返回false可以取消事件冒泡，不让事件向父控件传递
return false;
});
// 事件代理：让父控件代理子控件的事件，然后执行子控件的相关操作
var $ul = $("div ul");
$ul.delegate("li", "click", function(){
$(this).css({"color": "red"});
console.log("点击了索引：" + $(this).index());
});
// 事件代理还可以代理不同子控件的事件
// 第一个参数：子元素的选择器，多个选择器之间使用","进行隔开
// 第二个参数：事件的名称
// 第三个参数：当事件触发时执行的函数
var $div1 = $("#div1");
$div1.delegate("h1,p", "click", function(){
$(this).css({"color": "green"});
});
});
</script>
</head>
<body>
<div id="div">
<p id="p1">段落标签</p>
<input type="button" id="btn1" value="确定">
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
</div>
<div id="div1">
<h1>一级标题</h1>
<p>段落标签段落标签</p>
</div>
</body>
</html>
在浏览器中查看：
事件代理
12. 自定义JavaScript对象
JavaScript中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象；JavaScript可以自定义对象
创建自定义的JavaScript对象的方式：
通过顶级类型Object来实例化一个对象通过对象字面量创建一个对象<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义JavaScript对象</title>
<script>
// 自定义JavaScript对象
// 1. 使用顶级类型Object创建自定义的JavaScript对象
var oStudent = new Object();
// 1.1 设置对象的属性
oStudent.name = "张三";
oStudent.sex = "男";
// 1.2 设置对象的方法
oStudent.showinfo = function(){
// 1.3 获取对象的属性
console.log("姓名：" + oStudent.name + "，性别：" + oStudent.sex);
};
// 1.4 获取对象的方法
oStudent.showinfo();
// 2. 通过字面量创建自定义的JavaScript对象
var oDog = {
// 2.1 设置对象的属性
name: "小白",
age: 2,
// 2.2 设置对象的方法
bark:function(){
console.log("汪汪汪");
}
}
// 2.3 获取对象的属性
console.log(oDog.name + " " + oDog.age);
// 2.4 获取对象的方法
oDog.bark();
</script>
</head>
<body>
</body>
</html>
在浏览器中查看：
13. json数据格式
json(JavaScript Object Notation)，JavaScript对象的表示法，json类似于JavaScript对象的字符串，它是一种数据格式
json有两种格式：
对象格式数组格式13.1 对象格式
对象格式的json数据，使用一对大括号{}，大括号里面是key:value形式的键值对，多个键值对之间使用","分隔开
{
"name":"张三",
"sex":"男"
}
json中的key属性名称和字符串值需要使用双引号，用单引号或者不用引号会导致读取数据错误13.2 数组格式
数组格式的json数据，使用一对中括号[]，中括号里面的数据使用","分隔开
["张三",18,"男"]
13.3 json数据转换成JavaScript对象
json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json数据格式</title>
<script>
/*
json：类似于JavaScript对象的字符串，本质上就是一个字符串，同时还是一种数据格式
json的数据格式有两种：
1. 对象格式：最外层是一对大括号{}，大括号里面是key:value形式的键值对，key名和字符串数据都要使用双引号
2. 数组格式：最外层是一对中括号[]，每项数据之间使用逗号","隔开
*/
// 1. 对象格式的json数据
var sJson1 = {"name": "张三", "age": 20};
// 把json数据转成JavaScript对象
var oStudent = JSON.parse(sJson1);
console.log(oStudent);
// 获取属性
console.log(oStudent.name + " " + oStudent.age);
// 2. 数组格式的json数据
var sJson2 = [{"name": "李四", "age": 20}, {"name": "王二", "age": 22}]
var aArray = JSON.parse(sJson2);
console.log(aArray);
// 通过下标获取指定的js对象，然后通过js对象获取age属性
var oPerson = aArray[0];
console.log(oPerson.age);
</script>
</head>
<body>
</body>
</html>
在浏览器中查看:
14. ajax
ajax(Asynchronous JavaScript and XML)，是一个前后台配合的技术，它可以让JavaScript发送异步的http请求，当获取到后台数据时更新页面显示数据实现局部刷新
在html页面使用ajax需要在web服务器环境下运行，一般向自己的web服务器发送ajax请求
jQuery将ajax封装成了一个方法：$.ajax()，可以直接用这个方法来执行ajax请求
ajax方法的参数说明url请求地址type请求方式，默认是GET，常用的还有POSTdataType设置返回的数据格式，常用的是json格式data设置发送给服务器的数据，没有参数不需要设置success设置请求成功后的回调函数error设置请求失败后的回调函数async设置是否异步。默认是true，表示异步14.1 ajax的使用
14.1.1 在html页面使用ajax请求
ajax.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 向web服务器发送ajax请求，本质上就是一个http协议的请求
$.ajax({
// 请求的资源地址：不指定ip地址和端口号表示请求的是自己的服务器资源数据
url: "data.json",
// 请求方式：GET，POST
type: "GET",
// 指定对服务器返回的数据的解析格式
dataType: "JSON",
// data表示发送给web服务器的参数，没有可以不设置
// data：
// 请求成功执行的函数
success:function(data){
// 请求成功，按照json数据格式进行解析，返回的data是一个Javascript对象
console.log("请求成功");
// 打印服务器返回的数据
console.log(data);
},
// 请求失败执行的函数
error:function(){
alert("请求失败");
},
// 异步，默认是true：异步请求
async:true,
});
</script>
</head>
<body>
</body>
</html>
ajax请求的资源地址data.json文件:
{"name": "张三", "age": 18, "sex": "男"}
把使用了ajax请求的html页面部署到web服务器里面，这样当web服务器运行时能获取到ajax.html文件
14.1.2 把ajax.html文件部署到web服务器
进入到ajax.html文件所在的目录，把这个目录作为web服务器的资源目录，以后这个目录的数据以http协议请求方式进行获取；右键目录，选择"在终端打开"
启动web服务器，在终端输入：python3 -m http.server 端口号，不输入端口号，默认i 是8000
14.1.3 在浏览器中向web服务器请求ajax.html页面
在浏览器中输入请求的路径，然后在请求的页面右键，选择"检查"
选择"NetWork"
点击Request Headers 的"View source"，查看请求头相关的信息
在获取到ajax.html页面后，对这个页面进行渲染时，ajax会向web服务器再发送一个http请求去获取data.json中的数据
请求data.json返回的数据：
控制台打印的数据：
14.2 ajax的get请求的简写方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
/*
ajax的get请求的简写方式
参数说明：
1. 请求的地址
2. 请求传给web服务器的参数
3. 请求成功的回调函数
4. 返回的数据的解析方式
error：失败执行的回调函数
*/
$.get("data.json", {"name": "李四", "age": 22, "sex": "男"}, function(data){
console.log("请求成功");
console.log(data.name + " " + data.age + " " + data.sex);
}, "JSON").error(function(){
console.log(请求失败);
});
</script>
</head>
<body>
</body>
</html>
在浏览器中输入请求地址向web服务器获取数据：
发送 给web服务器的请求参数：
web服务器返回的数据：
14.3 ajax的post请求的简写方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
/*
ajax的post请求的简写方式
参数说明：
1. 请求的地址
2. 请求传给web服务器的参数
3. 请求成功的回调函数
4. 返回的数据的解析方式
error：失败执行的回调函数
*/
$.post("data.json", {"name": "李四", "age": 22, "sex": "男"}, function(data){
console.log("请求成功");
console.log(data.name + " " + data.age + " " + data.sex);
}, "JSON").error(function(){
console.log(请求失败);
});
</script>
</head>
<body>
</body>
</html>
python自带的静态web服务器不支持post请求:
可以使用自定义的静态web服务器程序
把需要请求的这些资源部署到web服务器的static文件夹中：
启动web服务器：
在浏览器中输入请求资源路径，查看http通信过程：