JQuery框架教程(基于ASP.NET运行环境).doc

JavaScript组件之JQuery(A~Z)框架教程 ——基于ASP.NET运行环境 郑 健 目录 TOC \o 1-3 \h \z \u 1．概述 1 2. 预备条件 1 3. 代码示例 1 （1）访问页面元素 1 （2）Dom对象和JQuery对象转换示例 2 （3）访问对象内部元素 3 （4）显示/隐藏元素 4 （5）根据条件查询对象元素集合 5 （6）Document.Ready方法示例 7 （7）Html方法示例 8 （8）元素事件注册以及实现示例 9 （9）Filter和no方法使用示例 9 （10）一个很有用的方法:Css方法使用示例 10 （11）滑动显示/隐藏元素 11 （12）操作父元素 11 （13）Toggle方法使用示例 12 （14）Animate方法使用示例 13 （15）改变表格行为(bycalssproperty) 13 （16）操作JQuery属性示例 15 （17）利用Wrap方法动态地修改控件外观 17 （18）动态切换CSS样式 17 （19）Prepend-Wrap-Append组合方法示例 18 （20）操作集合示例 19 （21）扩展JQuery系统方法 20 （22）触发元素事件示例 21 （23）为元素绑定和移除事件 21 （24）each方法的用法 22 （25）检查浏览器能力(打开jQuery.js源代码,发现组件本身已经支持多种浏览器了!) 22 （26）解决$符被JQuery占用问题，prototype类库也有$方法 23 1．概述 现在有好多比较优秀的客户端脚本语言组件，如:Prototype，YUI，JQuery，mootools，Bindows，Scriptaculous，FCKEditor等，都非常不错。最近我研究了一下JQuery,在学习时顺便整理了一个教程，后面会有示例代码下载链接。 JQuery是JavaScript语言的一个新的资源库(框架)，它能快速、简洁地使用HTMLdocuments，handleevents，performanimations，并且能把Ajax交互应用到网页，JQuery能够改变你书写JavaScript的方式. 2. 预备条件 本文档中所有示例都是基于ASP.NET 2.0运行环境。不需要安装任何其他任何东西，只需要把JQuery脚本文本引入页面，即可使用JQuery这个强大组件的功能，如下: 1scriptsrc=Resources\js\jquery-1.2.1.jstype=text/javascript/script 3. 代码示例 （1）访问页面元素 1headrunat=server2title访问元素/title3scriptsrc=Resources\js\jquery-1.2.1.jstype=text/javascript/script4!--将jQuery引用进来--5scripttype=text/javascript6functionGetElement()7{8//summary通过ID获取元素TextBox1的客户端Dom对象/summary9tb=$(#%=TextBox1.ClientID%)[0];//1.通过索引获取Dom对象10tb=$(#%=TextBox1.ClientID%).eq(0)[0];//2.通过eq,eq(0)获取的是JQuery对象,再通过索引获取Dom对象.11tb=$(#%=TextBox1.ClientID%).get(0);//3.通过get方法获取Dom元素12alert(tb.value);1314//summary通过class属性获取元素的客户端Dom对象/summary15div1=$(.KingClass)[0];16alert(div1.innerText);1718//summary通过Html标签获取元素的客户端Dom对象/summary19div1=$(div)[1];20alert(div1.innerText);21}22/script23/head24body25formid=form1runat=server26div27asp:TextBoxID=TextBox1runat=serverText=Hello!ChengKing./