jQuery
JQuery:即javascript库。对原生的js代码进行封装,我们可以直接快速而高效的使用封装好的功能
常见的JavaScript 库:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等
官网地址:https://jquery.com/
jQuery的优点
-
轻量级。核心文件几十kb,不会影响页面加载速度。
-
跨浏览器兼容,基本兼容了现在主流的浏览器
-
链式编程、隐式迭代。
-
对事件、样式、动画支持,大大简化了DOM操作。
-
支持插件扩展开发。丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等。
-
免费、开源。
体验jQuery
步骤
- 引入jQuery文件。
- 文档最末尾插入 script 标签 书写体验代码。
jQuery入口函数
JQuery中的入口函数 相当于Js中DOMContentLoaded属性。
// 第一种: 简单易用。
$(function () {
// 此处是页面 DOM 加载完成的入口
}) ;
// 第二种: 繁琐,但是也可以实现
$(document).ready(function(){
// 此处是页面DOM加载完成的入口
});
jQuery中的顶级对象
$是jQuery的顶级对象,同时也是JQuery的别称。 相当于原生JavaScript中的 window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery中的顶级对象</title>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
</body>
<script>
$(function() {
alert('Hello Word')
})
jQuery(function() {
alert('Hello Jquery')
})
</script>
</html>
DOM对象与jQuery对象
-
原生js获取的对象称为DOM对象
-
JQuery获取到的对象称为Jquery对象
Jquery对象的本质其实是$对DOM对象包装后产生的对象(以伪数组的方式存储)
DOM对象只能使用javascript原生的方法,而JQuery对象只能使用Jquery中的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM对象与JQuery对象</title>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<div class="box"></div>
</body>
<script>
// DOM对象
let box = document.querySelector('.box');
console.dir(box);
// JQuery对象
console.dir($(".box"));
</script>
</html>
DOM对象和JQuery对象转换
DOM对象与JQuery对象是可以相互转换的
DOM对象转换为JQuery对象
$(''div)
JQuery对象转换为DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM对象与JQuery对象的相互转换</title>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<div class="box"></div>
</body>
<script>
//DOM对象转换成JQuery对象
let box = document.querySelector('.box');
console.log($(box));
// JQuery对象转换为DOM对象
console.log($(box)[0]);
console.log($(box).get(0))
</script>
</html>
jQuery中的选择器
jQuery中的基本选择器
$(‘选择器’)里面的选择器直接写css的选择器即可,但是需要加引号
JQuery中的层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery基本选择器与JQuery中级选择器</title>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<header>header</header>
<ul>
<li>Hello Word</li>
<li>Hello Word</li>
<li>Hello Word</li>
<li>Hello Word</li>
</ul>
</body>
<script>
$(function() {
console.log($('header'));
console.log($('ul li'));
})
</script>
</html>
JQuery中的筛选选择器
筛选选择器 顾名思义:就是在所有的选项中筛选符合条件的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery中的筛选选择器</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
width: 600px;
margin: 20px auto;
}
li {
width: 100%;
height: 20px;
margin-bottom: 20px;
}
</style>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</body>
<script>
$(function() {
$('ul li:first').css('background', 'red');
$('ul li:last').css('background', 'green');
$('ul li:eq(2)').css('background', 'blue');
$('ol li:odd').css('background', 'black');
$('ol li:even').css('background', 'purple');
})
</script>
</html>
JQuery中的筛选方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery中的筛选方法</title>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
<div class="nav">
<p></p>
<div>
<p></p>
</div>
</div>
</body>
<script>
$(function() {
console.log($('.son').parent());
console.log($('.nav').children('p'));
console.log($('.nav').find('p'));
})
</script>
</html>
JQuery筛选方法之进阶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery筛选方法之进阶</title>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<ul>
<li>ul li</li>
<li>ul li</li>
<li class="item">ul li</li>
<li>ul li</li>
<li>ul li</li>
<li>ul li</li>
</ul>
<ol>
<li>ol li</li>
<li>ol li</li>
<li>ol li</li>
<li>ol li</li>
<li>ol li</li>
<li>ol li</li>
</ol>
<div class="current"></div>
<div></div>
</body>
<script>
$(function() {
// 查找其它兄弟元素
$('ul .item').siblings('li').css('color', 'red');
//查找其它兄弟元素
$('ol li').eq(2).css('color', 'yellow');
// 判断是否有某个类名
console.log($('div').eq(0).hasClass('current'));
console.log($('div').eq(1).hasClass('current'));
})
</script>
</html>
JQuery中隐式迭代
遍历内部DOM元素( 以伪数组的形式进行存储 )的过程便叫作隐式迭代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隐式迭代</title>
<style>
ul {
list-style: none;
}
li {
width: 500px;
height: 20px;
margin: 20px;
}
</style>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
$('ul li').css('background', 'red')
</script>
</html>
JQuery中的排他思想
排他思想:当前元素设置样式 其余的兄弟元素清除样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery中的排他思想</title>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
$('button').click(function() {
$(this).css('background', 'red');
$(this).siblings('button').css('background', '')
})
</script>
</html>
案例之新浪列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 600px;
margin: 200px auto;
}
.nav>li {
float: left;
list-style: none;
width: 150px;
height: 40px;
margin-right: 20px;
border: 1px solid red;
text-align: center;
line-height: 40px;
}
a {
text-decoration: none;
}
.nav ul {
display: none;
list-style: none;
width: 150px;
height: 40px;
border-collapse: collapse;
text-align: center;
line-height: 40px;
}
.nav ul li {
width: 100%;
height: 100%;
text-align: center;
line-height: 40px;
border: 1px solid red;
border-top: none;
}
.nav ul li:hover {
background-color: pink;
}
</style>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">微博</a>
</li>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">微博</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">微博</a>
</li>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">微博</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">微博</a>
</li>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">微博</a>
</li>
</ul>
</li>
</ul>
</body>
<script>
// 设置移入事件
$('.nav>li').mouseover(function() {
$(this).children('ul').show()
})
// 设置输出事件
$('.nav>li').mouseout(function() {
$(this).children('ul').hide()
})
</script>
</html>
淘宝精品案例
思路如下
- 鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏。
- 需要获取当前li的索引号 $(this).index()
- 显示对应的图片 可通过eq(index).show()
- 隐藏其它的图片 eq(index).siblings().hide()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手风琴案例</title>
<script src="./jquery-3.6.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrap {
width: 250px;
height: 248px;
margin: 100px auto;
border: 1px solid pink;
border-right: none;
overflow: hidden;
}
#left,
#content {
float: left;
}
#left li {
background: url(images/lili.jpg) repeat-x;
}
#left li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover {
background-image: url(./images/abg\(1\).gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
</head>
<body>
<div class="wrap">
<ul id="left">
<li>
<a href="#">女鞋</a>
</li>
<li>
<a href="#">雪地鞋</a>
</li>
<li>
<a href="#">冬裙</a>
</li>
<li>
<a href="#">毛大衣</a>
</li>
<li>
<a href="#">毛衣</a>
</li>
<li>
<a href="#">棉服</a>
</li>
<li>
<a href="#">女裤</a>
</li>
<li>
<a href="#">羽绒服</a>
</li>
<li>
<a href="#">牛仔裤</a>
</li>
</ul>
<div id="content">
<div>
<a href="#"><img src="./images/女靴.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./images/雪地靴" alt=""></a>
</div>
<div>
<a href="#"><img src="./images/冬裙.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./images/毛衣.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./images/呢大衣.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./images/棉服.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./images/女裤.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./images/羽绒服.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="./images/牛仔裤.jpg" alt=""></a>
</div>
</div>
</body>
<script>
$(function() {
// 设置鼠标移入事件
$("#left>li").mousemove(function() {
// 获取li的索引号
var index = $(this).index();
// 鼠标移入当前li 当前li所对应的图片显示
$('#content div').eq(index).show()
// 让其它的图片隐藏
$('#content div').eq(index).siblings().hide()
})
})
</script>
</html>
jQuery设置样式
设置一组样式
$(this).css(''color'', ''red'');
** 设置多组样式**
$(this).css({ "color":"white","font-size":"20px"});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery设置一组样式</title>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<div class="box"></div>
</body>
<script>
// 设置一组样式
$('.box').css('backgroundColor', 'red')
// 设置多组样式
$('.box').css({
"width": 400,
'height': 400
})
</script>
</html>
JQuery操作类样式
// 1.添加类
$("div").addClass("current");
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery操作类样式</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
transition: all 0.5s;
}
.bg_red {
background-color: red;
transform: rotate(180deg);
}
</style>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
<button>添加类</button>
<button>移除类</button>
<button>切换类</button>
<div class="box"></div>
</body>
<script>
$(function () {
// 添加类
$('button').eq(0).click(function () {
$('.box').addClass('bg_red')
})
// 移除类
$('button').eq(1).click(function () {
$('.box').removeClass('bg_red')
})
//切换类
$('button').eq(2).click(function () {
$('.box').toggleClass('bg_red')
})
})
</script>
</html>
JQuery之tab栏切换
思路
-
点击上部的li 添加current类 其它li移除current类
-
点击的同时 得到li的索引号
-
让下部相对应的索引号item显示 其它的item隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery之tab栏切换</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 850px;
margin: 20px auto;
}
.tab_list ul {
overflow: hidden;
list-style: none;
}
.tab_list ul li {
float: left;
cursor: pointer;
width: 200px;
height: 40px;
border: 1px solid #ccc;
text-align: center;
line-height: 40px;
}
.bg {
background-color: pink;
}
.tab_item .items {
display: none;
width: 808px;
height: 40px;
text-align: center;
line-height: 40px;
margin-bottom: 1px;
background-color: red;
}
</style>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
</ul>
</div>
<div class="tab_item">
<div class="items" style="display: block;">内容1</div>
<div class="items">内容2</div>
<div class="items">内容3</div>
<div class="items">内容4</div>
</div>
</div>
</body>
<script>
$(function() {
$('.tab_list li').click(function() {
$(this).addClass('bg').siblings().removeClass('bg');
var index = $(this).index();
console.log(index);
$('.tab_item div').eq(index).show().siblings().hide()
})
})
</script>
</html>
JQuery类操作与JS className的区别
JavaScript className会覆盖原来的类名 而JQuery中类操作不会覆盖原来的类名
jQuery效果
JQuery效果之显示隐藏
显示
隐藏
切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery效果之显示与隐藏</title>
<script src="./jquery-3.5.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 145px;
height: 400px;
background-color: purple;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>显示与隐藏</button>
<div class="box"></div>
<script>
$(function() {
$('button').eq(0).click(function() {
$('.box').show(1000, function() {
console.log('显示')
})
})
$('button').eq(1).click(function() {
$('.box').hide(1000, function() {
console.log('隐藏')
})
})
$('button').eq(2).click(function() {
$('.box').toggle(1000, function() {
console.log('显示与隐藏')
})
})
})
</script>
</body>
</html>
JQuery效果之滑入滑出
下滑
上滑
切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery效果之淡入淡出</title>
<script src="./jquery-3.6.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
button {
width: 33%;
text-align: center;
}
.box {
width: 100%;
height: 800px;
background-color: red;
}
</style>
</head>
<body>
<button>隐藏</button>
<button>显示</button>
<button>切换</button>
<div class="box"></div>
</body>
<script>
$('button').eq(0).click(function() {
$('.box').slideUp(1000)
})
$('button').eq(1).click(function() {
$('.box').slideDown(1000)
})
$('button').eq(2).click(function() {
$('.box').slideToggle(1000)
})
</script>
</html>
JQuery之事件切换
JQuery为我们提供了一个新事件,相当于css中的hover
hover([over,]out) // 其中over和out为两个函数
- over:鼠标移到元素上要触发的函数(相当于mouseenter)
- out:鼠标移出元素要触发的函数(相当于mouseleave)
- 如果只写一个函数,则鼠标经过和离开都会触发它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery之事件切换</title>
<script src="./jquery-3.6.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
button {
width: 100%;
text-align: center;
}
.box {
width: 100%;
height: 600px;
background-color: green;
}
</style>
</head>
<body>
<button>切换</button>
<div class="box"></div>
</body>
<script>
$('button').hover(function() {
$('.box').slideToggle()
})
</script>
</html>
JQuery之停止动画序列
动画一旦触发便会执行 如果多次触发 会造成多个动画排队执行
JQuery之停止动画
- stop():用于停止动画
- stop():写到动画或者效果的前面 相当于停止上一次的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 600px;
margin: 200px auto;
}
.nav>li {
float: left;
list-style: none;
width: 150px;
height: 40px;
margin-right: 20px;
border: 1px solid red;
text-align: center;
line-height: 40px;
}
a {
text-decoration: none;
}
.nav ul {
display: none;
list-style: none;
width: 150px;
height: 40px;
border-collapse: collapse;
text-align: center;
line-height: 40px;
}
.nav ul li {
width: 100%;
height: 100%;
text-align: center;
line-height: 40px;
border: 1px solid red;
border-top: none;
}
.nav ul li:hover {
background-color: pink;
}
</style>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">微博</a>
</li>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">微博</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">微博</a>
</li>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">微博</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">微博</a>
</li>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">微博</a>
</li>
</ul>
</li>
</ul>
</body>
<script>
//事件切换 stop:停止动画
$(function() {
$('.nav li').hover(function() {
$(this).children('ul').stop().slideToggle()
})
})
</script>
</html>
JQuery效果之淡入淡出
淡入
淡出
切换
透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery效果之淡入淡出</title>
<script src="./jquery-3.6.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
}
button {
flex: 25%;
text-align: center;
}
.box {
width: 100%;
height: 800px;
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>透明度</button>
</div>
<div class="box"></div>
</body>
<script>
$('button').eq(0).click(function() {
$('.box').fadeIn(1000)
})
$('button').eq(1).click(function() {
$('.box').fadeOut(1000)
})
$('button').eq(2).click(function() {
$('.box').fadeToggle(1000)
})
$('button').eq(3).click(function() {
$('.box').fadeTo(1000, 0.5)
})
</script>
</html>
JQuery之突出显示的案例
- 鼠标经过当前li的时候 其它li的透明度改为0.5
- 鼠标离开当前li的时候 其它li的透明度改为1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery之突出显示的案例</title>
<script src="./jquery-3.6.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
ul {
list-style: none;
}
.warp {
overflow: hidden;
width: 630px;
height: 394px;
padding: 10px;
margin: 200px auto;
border: 1px solid #fff;
background-color: #000;
}
li {
float: left;
margin: 5px;
}
img {
display: block;
border: none;
}
</style>
</head>
<body>
<div class="warp">
<ul>
<li>
<a href="#"><img src="./images/01.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/02.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/03.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/04.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/05.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/06.jpg" alt=""></a>
</li>
</ul>
</div>
</body>
<script>
$('.warp li').hover(function() {
$(this).siblings().stop().fadeTo(400, 0.5)
}, function() {
$(this).siblings().stop().fadeTo(400, 1)
})
</script>
</html>
jQuery自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery之自定义动画</title>
<script src="./jquery-3.6.0.js"></script>
<style>
.box {
position: absolute;
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<button>动画</button>
<div class="box"></div>
</body>
<script>
$(function() {
$('button').click(function() {
$('div').animate({
left: 800,
top: 200,
width: 600,
opacity: 0.5,
}, 500)
})
})
</script>
</html>
JQuery手风琴效果
鼠标经过当前li时
- 当前小li 宽度变为 224px 同时里面的小图片淡出 大图片淡入
- .其余兄弟小li宽度变为69px 小图片淡入 大图片淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery手风琴效果</title>
<script src="./jquery-3.6.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
display: block;
}
.king {
overflow: hidden;
width: 852px;
padding: 10px;
margin: 100px auto;
background: url(images/big.png) no-repeat;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king li.current {
width: 224px;
}
.king li.current .samll {
display: none;
}
.king li.current .big {
display: block;
}
.big {
width: 224px;
display: none;
}
.samll {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="king">
<ul>
<li class="current">
<a href="#"><img src="./images/m_samll.jpg" alt="" class="samll "><img src="./images/m_big.png" alt="" class="big"></a>
</li>
<li>
<a href="#"><img src="./images/t_samll.jpg" alt="" class="samll"><img src="./images/t_big.png" alt="" class="big"></a>
</li>
<li>
<a href="#"><img src="./images/c_samll.jpg" alt="" class="samll"><img src="./images/c_big.png" alt="" class="big"></a>
</li>
<li>
<a href="#"><img src="./images/w_samll.jpg" alt="" class="samll"><img src="./images/w_big.png" alt="" class="big"></a>
</li>
<li>
<a href="#"><img src="./images/t_samll.jpg" alt="" class="samll"><img src="./images/t_big.png" alt="" class="big"></a>
</li>
<li>
<a href="#"><img src="./images/z-samll.jpg" alt="" class="samll"><img src="./images/z_big.png" alt="" class="big"></a>
</li>
<li>
<a href="#"><img src="./images/h_samll.jpg" alt="" class="samll"><img src="./images/h_big.png" alt="" class="big"></a>
</li>
</ul>
</div>
</body>
<script>
$(function() {
$('.king li').mouseenter(function() {
// 当前li的宽度变为224px 同时里面的小图片淡出 大图片淡入
$(this).stop().animate({
width: 224
}).find('.samll').stop().fadeOut().siblings('.big').stop().fadeIn();
//其余的兄弟li的宽度变为69px 小图片淡入 大图片淡出
$(this).siblings('li').stop().animate({
width: 69
}).find('.samll').stop().fadeIn().siblings('.big').stop().fadeOut()
})
})
</script>
</html>