学习 jQuery -1 配置环境
jQuery 配置环境
下载 jQuery
中文地址：http://wiki.jquery.org.cn/doku.php
我下载下来的文件为：jquery-1.2.5.js，这是一个 javascript 脚本文件。
将这个脚本文件复制到你的网页文件夹中，在需要使用 JQuery 的网页中增加 <script src="jquery-1.2.5.js" type="text/javascript"></script>
现在就可以在页面中使用 JQuery 了！
学习 jQuery -2 document 对象的 ready 事件
首先让我们实现 Helloworld。当网页加载之后，显示一个提示框，内容为 Hello, world。
在文档载入后，马上执行代码，可以通过 document 对象的 ready 事件来完成。
取得 document 对象的方法非常简单，$( document )，如下就可以取得document 对象的 ready 事件 $( document ).ready。
让我们完成它。这个页面在文档载入之后会弹出一个对话框，并显示Hello, world。
<html>
<head>
<title>Hello</title>
<script src="jquery-1.2.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
alert( "Hello, world." );
} );
</script>
/head>
</body>
</body>
</html>
由于 document 对象的 ready 事件非常常用，它还可以简化为 $( )，上述代码也可以如下完成。
<html>
<head>
<title>Hello</title>
<script src="jquery-1.2.5.js" type="text/javascript"></script>
<script type="text/javascript">
$( function() {
alert( "Hello, world." );
} );
</script>
/head>
</body>
</body>
</html>
学习 jQuery -3 选择器
jQuery 使用两种方式来选择 html 的 element，第一种使用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
使用 CSS 和 XPath 选择器选择的方法有许多种用法，关于详细的 CSS 选择器请参考附录。
首先来看通过元素的 ID 取得元素：$( “#id” )，在名字前面增加 # 表示这是一个 id，注意引号不要丢掉。
在页面中增加一个 id 为 msg 的 span 元素，将 helloworld 显示在 span 元素中，可以如下实现：
<html>
<head>
<title>Hello</title>
<script src="jquery-1.2.5.js" type="text/javascript"></script>
<script type="text/javascript">
$( function() {
$("#msg").html("Hello, world."); } );
</script>
</head>
<body>
<span id="msg"/>
</body>
</html>
注意：#id 需要用引号引起来，有参数的 html 函数用来为元素的 innerHTML 赋值。
下一个例子：
比如我们有一个 list ，它的 ID 是 orderedlist，那么取得这个 list 的引用的 jQuery 就是 $( “#orderedlist” )，为它增加一个值为 red 的 class 属性 $("#orderedlist").addClass("red")，addClass 函数用来为元素增加 CSS 设置。取得 list 中的最后一个 li 的引用，$( “#orderedlist li:last” )。
下面的例子将最后一个 li 的内容更改为 hello, world.
<html>
<head>
<title>Hello</title>
<script src="jquery-1.2.5.js" type="text/javascript"></script>
<script type="text/javascript">
$( function() {
alert("wait");
$( "#orderedlist li:last" ).html("hello, world.");
} );
</script>
</head>
<body>
<ol id="orderedlist">
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ol>
</body>
</html>
学习 jQuery - 4 使用方法选择
使用方法来取得元素
使用方法可以取得更强大的功能，首先我们看 find 函数，通过 find 可以在已经取得元素集合中进行条件查找，例如：$("#orderedlist").find(“li”)，查找在 orderedlist 中的 li 元素，相当于 $( “#orderedlist li” )。查找的结果为元素的集合。
遍历返回的元素集合 each()
each 处理函数可以传递一个表示顺序号的参数，顺序号从 0 开始。
在函数中通过 this 取得当前被处理的元素对象，例如，下面的函数，将找到 id 为 orderedlist 的元素中的 li 元素，并将其内容依次增加 Hello,world 和顺序号码。
$( function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
注意：在 each 函数中 this 表示当前正在处理的元素，参数 i 表示当前处理的元素在集合中的序号。
其中没有参数的 html()方法是获取对象的html代码，而有参数的方法 html( 内容 )则是设置元素的 html。
下面的例子通过一个超级链接来实现表单的重置
超级链接的内容为
<a id="reset" href="#">Reset!</a>
取得这个超级链接的方法为 $( “#reset” )，点击这个超级链接的事件为 click，即 $( “#reset” ).click，写出其处理函数为
$( “#reset” ).click( function(){
} )
取得表单 id 为 myform 的表单表示为 $( “#myform” )[0]，调用其 reset 方法就是 $("#form")[0].reset()，注意，由于 $() 返回的结果为集合，所以取得集合中第一个元素就是 $()[0] 了。
因此合起来的代码为：
// use this to reset a single form
$("# reset ").click(function() {
$("#form1")[0].reset();
});
如果要将所有的表单重置，那就通过元素的标记名取得元素，结合 each 函数，就是如下的代码了。
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
全部代码如下：
<html>
<head>
<title>Hello</title>
<script src="jquery-1.2.5.js" type="text/javascript"></script>
<script type="text/javascript">
$( function() {
$("#reset").click(function() {
$("#form1")[0].reset();
});
});
</script>
</head>
<body>
<a id="reset" href="#">Reset!</a>
<form id="form1">
<input type="text" />
</form>
</body>
</html>
学习 jQuery - 5 筛选和过滤器
使用基本的过滤器
:first 第一个匹配的元素
:last 最后一个匹配的元素
:even 匹配的序号为偶数
:odd 匹配的序号为奇数
例如：
设置表格所有的偶数行的背景色
$("tr:even").css("background-color", "#bbbbff");
设置表格所有奇数行的背景色
$("tr:odd").css("background-color", "#bbbbff");
设置斑马线表格
$("tr:even").css("background-color", "#e7e7ff");
$("tr:odd").css("background-color", "#f7f7f7");
:not( 表达式 ) 从匹配的集合中删除所有符合表达式的元素
例如：
选择紧接在没有被选中的复选框的后面的 lable ，将其背景色设置为黄色
$("input:not(:checked) + span").css("background-color", "yellow");
:eq 匹配元素在匹配集合中的索引号等于指定值的元素
:lt 匹配元素在匹配集合中的索引号小于指定值的元素
:gt 匹配元素在匹配集合中的索引号大于指定值的元素
例如：
将前 4 个格的颜色设置为红色
$("td:lt(4)").css("color", "red");
:header 匹配标题行，例如 h1, h2, h3 ……
例如：
设置所有标题的背景色，前景色
$(":header").css({ background:'#CCC', color:'blue' })
针对表单的筛选
:text 匹配所有的 type 为 text 的输入项
例如：
将表单中所有 type 为 text 的输入项的背景色设置为红色
$(":text")").css({background:"red"})
:checkbox 匹配所有 type 为 checkbox 的输入项
例如：
将页面中所有的复选框设置为选中状态
$(":checkbox").each( function( ) {
this.checked = true;
});
其它
:input 匹配所有 input 元素
:text 匹配所有 type 为 text 的输入项
:checkbox 匹配所有 type 为 checkbox 的输入项
:password 匹配所有 type 为 password 的输入项
:radio 匹配所有 type 为 radio的输入项
:submit 匹配所有 type 为 submit的输入项
:image 匹配所有 type 为 image的输入项
:reset 匹配所有 type 为 reset的输入项
:button 匹配所有 type 为 button的输入项
:file 匹配所有 type 为 file的输入项
:hidden 匹配所有 type 为 hidden的输入项
针对输入项状态的条件
:enabled 匹配所有 type 为 hidden的输入项
:disabled 匹配所有被禁用的元素
:checked 匹配所有被选中的单选框和复选框
:selected 匹配所有被选中的元素
示例
将所有被禁用的元素背景设置为灰色
$("input:disabled").css({background:"grey"})
学习 jQuery - 6 在 TreeView 中实现全选
在 VisualStudio 2005 中， ASP.NET 有一个非常方便的树型控件 TreeView，我们可以开启它的 checkbox 功能，实现选择。但是，在默认方式下，TreeView 没有自动选择下级节点的功能，我们可以使用 jQuery 为它增加这个功能。
分析 TreeView 生成的 Html 可以发现，每层节点都保存在 table 元素中，如果节点又下层节点，则 table 元素的下一个元素为 div 元素，div 元素中包含一个 表示下层节点的 table 元素，下层节点的复选框就位于其中。
通过 jQuery 的 parents 函数和 next 函数，可以完成以上的选择。
函数说明：
parents 取得指定的父元素，可以逐级向上进行查找。
next 取得当前元素的下一个元素，可以通过参数进行过滤
checked 设置或者取得当前元素的选择状态
页面内容如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TreeViewDemo._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src=“jquery-1.2.5.js"></script>
<script type ="text/javascript" >
$(function() {
$(":checkbox").click(function() {
var v = this.checked;
$(this).parents("table").next("div").find(":checkbox").each(function() {
this.checked = v;
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server"
Height="300px"
Width="200px"
ShowCheckBoxes="All" >
<Nodes>
<asp:TreeNode>
<asp:TreeNode Text="One" Value="One">
<asp:TreeNode Text="1" Value="1"></asp:TreeNode>
<asp:TreeNode Text="2" Value="2"></asp:TreeNode>
<asp:TreeNode Text="3" Value="3"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Two" Value="Two">
<asp:TreeNode Text="1" Value="1"></asp:TreeNode>
<asp:TreeNode Text="2" Value="2"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Three" Value="Three"></asp:TreeNode>
<asp:TreeNode Text="Four" Value="Four"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>
ASP.NET 中对 JavaScript 的支持
在 ASP.NET 中，System.Web.UI.ClientScriptManager 用来管理脚本，此类可以通过页面对象的 ClientScript 属性取得。通过这个对象可以管理网页中的脚本。
由于可能多次向同一个页面中加入脚本，或者需要检查页面中是否已经加入过脚本，ClientScriptManager 的许多方法使用了字典集合来进行检查，注册一个脚本内容的时候，需要提供一个字符串类型的资源名称，这个名称可以用来检查是否已经在页面中加入过同样的脚本。
从方法的用途可以分为两类，一类用于检查页面中是否已经加入过资源，这一类的方法以 IsRegister 开头，另一类用于在页面对象中注册脚本资源，这一类的方法以 Register开头。
根据注册的内容，我们还可以将这些方法分成如下的类别：
数组
定义 JavaScript 数组，生成一个 JavaScript 的数组到页面中。
在 JavaScript 程序中，可以如下定义数组
var arrayName = new Array() { 数组的初值 };
例如：
var myArray = new Array() { “One”, “Two”, “Three” };
public void RegisterArrayDeclaration(
string arrayName,
string arrayValue
)
参数：
arrayName：数组的名字
arrayValue：数组的值，用字符串表示，就是在 JavaScript 程序中定义在花括号内的内容
脚本块
注册脚本块，一般用于将 JavaScript 的函数注册到页面中
用于判断是否已经注册过指定的脚本块
public bool IsClientScriptBlockRegistered(
string key
)
将脚本块注册到页面中
public void RegisterClientScriptBlock(
Type type,
string key,
string script
)
启动脚本块
注册启动脚本块，一般用于将需要直接执行的 JavaScript 语句注册到页面中
判断是否已经注册过指定的启动脚本块
public bool IsStartupScriptRegistered(
string key
)
注册启动脚本块
public void RegisterStartupScript(
Type type,
string key,
string script
)
包含外部的脚本文件
判断是否已经注册过指定名称的脚本文件
public bool IsClientScriptIncludeRegistered(
string key
)
注册包含外部的脚本文件
public void RegisterClientScriptInclude(
string key,
string url
)
页面元素的属性
为页面元素定义新的属性并赋值
public void RegisterExpandoAttribute(
string controlId,
string attributeName,
string attributeValue
)
controlId 页面元素的 ID
attributeName 新增加的属性名称
attributeValue 属性的值
隐藏域
在页面中增加隐藏域
public void RegisterHiddenField(
string hiddenFieldName,
string hiddenFieldInitialValue
)
hiddenFieldName 隐藏域的名字
hiddenFieldInitialValue 隐藏域的值
注册当执行表单提交动作时执行的脚本
public void RegisterOnSubmitStatement(
Type type,
string key,
string script
)
在页面中生成 javascript:__doPostBack( 元素ID, 参数 ) 的脚本
public string GetPostBackClientHyperlink(
Control control,
string argument
)
与前面相比，没有 javascript: 前缀，用于客户端脚本编程中，生成一个用来回发请求道服务器的脚本字符串。
public string GetPostBackEventReference(
Control control,
string argument
)
资源
生成到编译到程序集中的资源的链接
public string GetWebResourceUrl(
Type type,
string resourceName
)
资源可以是脚本文件，图片文件或者任何其它的静态文件。这个方法常常和下面的 RegisterClientScriptResource 方法联合使用。
注册已经编译到程序集中的 JavaScript 资源文件嵌入到页面中
public void RegisterClientScriptResource(
Type type,
string resourceName
)
附
在程序集中加入资源的方法：
1． 将文件包含在项目中
2． 选择该文件的属性，将“生成操作”属性设为“嵌入的资源”。
3． 注意此资源的名称前面会自动加上默认的命名空间，比如项目的默认命名空间为 com.myspace，此文件为 jQuery.js，如果此文件加入到项目的根目录，则资源名称为 com.myspace.jQuery.js。如果被加入到项目的子文件夹中，还有再加上子文件的名称，例如：如果加入到项目根目录下的 Scripts 子文件夹中，则资源的名称变为：com.myspace.Scripts.jQuery.js。
4． 为程序集标注包含资源的程序集，可以有两种方法：
a) 在 assembly.cs 中，增加一个标签
[assembly.WebResource[“资源名称”, “类型”]
b) 在项目的任何一个 cs 文件中，在命名空间之外增加
[assembly.WebResource[“资源名称”, “类型”]
5． 使用GetWebResourceUrl 可以得到基于 WebResource.axd 的访问路径。