首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端成神之路-01_jQuery

从封装一大堆函数角度理解库,就是在这个库中,封装了很多预先定义好函数在里面,比如动画animate、hide、show,比如获取元素等。...常见JavaScript 库:jQuery、Prototype、YUI、Dojo、Ext JS、移动zepto等,这些库都是对原生 JavaScript 封装,内部都是用 JavaScript...基础选择器和层级选择器案例代码 div 是nav div 是p <...2.点击同时,得到当前li 索引号 3.下部里面相应索引号item显示,其余item隐藏 ​ 代码实现略。...介绍如下 语法 hover([over,]out) // 其中over和out为两个函数 over:鼠标移到元素上要触发函数(相当于mouseenter) out:鼠标移出元素要触发函数(相当于

12K10
您找到你想要的搜索结果了吗?
是的
没有找到

jQuery 效果

jQuery为我们提供另一个方法,可以停止动画排队:stop() ;  一、显示隐藏 显示隐藏动画,常见有三个方法:show() / hide() / toggle() ; 语法规范如下: ?...代码演示    下拉滑动    上拉滑动    切换滑动    </...介绍如下 语法 hover([over,]out)     // 其中over和out为两个函数 over:鼠标移到元素上要触发函数(相当于mouseenter) out:鼠标移出元素要触发函数...(相当于mouseleave) 如果只写一个函数,则鼠标经过和离开都会触发它 六、 停止动画排队 动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。...停止动画排队方法为:stop() ; stop() 方法用于停止动画或效果。 stop() 写到动画或者效果前面, 相当于停止结束上一次动画。

6.4K30

jquery事件&动画

event.data 参数4handler(eventObject):事件被触发时,执行函数 举个例子 html代码 1...,所谓命名空间就相当于给这个事件命名,删除事件时候就只删除对应这个,不会误伤这个事件类型其他事件 $('.box li').on('click.hello', function(){ var...] [, easing ] [, complete ] ) 通过淡出方式隐藏匹配元素 6、.slideDown( [duration ] [, easing ] [, complete ] ) 用下滑动画显示一个匹配元素...] [, complete ] ) 用滑动动画显示或隐藏一个匹配元素 举个例子 9、动画序列 动画执行是异步操作,比如以下代码不会等到show动画4000ms完成后,再输出'hahh'。...是组包含作为动画属性和终值样式属性和及其值集合,动画将根据这组对象移动

1.7K20

JQuery笔记

JQuery语法 (selector).action() 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery action() 执行对元素操作...() 当鼠标指针离开元素时,会发生 mouseleave 事件 mousedown() 当鼠标指针移动元素上方,并按下鼠标按键时,会发生 mousedown 事件 mouseup() 当在元素上松开鼠标按钮时...滑动 slideDown() 方法用于向下滑动元素 slideUp() 方法用于向上滑动元素 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换...height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); 停止动画...其他 noConflict() 方法会释放对 标识符控制,这样其他脚本就可以使用它了.noConflict(); jQuery(document).ready(function(){ jQuery

6.1K20

05-老马jQuery教程-动画

前言 jQuery动画系统做非常出色,而且把最常用显示、隐藏、淡入淡出、滑动显示和折叠凳效果都做了很好封装。...跟jQuery选择器和事件配合起来,可以实现很多很绚效果,而且简单易用兼容性好。 1. 显示动画 jQuery原型上方法 show()方法可以实现DOM元素进行显示动画。...这个动画效果只调整元素高度,可以使匹配元素以“滑动方式隐藏起来。在jQuery 1.3中,上下padding和margin也会有动画,效果更流畅。 参数跟show保持一致,不再赘述。...: "100%", fontSize: "10em", borderWidth: 10 }, 1000 ); }); // 指定元素左右移动 // HTML 代码: // <...jumpToEnd:当前正在执行动画立即完成,并且重设show和hide原始样式,调用回调函数等。

2K00

05-老马jQuery教程-动画

前言 jQuery动画系统做非常出色,而且把最常用显示、隐藏、淡入淡出、滑动显示和折叠凳效果都做了很好封装。...跟jQuery选择器和事件配合起来,可以实现很多很绚效果,而且简单易用兼容性好。 1. 显示动画 jQuery原型上方法 show()方法可以实现DOM元素进行显示动画。...这个动画效果只调整元素高度,可以使匹配元素以“滑动方式隐藏起来。在jQuery 1.3中,上下padding和margin也会有动画,效果更流畅。 参数跟show保持一致,不再赘述。...: "100%", fontSize: "10em", borderWidth: 10 }, 1000 ); }); // 指定元素左右移动 // HTML 代码: // <...jumpToEnd:当前正在执行动画立即完成,并且重设show和hide原始样式,调用回调函数等。

1.9K50

Web前端知识(四)

程序中,不管是页面元素选择、内置功能函数,都是美元符号“”来起 始。...而这个“”就是jQuery当中最重要且独有的对象:jQuery对象 $(function () {}); 执行一个匿名函数 $(‘#idName’); 进行执行ID元素选择 $(‘#idName...鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 4.1.6. jQuery操作CSS l通过jQuery可以很方便来操作...p”) 选取div后代中所有p标签(包括孙子) $(“div>p”) 选取div直接后代中p标签(不包括孙子) $(“div+p”) 选取紧跟div兄弟元素中第一个p $(“div~p”) 选取紧跟后兄弟元素所有...如果是区块,则设置 CSS 代码:display:block; 如果是内联, 则设置 CSS 代码:display:inline; 4.1.9.4.jq中滑动、卷起动画 jQuery 提供了一组改变元素高度方法

7.4K30

2016.06 第三周 群问题分享

HTML+CSS 怎么一个容器里面不管存在2个子元素还是1个子元素都能垂直居中 2016.06.20~2016.06.24 核心内容 弹性布局 参考答案 实例: <!...移动端有哪些touch事件 2016.06.20~2016.06.24 核心内容 touch事件 参考答案 当用户手指放在移动设备屏幕上滑动会触发touch事件; 以下支持webkit内核浏览器...通常我们再滑屏页面,会调用csshtml{-ms-touch-action: none;}可以阻止默认情况发生:阻止页面滚动 MSPointerUp——当手指离开屏幕时触发 如何jQuery实现两个...div等高 2016.06.20~2016.06.24 核心内容 jQuery 参考答案 有时你希望无论两个 div 各自包含什么内容,它们总有相同高度: $('.div').css('min-height...同一个函数,在不同执行方法下,会有不同效果。

95690

学习jQuery这一篇就够了

jQuery 核心对象:即执行 jQuery 核心函数返回对象,jQuery 对象内部包含是 dom 元素对象伪数组 (可能只有一个元素),jQuery 对象拥有很多有用属性和方法,程序员能方便操作...数组和类似数组对象通过一个长度属性(如一个函数参数对象)来迭代数字索引,从 0 到 length - 1,其他对象通过其属性名进行迭代。...如果传入一个 true,则表示是否会复制元素事件处理函数,从 jQuery 1.4 开始,元素数据也会被复制。....animate({ width: '200' }) .animate({ height: '200', }); # 2. stop() 方法描述:停止匹配元素当前正在运行动画。...() : 去掉字符串左边空格 rightTrim() : 去掉字符串右边空格 如何实现呢?

80650

jQuery框架实现元素显示及隐藏动画【附案例分析】

目录 一、默认方式显示和隐藏 二、滑动方式显示和隐藏 三、淡入淡出方式显示和隐藏 四、案例:广告自动显示和隐藏 ---- Hello,你好呀,是灰小猿!一个超会写bug程序猿!...首先来看一个简单动画效果图: 之前也和小伙伴们讲过使用jQuery框架可以很好对html中元素属性等进行操作,所以上面显示和隐藏也只是一个div,而并不是一个图片。...下面就来和小伙伴们讲一个如何元素属性进行操作,使其显示或者隐藏!...同样也是三个参数是可有可无,如果不对其进行设置,那么将以默认值执行。在这里我们增加一个最后执行函数其弹出一个窗口“隐藏了...”。...:pink"> div显示和隐藏 四、案例:广告自动显示和隐藏 既然现在我们已经知道了jQuery框架下是如何进行元素显示和隐藏,那么就应该将其应用到实际案例中去

6.4K20

前端开发者都应知道 jQuery 小技巧

回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏图片 Hover 上 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单折叠效果 将两个 Div 设为相同高度...禁用 input 字段 有时你也许想表单提交按钮或其文本输入框变得不可用,直到用户执行了一个特定行为(例如确认 “已经阅读该条款” 复选框)。...淡入淡出与滑动是我们经常使用 jQuery 做成动画效果。...通过文本找到元素 通过使用 jQuery contains() 选择器,你可以找到某个元素文本。...; } }); Ajax 调用错误处理 当某次 Ajax 调用返回 404 或 500 错误,就会执行错误处理。但如果没有定义该处理,其他 jQuery 代码或许会停止工作。

2.3K30

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

1 JQuery动画 JQuery有三种方式显示和隐藏元素: 1)默认显示和隐藏方式:       --show([speed, [easing], [fn]])       --hide([speed...;参数"linear",匀速; 3)fn:在动画完成时执行函数,每个元素执行一次。...2 JQuery遍历 js遍历方式是使用for循环,JQuery提供了三种遍历方式: 1)JQuery对象.each(callback):回调函数参数 index(索引) element(元素对象...事件绑定 JQuery事件绑定方式包括: 1)JQuery标准绑定方式:JQuery对象.事件方法(回调函数);注意:如果调用事件方法,不传递回调参数,会触发浏览器默认行为; 2)on绑定事件、off......") });*/ //给name绑定鼠标移动元素之上事件。

9.4K20

jQuery设计思想

jQuery是目前使用最广泛javascript函数库。 据统计,全世界排名前100万网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们官方库。...这是它区别于其他Javascript库根本特点。 使用jQuery第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中元素。.../选择第6个div元素 有时候,我们需要从结果集出发,移动到附近相关元素jQuery也提供了在DOM树上移动方法:   $('div').next('p'); //选择div元素后面的第一个...五、元素操作:移动 jQuery设计思想之五,就是提供两组方法,来操作元素在网页中位置移动。一组方法是直接移动元素,另一组方法是移动其他元素,使得目标元素达到我们想要位置。...除了元素位置移动之外,jQuery还提供其他几种操作元素重要方法。

2.2K60

一文深入JQuery

文章目录 动画 三种方式显示和隐藏元素 默认显示和隐藏方式 滑动显示和隐藏方式 淡入淡出显示和隐藏方式 遍历 js遍历方式 jq遍历方式 jq对象.each(callback) $.each...先慢,中间快,最后又慢 linear:动画执行时速度是匀速 fn:在动画完成时执行函数,每个元素执行一次。...:就是元素在集合中索引 element:就是集合中每一个元素对象 this:集合中每一个元素对象 回调函数返回值: true:如果当前function返回为false,则结束循环(break)。...for(元素对象 of 容器对象) 事件绑定 jquery标准绑定方式 jq对象.事件方法(回调函数); 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...表单对象.submit();//表单提交 on绑定事件/off解除绑定 jq对象.on(“事件名称”,回调函数) jq对象.off(“事件名称”) 如果off方法不传递任何参数,则将组件上所有事件全部解绑

3.3K30
领券