jQuery学习笔记

Posted 可可西里的海

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以上是关于jQuery学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

web前端开发JQuery常用实例代码片段(50个)

[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段

jQuery源代码学习笔记:jQuery.fn.init(selector,context,rootjQuery)代码具体解释

JQuery学习笔记

JQuery的学习笔记

jQuery学习笔记