首页 > 代码库 > JQuery的实例集合

JQuery的实例集合

这一节将汇总前面的JQuery的基础实例

 

1.选择器

1.$("this").hide()

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
 6 </script>
 7 <script type="text/javascript">
 8     $(function(){
 9         $("button").click(function(){
10             $("this").hide();              //this关键字隐藏当前对象
11         });
12     });
13 </script>
14 </head>
15 <body>
16 
17 <button>点击我</button>
18 
19 </body>
20 </html>

2.分别通过元素,类和id实现函数

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
 6 </script>
 7 <script type="text/javascript">
 8     $(function(){
 9         $(".button1").click(function(){
10             $("p").hide();                            //会隐藏所有p元素的内容,哪怕p元素含有类或者id
11             });
12         $(".button2").click(function(){
13             $(".p1").hide();
14         });
15         $(".button3").click(function(){
16             $("#p1").hide();
17         });
18     });
19 </script>
20 </head>
21 <body>
22 <p>this is a sentence</p>
23 <h1  class="p1">this is a sentence</p>
24 <h2  id="p1">this is a sentence</p>
25 <button class="button1">通过元素</button>
26 <button class="button2">通过类</button>
27 <button class="button3">通过id</button>
28 </body>
29 </html>

 

2.JQuery事件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
 6 </script>
 7 <script type="text/javascript">
 8     $(function(){
 9         $(".link_p1").click(function(){                         //点击消失事件
10             $("#p1").hide();
11         });
12         $(".link_p2").dblclick(function(){                        //双击消失事件
13             $("#p2").hide();
14         });
15         $("#p3").mouseenter(function(){                           //鼠标进入事件
16             alert("您进入了");
17         });
18         $("#p3").mouseleave(function(){                            //鼠标离开事件      ps:hover实现的是mouseenter和mouseleave方法的集合
19             alert("您离开了");
20         });
21         $("#p4").mousedown(function(){                            //鼠标按下事件
22             alert("您按下了");
23         });
24         $("#p4").mouseuo(function(){                            //鼠标按起事件   
25             alert("您按起了");
26         });
27 
28 
29     
30     });
31 </script>
32 </head>
33 <body>
34 <p id="p1">点击事件,点击之后消失</p>
35 <p id="p2">双击事件,双击之后消失</p>
36 <p id="p3">实现鼠标进入,离开的弹窗事件</p>
37 <p id="p4">实现鼠标按下,按起的弹窗事件</p>
38 
39 <button class="link_p1">点击之后,id为p1的段落消失</button>
40 <button class="link_p2">双击之后,id为p2的段落消失</button>
41 
42 </body>
43 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <title>W3Cschool教程(w3cschool.cn)</title> 
 6 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 7 </script>
 8 <script>
 9 $(document).ready(function(){
10   $("input").focus(function(){                                           //聚焦事件
11     $(this).css("background-color","#cccccc");
12   });
13   $("input").blur(function(){                                            //分散事件
14     $(this).css("background-color","#000000");
15   });
16 });
17 </script>
18 </head>
19 <body>
20 
21 Name: <input type="text" name="fullname"><br>
22 Email: <input type="text" name="email">
23 
24 </body>
25 </html>

3.隐藏和显示事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".hide").click(function(){
    $("p").hide();
  });
  $(".show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<input type="text" id="text"><br>
<p>如果你点击“隐藏” 按钮,我将会消失。</p>
<button class="hide">隐藏</button>
<button class="show">显示</button>
</body>
</html>

toggle()实现隐藏和显示

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(document).ready(function(){
 9   $("button").click(function(){
10     $("p").toggle("slow");
11   });
12 });
13 </script>
14 </head>
15 <body>
16 
17 <button>隐藏/显示</button>
18 <p>这是一个文本段落。</p>
19 <p>这是另外一个文本段落。</p>
20 </body>
21 </html>

4.淡入和淡出

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $(".show").click(function(){
        $("p").fadeIn();                        //其中的参数:speed,easing,callback   其中fadeTo方法与这两个方法类似,其作用是实现元素的样式的改变
    });
    $(".hide").click(function(){
        $("p").fadeOut();                        //toggle()方法实现淡入和淡出的集合
    });
});
</script>

<style type="text/css">
    p{
        display: none;
    }
</style>
</head>
<body>

<p>这句话会淡入和淡出</p>
<button class="show">点击淡入</button>
<button class="hide">点击淡出</button>
</body>
</html>

5.下拉和回收

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(document).ready(function(){
 9     $(".drow_down").click(function(){
10         $(".p2").slideDown();                             //实现下拉
11     });
12     $(".shrink").click(function(){
13         $(".p2").slideUp();                                    //实现收缩
14     });
15 
16 });
17 </script>
18 
19 <style type="text/css">
20     .p2{
21         display: none;
22     }
23 </style>
24 </style>
25 </head>
26 <body>
27 
28 <p class="p1">这句话1</p>
29 <p class="p2">这句话2</p>
30 <button class="drow_down">点击下拉</button>
31 <button class="shrink">点击收缩</button>
32 
33 </body>
34 </html>

6.动画的实现

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script> 
 8 $(document).ready(function(){
 9   $("button").click(function(){
10     $("div").animate({left:‘250px‘,                                         //值部分需要‘’,且使用逗号分开
11                     opacity: ‘0.5‘,
12                     width:‘400px‘,
13                     height: ‘+=150px‘,                                      //自增部分
14                         });
15 
16   });
17 });
18 </script> 
19 </head>
20  
21 <body>
22 <button>开始动画</button>
23 <p> 我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
24 <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
25 </div>
26 
27 </body>
28 </html>

(未完待续...)

JQuery的实例集合