`

Jquery示例

jQueryJavaScriptASP.netASPfckeditor 
阅读更多

目录
(一).概述 
(二).预备条件 
(三).代码示例 
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的方式.

                                                       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         <!--将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=Resources\js\jquery-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=Resources\js\jquery-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=Resources\js\jquery-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=Resources\js\jquery-1.2.1.js type="text/javascript"></script> 
 4         <!--将jQuery引用进来-->
 5         <script type="text/javascript
分享到：
| System.getProperty()参数大全
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    【原创】Jquery 示例代码，包括基本使用方法和AJAX

    这个【原创】的Jquery 示例代码集合涵盖了基础使用方法和AJAX应用，对于初学者和开发者来说是极好的学习资源。 首先，jQuery的基本使用方法包括以下几个方面： 1. **选择器**：jQuery提供了丰富的选择器，如ID选择...

    JQuery示例大全

    通过这份《JQuery示例大全》，无论是初学者还是经验丰富的开发者，都能深入理解并熟练掌握jQuery的各种技巧，从而提升网页开发的效率和质量。每一个示例都是一个实际应用的缩影，可以帮助你在实际项目中快速解决问题...

    jquery示例代码

    这个“jQuery 示例代码”压缩包提供了一系列 JavaScript 代码片段，旨在帮助初学者和有经验的开发者更好地理解和应用 jQuery。** 在 JavaScript 中，jQuery 提供了一种更简洁、更高效的语法来处理 DOM 操作、事件...

    最简单的jquery示例-拼猫游戏

    在这个"最简单的 jQuery 示例 - 拼猫游戏"中，我们可以深入理解 jQuery 的基本用法，并通过一个实际的游戏应用来实践这些知识。 首先，jQuery 的核心概念是选择器（Selectors），它允许我们轻松地选取 HTML 元素。...

    js和jquery示例

    "jQuery示例"文件夹则可能包含使用jQuery实现的各种功能示例，如简单的DOM操作、事件监听、动画效果和Ajax请求。通过这些示例，你可以学习如何有效地利用jQuery提高开发效率。 学习和实践这些示例，对于提升...

    starterkit-JQuery示例

    "starterkit-JQuery示例"旨在帮助初学者快速掌握jQuery的基本用法，通过实例来理解其核心功能。 1. **选择器**: jQuery的核心在于选择DOM元素，如`$("#id")`选择ID为"id"的元素，`$(".class")`选择所有class为...

    自己写的jQuery示例

    这个“自己写的jQuery示例”压缩包显然包含了作者个人编写的jQuery代码实例，旨在帮助学习者理解并应用jQuery的核心功能。下面将详细讨论这些知识点。 首先，我们来看“Ajax各种请求方式”。Ajax（Asynchronous ...

    jquery示例及代码

    以下是一些简单的 jQuery 代码示例，展示了其基本用法： 1. **选择元素**： ```javascript // 选取 id 为 "myElement" 的元素 var myElement = $('#myElement'); ``` 2. **事件绑定**： ```javascript // 当按钮被...

    50个jquery示例demo

    在"50个jQuery示例demo"中，我们可以深入学习和理解jQuery的各种功能和用法。 1. DOM操作：jQuery 提供了简便的方法来选择、遍历和操作HTML元素。例如，`$("#id")` 用于选取ID为指定值的元素，`$(".class")` 用于...

    精彩绝伦的JQuery示例源代码

    《精彩绝伦的JQuery示例源代码》这个压缩包文件包含了从《精彩绝伦的JQuery》一书中提取的所有示例的源代码，旨在帮助读者深入理解和掌握JQuery这门强大的JavaScript库。JQuery是一个广泛使用的开源库，它简化了...

    PhoneGap+JQuery示例项目

    PhoneGap+jQuery示例项目是一个将这两者结合的实践应用，旨在帮助开发者了解如何使用PhoneGap框架和jQuery库创建跨平台的移动应用程序。PhoneGap是一个开放源代码的开发框架，它允许开发人员使用HTML、CSS和...

    jQuery示例

    **jQuery示例** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。在本示例中，我们将深入探讨jQuery的核心功能，并通过实际代码片段来理解其工作原理。 1. **选择器*...

    struts+js,struts+jquery示例

    标题“struts+js”和“struts+jquery示例”暗示我们将探讨如何将Struts与JavaScript以及jQuery结合使用，以创建更强大的Web应用。 首先，Struts框架的核心组件包括Action类、ActionForm、Struts配置文件和JSP页面。...

    jquery 示例

    本示例集主要展示了jQuery的基本用法，包括：** 1. **光标效果（自定义选择器光膀效果.html）** - jQuery 允许开发者创建自定义的选择器，以更高效地定位页面中的特定元素。在这个示例中，可能演示了如何通过...

    jQuery示例代码

    这些文件可能分别代表不同的jQuery示例代码，例如01可能是基础选择器的示例，02可能是DOM操作的示例，04和05可能是动画效果的示例，而03和06可能是事件处理和Ajax交互的示例。每个文件内部可能包含一个或多个独立的...

    锋利的jquery示例代码

    《锋利的jQuery》是一本深受开发者喜爱的jQuery教程书籍，其随书光盘包含了丰富的示例代码，旨在帮助读者深入理解和应用jQuery库。这本书覆盖了jQuery的基础到高级技巧，通过实例来阐述jQuery的核心功能和实用技巧。...

    Jquery入门小示例

    **jQuery入门小示例** jQuery 是一款非常流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画设计和Ajax交互等任务。对于初学者来说，掌握jQuery的基础知识可以大大提高开发效率，减少代码量。本文将...

    锋利的jquery示例

    详细的锋利的jquery案例 本文件是《锋利的jQuery》一书的源代码，该书共八章，主要讲到jQuery的基本选择器、jQuery与ajax的集成，还有一些华丽的页面特效，是一款很适合初学者的jQuery教程。

    jQuery示例下载(初学者入门资料)

    适合菜鸟级的入门选手，内容简单。使用前须有基本的Dom，css,javascript基础才行！欢迎大家下载！ 非常适合jQuery入门

    《锋利的JQuery》示例代码

    人民邮电出版社出版的《锋利的jQuery》，提供全书示例代码下载。 jQuery代言：Write less,do more! 没多学一点知识，就少学一行代码。 只要下载此示例代码，光学知识，不用敲代码，高速学习jQuery，你值得下载！

Magicbox
Global site tag (gtag.js) - Google Analytics