在外部单击时关闭由.slideToggle操作的jQuery菜单 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

WEB入门之十八动画特效

下面我们对上一个示例进行简单改造，单击按钮时，让图片显示；再次单击时，让图片隐藏；依次循环... ......简介 jQuery是一个由John Resig创建于2006年1月的开源项目。...任务实训部分 1：表格展开/关闭动画训练技能点 jQuery内置动画特效函数需求说明实现一个如图8.2.1所示的表格，当单击某个分组时，该分组下面的成员就显示/隐藏。...3：滑动的横向菜单训练技能点 Ø jQuery内置动画函数需求说明模拟实现一个如图8.2.3所示的横向菜单，当鼠标悬浮到横向菜单上时，其子菜单淡入显示；当鼠标离开横向菜单时，其子菜单淡出隐藏...训练技能点 jQuery自定义动画函数需求说明图8.2.4和图8.2.5展示了网页侧边菜单，默认是关闭状态，当鼠标悬浮到上面时，侧边菜单就滑出来；当鼠标离开时，侧边菜单就收缩回去。

1.3K1 0

WEB入门之十八动画特效

下面我们对上一个示例进行简单改造，单击按钮时，让图片显示；再次单击时，让图片隐藏；依次循环... ......简介jQuery是一个由John Resig创建于2006年1月的开源项目。...任务实训部分 1：表格展开/关闭动画训练技能点 jQuery内置动画特效函数需求说明实现一个如图8.2.1所示的表格，当单击某个分组时，该分组下面的成员就显示/隐藏。...3：滑动的横向菜单训练技能点 Ø jQuery内置动画函数需求说明模拟实现一个如图8.2.3所示的横向菜单，当鼠标悬浮到横向菜单上时，其子菜单淡入显示；当鼠标离开横向菜单时，其子菜单淡出隐藏。...训练技能点 jQuery自定义动画函数需求说明图8.2.4和图8.2.5展示了网页侧边菜单，默认是关闭状态，当鼠标悬浮到上面时，侧边菜单就滑出来；当鼠标离开时，侧边菜单就收缩回去。

1.2K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

jquery入门

运用jQuery时，需要在页面中引入jQuery文件 jQuery的hello world 在页面中引入jQuery支持 --> jquery-1.12.4.js"> #box{width: 200px...#btn").click(fn)表示添加一个单击事件处理函数 $("#btn").click(function() { // toggle()/slideToggle...$("li").mouseenter(function() { // 在事件操作中，可以通过this来标签当前事件触发的元素 // console.log...[](images/bannel02.jpg) jquery的DOM操作 <!

3.4K2 0

Jquery 使用技巧总结

jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript™ 以及Ajax 编程。...二、使用方法在需要使用JQuery的页面中引入JQuery的js文件即可。...2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。...Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。...//删除所有p元素上的所有事件 $("p").unbind("click") //删除所有p元素上的单击事件 10、几个实用特效功能其中toggle()和slidetoggle

4.1K2 0

JQuery高级应用

先慢，中间快，最后又慢 linear：动画执行时速度是匀速的 fn：在动画完成时执行的函数，每个元素执行一次。...jq的遍历方式 jq对象.each(callback) 语法： jquery对象.each(function(index,element){}); index：就是元素在集合中的索引 element：就是集合中的每一个元素对象...for..of：jquery 3.0 版本之后提供的方式。...当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2..... 注意：1.9版本 .toggle() 方法删除，jQuery Migrate（迁移）插件可以恢复此功能。...的功能如何定义插件：（看下面两个案例） $.fn.extend(object) 增强通过Jquery获取的对象的功能 $("#id") ?

7.7K3 0

前端成神之路-01_jQuery

跨浏览器兼容，基本兼容了现在主流的浏览器。链式编程、隐式迭代。对事件、样式、动画支持，大大简化了DOM操作。支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。...}); 总结：等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。...1.2.4. jQuery中的顶级对象$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用。...(详情参考源代码) 1.4. jQuery 样式操作 jQuery中常用的样式操作有两种：css() 和设置类样式方法 1.4.1....下拉菜单略（详情参看源码）。

13.2K1 0

js控制json生成菜单——自制菜单

js控制json生成菜单——自制菜单（一）此文档解决以下问题： 1.JSON文件的书写方式 2.jQuery.getJSON()的运用 3.jQuery.each()的运用 4.jQuery的DOM...操作方法之一：.append()的运用 5.jQuery的遍历方法之一：.children()的运用 6.jQuery的遍历方法之一：.siblings()的运用 7.jQuery的绑定事件处理器之一...：.on()的运用 8.jQuery的滑动特效:.slideToggle()、.slideUp()、.slideDown()的运用附：阿里巴巴矢量图标库http://www.iconfont.cn/...//key代表属性名，val代表对应的属性值 if(data[i][key] == 0) { //4.判断该data对象是否存在菜单的父级菜单...'>"); //7.页面首次加载时，

2.1K2 0

前端开发JS——jQuery常用方法

1、jQuery鼠标事件之click与dbclick事件 click方法用于监听用户单击操作，dbclick方法用于监听用户双击操作，这两个方法用法及其类似，所以这只介绍click事件，只有单击释放后才生效...handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数 7、jQuery鼠标事件之focusin与focusout事件 focusin 方法用于监听用户元素聚焦操作（如...13、jQuery键盘事件之keypress()事件 keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成...如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数就是说向上冒泡匹配到的元素，由该元素执行回调函数的范围 16、卸载事件off()方法通过on()绑定的事件处理程序...因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面 4、jQuery中上卷下拉切换slideToggle方法（改变元素的高度) slideToggle 方法是上述两个方法的切换 $ele.slideToggle

6.3K2 0

jQuery的简单使用

通过jQuery注册事件 jQuery注册事件也很简单，通过选择器包装好标签对象后，调用相关的事件方法即可，调用事件方法时需要传递一个函数对象，当事件被触发就会执行函数里的代码。...在jQuery里的事件名称并没有与html中的事件名称有多大区别，还是那个熟悉的味道熟悉的套路，示例： <!...dblclick(function(e){ $(this).html("Change"); }); 给标签添加/删除样式在jQuery...在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。...slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。示例： <!

8K1 0

JavaWeb——JQuery之高级操作应用及实践案例总结（动画、遍历、事件绑定）

；参数"linear"，匀速； 3）fn：在动画完成时执行的函数，每个元素执行一次。...2 JQuery遍历 js的遍历方式是使用for循环，JQuery提供了三种遍历方式： 1）JQuery对象.each(callback)：回调函数中的参数 index（索引） element（元素对象...，当点击对应组件时，会执行fn1，再次点击会执行fn2...，若只有2个，则循环执行。注意：JQuery1.9后该功能删除了，要使用的话引入jquery-migrate-1.0.0.js插件。...【练习案例1】：JQuery标准的绑定方式的单击事件 $("#btn2").click(function () { //解除btn按钮的单击事件

10.5K2 0

「jQuery」基础 - 01

跨浏览器兼容，基本兼容了现在主流的浏览器。链式编程、隐式迭代。对事件、样式、动画支持，大大简化了DOM操作。支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。...体验jQuery 步骤：引入jQuery文件。在文档最末尾插入 script 标签，书写体验代码。 $('div').hide()可以隐藏盒子。...}); 总结：等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。...1.2.4. jQuery中的顶级对象$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用。...jQuery 样式操作 jQuery中常用的样式操作有两种：css() 和设置类样式方法 1.4.1.

8.2K2 1

jquery对象和dom对象的相互转换

2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是 jquery对象。...，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。...当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over，离开时置为out。...p元素上的所有事件 $("p").unbind("click") //删除所有p元素上的单击事件 10、几个实用特效功能其中toggle()和slidetoggle()方法提供了状态切换功能。...slideToggle()方法包括了slideDown()和slideUp方法。 11、几个有用的jQuery方法 $.browser.浏览器类型：检测浏览器类型。

4.5K4 0

JavaScript学习笔记（四）—— jQuery入门

");//设置HTML内容 }); }); 对元素的值进行操作在jQuery中，使用val()方法返回或设置被选元素的value属性。...jQuery提供了attr()方法对元素的属性进行设置或返回的操作。...事件名称触发方式返回值 keydown 在键盘上按下某键时触发，一直按一直触发返回键盘代码 keypress 在键盘上按下一个能产生字符的按键时触发返回ASCII码 keyup 松开某一键时触发...返回键盘代码 jQuery的事件处理 1. jQuery常用的事件方法鼠标操作事件方法描述 mousedown() 鼠标的键被按下 mouseenter() 当鼠标指针进入目标时 mouseleave...绑定与接触事件绑定事件绑定事件就是将页面中的元素事件类型与其在收到该事件之后期望进行的操作联系到一起。

12.4K5 0

jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：显示隐藏：show() / hide() / toggle() ; 划入画出：slideDown() / slideUp() / slideToggle...下拉菜单略（详情参看源码）。...停止动画排队的方法为：stop() ; stop() 方法用于停止动画或效果。 stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。...总结: 每次使用动画之前，先调用 stop() ,在调用动画。...思路分析: 1.鼠标经过某个小li 有两步操作： 2.当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入 3.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出

8.6K3 0

jQuery (二)

使用jQuery处理事件事件处理一个栗子，单击p时背景变成灰色由于es6的箭头函数不支持this的绑定，所以无法使用箭头函数，只能使用匿名函数 html <!...'gray'); }); 效果 [20180821_175532.gif] 或者使用第二个参数，添加相关的属性，完成事件的相关触发 // 单击任意p时，使其背景变成灰色 $('', { src...对象的data属性，在调用最后一个处理函数的时候，会将第二个值作为对象的data属性,这样即可避免使用闭包操作 ps jquery 中所有的处理程序都有一个函数例如 hover() mouseenter...https://api.jquery.com/category/events/event-object/ 自定义事件一个栗子，实现发布订阅模型，先全体元素广播一个事件,在单击一个按钮的时候 $('#...调用 $( "button" ).click(function() { $( "p" ).fadeOut().show(30000).slideToggle(); }); 将会先隐藏，在显示出，接着进行切换

10.8K3 0

Web前端知识(四)

写的更少, 干的更多以更少的代码,实现更多的功能. 4.1.1.2.jQuery作者-John Resig John Resig：第一次编程大概是在初中，14、15岁 2006年8月发布jQuery...4.1.1.3.jQuery特点 1.轻量级 2.强大的选择器 3.出色的Dom封装 4.可靠的事件处理 5.浏览器兼容性强 6.链式操作方式 7.隐式迭代 4.1.2.jQuery代码风格 l在jQuery...鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 4.1.6. jQuery操作CSS l通过jQuery可以很方便的来操作...代码实战: 切换显示隐藏我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判断。...: .slideUp() .slideDown() .slideToggle()。

8.4K3 0

前端中那些让你头疼的英文单词

（alt里面放置的是网络不好时的替换文本，src填写的是路径，title填写的是提示文本） a 超链接（herf内容是跳转地址，当然此处有一个工作中常用的功能，那便是跳转网站新建一个标签，不用占本网站的位置...submit提交，button普通的按钮，reset重置（工作中一般不用）） select 选择菜单（下拉菜单功能嵌套option使用） table 表格（tr行 td单元格 th表头）普通语义...字符串 boolean布尔型 null 无 object 对象 undefined 没有定义 onclick 单击（js中，在jQuery中是click） onmouseover鼠标滑过 onmouseout...高级 ---- show 显示 hide 隐藏 toggle 触发（在jQuery中，但凡是有两个功能的效果是相反的，肯定会有第三个功能，这个功能会集成那两个功能，这个功能的名称单词中肯定会有toggle...显示（向下滑，向下展开，就显示了） slideToggle 一会显示一会隐藏 stop 停止（清除动画机制，在形成动画函数之前加stop） fadeIn 淡入 fadeOut 淡出 fadeToggle

2.8K2 0

jQuery 效果

，默认是"swing” ，可用参数"linear” . (4) fn: 回调函数,在动画完成时执行的函数，每个元素执行一-次。...:3) easing: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" . '4) fn:回调函数，在动画完成时执行的函数,每个元素执行- -次。...(4) fn: 回调函数，在动画完成时执行的函数，每个元素执行- -次。建议:平时一般不带参数，直接显示隐藏却可....(4) fn: 回调函数,在动画完成时执行的函数，每个元素执行- -次。...总结: 每次使用动画之前，先调用 stop() ,在调用动画。 1.6. 事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。

7.8K2 0

JQuery 摘要

mouseout mouseover mouseup resize scroll select submit unload toggle(func1, func2): 单击时轮流执行...func1和func2 toggleClass(“someclass”): 单击时轮流添加或删除someclass....JQuery采取事件冒泡的策略。事件对象：事件发生时执行的函数可以把事件对象作为参数。...event.target属性：保存发生事件的目标元素 event.stopPropagation(): 阻止事件继续冒泡 event.preventDefault(): 阻止事件的默认操作 $(...unbind(): 移除事件处理事件命名空间：bind(‘click.sometag’, func) 可以在unbind的时候只解绑指定名字的事件。

8521 0

HTML5+CSS3+JavaScript从入门到精通-21

HTML5+CSS3+JavaScript从入门到精通作者：王征，李晓波第二十一章 JavaScript的框架库jQuery 案例 21-01 jQuery的使用 <!..."); $("#a").html("提醒信息，你单击了第一幅图像！...jQuery的文档排版非常丰富，因为其轻量级的特性，文档并不复杂，随着新版本的发布，可以很快被翻译成多种语言，这也为jQuery的流行提供了条件。... jQuery的常用事件方法事件往往都是HTML页面的动作引起的，例如当用户按下鼠标或者提交表单，甚至在页面移动鼠标时，事件都会出现...jQuery封装了Javascript中所有的事件，使得其操作更加简单方便，并且使得这些事件能够兼容各大浏览器，减少我们大量代码的编写 21-08 自定义动画

3.5K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭