学习 jQuery -1 配置环境

jQuery 配置环境

下载 jQuery

地址:http://jquery.com/

中文地址: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,第一种使用CSSXpath选择器联合起来形成一个字符串来传送到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 的访问路径。

 

posted @ 2010-04-20 10:29  dearpine  阅读(1977)  评论(0编辑  收藏  举报