jQuery快速入门（淘宝切换服饰、王者荣耀手风琴效果）

一、什么是jQuery

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

二、为什么要用jQuery

jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互，我们只要调用这些函数（方法）就行。它可以加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

jQuery的优点

轻量级。核心文件才几十kb，不会影响页面加载速度。
跨浏览器兼容，基本兼容了现在主流的浏览器。
链式编程、隐式迭代。
对事件、样式、动画支持，大大简化了DOM操作。
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
免费、开源。

三、 jQuery 的基本使用

1.下载
jQuery的官网地址： https://jquery.com/

2.在项目中添加jquery.js文件

3.在html中引入jquery.js文件

<!-- 引入jquery文件 -->
<script src="js/jquery-3.3.1.js"></script>

4.开始使用jQuery的入口函数

// 相当于原生 js 中的 DOMContentLoaded。
$(function () {   ...  // 此处是页面 DOM 加载完成的入口
}) ;

5.jQuery 对象和 DOM 对象之间的转换

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jquery</title><!-- 引入jquery文件 --><script src="js/jquery-3.3.1.js"></script><script>$(function(){$('#btn').click(function(){alert(123)})//jquery转js对象document.querySelector('#btn').style.color='red';$('#btn')[0].style.color='red';//js对象转jquery$('#btn').css('color','red');$(document.querySelector('#btn')).css('color','red');})</script></head><body><button id="btn">点击</button></body>
</html>

四、案例

1.淘宝切换服饰
思路：当鼠标经过时，得到当前li的索引，让相对应的图片显示，其他的隐藏

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>淘宝精品服饰</title><style type="text/css">* {margin: 0;padding: 0;font-size: 12px;}ul {list-style: none;}a {text-decoration: none;}.wrapper {width: 298px;height: 248px;margin: 100px auto 0;border: 1px solid pink;overflow: hidden;}#left,#center,#right {float: left;}.active {background-image: url(images/abg.gif);}.active a {color: #fff !important;}#left li a,#right li a {display: block;width: 48px;height: 27px;border-bottom: 1px solid pink;line-height: 27px;text-align: center;color: black;}#center {border-left: 1px solid pink;border-right: 1px solid pink;}</style><script src="./js/jquery-3.3.1.js"></script><script>$(function() {//左边//1.当鼠标经过时$("#left li").mouseover(function() {//2.得到当前li的索引var index = $(this).index();//3.让相对应的图片显示，其他的隐藏$("#center li").eq(index).show().siblings().hide();})//右边//1.当鼠标经过时$("#right li").mouseover(function() {//2.得到当前li的索引var index = $(this).index() + 9;//3.让相对应的图片显示，其他的隐藏$("#center li").eq(index).show().siblings().hide();})})</script></head><body><div class="wrapper"><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><ul id="center"><li><a href="#"><img src="data:images/女靴.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/女包.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250" /></a></li><li><a href="#"><img src="data:images/男包.jpg" width="200" height="250" /></a></li></ul><ul id="right"><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></body>
</html>

2.王者荣耀手风琴效果
思路：当鼠标经过li时，当前li宽度变为224px,自定义动画（小图片淡出，大图片淡入）,并且停止动画排队，其余li宽度变为69px,自定义动画（小图片淡入，大图片淡出）,并且停止动画排队

<!doctype html>
<html><head><meta charset="utf-8"><title>王者荣耀手风琴案例</title><style type="text/css">* {margin: 0;padding: 0;}img {display: block;}ul {list-style: none;}.king {width: 852px;margin: 100px auto;background: url(images/bg.png) no-repeat;overflow: hidden;padding: 10px;}.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 .big {display: block;}.king li.current .small {display: none;}.big {width: 224px;display: none;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}</style><script src="js/jquery-3.3.1.js"></script><script>$(function(){//1.当鼠标经过li时$(".king li").mouseenter(function(){//2.当前li宽度变为224px,自定义动画（小图片淡出，大图片淡入）,并且停止动画排队$(this).stop().animate({width:224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();//3.其余li宽度变为69px,自定义动画（小图片淡入，大图片淡出）,并且停止动画排队$(this).siblings("li").stop().animate({width:69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();})})</script>
</head><body><div class="king"><ul><li class="current"><a href="#"><img src="data:images/m1.jpg" alt="" class="small"><img src="data:images/m.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/l1.jpg" alt="" class="small"><img src="data:images/l.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/c1.jpg" alt="" class="small"><img src="data:images/c.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/w1.jpg" alt="" class="small"><img src="data:images/w.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/z1.jpg" alt="" class="small"><img src="data:images/z.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/h1.jpg" alt="" class="small"><img src="data:images/h.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/t1.jpg" alt="" class="small"><img src="data:images/t.png" alt="" class="big"></a></li></ul></div>
</body>
</html>

jQuery快速入门（淘宝切换服饰、王者荣耀手风琴效果）相关推荐

jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
自定义动画 animate || 案例：王者荣耀手风琴效果分析
自定义动画 animate <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
jQuery自定义动画王者荣耀手风琴效果
分析: ①鼠标经过某个小li 有两步操作: ②当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 ③其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 <!doctyp ...
数据湖构建DLF数据探索快速入门-淘宝用户行为分析
简介本教程通过使⽤数据湖构建(DLF)产品对于淘宝⽤户⾏为样例数据的分析,介绍DLF产品的数据发现和数据探索功能.教程内容包括:1. 服务开通:开通阿⾥云账号及DLF/OSS相关服务2. 样例数据集 ...
云起实验室：数据湖构建DLF数据探索快速入门-淘宝用户行为分析
点击立即参与云产品场景体验https://developer.aliyun.com/adc/scenario/c46e97cc1ccf4a31881296ee95bb607a?spm=a2c6h.13 ...
JQ实现王者荣耀手风琴效果
准备 htm+lcss布局和样式分析 HTMl是一个容器装着无序列表,li内装着俩图片,一个是小头像图片,另外一个是详情大图片 <div class="box">< ...
王者荣耀手风琴效果实现
0x00 网页地址 http://pvp.qq.com/strategy/ 0x01 代码 HTML <div class="demo"><p c ...
jQuery小项目之王者荣耀手风琴，有图片素材
王者荣耀手风琴效果代码示例图片素材代码示例 <!DOCTYPE html> <html lang="en"> <head><meta ...
jQuery基本使用_选择器_淘宝服饰切换案例_样式操作_效果_王者荣耀手风琴
文章目录一.基本使用 1.jquery入口函数 2.$符 3.DOM对象和jQuery对象的转换二.jquery选择器 1.基础选择器 2.隐式迭代 3.筛选选择器 4.筛选方法 5.排他思想淘 ...