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

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

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

1. 访问页面元素

 
 
  
  1  runat="server"> 
  
   2     </strong>访问元素<strong>   
   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();" />

30

1 runat="server">

2     </strong>Dom和jQuery对象转换示例<strong>

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

1 runat="server">

2     </strong>访问内部元素<strong>

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();" />

31

32

33