博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载]
阅读量：4190 次
发布时间：2019-05-26

本文共 20779 字，大约阅读时间需要 69 分钟。

 

 

(一).概述

 

现在有好多比较优秀的客户端脚本语言组件, 如: 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 
<
script src
=
Resources/js/jquery
-
1.2
.
1
.js type
=
"
text/javascript
"
> script> 

(三).代码示例

1. 访问页面元素

 1 <head runat="server">
 2     <title>访问元素 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4         
 5         <script type="text/javascript">
 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      script>
23  head>
24 <body>
25     <form id="form1" runat="server">
26     <div>
27         <asp:TextBox ID="TextBox1" runat="server" Text="Hello! ChengKing."> asp:TextBox>
28         <div class="KingClass">Hello! Rose div> <br />
29         <input type = button value="获取元素" onclick = "GetElement();" />
30      div>
31      form>
32  body>
2. Dom对象和jQuery对象转换示例
 1 <head runat="server">
 2     <title>Dom和jQuery对象转换示例 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4         
 5         <script type="text/javascript">
 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      script>
22  head>
23 <body>
24     <form id="form1" runat="server">
25     <div>
26         <div id="div1" runat=server>
27             Hello!
 ChengKing.
28          div>
29         <input type = button value="对象转换" onclick = "ChangeObjectType();" />
30      div>
31      form>
32  body>
3. 访问对象内部元素
 1 <head runat="server">
 2     <title>访问内部元素 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4         
 5         <script type="text/javascript">
 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      script>
22  head>
23 <body>
24     <form id="form1" runat="server">
25     <div>
26         <div id="div1" runat=server>
            
27             <p>Hello! ChengKing. p>
      
28             <p>Hello! Rose. p>
  
29          div>
30         <input type = button value="访问内部元素" onclick = "VisitInnerElement();" />
31      div>
32      form>
33  body>
4. 显示/隐藏元素
 1 <head runat="server">
 2     <title>显示/隐藏元素 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4         
 5         <script type="text/javascript">
        
 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      script>
29  head>
30 <body>
31     <form id="form1" runat="server">
    
32         <div id="div1" runat=server>
            
33             <p>段1: Hello! ChengKing. p>
      
34             <p>段2: Hello! Rose. p>
  
35             <p>段3: Hello! King. p>
36          div>
37         <input type="button" value="隐藏第一段" onclick="HideElement();" />
38         <input type="button" value="显示第一段" onclick="ShowElement();" />
        
39         <input type="button" value="隐藏第二段" onclick="HideSecondSegment();" />
40         <input type="button" value="隐藏显示的Div" onclick="HideVisibleDivElement();" />
    
41         <input type="button" value="显示隐藏的Div" onclick="ShowHideDivElement();" />
            
42      form>
43  body>
5. 根据条件查询对象元素集合
 1 <head runat="server">
 2     <title>根据条件获取页面中的元素对象集合 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4         
 5         <script type="text/javascript">
        
 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          script>
43  head>
44 <body>
45     <form id="form1" runat="server">
46     <div>
47         <ul>
48             <li>Hello! ChengKing. li>
49             <li class="k">Hello! Rose. li>
50             <li class="k">Hello! King. li>
51 
            
52          ul>
53         <input type="button" value="获取所有li元素内容" onclick="GetLiElementHtml();" />
54         <input type="button" value="获取所有li元素[且它的class='k']内容" onclick="GetLiElementHtmlWithClassIsK();" />
        
55         <br /><br /><br />
56         <input name="TextBox1" type=text value="Hello, King!" />
57         <input name="Radio1" type=radio value="Hello, Rose!" checked=checked />
58         <br />
       
59         <input type="button" value="取得含有name属性的元素的值" onclick="GetElementValueWithNameProperty();" />
                
60         <input type="button" value="取得name=TextBox1的文本框的值" onclick="GetTextBoxValue();" />
                
61         <input type="button" value="取得选中的单选框的值" onclick="GetSelectRadioValue();" />
                
62 
        
63      div>
64      form>
65  body>
6. Document.Ready方法示例
 1 <head runat="server">
 2     <title>Document.Ready方法示例 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4     <script language="javascript">
 5 
        function Init1()
 6 
        {
 7             alert('Document.body.onload事件执行!'
);
 8 
        }
 9 
        function Init2()
10 
        {
11             alert('$(document).ready事件执行!'
);
12 
        }
13 
        
14      script>
15  head>
16 <body>
17     <form id="form1" runat="server">
18     <div>
19         <script language="javascript">
            
20             //ready方法 完整写法
21 
            $(document).ready(function()
22 
            {
23 
                Init2();            
24 
            });      
25             //
ready方法 简写
26 //
            $(function() {
27 //
                Init2(); 
28 //            });                            
29             document.body.onload=
Init1;               
30          script>
31      div>
32      form>
33  body>
7. Html方法示例
 1 <head runat="server">
 2     <title>使用Html方法 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4     <script language=jscript>
 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      script>
22  head>
23 <body>
24     <form id="form1" runat="server">
25     <div>
26         <ul>
27             <li> li>
28             <li> li>
29          ul>
 
30         <input type=button value="得到所有li的值" onclick="GetLisValue();" />
       
31      div>
32      form>
33  body>
8. 元素事件注册以及实现示例
 1 <head runat="server">
 2     <title>给元素注册事件及实现事件 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4     <script language=jscript>
 5 
        $(document).ready(function()
 6 
        {            
 7             $("#button1"
).click(function() {
 8                 alert('Button Element ClienEvent Runned.'
);
 9 
            });            
10 
        })    
11 
            
12      script>
13  head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <input id="button1" type=button value="单击, 此按钮被设置了单击事件!" />
     
18      div>
19      form>
20  body>
9. Filter和no方法使用示例
 1 <head runat="server">
 2     <title>Filter and No方法使用 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4     <script language=jscript>
 5 
        function ChangeBorder()
 6 
        {
 7             $("ul").not("[li]").css("border", "1px solid blue"
);        
 8 
        }        
 9      script>
     
10  head>
11 <body>
12     <form id="form1" runat="server">
13     <div>
        
14          <ul>
15                 <li>Hi King! li>
            
16                 <li>Hi Rose! li>
                            
17          ul>
          
18         <br />
     
19         <ul> ul>
 
20         <input type=button onclick = "ChangeBorder();" value="改变边框" />
21      div>
22      form>
23  body>
10. 一个很有用的方法: Css方法使用示例
 1 <head runat="server">
 2     <title>使用Css方法, 比较有用的一个方法 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4         <script language=jscript>
 5 
            function SetBorderStyle()
 6 
            {
 7                 $("ul").css("border", "1px solid blue"
);        
 8                 $("ul li").css("border", "1px solid red"
);        
 9 
            }        
10          script>
     
11  head>
12 <body>
13     <form id="form1" runat="server">
14     <div>
15         <ul>
16             <li> li>
17             <li> li>
18             <li> li>
19          ul>
20         <input type=button value="设置边框" onclick="SetBorderStyle();" />
       
21      div>
22      form>
23  body>
11. 滑动显示/隐藏元素
 1 <head runat="server">
 2     <title>滑动显示隐藏元素 title>
 3        <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4         <script language=jscript>
 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          script>
  
16  head>
17 <body>
18     <form id="form1" runat="server">
19     <div id="faq">
20         <input class="display" type=button value="Slide显示/隐藏"  />
  
21         <input class="pic" type=image src="https://p-blog.csdn.net/images/p_blog_csdn_net/chengking/160914/t_GIRL.GIF" style="width: 227px; height: 174px" />
22      div>
23      form>
24  body>
12. 操作父元素
 1 <head runat="server">
 2     <title>操作父元素 title>
 3     <link rel="stylesheet" type="text/css" href="Resources/CSS/StyleSheet1.css" title="blue" />
 4     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 5         <script language=jscript>
 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          script>
     
14  head>
15 <body>
16     <form id="form1" runat="server">
17     <div>
        
18         <p>
19             Hi! Rose.<br />
20             <a href="#">你好 a>
21          p>
22      div>
23      form>
24  body>
13. Toggle方法使用示例
 1 <head runat="server">
 2     <title>Toggle方法使用 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4         <script language=jscript>
 5 
               $(document).ready(function() {
 6                 $("#btn"
).toggle(function() {
 7                     $(".pic").show('slow'
);
 8 
                }, function() {
 9                     $(".pic").hide('fast'
);
10 
                });
11 
            });
12      script>
     
13  head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <input id="btn" type=button value="toggle事件测试" />
18         <input class="pic" type=image src="https://p-blog.csdn.net/images/p_blog_csdn_net/chengking/160914/t_GIRL.GIF" style="width: 227px; height: 174px; display:none;" />
19      div>
20      form>
21  body>
14. Animate方法使用示例
 1 <head runat="server">
 2     <title>Animate方法示例 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
 
 4         <script language=jscript>
 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      script>
     
19  head>
20 <body>
21     <form id="form1" runat="server">
22     <div>
23         <input id="btn" type=button value="Animate事件测试" />
24         <input class="pic" type=image src="https://p-blog.csdn.net/images/p_blog_csdn_net/chengking/160914/t_GIRL.GIF" style="width: 227px; height: 174px; display:none;" />
25      div>
26      form>
27  body>
15. 改变表格行为(by calss property)
 1 <head runat="server">
 2     <title>改变表格行为 title>
 3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"> script>
         
 4         <script type="text/javascript">
 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          script>
17         <style>
18 
        th {
19 
                background:#0066FF;
20 
                color:#FFFFFF;
21                 line-
height:20px;
22 
                height:30px;
23 
        }
24 
         
25 
        td {
26 
                padding:6px 11px;
27                 border-
bottom:1px solid #95bce2;
28                 vertical-
align:top;
29                 text-
align:center;
30 
        }
31 
         
32         td *
 {
33 
                padding:6px 11px;
34 
        }
35 
         
36 
        tr.奇数 td {
37                 background:#ecf6fc;  /*设置奇数行颜色*/
38 
        }
39 
        tr.偶数 td {
40                 background:#ecf6ee;  /*设置偶数行颜色*/
41 
        }
42 
         
43 
        tr.悬浮 td {
44                 background:#6699ff;  /*这个将是鼠标高亮行的背景色*/
45 
        }
46 
         
47          style>
48 
49  head>
50 <body>
51     <form id="form1" runat="server">
52     <div>
53         <table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
             
54             <thead>
55               <tr>
56                 <th>姓名 th>
57                 <th>年龄 th>
58                 <th>QQ th>
59                 <th>Email th>
60                tr>
61              thead>
62             <tbody>
63               <tr>
64                 <td>张三 td>
65                 <td>20 td>
66                 <td>00000 td>
67                 <td>****** td>
68                tr>
69               <tr>
70                 <td>李四 td>
71                 <td>20 td>
72                 <td>00000 td>
73                 <td>****** td>
74                tr>
75               <tr>
76                 <td>小刘 td>
77                 <td>20 td>
78                 <td>00000 td>
79                 <td>***** td>
80                tr>
81              tbody>
82          table>
83 
84      div>
85      form>
86  body>
16. 操作jQuery属性示例
 1 <head runat="server">
 2     <title>操作元素属性 title>
 3     <style>
 4 
        .blue {
 5 
                background:#6699FF;
 6 
                color:#FFFFFF;
 7                 line-
height:20px;
 8 
                height:30px;
 9 
        }
10      style>
    
11     <script src=Resources/js/jquery-1.2.1.js> script>
12     <script type="text/javascript">
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      script>
     
34  head>
35 <body>
36     <form id="form1" runat="server">
37     <div>
38          <input id="btn" type=button value="Animate事件测试" onclick="ChangeElementStyleAndProperty();" />
39          <table id="tb"><tr><td>Hi King! td> tr> table>
40      div>
41      form>
42  body>
17. 利用Wrap方法动态的修改控件外观
 1 <head runat="server">
 2     <title>Wrap方法 title>
 3     <script src=Resources/js/jquery-1.2.1.js> script>
 4     <script type="text/javascript">
 5 
        $(document).ready(function(){
 6             $("p").wrap("
");
 7         });
 8      script> 
 9     <style>
10         .wrap {
11                 background:#0066FF;
12                 color:#FFFFFF;
13                 line-height:20px;
14                 height:30px;
15         }
16      style>    
17  head>
18 <body>
19     <form id="form1" runat="server">
20     <div>
21         <p>Test Paragraph. p>
22      div>
23      form>
24  body>
18. 动态切换Css样式
 1 <head runat="server">
 2     <title>动态切换样式 title>
 3     <link rel="stylesheet" type="text/css" href="Resources/CSS/StyleSheet1.css" title="blue" />
 4     <link rel="stylesheet" type="text/css" href="Resources/CSS/StyleSheet2.css" title="gray" />
 5     <script src=Resources/js/jquery-1.2.1.js> script>
 6     <script type="text/javascript">
 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      script>
 
25  head>
26 <body>
27     <form id="form1" runat="server">
28     <div>
29         <div class="BackColor" id="div1">注意看一下我的背景色<br />
30          div>
31         <input class="styleswitch" title="blue" type=button value="切换到: 蓝色背景" />
        
32         <input class="styleswitch" title="gray" type=button value="切换到: 灰色背景" />
33      div>
34      form>
35  body>
19. Prepend-Wrap-Append 组合方法示例
 1 <head runat="server">
 2     <title>Use Prepend-Wrap-Append Method title>
 3     <link href="Resources/CSS/StyleSheet3.css" rel="stylesheet" type="text/css" />
 4     <script src=Resources/js/jquery-1.2.1.js> script>
    
 5     <script type="text/javascript">
  
 6         $(document).ready(function(){ $("div.roundbox") .wrap('
'); 
 7         });      
 8         
 9         $('div.roundbox').prepend(' ')
10         .append(' ');
11      script> 
12  head>
13 <body>
14     <form id="form1" runat="server">        
15         <div class="Head">Head div>
16         <div class="roundbox">
17             <br />
18             正文内容       
19             <br />
20             正文内容       
21             <br />
22             正文内容       
23             <br />
24             <br />       
25         div>
26        <div class="Foot">Foot div>
27      form>
28  body>
20.操作集合示例
 1 <head runat="server">
 2     <title>操作集合 title>
 3     <script src=Resources/js/jquery-1.2.1.js> script>
 4     <script language=jscript>
 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      script>
16 
     
17  head>
18 <body>
19     <form id="form1" runat="server">
20     <div>
21         <p>Hi! King. p>
    
22         <p>Hi! Rose. p>
    
23         <p>Hi! James. p>
       
24         <p>Hi! ChengKing. p>
       
25      div>
26     <br />
27     <input id="btn" type=button value="依次为P指定不同颜色" onclick="SetColorToThreePMark();" />
28     <input id="Button1" type=button value="设置交替颜色" onclick="SetSwitchCllor();" />
29      form>
30  body>
21. 扩展jQuery系统方法
 1 <head runat="server">
 2     <title>扩展JQuery系统方法 title>
 3         <script src=Resources/js/jquery-1.2.1.js> script>
    
 4     <script type="text/javascript">
    
 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      script>
 
20  head>
21 <body>
22     <form id="form1" runat="server">
23     <div>
24         <input id="Button1" type=button value="执行max(3,5)" onclick="Compute('max');" />
25         <input id="Button2" type=button value="执行min(3,5)" onclick="Compute('min');" />
26      div>
27      form>
28  body>
22. 触发元素事件示例
 1 <head runat="server">
 2     <title>触发元素事件示例 title>
 3     <script src=Resources/js/jquery-1.2.1.js> script>
    
 4  head>
 5 <body>
 6     <form id="form1" runat="server">
 7     <div>
 8         <input type=button value="按钮1" onclick="alert('执行按钮1单击事件');" />
    
 9         <input type=button value="按钮2" onclick="alert('执行按钮2单击事件');" />
    
10         <input type=button value="按钮3" onclick="alert('执行按钮3单击事件');" />
     
11         <br />
12         <input onclick="$('input').trigger('click');" type="button" value="触发三个按钮的事件" />
13      div>
14      form>
15  body>
23. 为元素绑定和移除事件
 1 <head runat="server">
 2     <title>为元素绑定和移除事件 title>
 3     <script src=Resources/js/jquery-1.2.1.js> script>
   
 4  head>
 5 <body>
 6     <form id="form1" runat="server">
 7     <div>
 8         <input class="c" type=button value="按钮1" title="执行按钮1单击事件"   />
    
 9         <input class="c"  type=button value="按钮2" title="执行按钮2单击事件"  />
    
10         <input class="c"  type=button value="按钮3" title="执行按钮3单击事件"  />
     
11         <br /><br />
12         <input onclick="$('.c').trigger('click');" type="button" value="触发上面三个按钮的事件" />
13         <input onclick="$('.c').bind('click', function(){alert($(this)[0].title);});" type="button" value="绑定上面三个按钮的事件" />
14         <input onclick="$('.c').unbind('click')" type="button" value="移除上面三个按钮的事件" />
        
15      div>
16      form>
17  body>
24. each方法用法
 1 <head runat="server">
 2     <title>Each用法 title>
 3     <script src=Resources/js/jquery-1.2.1.js> script>
   
 4     <script language=jscript>
 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      script>
14  head>
15 <body>
16     <form id="form1" runat="server">
17     <div>
18         <input class="c" type=button value="Each用法1" onclick="UseEach1();" />
        
19         <input class="c" type=button value="Each用法2" onclick="UseEach2();" />
        
20      div>
21      form>
22  body>
25. 检查浏览器能力(打开jQuery.js源代码, 发现组件本身已经支持多种浏览器了!)
 1 <head runat="server">
 2     <title>检查浏览器能力 title>
 3     <script src=Resources/js/jquery-1.2.1.js> script>
   
 4     <script language=jscript>
 5 
    function Check()
 6 
    {
 7 
        alert($.browser.msie);        
 8 
        alert($.browser.safari);
 9 
        alert($.browser.opera);        
10 
        alert($.browser.mozilla);       
11 
    }
12      script>
13  head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <input type=button value="检查浏览器能力"  onclick="Check();" />
    
18      div>
19      form>
20  body>
26. 解决$符被jQuery占用问题, prototype类库也有$方法
 1 <head runat="server">
 2     <title>解决$符被jQuery占用问题 title>
 3     <script src=Resources/js/jquery-1.2.1.js> script>
   
 4     <script language=jscript>
 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      script>
20  head>
21 <body>
22     <form id="form1" runat="server">
23     <div>
24         <p>Hi! Rose. p>
25         <input type=button value="使用$方法执行"  onclick="Run1();" />
    
26         <input type=button value="使用jQuery方法执行"  onclick="Run2();" />
    
27         <input type=button value="切换: 用jQuery代替$符号功能"  onclick="Switch();" />
    
28      div>
29      form>
30  body>

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

     1.

     2.

     3.

     4.

     5.

     6.

 

(五). 示例教程代码下载

    

 

 

.
如果个别语句不明白, 您可以在下面留言.

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1919265

你可能感兴趣的文章
Visual Studio2005下配置及运行NUnit
查看>>
.Net Remoting配置文件的用法
查看>>
Tomcat性能调整优化
查看>>
利用SQL Server 2005减轻生产服务器优化负荷
查看>>
优化MYSQL服务器
查看>>
Exchange磁盘性能优化
查看>>
Apusic应用服务器的性能调节_JVM优化
查看>>
Apache重负荷服务器应如何优化？
查看>>
Windows NT/2000服务器优化
查看>>
Windows 2003系统优化技巧
查看>>
Linux NFS服务器性能优化
查看>>
FREEBSD升级及优化全攻略
查看>>
RISC架构服务器开源运动将促使市场需求提升
查看>>
IT治理的成功要诀
查看>>
中化CIO彭劲松:IT治理让我明明白白做事
查看>>
中国惠普公司企业计算及专业服务集团卫东：IT治理最重要就是保证技术与业务有效结合
查看>>
《给初学者的Windows Vista的补遗手册》之064
查看>>
《给初学者的Windows Vista的补遗手册》之063
查看>>
《给初学者的Windows Vista的补遗手册》之062
查看>>
《给初学者的Windows Vista的补遗手册》之057
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-09-24 18:27:42   当前IP: 3.135.190.182   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我