贝博体育官方app下载net运行环境,页面中js执行顺

作者: 关于计算机  发布:2019-09-20

上边是测量检验的代码:


(一).概述

复制代码 代码如下:

今后有相当多比较卓越的客商端脚本语言组件, 如: Prototype、YUI、jQuery、mootools、Bindows, Scriptaculous, FCKEditor 等, 都非常不易, 如今研商了一晃 jQuery,在读书时顺便整理了贰个科目, 前边会有示范代码下载链接.
jQuery是JavaScript语言的多少个新的财富库(框架) ,它能便捷,简洁的使用HTML documents, handle events, perform animations,而且能把Ajax交互使用到网页,jQuery能够转移您书写JavaScript的格局.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head runat="server">
<title>测量检验js的实施种种</title>
<script language="javascript" type="text/javascript"><!--
var a = "那是一段在Header里面包车型客车JS代码";
alert(a);
// --></script>
</head>
<body onload="javscript:alert('那是在body的Onload事件中的代码!');">
<form id="form1" runat="server">
<div>
<p>测量检验一下js的实施各种
</p>
</div>
</form>
<script language="javascript" type="text/javascript"><!--
var a = "那是一段页面最终的JS代码";
alert(a);
// --></script>
</body>
</html>

(二).预备条件

运维后的试行种种如下:

本小说中有着示例都以遵照Asp.net 2.0运行景况.无需安装操作, 只要求把jQuery脚本文本引进页面, 就能够使用jQuery这一个庞大组件的法力, 如下:

实行的顺序为:head中的js,页面中的js(将此段Js放置在body标签之外亦为此顺序),body标签onload事件中的js.

1 <script src=Resourcesjsjquery-1.2.1.js type="text/javascript"></script> 

你也许感兴趣的稿子:

  • Html中JS脚本施行各种简单例如表明
  • JavaScript 全面剖判各样浏览器网页中的JS 试行顺序
  • 解读IE和firefox下JScript和HREF的实施各种
  • js 程序实践与各种达成详解

**

(三).代码示例
1. 访谈页面成分**

 1 <head runat="server">
 2     <title>访谈成分</title>
 3     <script src=Resourcesjsjquery-1.2.1.js type="text/javascript"></script> 
 4         <!--将jQuery援引进来-->

 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=Resourcesjsjquery-1.2.1.js type="text/javascript"></script> 
 4         <!--将jQuery引用进来-->

 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=Resourcesjsjquery-1.2.1.js type="text/javascript"></script> 
 4         <!--将jQuery征引进来-->

 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=Resourcesjsjquery-1.2.1.js type="text/javascript"></script> 
 4         <!--将jQuery援用进来-->

 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=Resourcesjsjquery-1.2.1.js type="text/javascript"></script> 
 4         <!--将jQuery引用进来-->

 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="GetText博克斯Value();" />                
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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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="" 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=Resourcesjsjquery-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=Resourcesjsjquery-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="" 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=Resourcesjsjquery-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="" 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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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=Resourcesjsjquery-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

     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://files.cnblogs.com/MVP33650/JQuery(ByChengKing).rar.rar)

 

来源:

本文由贝博体育app发布于关于计算机,转载请注明出处:贝博体育官方app下载net运行环境,页面中js执行顺

关键词: