Jquery示例

怼烎@ 2022-03-28 21:14 273阅读 0赞

### 目录   (一).概述    (二).预备条件    (三).代码示例  ###

#### 1. 访问页面元素   2.Dom对象和jQuery对象转换示例    3.访问对象内部元素    4.显示/隐藏元素    5.根据条件查询对象元素集合    6.Document.Ready方法示例    7.Html方法示例    8.元素事件注册以及实现示例    9.Filter和no方法使用示例    10.一个很有用的方法:Css方法使用示例    11.滑动显示/隐藏元素    12.操作父元素    13.Toggle方法使用示例    14.Animate方法使用示例    15.改变表格行为(bycalssproperty)    16.操作jQuery属性示例    17.利用Wrap方法动态的修改控件外观    18.动态切换Css样式    19.Prepend-Wrap-Append组合方法示例    20.操作集合示例    21.扩展jQuery系统方法    22.触发元素事件示例    23.为元素绑定和移除事件    24.each方法用法    25.检查浏览器能力   26. 解决$符被jQuery占用问题,prototype类库也有$方法 ####

**(一).概述**

现在有好多比较优秀的客户端脚本语言组件, 如: Prototype、YUI、jQuery、mootools、Bindows, Scriptaculous, FCKEditor 等, 都非常不错, 最近研究了一下 jQuery,在学习时顺便整理了一个教程, 后面会有示例代码下载链接.  
jQuery 是JavaScript语言的一个新的资源库(框架) ,它能快速,简洁的使用HTML documents, handle events, perform animations,并且能把Ajax交互应用到网页,jQuery能够改变你书写JavaScript的方式.< /p>

**                                                       Author:**【夜战鹰】【ChengKing(ZhengJian)】

**(二).预备条件**

本文章中所有示例都是基于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             //<summary>通过ID获取元素TextBox1的客户端Dom对象</summary>                        **   
 ** 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             //<summary>通过class属性获取元素的客户端Dom对象</summary>                        **   
 **15             div1 = $(".KingClass")\[0** **\];              
16 ** **            alert(div1.innerText);  
17 ** **              
18             //<summary>通过Html标签获取元素的客户端Dom对象</summary>                        **   
 **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上时，执行函数< /strong>  
 8                         $(this).addClass("悬浮");\}).mouseout(function()\{   
 9                                         //给这行添加class值为over，并且当鼠标一出该行时执行函数< /strong>  
10                         $(this).removeClass("悬浮");\})  //移除该行的class  
11                 $(".stripe tr:even").addClass("偶数");  
12                     //给class为stripe的表格的偶数行添加class值为:偶数< /strong>  
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("<div class='wrap'></div>"** **);  
 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('<div class="Content"></div>'** **);   
 7 ** **        \});        
 8 ** **          
 9         $('div.roundbox').prepend('<div class="Head"></div>'** **)  
10         .append('<div class="Foot"></div>'** **);  
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.** [**http://wiki.jquery.org.cn/doku.php**][http_wiki.jquery.org.cn_doku.php]

**     2.** [**http://www.k99k.com/jQuery\_getting\_started.html**][http_www.k99k.com_jQuery_getting_started.html]

**     3.** [**http://hi.baidu.com/xie\_jin/blog/item/fa822bd9b9e8fb2f11df9bf7.html**][http_hi.baidu.com_xie_jin_blog_item_fa822bd9b9e8fb2f11df9bf7.html]

**     4.** [**http://visualjquery.com/1.1.2.html**][http_visualjquery.com_1.1.2.html]

**     5.** [**http://jquery.org.cn/api/cn/api\_11.xml**][http_jquery.org.cn_api_cn_api_11.xml]

**     6.** [**http://docs.jquery.com/DOM/Traversing/Selectors**][http_docs.jquery.com_DOM_Traversing_Selectors]

** **

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

**    ** [ **http://files.cnblogs.com/MVP33650/JQuery(ByChengKing).rar**][_http_files.cnblogs.com_MVP33650_JQuery_ByChengKing_.rar]  
** **

**(六).其它.Net相关教程系列**< /span>

**.**

[ **http://blog.csdn.net/ChengKing/archive/2008/03/09/2160334.aspx**][_http_blog.csdn.net_ChengKing_archive_2008_03_09_2160334.aspx]

[http_wiki.jquery.org.cn_doku.php]: http://wiki.jquery.org.cn/doku.php
[http_www.k99k.com_jQuery_getting_started.html]: http://www.k99k.com/jQuery_getting_started.html
[http_hi.baidu.com_xie_jin_blog_item_fa822bd9b9e8fb2f11df9bf7.html]: http://hi.baidu.com/xie_jin/blog/item/fa822bd9b9e8fb2f11df9bf7.html
[http_visualjquery.com_1.1.2.html]: http://visualjquery.com/1.1.2.html
[http_jquery.org.cn_api_cn_api_11.xml]: http://jquery.org.cn/api/cn/api_11.xml
[http_docs.jquery.com_DOM_Traversing_Selectors]: http://docs.jquery.com/DOM/Traversing/Selectors
[_http_files.cnblogs.com_MVP33650_JQuery_ByChengKing_.rar]: http://files.cnblogs.com/MVP33650/JQuery%28ByChengKing%29.rar
[_http_blog.csdn.net_ChengKing_archive_2008_03_09_2160334.aspx]: http://blog.csdn.net/ChengKing/archive/2008/03/09/2160334.aspx