05 JQuery基础入门
文章目录
- 一、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) // 输出：文字1
alert(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>