JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载](一)
(一).概述
现在有好多比较优秀的客户端脚本语言组件, 如: Prototype、YUI、jQuery、mootools、Bindows, Scriptaculous, FCKEditor 等, 都非常不错, 最近研究了一下 jQuery,在学习时顺便整理了一个教程, 后面会有示例代码下载链接.
jQuery是JavaScript语言的一个新的资源库(框架) ,它能快速,简洁的使用HTML documents, handle events, perform animations,并且能把Ajax交互应用到网页,jQuery能够改变你书写JavaScript的方式.
(二).预备条件
本文章中所有示例都是基于Asp.net 2.0运行环境.
不需要安装操作, 只需要把jQuery脚本文本引入页面, 即可使用jQuery这个强大组件的功能, 如下:
(三).代码示例
1. 访问页面元素
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对象转换示例
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. 访问对象内部元素
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. 显示/隐藏元素
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. 根据条件查询对象元素集合
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 //获取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="GetTextBoxValue();" />
61 <input type="button" value="取得选中的单选框的值" onclick="GetSelectRadioValue();" />
62
63 </div>
64 </form>
65 </body>
转载于:https://www.cnblogs.com/hacker84/archive/2008/01/14/1038217.html
JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)[示例代码下载](一)相关推荐
- 如何搭建html运行环境,搭建基于express框架运行环境的方法步骤
一.Express简介 Express提供了一个轻量级模块,把Node.js的http模块功能封装在一个简单易用的接口中.Express也扩展了http模块的功能,使你轻松处理服务器的路由.响应.co ...
- php glod,基于PHP的黄金价格示例代码-六派数据
示例代码 本代码示例是基于PHP的六派数据接口进行数据请求API服务请求的代码示例,使用前你需要: 以下是完整代码示例: require_once("curl.func.php") ...
- OpenShift 4 - Knative教程 (1) 创建Serverless运行环境
<OpenShift 4.x HOL教程汇总> 说明:本文已经在OpenShift 4.10环境中验证 文章目录 说明 客户端环境 配置Knative环境 安装OpenShift Serv ...
- Ubuntu安装Eclipse-cpp教程(含java运行环境搭建)
转自:http://blog.csdn.net/u010333084/article/details/69568849 网络上各种相关的博客教程不胜枚举,都写的很好很详细,但是正因为太详细了,反而让许 ...
- php json 遍历 keys,详解javascript遍历json对象的key和任意js对象属性的示例代码(图)...
下面小编就为大家带来一篇javascript遍历json对象的key和任意js对象属性实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 使用 keys 方法获取该对象 ...
- 工具类二十 基于oshi的运行环境监控工具类
OSHI是Java的免费的基于JNA的(本机)操作系统和硬件信息库.它不需要安装任何其他本机库,并且旨在提供一种跨平台的实现来检索系统信息,例如OS版本,进程,内存和CPU使用率,磁盘和分区,设备,传 ...
- python教程是什么-python运行环境是什么
1.准备好安装包 1)上python官网下载python运行环境(https://www.python.org/downloads/),目前比较稳定的是python-3.5.2 2)上pycharm官 ...
- EasyUI入门教程整理与示例代码下载
场景 EasyUI环境搭建与入门基础语法 https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90760947 EasyUI中拖动dra ...
- linux daemon 安装教程,Linux daemontools安装及使用(示例代码)
1. 访问页面 https://cr.yp.to/daemontools/install.html 下载 daemontools 2. 创建工作目录 mkdir -p /package chmod 1 ...
最新文章
- iOS开发小技巧--textField成为密码框,view加载完后textField获取焦点
- ITK:从文件编写一个转换
- 【推荐一位Python大佬】 从程序员到创业者,再到自由职业
- Table中Family和Qualifier的关系与区别(转载)
- react学习(39)----react中的Hello World
- golden gate 加initial load 在rac 上的配置
- 技术的好文章和烂文章
- c语言程序设计徐立辉答案,C语言程序设计实验及习题指导
- 修复 VM Player 断网问题 20121215T1402
- C语言练习①一英寸是多少厘米?
- matlab二叉树期权定价,二叉树期权定价模型
- wps目录怎么加一条_WPS中如何正确插入目录_WPS怎么做目录
- cocos2d-x初步
- jQuery实现打字小游戏
- python图灵机器人微信号_IT之家学院:让你的微信号变成自动聊天机器人
- 《呼吸法门精要》南师所讲。读后感
- 公众号 多服务器配置_微信公众号的服务器配置
- 小米9se是Android6吗,小米9SE评测 优缺点十分明显
- IDEAD中如何使用scala
- 网件R6220路由器刷潘多拉盒子PandoraBox
热门文章
- 程序人生:摆脱情绪低潮的10种方法
- mininet在哪编写python脚本_1 mininet 简介及同时支持python2和python3
- 树莓派的几种登录方式及树莓派的网络配置
- ux和ui_设计社交餐厅策展应用程序— UX / UI案例研究
- matlab绘制路线图_绘制国际水域路线图
- Golang——垃圾回收GC(2)
- Nginx学习系列二Linux下Nginx实现负载均衡
- 资源文件(.RES)的应用
- Asp.Net MVC4.0 官方教程 入门指南之一-- 入门介绍
- Java开发者为最急需IT技术人才