`JQuery的第一天案例总结`

案例1：下拉菜单案例

 /*  要求：1、获取元素2、为元素添加鼠标事件： 移入事件：一级菜单显示二级菜单，具备动画效果（缓慢显示）移出事件：二级菜单隐藏，同样具备动画效果（缓慢隐藏）*/

代码如下：

html代码：

<div class="wrap"><ul><li><a href="javascript:void(0);">一级菜单1</a><ul class="ul"><li><a href="javascript:void(0);">二级菜单11</a></li><li><a href="javascript:void(0);">二级菜单12</a></li><li><a href="javascript:void(0);">二级菜单13</a></li></ul></li><li><a href="javascript:void(0);">一级菜单2</a><ul><li><a href="javascript:void(0);">二级菜单21</a></li><li><a href="javascript:void(0);">二级菜单22</a></li><li><a href="javascript:void(0);">二级菜单23</a></li></ul></li><li><a href="javascript:void(0);">一级菜单3</a><ul><li><a href="javascript:void(0);">二级菜单31</a></li><li><a href="javascript:void(0);">二级菜单32</a></li><li><a href="javascript:void(0);">二级菜单33</a></li></ul></li></ul></div>

js代码：

 $(function () {// 获取元素，添加鼠标移入事件mouseenter$('a').mouseenter(function () {// this的值为dom元素，要将它转为jq对象，$(this)$(this).next().slideDown();      //slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。})// 鼠标移出事件mouseleave$('a').mouseleave(function () {$(this).next().slideUp();      //slideUp() 方法通过使用滑动效果，隐藏被选元素。})})

案例1主要用到的选择器和动画效果API：.next(元素名) ： 查找当前元素的下一个兄弟元素.slideDown() 方法通过使用滑动效果，显示隐藏的被选元素.slideUp() 方法通过使用滑动效果，隐藏被选元素

案例2：突出展示案例

 /*  要求：1、获取li元素2、为每个li元素添加鼠标上移事件 : 鼠标上移到哪个li，哪个li就高亮（即设置透明度opacity：1），其他li就变暗（透明度  opacity：0.5）3、为大盒子.wrap添加鼠标移出效果：鼠标移出，全部li高亮（opacity：1）注意：不能为li添加鼠标移出事件，若为li添加鼠标移出事件后，当鼠标移至到两个li之间的间隙时会出现闪一下的不好效果（因为当鼠标移至li与li之间的间隙时，也就是鼠标已经移出li的范围了，所有会出现全部li都变亮）*/

代码如下：

html代码：

<div class="wrap"><ul><li><a href="#"><img src="data:images/01.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/02.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/03.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/04.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/05.jpg" alt="" /></a></li><li><a href="#"><img src="data:images/06.jpg" alt="" /></a></li></ul></div>

js代码：

$(function () {let $li = $('.wrap li');$li.mouseenter(function () {// 排他：自己变亮，其他变暗$(this).css({ opacity: 1 });// siblings() : 查找除自己之外的其他兄弟元素$(this).siblings().css({ opacity: 0.5 })// 连写// $(this).css({ opacity: 1 }).siblings().css({ opacity: 0.5 })})let $wrap = $('.wrap');$wrap.mouseleave(function () {// find() : 查找后代子元素$(this).find('li').css({ opacity: 1 })})})

案例2主要用到的选择器和动画效果API：.siblings(元素名) ： 查找除自己之外的其他兄弟元素.find(元素名) : 查找后代子元素

案例3：手风琴案例

 /*  要求：1、获取所有的标题2、为标题绑定click事件3、在事件中找到当前标题的下一个div元素，让其展开，同时让其他展开的div合并*/

代码如下：

$(function () {let $group = $('.groupTitle');$group.click(function () {// 让当前标题元素的下一个元素div展开// next:下一个兄弟元素// slideDown：垂直方向展开// $(this).next().slideDown();// slideToggle() : 实现展开和合并的切换，如果是展开，再次点击就合并；如果是合并的就展开$(this).next().slideToggle();// 当前标签的父元素的所有的兄弟li里面的子元素div给隐藏掉// parent：获取当前标题元素的父窗口// siblings：这里是查找父窗口的所有兄弟元素(不包含自己)// children：查找直接子元素，可以指定需要查询的子元素的选择器标记// slideUp：垂直方向收缩$(this).parent().siblings().find('div').slideUp();})})

案例3主要用到的选择器和动画效果API：.next(元素名) ： 查找当前元素的下一个兄弟元素.parent()：获取当前元素的父元素.siblings(元素名) ： 查找除自己之外的其他兄弟元素.find(元素名) : 查找后代子元素.slideUp() 方法通过使用滑动效果，隐藏被选元素.slideToggle() : 实现展开和合并的切换，如果是展开，再次点击就合并；如果是合并的就展开

案例4：淘宝精品案例

 /*  要求：/* 1、获取需要操作的元素2、分别为两次导航栏添加鼠标移入事件：左侧导航栏：鼠标移入哪个导航按钮，则显示对应的图片（索引从0开始，到左侧导航栏按钮长度结束）右侧导航栏：鼠标移入哪个导航按钮，则显示对应的图片（索引从左侧导航栏按钮长度开始，到右侧导航栏按钮长度结束）
*/

代码如下：

html代码：

    <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>

js代码：

$(function () {let $left = $('#left li');let $right = $('#right li');let $imgs = $('#center li');$left.mouseenter(function () {// index() : 获取当前元素的索引（下标），从0开始let index = $(this).index();// fadeIn():淡入// fadeOut():淡出$imgs.eq(index).siblings().fadeOut();     //siblings() ： 查找除自身的所有兄弟元素$imgs.eq(index).fadeIn();                 })$right.mouseenter(function () {// 右边获取的图片是从索引9开始的（排除左边的图片）let index = $(this).index() + $left.length;$imgs.eq(index).siblings().fadeOut();$imgs.eq(index).fadeIn();})})

案例4主要用到的选择器和动画效果API：.eq(index)：获取指定索引的元素，索引号index从0开始.siblings(元素名) ： 查找除自己之外的其他兄弟元素.fadeOut(时间，默认为300毫秒)： 淡出.fadeIn(时间，默认为300毫秒) ： 淡入

总结：

今天主要是练了jQuery的一些基础语法和选择器，以及部分动画效果。

过滤选择器：

筛选选择器：

JQuery的第一天相关推荐

jquery插入第一个元素？ [问题点数：20分，结帖人zsw19909001]
jquery插入第一个元素? [问题点数:20分,结帖人zsw19909001] JavaScript code ? 1 2 3 4 5 <div id="contain"& ...
jquery获取第一个子元素
如获取id为divId的div下的第一个子div 1 $("#divId").children("div").get(0) 但得到的是一个dom对象,如果要得到 ...
【使用jquery编写第一个油猴（tempermonkey）脚本】
使用jquery编写第一个油猴(tempermonkey)脚本 01. 下载安装油猴浏览器插件 0101. 关于浏览器的特别说明 0102. 油猴插件下载地址 02. 获取新脚本 0201. 油猴菜单 ...
jQuery学习第一天（上）
jQuery 学习第一天(上) 目录 jQuery 学习第一天(上) 1.JavaScript 库 2. jQuery 库 2.1 jQuery的下载 2.2 jQuery的入口函数示例注意点 2 ...
学习jQuery的第一天
目录前言 1. jQuery简介 1.1.JavaScript库 1.2.jQuery的概念 1.3.jQuery的优点 1.4.jQuery的入口函数 2.jQuery选择器 2.1.jQuery ...
jQuery学习(第一天)
js的回顾遇到的问题 1.window.onload只能使用一个(事件覆盖问题) 2.代码的容错性不强 3.浏览器兼容性问题 4.代码量较多,书写很繁琐 5.代码很乱到处都是 6.动画效果我们很难实 ...
jquery 给类名元素添加行内样式_学Jquery的第一天
1.创建一个div <body><div id="mydiv"></div> </body> <script src=&quo ...
jquery easyUI第一篇【介绍、入门、使用常用的组件】
tags: web前端库什么是easyUI 我们可以看官方对easyUI的介绍: easyUI就是一个在Jquery的基础上封装了一些组件....我们在编写页面的时候,就可以直接使用这些组件...非 ...
2014年辛星jquery解读第一节
***************简介***************** 1.jQuery是一个Javascript库,而且很容易学习,功能也很强大. 2.jquery诞生自2006年1月,至今已经有八年 ...

JQuery的第一天

`JQuery的第一天案例总结`

案例1：下拉菜单案例

案例2：突出展示案例

案例3：手风琴案例

案例4：淘宝精品案例

总结：

JQuery的第一天相关推荐

最新文章

热门文章