编程人员对于JQuery框架性能评论说明_程序开发

编程人员对于JQuery框架性能评论说明

创始人

2024-06-19 10:01:16

0次

JQuery框架是JavaScript语言的一个新的资源库 ,它***的性能：快速,简洁的使用HTML documents, handle events, perform animations,而且还可以能把Ajax交互应用到网页,这样就能够改变你书写的方式与格式。

现在有好多比较优秀的客户端脚本语言组件, 如: Prototype、YUI、jQuery、mootools、Bindows, Scriptaculous, FCKEditor 等, 都非常不错, 最近研究了一下 jQuery,在学习时顺便整理了一个教程, 后面会有示例代码下载链接. #t#

1. 访问页面元素

1  runat="server"> 
 2     </font></strong>访问元素<strong><font color="#006699"> 
 3      src=Resources\js\jquery-1.2.1.js type="text/javascript">   
 4          
 5          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      
23  
24  
25      id="form1" runat="server"> 
26      
27          ID="TextBox1" runat="server" Text="Hello! ChengKing."> 
28          class="KingClass">Hello! Rose

29 type = button value="获取元素" onclick = "GetElement();" />

2. Dom对象和JQuery框架转换示例

1  runat="server"> 
 2     </font></strong>Dom和jQuery对象转换示例<strong><font color="#006699"> 
 3      src=Resources\js\jquery-1.2.1.js type="text/javascript">   
 4          
 5          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      
22  
23  
24      id="form1" runat="server"> 
25      
26          id="div1" runat=server> 
27             Hello! ChengKing.  
28

29 type = button value="对象转换" onclick = "ChangeObjectType();" />

3. 访问对象内部元素

1  runat="server"> 
 2     </font></strong>访问内部元素<strong><font color="#006699"> 
 3      src=Resources\js\jquery-1.2.1.js type="text/javascript">   
 4          
 5          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      
22  
23  
24      id="form1" runat="server"> 
25      
26          id="div1" runat=server>              
27             Hello! ChengKing.
        
28             Hello! Rose.
    
29

30 type = button value="访问内部元素" onclick = "VisitInnerElement();" />

上一篇：.NET Framework初始化相关实现技巧介绍

下一篇：Ubuntu 9.10版本云计算桌面系统

编程人员对于JQuery框架性能评论说明

相关内容

热门资讯