JQuery库
什么是JQuery
定义：Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
什么是CDN
CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。 [1]
JQuery的引入方式
-
通过cdn的方式引入
通过一些网站查询中文的链接，将其引入https://www.bootcdn.cn/jquery/
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
- 通过官网下载文件的方式引入
Jquery的公式
公式：(语法格式)
$(selector).action()
$() ：jquery的选择器就是css的选择器
Jquery入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button type="button" id="first">测试</button>
<script>
$('#first').click(function(){
alert('hello Jqury')
})
</script>
</body>
</html>
Jquery选择器
与原生的js选择器相比jquery的选择器更为简便且支持css的选择器
标签选择器
id选择器
类选择器
$('#first')
$('.first')
$('p')
更多的选择器参考文档
Jquery事件
鼠标事件 键盘事件 其他事件
鼠标事件
获取鼠标的位置信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#divmove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 获取鼠标当前的坐标-->
mouse:<span id="move"></span>
<div id="divmove"></div>
<script>
//当网页元素加载完毕之后相应事件
$(function(){
$('#divmove').mousemove(function(e){
$('#move').text('x:'+e.pageX+'y'+e.pageY)
})
});
</script>
</body>
</html>
JQuery操作DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!-- 节点文本操作 -->
<ul id="test-ul">
<li class="js">js</li>
<li name="python">python</li>
</ul>
<script>
$('#test-ul li[name=python]').text('java');
var x = $('test-ul').html();
console.log(x)
</script>
</body>
</html>
Css的相关的操作
$('#test-ul li[name=python]').css({"color":"red"})
通过键值对的形式进行设置
元素的显示和隐藏
$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()
常用框架
layui (拓展组件 layee)弹窗组件
Element-ui:组件
Ant Design
