jQuery学习 — 基础应用
文章目录
- 简介
- 实例应用
简介
jQuery（下载地址）是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
实例应用
根据jQuery下载文件保存的位置引入
<script src="./js/jquery-3.6.0.min.js">script>
鼠标单击效果
<script>
$(function (e) {
// 单击图片隐藏
$('img').click(function (e) {
e.preventDefault();
$('img').hide();
});
})
script>
jQuery事件.on写法
<script>
$(function (e) {
// 官方标准写法 不会被覆盖
$('img').on('click', function (e) {
e.preventDefault();
$('img').hide();
});
$('img').on('click', function (e) {
e.preventDefault();
alert(this);
});
})
script>
鼠标单击按钮操作图片隐藏（hide方法）与显示（show方法）
<body>
<button id="hidebtn">隐藏button>
<button id="showbtn">显示button>
<br><br>
<img src="/html/img/03.jpg" alt="" width="300px">
body>
<script>
$(function (e) {
// 两个按钮控制图片的显示与隐藏
$('#hidebtn').click(function (e) {
e.preventDefault();
$('img').hide();
});
$('#showbtn').click(function (e) {
e.preventDefault();
$('img').show();
});
})
script>
方法里面可以添加参数控制实现效果的时间，单位是毫秒
$('img').hide(1000 * 2);
$('img').show(1000 * 2);
方法后面还可以关联其他函数，并执行
<script>
$(function (e) {
// 隐藏与显示行为结束后 还会执行别的函数
$('#hidebtn').click(function (e) {
e.preventDefault();
$('img').hide(1000 * 2, function (e) {
alert('海贼王');
});
});
$('#showbtn').click(function (e) {
e.preventDefault();
$('img').show(1000 * 2);
alert('航海王');
});
})
script>
使用toggle方法实现一个按钮控制隐藏和显示，同样可以设置实现时间和关联函数
<script>
$(function (e) {
// 一个按钮控制图片的显示与隐藏
$('button').click(function (e) {
e.preventDefault();
// slow 控制显示隐藏速度为慢
$('img').toggle(1000 * 2, function (e) {
alert('海贼王');
});
});
})
script>
鼠标单击按钮操作图片淡入（fadeIn方法）、淡出（fadeOut方法）、淡入与淡出（fadeToggle方法），同样可以设置实现时间
<script>
$(function (e) {
// 控制图片的淡入与淡出
$('#fadetoggle').click(function (e) {
e.preventDefault();
$('img').fadeToggle(1000)
});
$('#fadeIn').click(function (e) {
e.preventDefault();
$('img').fadeIn(1000)
});
$('#fadeOut').click(function (e) {
e.preventDefault();
$('img').fadeOut(1000)
});
})
script>
fadeTo方法添加参数实现淡入淡出时间和透明度
<script>
$(function (e) {
// 控制图片的隐藏与显示的透明度
$('#hide').click(function (e) {
e.preventDefault();
$('img').fadeTo(1000, 0.5)
});
$('#show').click(function (e) {
e.preventDefault();
$('img').fadeTo(1000, 1)
});
})
script>
鼠标单击按钮操作图片向上隐藏（slideUp方法）、向下显示（slideDown方法）、向上隐藏与向下显示（slideToggle方法），同样可以设置实现时间
<script>
$(function (e) {
// 控制图片的向上与向下
$('#upordown').click(function (e) {
e.preventDefault();
$('img').slideToggle(1000)
});
$('#up').click(function (e) {
e.preventDefault();
$('img').slideUp(1000)
});
$('#down').click(function (e) {
e.preventDefault();
$('img').slideDown(1000)
});
})
script>
animate方法可以添加实现css样式
<script>
$(function (e) {
// 控制图片的移动与恢复 根据定位控制移动
$('#up').click(function (e) {
e.preventDefault();
$('img').animate({
left: '+=100px',
top: '+=100px',
width: '+=100px'
});
});
$('#down').click(function (e) {
e.preventDefault();
$('img').animate({
left: '100px',
top: '100px',
width: '100px'
});
});
// 实现图片的宽度增加 左移 下移 右移 上移 宽度恢复
$('#upordown').click(function (e) {
e.preventDefault();
$('img').animate({
width: '+=300px'
})
$('img').animate({
left: '+=300px'
})
$('img').animate({
top: '+=300px'
})
$('img').animate({
left: '-=300px'
})
$('img').animate({
top: '-=300px'
})
$('img').animate({
width: '-=300px'
})
});
})
script>
stop方法停止动画
<script>
$(function (e) {
$('#run').click(function (e) {
e.preventDefault();
$('img').slideUp(1000 * 3);
$('img').slideDown(1000 * 3);
});
$('#stop').click(function (e) {
e.preventDefault();
// 停止当前动画效果 但是 不会影响 下一个动画效果
$('img').stop(true)
});
})
script>
以上代码可自行尝试！！！！！！！