对class属性操作 addClass():添加class属性值 removeClass():删除class属性值 taggleClass():切换class属性 CRUD操作 append():父元素将子元素追加到末尾...对象1.append(对象2):将对象2添加到对象1元素内部，并且在末尾 prepend():父元素将子元秦追加到开头 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头 appendTo...(): 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在未尾 prependTo(): 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头 after():添加元秦到元素后边...* 第一个参数表示动画速度，可选slow,fast,normal也可输入毫秒数，可以省略 * 第二个参数表示淡入/淡出方式，默认是swing，还有linear可选，...="city"> 北京 上海 广州 深圳 重庆 </body
jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。...> 我是ul 的 我是ul 的 我是ul 的 <script...1.5.3 淡入淡出 淡入淡出动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 语法规范如下: ?...代码演示 淡入效果 淡出效果 淡入淡出切换 <button...总结: 每次使用动画之前，先调用 stop() ,在调用动画。 1.5.6. 事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。
点击后直接鼠标右键另存页面为…即可，最后将下载下来的文件引入项目中。...//（2）easing:(Optional)用来指定切换效果，默认是“swing”，可用参数“linear”。 //（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。...//（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次 hide([speed,[easing],[fn]]);//中括号表示可以省略此参数，无动画直接显示 3.切换显示和隐藏 toggle...（2）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （3）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。...1.淡入 fadeIn([speed,[easing],[fn]]; 2.淡出 fadeOut([speed,[easing],[fn]]; 3.淡入淡出切换 fadeToggle([speed,[easing
(毫秒数) 慢慢显示 show(毫秒数,函数) 在动画效果结束后执行函数 hide() 立刻隐藏 hide(毫秒数) 慢慢隐藏 hide(毫秒数,函数) 在动画效果结束后执行函数 toggle()...方法等于这两个方法 方法 说明 toggle() 立即显示和隐藏 toggle(毫秒数) 慢慢显示和隐藏 toggle(毫秒数，函数) 在动画效果结束后执行函数 参数：可以为任意毫秒数或，slow...,normal,fast; 4.4.2 改变元素的透明度(淡入淡出) 方法 说明 fadeIn() 立即淡入 fadeIn(毫秒数) 淡入 fadeln(毫秒数，函数) 在动画效果结束后执行函数 fadeOut...() 立即淡出 fadeOut(毫秒数) 淡出 fadeOut(毫秒数，函数) 在动画效果结束后执行函数 参数：可以为任意毫秒数或，slow,normal,fast; 4.4.3 改变元素高度(收缩)...) 慢慢收缩 slideUp(毫秒数，函数) 在动画效果结束后执行函数 参数：可以为任意毫秒数或，slow,normal,fast; 案例 <!
； 3）fn：在动画完成时执行的函数，每个元素执行一次。..."> $(function () { //1.获取所有的ul下的li var citys = $("#city li... 北京 上海 天津 重庆 3 JQuery事件绑定 JQuery事件绑定方式包括： 1）JQuery标准的绑定方式：JQuery对象...注意：JQuery1.9后该功能删除了，要使用的话引入jquery-migrate-1.0.0.js插件。 【练习案例1】：JQuery标准的绑定方式 <!
selector1,selector2,selector3 将每一个选择器匹配到的元素合并后一起返回。...1.基本动画 方法 描述 show() 将隐藏的元素显示 hide() 将可见的元素隐藏 toggle() 可见就隐藏，不可见就显示 以上的动画都可以添加参数： ① 第一个参数就是显示 执行的时间，以毫秒为单位...动画 描述 fadeln() 淡入 fadeOut() 淡出 fade To() 在指导时长内慢慢将透明度修改指定的值。... 淡出/淡入切换 <script src=".....点击btn3, 淡出/<em>淡入</em><em>切换</em>，<em>动画</em>结束时提示“<em>动画</em>结束了” */ var $div1 = $(".div1"); $("#btn1").click(function () {
“bxSlider”就是一款响应式的幻灯片js插件 bxSlider特性 充分响应各种设备，适应各种屏幕； 支持多种滑动模式，水平、垂直以及淡入淡出效果； 支持图片、视频以及任意html内容； 支持触摸滑动...-- bxSlider Javascript file --> 创建一个幻灯片区块： 加上bxSlider参数激活使用： $(document).ready...script> bxSlider下载地址：官方下载 bxSlider具体参数： 参数 描述 默认值 mode 设置滑动模式，'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出...，如果设置为true时，则到最后滑动位置时会切换到初始位置 true easing 切换动画扩展，可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果 null captions 设置显示图片标题
代码演示 淡入效果 淡出效果 淡入淡出切换 <button...总结: 每次使用动画之前，先调用 stop() ,在调用动画。...hover事件和停止动画排列案例 微博 ...a> 微博 ...思路分析: 1.鼠标经过某个小li 有两步操作： 2.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入 3.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
动画 三种方式显示和隐藏元素 默认显示和隐藏方式 show([speed,[easing],[fn]]) ：显示 参数： speed：动画的速度。...三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) easing：用来指定切换效果，默认是"swing"，可用参数"linear" swing：动画执行时效果是...先慢，中间快，最后又慢 linear：动画执行时速度是匀速的 fn：在动画完成时执行的函数，每个元素执行一次。...$("#showDiv").fadeIn("slow"); //淡入淡出方式 $("#showDiv").fadeOut("slow"); //淡入淡出方式 $("#showDiv").fadeToggle...for(元素对象 of 容器对象) 北京 上海 天津 重庆 </ul
jQuery 对象本质是： 利用$对DOM对象包装后产生的对象（伪数组形式存储）。...}); }) 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 自定义动画：animate() ; 注意：动画或者效果一旦触发就会执行...淡入淡出 淡入淡出动画，常见有四个方法：fadeIn()、fadeOut()、fadeToggle()、fadeTo()；语法规范如下： fadeIn fadeOut fadeToggle...总结: 每次使用动画之前，先调用stop()，在调用动画。 1.5.6....事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数 $(".nav>li").hover(function() { // stop 方法必须写到动画的前面
2.滑出动画*/ $('li').slideUp(); /*3.切换滑入滑出*/ $('li').slideToggle(); 对应案例：案例-《下拉菜单2》 淡入淡出.../*注意：动画的本质是改变容器的透明度*/ /*1.淡入动画*/ $('li').fadeIn(); /*2.淡出动画*/ $('li').fadeOut();.../*3.切换淡入淡出*/ $('li').fadeToggle(); $('li').fadeTo('speed','opacity'); 对应案例：案例-《淡入淡出》 自定义动画...当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中， 等前面的动画完成后再开始执行。...jquery.color.js animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。 使用插件的步骤 //1.
:3) easing: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" . '4) fn:回调函数，在动画完成时执行的函数,每个元素执行- -次。...(3) easing: (Optional) 用来指定切换效果，默认是"swing”，可用参数"linear” 。 (4) fn: 回调函数，在动画完成时执行的函数，每个元素执行- -次。...(3) easing:(Optional) 用来指定切换效果，默认是"swing" ，可用参数"linear" . (4) fn: 回调函数,在动画完成时执行的函数，每个元素执行一次。...(3) easing: (Optional)用来指定切换效果，默认是"swing" .可用参数"linear” . (4) fn: 回调函数,在动画完成时执行的函数，每个元素执行- -次。...总结: 每次使用动画之前，先调用 stop() ,在调用动画。 1.6. 事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。 1....（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。 1....淡入淡出切换效果语法规范 fadeToggle([speed,[easing],[fn]]) 2. 淡入淡出切换效果参数 （1）参数都可以省略。...总结: 每次使用动画之前，先调用 stop() ,在调用动画 $(".nav>li").hover(function() { // stop 方法必须写到动画的前面...案例：王者荣耀手风琴效果 思路分析: 1.鼠标经过某个小li 有两步操作：2.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入3.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
， $('div').slideToggle(); }) }); 淡入淡出 <!...淡入：fadeIn 淡出：fadeOut 切换：fadeToggle $("input").eq(0).click(function () { $("div")...ul //stop：停止当前正在执行的动画 $(this).children("ul").stop().slideDown(); });...13 一级菜单2 ...(0);">二级菜单33 轮播图案例 <!
$("div").toggleClass("current"); 在原生js中className会覆盖类名，在jQuery中指操作指定类名，不影响原先的类名 3.2 jQuery效果 注意：...停止动画排队：stop() ; 这样就可以在动画执行的时候停止动画 3.2.1 显示隐藏 显示隐藏：show() / hide() / toggle() ; 关于参数 参数都可以省略，无动画直接显示...第一个参数speed : 三种预定速度（show，normal，fast）或者是动画时长的毫秒数 第二个参数 easing：指定切换效果，默认是’swing’ 还可设为’linear’ 第三个参数...fn :回调函数，在动画完成时执行的函数 3.2.2 滑入滑出 滑入滑出：slideDown() / slideUp() / slideToggle() ; 3.2.3 淡入淡出 淡入淡出：fadeIn...() / fadeOut() / fadeToggle() / fadeTo() ; tips: fadeTo()必须要写速度和透明度，透明度表示淡入后的最大透明度 $(
后者是前者经过压缩处理后的版本，它去除了多余的注释、空白字符等信息，并缩短了变量的名称，以减小js文件的体积。建议你在生产环境中使用该文件，以便于用户浏览器能够更快地加载jQuery库。...li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素) $("ul li").first(); // 选取ul li中匹配的第一个元素 $("ul li").last...(); // 选取ul li中匹配的最后一个元素 $("ul li").slice(1, 4); // 选取第2 ~ 4个元素 $("ul li").filter(":even"); // 选取ul li...$("selector").slideUp(); // 隐藏显示的元素，带有向上滑动的过渡动画效果 $("selector").slideToggle(); // 切换显示/隐藏的元素，带有向上/下滑动的过渡动画效果...$("selector").fadeIn(); // 显示隐藏的元素，带有淡入的过渡动画效果 $("selector").fadeOut(); // 隐藏显示的元素，带有淡出的过渡动画效果 $("selector
显示隐藏动画 显示show()动画，隐藏动画hide()，切换动画toggle() 这三个方法都可以传入参数： 一个参数 代表动画完成的时间 两个参数 第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数...显示slideDown()动画，隐藏动画slideUp()，切换动画slideToggle() 这三个方法都可以传入参数： 一个参数 代表动画完成的时间 两个参数 第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数...二级菜单 下拉菜单案例 在jQuery中，如果需要执行动画，建议在执行动画之前先调用...stop方法，然后在执行动画。...一级菜单 淡入淡出动画 fadeIn淡入 fadeOut淡出 fadeToggle切换 以上三个方法均可传入两个参数： 时间 回调函数
li:first")：选取第一个元素中的第一个元素 $("ul li:first-child")：选取每个元素下的第一个元素 $("[href]")：选取所有带有href...toggle可以切换show和hide状态。...()：切换fadeIn()和fadeOut()状态；fadeTo()：渐变为不透明度（opacity值在0~1之间）。 ...5.停止动画： stop()方法用于停止动画效果，适用于所有jQuery效果函数，包括滑动，淡入淡出，自定义动画。...$(selector).load(url,data,callback); url：必须，希望加载的URL；ps：可以将url选择器添加到url中； data：可选参数，与请求一起发送的字符串键值对集合
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments...4.1.3 基本筛选器 $("li:first") $("li:last") $("li:eq(2)") $("li:even") $("li:gt(1)") $("li:lt(1)") 1111 2222 3333 4444 5555 ... 222 333 增加 <!...((len+1)*111); $('ul').append($ele); }); --> 5 动画效果
input type="password" name="password"> 登录 图片②登录后跳转页面...> 1 2 3 $('li').click(function...> 1 2 3 $('li').click(function...('button').eq(0).click(function(){ $('.box').fadeIn(2000,function(){ console.log('淡入...：通过css样式将元素从一个状态改变成另一个状态，css属性值是逐渐改变的，这样就可以创建动画效果①只有数字值可以创建动画（eg：width，margin），背景不会变②animate(params,speed
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
