jQuery学习笔记（四）

动画效果

显示和隐藏效果

无动画效果

  • 显示：show()
  • 隐藏：hide()
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>004_动画 -- 显示与隐藏</title>
 6     <script src="jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9     <input type="button" id="start" value="显示">
10     <input type="button" id="stop" value="隐藏">
11     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>
12
13     <script>
14
15         $("#stop").click(function(){
16             $("div").hide();
17         });
18
19         $("#start").click(function(){
20             $("div").show();
21         });
22
23     </script>
24 </body>
25 </html>

有动画效果

  • 显示：show(speed,callback)

    • speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
    • callback：动画执行完毕后的回调函数。
  • 隐藏：hide(speed,callback)
    • speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
    • callback：动画执行完毕后的回调函数。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>004_动画 -- 显示与隐藏</title>
 6     <script src="jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9     <input type="button" id="start" value="显示">
10     <input type="button" id="stop" value="隐藏">
11     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>
12
13     <script>
14
15         $("#stop").click(function(){
16             $("div").hide(2000, function(){
17                 alert("动画执行完毕");
18             });
19         });
20
21         $("#start").click(function(){
22             $("div").show(3000);
23         });
24
25     </script>
26 </body>
27 </html>

滑动式动画效果

通过改变高度来实现显示或者隐藏的效果。

  • 向上滑动：slideUp(speed,callback)

    • speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
    • callback：动画执行完毕后的回调函数。
  • 向下滑动：slideDown(speed,callback)
    • speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
    • callback：动画执行完毕后的回调函数。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>005_动画 -- 滑动</title>
 6     <script src="jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9     <input type="button" id="start" value="显示">
10     <input type="button" id="stop" value="隐藏">
11     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>
12
13     <script>
14
15         $("#stop").click(function(){
16             $("div").slideUp(3000);
17         });
18
19         $("#start").click(function(){
20             $("div").slideDown(3000);
21         });
22
23     </script>
24 </body>
25 </html>

淡入淡出动画效果

通过改变不透明度opacity来实现显示或者隐藏。

  • 淡入效果：fadeIn(speed,callback)

    • speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
    • callback：动画执行完毕后的回调函数。
  • 淡出效果：fadeOut(speed,callback)
    • speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
    • callback：动画执行完毕后的回调函数。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>006_动画 -- 淡入淡出</title>
 6     <script src="jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9     <input type="button" id="start" value="显示">
10     <input type="button" id="stop" value="隐藏">
11     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>
12
13     <script>
14
15         $("#start").click(function(){
16             $("div").fadeIn(3000);
17         });
18
19         $("#stop").click(function(){
20             $("div").fadeOut(3000);
21         });
22
23     </script>
24 </body>
25 </html>

动画切换效果

  • toggle(duration,complete)：显示或隐藏匹配元素。

    • duration：一个字符串或者数字决定动画将运行多久。
    • complete：在动画完成时执行的回调函数。
  • slideToggle(duration,complete)：用滑动动画显示或隐藏一个匹配元素。

    • duration：一个字符串或者数字决定动画将运行多久。
    • complete：在动画完成时执行的回调函数。

自定义动画效果

  • animate(properties,duration[,easing][,complete])

    • properties：一个CSS属性和值的对象,动画将根据这组对象移动。
    • duration：一个字符串或者数字决定动画将运行多久。
    • easing：一个字符串，表示过渡使用哪种缓动函数。
    • complete：在动画完成时执行的回调函数。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>007_动画 -- 自定义</title>
 6     <script src="jquery-1.11.3.js"></script>
 7     <style>
 8         div{
 9             width: 300px;
10             height: 300px;
11             border: 1px solid black;
12             background-color: #fbb;
13             position: relative;
14             top: 100px;
15             left: 100px;
16             font-size: 40px;
17         }
18     </style>
19 </head>
20 <body>
21
22     <div></div>
23
24     <script>
25         $("div").animate({
26             width: 100,
27             height: 100,
28             top: 400,
29             left: 500,
30             fontSize: 15
31         }, 3000);
32     </script>
33 </body>
34 </html>
  • aniamte(properties,options)

    • properties：一个CSS属性和值的对象,动画将根据这组对象移动。
    • options：一组包含动画选项的值的集合。 支持的选项：
      • duration：一个字符串或者数字决定动画将运行多久。
      • easing：一个字符串，表示过渡使用哪种缓动函数。
      • queue：一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。
      • complete：在动画完成时执行的回调函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>007_动画 -- 自定义</title>
    <script src="jquery-1.11.3.js"></script>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-color: #fbb;
            position: relative;
            top: 100px;
            left: 100px;
            font-size: 40px;
        }
    </style>
</head>
<body>

    <div></div>

    <script>
                $("div").animate({
            width: 100,
            height: 100,
            top: 400,
            left: 500,
            fontSize: 15
        }, {
            duration: 3000
        });
    </script>
</body>
</html>

注意：animate方法不接受以下属性：

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • Color
  • outlineColor

并发与排队效果

  • 并发效果：指的就是多个动画效果同时执行。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>007_动画 -- 自定义</title>
 6     <script src="jquery-1.11.3.js"></script>
 7     <style>
 8         div{
 9             width: 300px;
10             height: 300px;
11             border: 1px solid black;
12             background-color: #fbb;
13             position: relative;
14             top: 100px;
15             left: 100px;
16             font-size: 40px;
17         }
18     </style>
19 </head>
20 <body>
21
22     <div></div>
23
24     <script>
25         $("div").animate({
26             width: 100,
27             height: 100,
28             left: 500,
29             top: 500
30         }, 3000);
31     </script>
32 </body>
33 </html>
  • 排队效果：指的就是多个动画按照先后顺序执行。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>007_动画 -- 自定义</title>
 6     <script src="jquery-1.11.3.js"></script>
 7     <style>
 8         div{
 9             width: 300px;
10             height: 300px;
11             border: 1px solid black;
12             background-color: #fbb;
13             position: relative;
14             top: 100px;
15             left: 100px;
16             font-size: 40px;
17         }
18     </style>
19 </head>
20 <body>
21
22     <div></div>
23
24     <script>
25        $("div").animate({
26             width: 100,
27             height: 100
28         }, 3000).animate({
29             left: 500
30         }, 3000).animate({
31             top: 500
32         }, 3000).hide(3000);
33     </script>
34 </body>
35 </html>

类数组操作

什么是类数组对象？？

就是结构上类似于数组的对象，该对象具备数组的一些特性属性或方法，同时具有自己独特的一些属性或方法

数组与类数组对象的区别

  • 数组的类型是Array
  • 类数组对象的类型是Object

 jQuery的类数组特性属性或方法

　　length属性 - 获取当前jQuery对象包含DOM对象的个数

　　get(index)方法 - 根据index的值返回对应的DOM对象

　　eq(index)方法 - 根据index的值返回对应的jQuery对象

　　index(obj)方法 - 根据对象返回该对象对应的索引值

jQuery中的隐式迭代
　　隐式迭代 - 只关注迭代的开始和结束,不关注迭代过程
　　　　方法
　　　　　　$(selector).each(callback) - (jQuery)对象方法
　　　　　　　　callback - 回调函数,function(index,domEle){}
　　　　　　　　index - 遍历过程中的索引值
　　　　　　　　domEle - 遍历得到的每个DOM对象(元素)
　　　　　　$.each(obj,callback) - (jQuery)全局函数
　　　　　　　　obj - 需要遍历的对象或数组
　　　　　　　　callback - 回调函数,function(index,domEle){}
　　　　　　　　index - 遍历过程中的索引值
　　　　　　　　domEle - 遍历得到的每个DOM对象(元素)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>008_隐式迭代 </title>
 6     <script src="jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9     <input type="text" id="user1" value="user1">
10     <input type="text" id="user2" value="user2">
11     <input type="text" id="user3" value="user3">
12     <input type="text" id="user4" value="user4">
13     <input type="text" id="user5" value="user5">
14
15     <script>
16         /*$(selector).each(callback)*/
17         /*$("input").each(function(index, domEle){
18             console.log(domEle.value);
19         });*/
20
21         /*$.each(obj,callback)*/
22         $.each($("input"), function(index, domEle){
23             // console.log(domEle.value);
24             // console.log($(domEle).val());
25             // console.log(this.value);
26             console.log($(this).val());
27         });
28
29     </script>
30
31 </body>
32 </html>
时间： 2024-10-12 14:49:32

jQuery学习笔记（四）的相关文章

jQuery学习笔记（一）：入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

jQuery学习笔记10：Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

Swift学习笔记四：数组和字典

最近一个月都在专心做unity3d的斗地主游戏,从早到晚,最后总算是搞出来了,其中的心酸只有自己知道.最近才有功夫闲下来,还是学习学习之前的老本行--asp.net,现在用.net做项目流行MVC,而不是之前的三层,既然技术在更新,只能不断学习,以适应新的技术潮流! 创建MVC工程 1.打开Visual studio2012,新建MVC4工程 2.选择工程属性,创建MVC工程 3.生成工程的目录 App_Start:启动文件的配置信息,包括很重要的RouteConfig路由注册信息 Conten

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ

jQuery学习笔记——jQuery常规选择器

一．简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

Caliburn.Micro学习笔记(四)----IHandle&lt;T&gt;实现多语言功能

Caliburn.Micro学习笔记(四)----IHandle<T>实现多语言功能 说一下IHandle<T>实现多语言功能 因为Caliburn.Micro是基于MvvM的UI与codebehind分离, binding可以是双向的所以我们想动态的实现多语言切换很是方便今天我做一个小demo给大家提供一个思路 先看一下效果 点击英文  变成英文状态点chinese就会变成中文                          源码的下载地址在文章的最下边 多语言用的是资源文件建

代码管理工具 --- git的学习笔记四《重新整理git(1)》

1.创建版本库 mkdir  创建目录 cd  地址,到该地址下 pwd 显示当前目录 1.创建目录 $ mkdir startGit $ cd startGit $ pwd 显示当前目录 或者cd到桌面,然后再创建目录 2.初始化版本库 $ git init 初始化仓库 提示信息:Initialized empty Git repository in /Users/xingzai/Desktop/startGit/.git/ 建立一个空的git仓库在/Users/xingzai/Desktop

Js脚本之jQuery学习笔记（1）

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

Linux学习笔记四：Linux的文件搜索命令

1.文件搜索命令  which 语法:which [命令名称] 范例:$which ls  列出ls命令所在目录 [[email protected] ~]$ which ls alias ls='ls --color=auto' /bin/ls 另外一个命令:whereis [名称名称],也可以列出命令所在目录. [[email protected] ~]$ whereis ls ls: /bin/ls /usr/share/man/man1/ls.1.gz /usr/share/man/ma