文章目录
- 一、jQuery介绍
- 1. 简介
- 2. 版本介绍
- 3. 相关网站
- 4. HTML引入方式
- 二、基础语法
- 1. 顶级对象$
- 2. 与DOM对象转化
- 3. 选择器
- 4. 事件
- 5. 动画
- 6. 修改样式
- 7. 修改属性
一、jQuery介绍
1. 简介
jQuery是JavaScript编程语言底层库，它是一个快速，简洁的JavaScript库
可以简化HTML文档遍历，事件处理，动画设计和Ajax交互
- 简化HTML文档的遍历和操作。
- 提供了丰富的事件处理功能。
- 提供了强大的动画支持，可以轻松创建各种动画效果。
- 提供了方便的Ajax交互接口，可以使用简单的代码实现异步数据交互。
- 良好的跨浏览器兼容性，可以在各种浏览器上保持一致的运行效果。
- 大量的插件支持，可以扩展jQuery的功能。
2. 版本介绍
1.x版本：能够兼容IE6、IE7、IE8浏览器
2.x版本：不再支持IE8及之前的浏览器
3.x版本：进行了一些重构，优化了性能
jquery-xxx.min.js：压缩版本，适用于生产环境
jquery-xxx.js：未压缩版本，适用于学习与开发环境，源码清晰
3. 相关网站
jQuery 官网
jQuery 教程
jQuery CDN
4. HTML引入方式
- 本地引入
<script src="jquery-3.7.1.min.js"></script>
- CDN引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
二、基础语法
1. 顶级对象$
$是jQuery的顶级对象，通过$把元素封装成jQuery对象，从而直接调用jQuery方法$(expresion)：通过表达式匹配目标元素
<p>文字1<p>
<div id="div2"><p>文字2<p></div>
<script>alert($('div>p').html()) // 输出：文字2
</script>
$(function)：网页中DOM结构加载完毕后执行
<script>$(function() {alert('test')})
</script>
2. 与DOM对象转化
- jQuery对象属于数组对象，其内部将DOM对象作为数组元素
- DOM对象与jQuery对象的方法不能混用
- DOM对象可以和jQuery对象相互转化
<div id="div1">文字1</div>
<div id="div2">文字2</div>
<script>var divs = $('div') // jQuery对象var div1 = divs[0] // jQuery对象转化为DOM对象var div2 = $(div1) // DOM对象转化为jQuery对象alert(div1.innerHTML) // 输出：文字1alert(div2[0]===div1) // 输出：true
</script>
3. 选择器
<div id="div1" class="divc"><p>文字1</p></div>
<div id="div2"><p>文字2</p></div>
<script>console.log($('div')[0].innerHTML); // 标签选择器console.log($('#div2')[0].innerHTML); // ID选择器console.log($('.divc')[0].innerHTML); // Class选择器$('div>p').css('color', 'red'); // 层级选择器$('p:contains("文字2")').html('test'); // 内容选择器
</script>
- HTML页面效果
- 控制台日志
4. 事件
- 鼠标事件
<div id="div1" class="divc"><p>文字1</p></div>
<div id="div2"><p>文字2</p></div>
<script>$("#div1").mouseout(function(){alert("div1中鼠标移出");})$("#div2").click(function(){alert("div2中单击鼠标");})
</script>
- 表单提交事件
<form action="http://127.0.0.1" method="post">test: <input type="text" name="test"><input type="submit" value="提交">
</form>
<script>$("form").on("submit",function(){alert("提交成功！"); // 提交表单时触发})
</script>
5. 动画
<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><link rel="icon" href="data:;base64,="><meta charset="UTF-8"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><style>.box {width: 300px;height: 300px;background-color: blue;margin-bottom: 10px;}</style>
</head>
<body><div class="box"></div><button id="btn1">显示</button><button id="btn2">隐藏</button><script>$(function(){$('#btn1').click(function(){$('.box').show(1000);})$('#btn2').click(function(){$('.box').hide(1000)})})</script>
</body>
</html>
- HTML页面效果
6. 修改样式
<div id="div1"><p>文字1</p></div>
<script>$('#div1').css({'color': 'red', 'backgroundColor': '#ADD8E6'})
</script>
7. 修改属性
<button id="btn">点击</button>
<script>$('#btn').click(function() {$(this).attr('disabled',true)})
</script>
