haogj

常用链接

统计

Java

最新评论

2009年4月25日 #

jQuery1.3.2 源码学习 -2 两个重要的正则表达式

32 // Is it a simple selector

33 isSimple = /^.[^:#\[\.,]*$/

 

/ / 表示这是正则表达式

^ 表示开始部分

$ 表示结束部分

  

. 匹配除了 \n 之外的任何字符

[^character_group] 表示不在字符集合中

[^:#\[\.,] 表示除了冒号 (:), #, 前中括号([), 句号(.) 和逗号(,)之外的任何一个字符

[^:#\[\.,]* 表示上述任意一个字符从 0 到任意次的重复

 

29 // A simple way to check for HTML strings or ID strings

30 // (both of which we optimize for)

31 var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/;

 

正则表达式的内容为 ^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$

 

从中间的 | 或者, 将表达式分为两部分

前面为  ^[^<]*(<(.|\s)+>)[^>]*$

 

[^<] 表示除了 < 之外的任何一个字符

[^<]* 表示任意多个除了 < 之外的任意字符

 

\s 表示任意的空白字符,例如,空格,回车,制表等等。

.|\s 表示任意字符

(.|\s)+ 表示任意多个字符,注意,因为是一个 +,所以是贪婪模式。

<(.|\s)+> 表示开始为 < ,中间为任意字符,由 > 结尾的任意串,也就是以 < 开始,以 > 结束的最长的串。

[^>]* 表示除了 > 之外的任意多个字符

 

合起来的意思就是,开始有多个除 < 之外的任意字符,中间为 < 开头,中间为任意串,后面再跟着 > ,最后为任意多个除 > 之外的字符的串,也就是 html

 

后面为 ^#(\w+)&

 

\w 表示任何一个单词字符,即 [a-zA-Z_0-9]

\w+ 表示 1 个以上的字符

#(\w+) 表示以 # 开始的一个以上的单词字符,也就是jQuery 中的 ID 表示格式

 

此处使用了 3 个括号,表示分组,如果匹配了第一个分组,下标为 1 ,匹配了第三个分组,则说明为 ID

posted @ 2009-04-25 15:29 haogj 阅读(194) | 评论 (1)编辑

jQuery1.3.2 源码学习 -1 $ 是什么?jQuery 又是什么?

jQuery1.3.2  源码学习

 

本源码使用当前的 jQuery 1.3.2 版本,下载时间 2009-4-25,下载网站:jquery.com

 

一个函数

 

1 /*!

2  * jQuery JavaScript Library v1.3.2

3  * http://jquery.com/

4  *

5  * Copyright (c) 2009 John Resig

6  * Dual licensed under the MIT and GPL licenses.

7  * http://docs.jquery.com/License

8  *

9  * Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009)

10 * Revision: 6246

11 */

12 (function(){

 

4376 })();

 

省略掉中间的内容,可以看到从第 12 行到 4376 行,jQuery 代码可以简化为如上的代码。

也就是定义了一个匿名的函数,然后执行这个函数。

在这个匿名函数中完成其他的定义和操作,这样可以避免与系统的其他函数同名造成的命名冲突问题。相当于一个私有的作用域。

 

$ 是什么?jQuery 又是什么?

 

13 var

14 // Will speed up references to window, and allows munging its name.

15 window = this,

16 // Will speed up references to undefined, and allows munging its

17 name.

18 undefined,

19 // Map over jQuery in case of overwrite

20 _jQuery = window.jQuery,

21 // Map over the $ in case of overwrite

22 _$ = window.$,

23

24 jQuery = window.jQuery = window.$ = function( selector, context ) {

25   // The jQuery object is actually just the init constructor 'enhanced'

26   return new jQuery.fn.init( selector, context );

27 },

 

通过这段代码,可以看到 $,jQuery 是 window 对象上自定义的一个成员,这个成员指向了一个匿名函数,以后可以通过window 对象的 $ 或者 jQuery 来使用这个函数。

 

这个函数返回了一个通过 jQuery.fn.init 函数定义的对象。说明通过 jQuery 得到的对象其实是一个 jQuery.fn.init 函数创建的对象,那么,以后通过 jQuery.fn.init 的原型定义的函数或者属性都可以被通过 jQuery 创建的对象来使用。

 

 

jQuery.fn 是什么?

 

35  jQuery.fn = jQuery.prototype = {

 

538 };

 

从 35 行到 538 行,为 jQuery.fn 的定义,jQuery.fn 就是 jQuery 所指向的函数的原型对象。所以在 jQuery 的原型上定义的函数就可以通过 jQuery.fn 来使用了。

 

而上边的 jQuery.fn.init 就是 jQuery 函数原型对象上的一个函数。

posted @ 2009-04-25 15:15 haogj 阅读(954) | 评论 (2)编辑

2008年10月12日 #

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 @ 2008-10-12 23:04 haogj 阅读(747) | 评论 (3)编辑

2008年9月3日 #

学习 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>

posted @ 2008-09-03 21:22 haogj 阅读(438) | 评论 (0)编辑

2008年7月1日 #

学习 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"})

posted @ 2008-07-01 21:34 haogj 阅读(723) | 评论 (1)编辑

学习 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>

posted @ 2008-07-01 21:25 haogj 阅读(1191) | 评论 (0)编辑

2008年6月29日 #

学习 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>

posted @ 2008-06-29 19:37 haogj 阅读(890) | 评论 (5)编辑

学习 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>

posted @ 2008-06-29 19:34 haogj 阅读(1441) | 评论 (0)编辑

学习 jQuery -1 配置环境

 

下载 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 了!

posted @ 2008-06-29 19:33 haogj 阅读(1172) | 评论 (0)编辑

2008年3月17日 #

wf工作流 请求的性能计数器不是自定义计数器,它必须初始化为 ReadOnly 问题处理

     摘要: 安装了 vs2008后,创建了一个最简单的控制台顺序工作流,执行之后,出现异常:
未处理的异常: System.InvalidOperationException: 请求的性能计数器不是自定义计数器,它必须初始化为 ReadOnly。  阅读全文

posted @ 2008-03-17 23:32 haogj 阅读(336) | 评论 (4)编辑