目录
一、jQuery简介与安装
1.1 初识jQuery
1、JavaScript 和 jQuery的关系:jQuery是一个库,里边存在大量的JavaScript函数
2、相关学习网站:
官网:jQuery
3、jQuery的优势:
1.2 jQuery的安装
1、方法一:下载
step1:进入官网点download --->这里提供了两个版本
一个是 compressed 是压缩版本的(生产使用,体积小), 一个是uncompressed是未压缩版本的(开发使用,体积大),可以下未压缩的,东西会多一点,
step2:点击选的的版本,会跳转到出一群源码,右键另存为即可下载成想要的.js文件
step3:在HTML的<head>中用<script>标签引用
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 下载完引用 -->
<script src="lib/jquery-3.6.0.min.js"></script>
</head>
2、使用CDN(内容分发网络)引用
提供CDN的很多,可以看一下网址:jQuery cdn加速 (jq22.com)从中选择一个放到<head>的代码中就行了,例如我选择百度CDN
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- CDN引用 -->
<script src="http://libs.baidu.com/jqueryui/1.8.22/jquery-ui.min.js"></script>
<head>
1.3 jQuery的基础语法
基本公式如下,就是通过selector选择符查找到HTML元素,并对他们执行某些操作action
$(selector).action()
示例代码如下,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="" id="test-jqury">点我点我</a>
<script>
// 选择器就是css的选择器,绑定事件
$('#test-jqury').click(function () {
alert('hello,world');
})
</script>
</body>
</html>
好了,你已经掌握了基本的jQuery, 接下来让我们深入学习吧!
二、选择器
原生js和jquery的联系, 与CSS选择器很像,详情可以看这篇文章CSS学习笔记_爱学习的小船的博客-CSDN博客_css学习笔记
// 原生js,选择器少,麻烦不好记
document.getElementsByTagName(); // 标签
document.getElementById();// id
document.getElementsByClassName();// 类
// jQuery CSS中的选择器,它都能用 基本公式: $(selector).action()
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click(); //id选择器
文档工具站: 多利用1.1.2中提到的网站:https://jquery.cuishifeng.cn/ 进行学习
可以点击你需要去了解的东西来进行学习
三、事件
鼠标事件, 键盘事件, 其他事件等, 以下代码实现鼠标移动获取坐标位置:
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#divMove {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 要求:获取鼠标当前的一个坐标 -->
mouse : <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
// 当网页元素加载完毕后,响应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
</body>
效果如图所示:
其他也可以实现许多事件,详细还是可以参考那个文档工具站去获取实现
三、操作DOM元素
3.1 节点文本的操作
<ul id="test-ul">
<li class="java">Java</li>
<li name="python">Python</li>
</ul>
<script>
// 节点文本操作
$('#test-ul li[name=python]').text(); // 获得值
$('#test-ul li[name=python]').text('hello'); // 设置值
$('#test-ul').html(); // 获得值
$('#test-ul').html('<strong>123</strong>'); // 设置值
</script>
3.2 CSS的操作
可以对CSS样式进行操作
//CSS操作
$('#test-ul li[name=python]').css("color","red");
3.3 元素的显示和隐藏
本质其实就是 display:none
//元素的显示和隐藏:本质 display:none
$('#test-ul li[name=python]').show(); //显示
$('#test-ul li[name=python]').hidden(); //隐藏
写在最后: 其他关联到的ajax可能得后期在更了, 学习的方法还是多看源码 多看文档 多练 多实现