您的位置:首页 > Web前端 > JQuery

JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]

2008-04-10 14:04 1041 查看
  (一).概述 现在有好多比较优秀的客户端脚本语言组件, 如: Prototype、YUI、jQuery、mootools、Bindows, Scriptaculous, FCKEditor 等, 都非常不错, 最近研究了一下 jQuery,在学习时顺便整理了一个教程, 后面会有示例代码下载链接.
jQuery是JavaScript语言的一个新的资源库(框架) ,它能快速,简洁的使用HTML documents, handle events, perform animations,并且能把Ajax交互应用到网页,jQuery能够改变你书写JavaScript的方式.
(二).预备条件本文章中所有示例都是基于Asp.net 2.0运行环境.
不需要安装操作, 只需要把jQuery脚本文本引入页面, 即可使用jQuery这个强大组件的功能, 如下:1  

(三).代码示例

1. 访问页面元素


 1 
 2     访问元素
 3      
 4         

 5         
 6         function GetElement()
 7 
        {
 8             //通过ID获取元素TextBox1的客户端Dom对象                        

 9             tb = $("#<%= TextBox1.ClientID %>")[0];       //1. 通过索引获取Dom对象    
10             tb = $("#<%= TextBox1.ClientID %>").eq(0)[0]; //2. 通过eq, eq(0)获取的是JQuery对象, 再通过索引获取Dom对象.
11             tb = $("#<%= TextBox1.ClientID %>").get(0);   //3. 通过get方法获取Dom元素            
12             alert(tb.value);
13 
            
14             //通过class属性获取元素的客户端Dom对象                        

15             div1 = $(".KingClass")[0];            
16 
            alert(div1.innerText);
17 
            
18             //通过Html标签获取元素的客户端Dom对象                        

19             div1 = $("div")[1];            
20 
            alert(div1.innerText);      
21 
        }
22     

23 
24 
25     
26     

27         
28         Hello! Rose
 
29         
30     

31     
32 
2. Dom对象和jQuery对象转换示例

 1 
 2     Dom和jQuery对象转换示例
 3      
 4         

 5         
 6         function ChangeObjectType()
 7 
        {
 8             //调用Dom对象方法                       

 9             tb_dom = document.getElementById('<%= div1.ClientID %>');
10 
            alert(tb_dom.innerHTML);
11 
            
12             //用$方法把Dom对象转换为jQuery对象, 再调用jQuery对象方法

13             tb_jQuery = $(tb_dom); 
14 
            alert(tb_jQuery.html());
15 
            
16             //取jQuery对象中的Dom对象

17             tb_dom2 = tb_jQuery[0];
18 
            alert(tb_dom2.innerHTML);         
19 
           
20 
        }
21     

22 
23 
24     
25     

26         
27             Hello! ChengKing.
28         

29         
30     

31     
32 
3. 访问对象内部元素

 1 
 2     访问内部元素
 3      
 4         

 5         
 6         function VisitInnerElement()
 7 
        {       
 8             //取得Div中第二个P元素     

 9             p = $("#<%= div1.ClientID %> P").eq(1); //等号左边的p对象为p对象集合           
10             alert(p.html());
11 
            
12             //取得Div中第一个P元素

13             p = $("#<%= div1.ClientID %> P:first").eq(0); //first为关键字           
14             alert(p.html());
15 
            
16             //取得Div中第二个P元素

17             p = $("#<%= div1.ClientID %> P:last").eq(0);  //last为关键字         
18             alert(p.html());
19 
           
20 
        }
21     

22 
23 
24     
25     

26                     
27             

Hello! ChengKing.

      
28             

Hello! Rose.

  
29         

30         
31     

32     
33 
4. 显示/隐藏元素

 1 
 2     显示/隐藏元素
 3      
 4         

 5                 
 6 
        function HideElement()
 7 
        {
 8             p = $("#<%= div1.ClientID %> P").eq(0
); 
 9             p.hide();  //隐藏方法

10         }
11 
        function ShowElement()
12 
        {
13             p = $("#<%= div1.ClientID %> P").eq(0
);           
14             p.show();  //显示方法

15         }        
16 
        function HideSecondSegment()
17 
        {
18             $("p:eq(1)").hide();  //指定p集合中的元素

19         }
20 
        function HideVisibleDivElement()        
21 
        {
22             $("div:visible").hide(); //根据div的状态选择可见的div集合

23         }
24 
        function ShowHideDivElement()        
25 
        {            
26             $("div:hidden").show();  //根据div的状态选择不可见的div集合       

27         }
28     

29 
30 
31         
32         
            
33             

段1: Hello! ChengKing.

      
34             

段2: Hello! Rose.

  
35             

段3: Hello! King.


36         

37         
38                 
39         

40             
41         
            
42     

43 
5. 根据条件查询对象元素集合

 1 
 2     根据条件获取页面中的元素对象集合
 3      
 4         

 5                 
 6         //获取ul中的li

 7         function GetLiElementHtml()
 8 
        {
 9             liS = $("ul li"
);           
10             //遍历元素

11             for(var i = 0; i < liS.length; i++)
12 
            {            
13 
                alert(liS.eq(i).html());
14 
            }                        
15 
        }
16         //获取ul中的li, 且li的class="k"

17         function GetLiElementHtmlWithClassIsK()
18 
        {
19             liS = $("ul li.k"
);  
20             //遍历元素

21             for(var i = 0; i < liS.length; i++)
22 
            {            
23 
                alert(liS.eq(i).html());
24 
            }     
25 
        }
26         //取得含有name属性的元素的值

27         function GetElementValueWithNameProperty()
28 
        {
29             alert($("input[@name]").eq(1
).val());
30             alert($("input[@name]").eq(2
).val());
31 
        }
32         //根据属性值获取元素

33         function GetTextBoxValue()
34 
        {
35             alert($("input[@name=TextBox1]"
).val());
36 
        }  
37         //根据属性类型和状态获取元素

38         function GetSelectRadioValue()
39 
        {
40             alert($("input[@type=radio][@checked]"
).val());        
41 
        }
42         

43 
44 
45     
46     

47         

    48             
  • Hello! ChengKing.

  • 49             Hello! Rose.
    50             Hello! King.
    51             
    52         

53         
54                 
55         

56         
57         
58                
59         
                
60         
                
61         
                
62 
        
63     

64     
65 
6. Document.Ready方法示例

 1 
 2     Document.Ready方法示例
 3      
 4     

 5         function Init1()
 6 
        {
 7             alert('Document.body.onload事件执行!'
);
 8 
        }
 9 
        function Init2()
10 
        {
11             alert('$(document).ready事件执行!'
);
12 
        }
13 
        
14     

15 
16 
17     
18     

19                     
20             //ready方法 完整写法

21             $(document).ready(function()
22 
            {
23 
                Init2();            
24 
            });      
25             //
ready方法 简写
26 //
            $(function() {
27 //
                Init2(); 
28 //            });                            

29             document.body.onload=Init1;               
30         

31     

32     
33 
7. Html方法示例

 1 
 2     使用Html方法
 3      
 4     

 5         $(document).ready(function()
 6 
        {
 7             $("ul").find("li"
).each(function(i)
 8 
            {
 9                 $(this).html( "This is " + i + "!"
);
10 
            });
11 
        })    
12 
        function GetLisValue()
13 
        {
14              liS = $("ul li"
);           
15             //遍历元素

16             for(var i = 0; i < liS.length; i++)
17 
            {            
18 
                alert(liS.eq(i).html());
19 
            }           
20 
        }
21     

22 
23 
24     
25     

26         

    27             

  • 28             

  • 29         
 
30         
       
31     

32     
33 
8. 元素事件注册以及实现示例

 1 
 2     给元素注册事件及实现事件
 3      
 4     

 5         $(document).ready(function()
 6 
        {            
 7             $("#button1"
).click(function() {
 8                 alert('Button Element ClienEvent Runned.'
);
 9 
            });            
10 
        })    
11 
            
12     

13 
14 
15     
16     

17              
18     

19     
20 
9. Filter和no方法使用示例

 1 
 2     Filter and No方法使用
 3      
 4     

 5         function ChangeBorder()
 6 
        {
 7             $("ul").not("[li]").css("border", "1px solid blue"
);        
 8 
        }        
 9     
     
10 

11 
12     
13     
        
14          

    15                 
  • Hi King!
  •             
    16                 
  • Hi Rose!
  •                             
    17         
          
18         
     
19         
     
    20         

    21     

    22     
    23 
    10. 一个很有用的方法: Css方法使用示例

     1 
     2     使用Css方法, 比较有用的一个方法
     3      
     4         

     5             function SetBorderStyle()
     6 
                {
     7                 $("ul").css("border", "1px solid blue"
    );        
     8                 $("ul li").css("border", "1px solid red"
    );        
     9 
                }        
    10         
         
    11 

    12 
    13     
    14     

    15         

      16             

    • 17             

    • 18             

    • 19         

    20                
    21     

    22     
    23 
    11. 滑动显示/隐藏元素

     1 
     2     滑动显示隐藏元素
     3         
     4         

     5                         $(document).ready(function() {
     6                 $('#faq').find('.pic').hide().end().find('.display'
    ).click(function() {
     7                      var answer = $(this
    ).next();
     8                      if (answer.is(':visible'
    )) {
     9 
                             answer.slideUp();
    10                      } else
     {
    11 
                             answer.slideDown();
    12 
                         }
    13 
                     });
    14 
                });
    15         
      
    16 

    17 
    18     
    19     
    20           
    21         

    22     

    23     
    24 
    12. 操作父元素

     1 
     2     操作父元素
     3     
     4      
     5         

     6             $(document).ready(function() {
     7                 $("a"
    ).hover(function() {
     8                     $(this).parents("p").addClass("BackColor"
    );
     9 
                    }, function() {
    10                     $(this).parents("p").removeClass("BackColor"
    );
    11 
                    });
    12 
                }); 
    13         
         
    14 

    15 
    16     
    17     
            
    18         


    19             Hi! Rose.
    20             你好
    21         


    22     

    23     
    24 
    13. Toggle方法使用示例

     1 
     2     Toggle方法使用
     3      
     4         

     5                $(document).ready(function() {
     6                 $("#btn"
    ).toggle(function() {
     7                     $(".pic").show('slow'
    );
     8 
                    }, function() {
     9                     $(".pic").hide('fast'
    );
    10 
                    });
    11 
                });
    12     
         
    13 

    14 
    15     
    16     

    17         
    18         
    19     

    20     
    21 
    14. Animate方法使用示例

     1 
     2     Animate方法示例
     3      
     4         

     5                       $(document).ready(function() {
     6                 $("#btn"
    ).toggle(function() {
     7                     $(".pic"
    ).animate({
     8                         height: 'show'
    ,
     9                         opacity: 'show'

    10                     }, 'slow');
    11 
                    }, function() {
    12                     $(".pic"
    ).animate({
    13                         height: 'hide'
    ,
    14                         opacity: 'hide'

    15                     }, 'slow');
    16 
                    });
    17 
                });
    18     
         
    19 

    20 
    21     
    22     

    23         
    24         
    25     

    26     
    27 
    15. 改变表格行为(by calss property)

     1 
     2     改变表格行为
     3              
     4         

     5         $(document).ready(function(){  
     6                 $(".stripe tr"
    ).mouseover(function(){  
     7                         //如果鼠标移到class为stripe的表格的tr上时,执行函数

     8                         $(this).addClass("悬浮");}).mouseout(function(){ 
     9                                         //给这行添加class值为over,并且当鼠标一出该行时执行函数

    10                         $(this).removeClass("悬浮");})  //移除该行的class
    11                 $(".stripe tr:even").addClass("偶数");
    12                     //给class为stripe的表格的偶数行添加class值为:偶数

    13                 $(".stripe tr:odd").addClass("奇数");
    14                     //给class为stripe的表格的偶数行添加class值为:奇数        

    15         });
    16         

    17         
    48 
    49 
    50 
    51     
    52     

    53                      
    54             

    55               
    56                 姓名
    57                 年龄
    58                 QQ
    59                 Email
    60               
    61             
    62             
    63               
    64                 张三
    65                 20
    66                 00000
    67                 ******
    68               
    69               
    70                 李四
    71                 20
    72                 00000
    73                 ******
    74               
    75               
    76                 小刘
    77                 20
    78                 00000
    79                 *****
    80               
    81             
    82         
    83 
    84     

    85     
    86 
    16. 操作jQuery属性示例

     1 
     2     操作元素属性
     3         
    11     

    12     
    13         function ChangeElementStyleAndProperty()
    14 
            {            
    15             if( i == 0
     ) 
    16                 $("#tb").css("background","#6699ff")                 //设定元素背景色

    17             if( i == 1 ) 
    18                 $("#tb").height(300);                                //设定高度

    19             if( i == 2 ) 
    20                 $("#tb").width(200);                                 //设定宽度

    21             if( i == 3 ) 
    22                 $("#tb").css({ color: "black", background: "blue" });//设置我个属性

    23             if( i == 4 ) 
    24                 $("#tb").addClass("blue");                           //添加class

    25             if( i == 5 ) 
    26                 $("#tb").removeClass("blue");                        //删除class

    27             if( i == 6 ) 
    28                 $("#tb").toggleClass("blue");                        //交替添加class或删除class.

    29             i++;
    30             if( i == 6 ) i = 0
    ;
    31 
            }
    32         var i = 0
    ;
    33     
         
    34 

    35 
    36     
    37     

    38          
    39          Hi King!
    40     

    41     
    42 
    17. 利用Wrap方法动态的修改控件外观

     1 
     2     Wrap方法
     3     
     4     
     5         $(document).ready(function(){
     6             $("p").wrap(""
    );
     7 
            });
     8     
     
     9     
        
    17 

    18 
    19     
    20     

    21         

    Test Paragraph.


    22     

    23     
    24 
    18. 动态切换Css样式

     1 
     2     动态切换样式
     3     
     4     
     5     
     6     
     7         $(document).ready(function()
     8 
            {
     9             $('.styleswitch'
    ).click(function()
    10 
                {
    11                 switchStylestyle(this.getAttribute("title"
    ));
    12                 return false
    ;
    13 
                });      
    14 
            });
    15 
            
    16 
            function switchStylestyle(styleName)
    17 
            {
    18             $('link[@rel*=style]'
    ).each(function(i)
    19 
                {
    20                 this.disabled = true
    ;
    21                 if (this.getAttribute('title') == styleName) this.disabled = false
    ;
    22 
                });   
    23 
            }
    24     
     
    25 

    26 
    27     
    28     

    29         注意看一下我的背景色
    30         

    31                 
    32         

    33     

    34     
    35 
    19. Prepend-Wrap-Append 组合方法示例

     1 
     2     Use Prepend-Wrap-Append Method
     3     
     4         
     5     
      
     6         $(document).ready(function(){ $("div.roundbox") .wrap(''
    ); 
     7 
            });      
     8 
            
     9         $('div.roundbox').prepend(''
    )
    10         .append(''
    );
    11     
     
    12 

    13 
    14             
    15         Head

    16         
    17             
    18             正文内容       
    19             

    20             正文内容       
    21             

    22             正文内容       
    23             

    24                    
    25        

    26        Foot
    27     
    28 
    20.操作集合示例

     1 
     2     操作集合
     3     
     4     
     5         function SetColorToThreePMark()
     6 
            {
     7             $("p"
    ).each(function(i)
     8                  { this.style.color=['gray','blue','green','red'
    ][i]; }
     9 
                  )  
    10 
            }
    11 
            function SetSwitchCllor()
    12 
            {
    13             $("p").each(function(i){this.style.color=['green','blue'][i%2
    ]})  
    14 
            }
    15     

    16      
    17 

    18 
    19     
    20     

    21         

    Hi! King.

        
    22         

    Hi! Rose.

        
    23         

    Hi! James.

           
    24         

    Hi! ChengKing.

           
    25     

    26     
    27     
    28     
    29     
    30 
    21. 扩展jQuery系统方法

     1 
     2     扩展JQuery系统方法
     3             
     4     
        
     5 
             $(document).ready(function() {
     6 
                    $.extend({
     7                   min: function(a, b){return a < b?
    a:b; },
     8                   max: function(a, b){return a > b?
    a:b; } 
     9 
                    });
    10 
            }); 
    11 
            function Compute(type)
    12 
            {
    13             switch
    (type)
    14 
                {
    15                 case 'max': alert('最大值为:' + $.max(3,5)); break
    ;
    16                 case 'min': alert('最小值为:' + $.min(3,5)); break
    ;
    17 
                }
    18 
            }  
    19     
     
    20 

    21 
    22     
    23     

    24         
    25         
    26     

    27     
    28 
    22. 触发元素事件示例

     1 
     2     触发元素事件示例
     3         
     4 

     5 
     6     
     7     

     8             
     9         
        
    10         
         
    11         

    12         
    13     

    14     
    15 
    23. 为元素绑定和移除事件

     1 
     2     为元素绑定和移除事件
     3        
     4 

     5 
     6     
     7     

     8             
     9         
        
    10         
         
    11         

    12         
    13         
    14                 
    15     

    16     
    17 
    24. each方法用法

     1 
     2     Each用法
     3        
     4     

     5     function UseEach1()
     6 
        {
     7         $.each( [6,7,8], function(i, n){ alert( "索引:" + i + ": " +
     n ); }); 
     8 
        }
     9 
        function UseEach2()
    10 
        {
    11         $.each( { name: "Rose", sex: "woman" }, function(i, value){ alert( "PropertyName: " + i + ", Value: " +
     value ); });
    12 
        }
    13     

    14 
    15 
    16     
    17     

    18                 
    19         
            
    20     

    21     
    22 
    25. 检查浏览器能力(打开jQuery.js源代码, 发现组件本身已经支持多种浏览器了!)

     1 
     2     检查浏览器能力
     3        
     4     

     5     function Check()
     6 
        {
     7 
            alert($.browser.msie);        
     8 
            alert($.browser.safari);
     9 
            alert($.browser.opera);        
    10 
            alert($.browser.mozilla);       
    11 
        }
    12     

    13 
    14 
    15     
    16     

    17             
    18     

    19     
    20 
    26. 解决$符被jQuery占用问题, prototype类库也有$方法

     1 
     2     解决$符被jQuery占用问题
     3        
     4     

     5     function Run1()
     6 
        {    
     7         //调用jquery类库的$()方法    

     8         alert($("p").html());   
     9 
        }
    10 
        function Run2()
    11 
        {    
    12         //如果此时引入了prototype.js, 则将调用prototype类库中的$()方法

    13         alert(jQuery("p").html());      
    14 
        }
    15 
        function Switch()
    16 
        {
    17 
            jQuery.noConflict();
    18 
        }
    19     

    20 
    21 
    22     
    23     

    24         

    Hi! Rose.


    25             
    26         
        
    27         
        
    28     

    29     
    30 

    (四). 其它jQuery相关网站链接

         1. http://wiki.jquery.org.cn/doku.php
         2. http://www.k99k.com/jQuery_getting_started.html
         3. http://hi.baidu.com/xie_jin/blog/item/fa822bd9b9e8fb2f11df9bf7.html
         4. http://visualjquery.com/1.1.2.html
         5. http://jquery.org.cn/api/cn/api_11.xml
         6. http://docs.jquery.com/DOM/Traversing/Selectors
     

    (五). 示例教程代码下载
         http://www.cnblogs.com/Files/MVP33650/JQuery(ByChengKing).rar

     
     

    .
    如果个别语句不明白, 您可以在下面留言.
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: 
    相关文章推荐
    章节导航