家有小虎 » javascript http://jiahu.net 我在路上, 你不在身旁. 想你的时候, 温暖依然. Sun, 15 Jan 2012 03:12:46 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Clear upload file input field with javascript (JQuery) http://jiahu.net/clear-upload-file-input-field-with-javascript-jquery.htm http://jiahu.net/clear-upload-file-input-field-with-javascript-jquery.htm#comments Fri, 11 Sep 2009 09:06:35 +0000 @ouc http://jiahu.net/?p=1165 <script language=”javascript” src=”jquery.min.js” type=”text/javascript”>
</script>

<script language=”javascript”>
function example_reset_html(id) {
$(‘#’+id).html($(‘#’+id).html());
}
</script>

<form>
<div style=”float: left;” id=”example_file”><input type=”file” /></div>
<input type=”button” value=”Clear” onclick=”example_reset_html(‘example_file’);”  />
</form>

Link: http://www.electrictoolbox.com/clear-upload-file-input-field-jquery/

]]> http://jiahu.net/clear-upload-file-input-field-with-javascript-jquery.htm/feed 0 在HTML页中添加打印换页符 http://jiahu.net/%e5%9c%a8html%e9%a1%b5%e4%b8%ad%e6%b7%bb%e5%8a%a0%e6%89%93%e5%8d%b0%e6%8d%a2%e9%a1%b5%e7%ac%a6.htm http://jiahu.net/%e5%9c%a8html%e9%a1%b5%e4%b8%ad%e6%b7%bb%e5%8a%a0%e6%89%93%e5%8d%b0%e6%8d%a2%e9%a1%b5%e7%ac%a6.htm#comments Wed, 05 Aug 2009 06:03:15 +0000 @ouc http://jiahu.net/?p=1110 第一页内容…

<div style=”page-break-after: always;”></div>

第二页内容…

]]> http://jiahu.net/%e5%9c%a8html%e9%a1%b5%e4%b8%ad%e6%b7%bb%e5%8a%a0%e6%89%93%e5%8d%b0%e6%8d%a2%e9%a1%b5%e7%ac%a6.htm/feed 0 CreateObject(“MSXML2.DOMDocument”) http://jiahu.net/createobjectmsxml2domdocument.htm http://jiahu.net/createobjectmsxml2domdocument.htm#comments Tue, 21 Oct 2008 06:30:04 +0000 @ouc http://cngator.net/?p=754 Continue reading →]]> 1. CreateObject(“MSXML2.DOMDocument”)
this is VB code to create a DOMDocument object using the MSXML2 library

2. new ActiveXObject(“MSXML.DOMDocument”)
this is javascript to create a DOMDocument object using the MSXML library

3. Server.CreateOject(“Microsoft.XMLDOM”)
this is ASP vbscript to create a version independent DOMDocument object

Note:
1. Only for built in objects, such as filesystemobject, dictionary etc. Any object which comes from an external library needs Server.CreateObject
2. CreateObject is a VBScript mechanism (not ASP). In NT4 it will create an object without the context of the caller. This has perfomance benefits, but this context contains things like the ASP intrinisc objects (Application, Session and so on). So if you want to use these objects in the called component, CreateObject will fail.
3. Server.CreateObject is an ASP construct and as such available in any language. It does create objects within the caller’s (ASP) context.
4. In Win2000 CreateObject has the same functionality as Server.CreateObject, there is effectively no difference.

Link: http://p2p.wrox.com/archive/asp_xml/2001-05/47.asp

]]> http://jiahu.net/createobjectmsxml2domdocument.htm/feed 1 How to put javascript in a page using masterpage? http://jiahu.net/how-to-put-javascript-in-a-page-using-masterpage-2.htm http://jiahu.net/how-to-put-javascript-in-a-page-using-masterpage-2.htm#comments Mon, 12 May 2008 07:23:05 +0000 @ouc http://cngator.net/?p=21 Continue reading →]]> Question:

How to put javascript in a page using masterpage? Error message: Validation (XHTML 1.0 Transitional): Content is not supported outside ‘script’ or ‘asp:content’ regions.

Answer:

Place the script inside the <asp:content> tag. Because you are using content area and a master page, the
id will be prefixed with the master and content area names. you should use ClientId to get the actual rendered names.

Link: http://www.velocityreviews.com/forums/t368066-how-to-put-javascript-in-a-page-using-masterpage.html

]]> http://jiahu.net/how-to-put-javascript-in-a-page-using-masterpage-2.htm/feed 0 使用脚本调用系统的关机对话框 http://jiahu.net/%e4%bd%bf%e7%94%a8%e8%84%9a%e6%9c%ac%e8%b0%83%e7%94%a8%e7%b3%bb%e7%bb%9f%e7%9a%84%e5%85%b3%e6%9c%ba%e5%af%b9%e8%af%9d%e6%a1%86.htm http://jiahu.net/%e4%bd%bf%e7%94%a8%e8%84%9a%e6%9c%ac%e8%b0%83%e7%94%a8%e7%b3%bb%e7%bb%9f%e7%9a%84%e5%85%b3%e6%9c%ba%e5%af%b9%e8%af%9d%e6%a1%86.htm#comments Fri, 18 Jan 2008 08:25:35 +0000 @ouc http://cngator.net/?p=240 Continue reading →]]> 以前有介绍如何使用命令行调用系统的关机对话框: http://blog.csdn.net/scz123/archive/2005/09/30/492991.aspx
具体方法：开始／运行：rundll32.exe shell32.dll #60

但是，上述方法会存在一问题，XP下无法正常使用该方法进行关机（感谢网友沐烨 发现该问题）。问题原因可能是：正常情况下，关机对话框是有explorer.exe调用，直接使用rundll32调用时无法触发相关命令。

既然使用explorer.exe调用可以，我们可以尝试使用脚本来实现。实现原理：

1. 激活explorer.exe
2. 按ALT＋F4

编写VBS脚本如下（将下述内容另存为shutdown.vbs）：

Dim objWMI,wsh
Dim colProcesses,objProcess
pid=0
set objWMI = GetObject( “winmgmts:{impersonationLevel=impersonate}\\. \root\cimv2″ )
set colProcesses = objWMI.ExecQuery( “SELECT * FROM Win32_Process” & _
” WHERE Name=’explorer.exe’” )
for Each objProcess In colProcesses
pid = objProcess.ProcessId
Next

set wsh = WScript.CreateObject(“WScript.Shell”)
wsh.AppActivate pid
wsh.sendKeys “%{F4}”

上述脚本运行环境为：XP SP2
其他环境也可能正常工作，不过对于有多个explorer.exe进程的系统，就可能不正常工作了，如开了远程终端服务的多用户环境下。

来源: http://blog.csdn.net/scz123/archive/2008/01/14/2043143.aspx

]]> http://jiahu.net/%e4%bd%bf%e7%94%a8%e8%84%9a%e6%9c%ac%e8%b0%83%e7%94%a8%e7%b3%bb%e7%bb%9f%e7%9a%84%e5%85%b3%e6%9c%ba%e5%af%b9%e8%af%9d%e6%a1%86.htm/feed 0 JavaScript 组件之 JQuery(A~Z) 教程 (基于Asp.net运行环境) http://jiahu.net/javascript-%e7%bb%84%e4%bb%b6%e4%b9%8b-jqueryaz-%e6%95%99%e7%a8%8b-%e5%9f%ba%e4%ba%8easpnet%e8%bf%90%e8%a1%8c%e7%8e%af%e5%a2%83.htm http://jiahu.net/javascript-%e7%bb%84%e4%bb%b6%e4%b9%8b-jqueryaz-%e6%95%99%e7%a8%8b-%e5%9f%ba%e4%ba%8easpnet%e8%bf%90%e8%a1%8c%e7%8e%af%e5%a2%83.htm#comments Thu, 17 Jan 2008 10:22:25 +0000 @ouc http://cngator.net/?p=244 Continue reading →]]> 目录
(一).概述
(二).预备条件
(三).代码示例
2.Dom对象和jQuery对象转换示例
3.访问对象内部元素
4.显示/隐藏元素
5.根据条件查询对象元素集合
6.Document.Ready方法示例
7.Html方法示例
8.元素事件注册以及实现示例
9.Filter和no方法使用示例
10.一个很有用的方法:Css方法使用示例
11.滑动显示/隐藏元素
12.操作父元素
13.Toggle方法使用示例
14.Animate方法使用示例
15.改变表格行为(bycalssproperty)
16.操作jQuery属性示例
17.利用Wrap方法动态的修改控件外观
18.动态切换Css样式
19.Prepend-Wrap-Append组合方法示例
20.操作集合示例
21.扩展jQuery系统方法
22.触发元素事件示例
23.为元素绑定和移除事件
24.each方法用法
25.检查浏览器能力
26.解决$符被jQuery占用问题,prototype类库也有$方法

(一).概述

现在有好多比较优秀的客户端脚本语言组件, 如: 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 <script src=Resources\js\jquery-1.2.1.js type=”text/javascript”></script>

(三).代码示例

1. 访问页面元素

1 <head runat=”server”>
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对象转换示例

1 <head runat=”server”>
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. 访问对象内部元素

1 <head runat=”server”>
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. 显示/隐藏元素

1 <head runat=”server”>
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. 根据条件查询对象元素集合

1 <head runat=”server”>
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>

6. Document.Ready方法示例

1 <head runat=”server”>
2     <title>Document.Ready方法示例</title>
3     <script src=Resources\js\jquery-1.2.1.js type=”text/javascript”></script>
4     <script language=”javascript”>
5         function Init1()
6         {
7             alert(‘Document.body.onload事件执行!’);
8         }
9         function Init2()
10         {
11             alert(‘$(document).ready事件执行!’);
12         }
13
14     </script>
15 </head>
16 <body>
17     <form id=”form1″ runat=”server”>
18     <div>
19         <script language=”javascript”>
20             //ready方法 完整写法
21             $(document).ready(function()
22             {
23                 Init2();
24             });
25             //ready方法 简写
26 //            $(function() {
27 //                Init2();
28 //            });
29             document.body.onload=Init1;
30         </script>
31     </div>
32     </form>
33 </body>

7. Html方法示例

1 <head runat=”server”>
2     <title>使用Html方法</title>
3     <script src=Resources\js\jquery-1.2.1.js type=”text/javascript”></script>
4     <script language=jscript>
5         $(document).ready(function()
6         {
7             $(“ul”).find(“li”).each(function(i)
8             {
9                 $(this).html( “This is ” + i + “!”);
10             });
11         })
12         function GetLisValue()
13         {
14              liS = $(“ul li”);
15             //遍历元素
16             for(var i = 0; i < liS.length; i++)
17             {
18                 alert(liS.eq(i).html());
19             }
20         }
21     </script>
22 </head>
23 <body>
24     <form id=”form1″ runat=”server”>
25     <div>
26         <ul>
27             <li></li>
28             <li></li>
29         </ul>
30         <input type=button value=”得到所有li的值” onclick=”GetLisValue();” />
31     </div>
32     </form>
33 </body>

8. 元素事件注册以及实现示例

1 <head runat=”server”>
2     <title>给元素注册事件及实现事件</title>
3     <script src=Resources\js\jquery-1.2.1.js type=”text/javascript”></script>
4     <script language=jscript>
5         $(document).ready(function()
6         {
7             $(“#button1″).click(function() {
8                 alert(‘Button Element ClienEvent Runned.’);
9             });
10         })
11
12     </script>
13 </head>
14 <body>
15     <form id=”form1″ runat=”server”>
16     <div>
17         <input id=”button1″ type=button value=”单击, 此按钮被设置了单击事件!” />
18     </div>
19     </form>
20 </body>

9. Filter和no方法使用示例

1 <head runat=”server”>
2     <title>Filter and No方法使用</title>
3     <script src=Resources\js\jquery-1.2.1.js type=”text/javascript”></script>
4     <script language=jscript>
5         function ChangeBorder()
6         {
7             $(“ul”).not(“[li]“).css(“border”, “1px solid blue”);
8         }
9     </script>
10 </head>
11 <body>
12     <form id=”form1″ runat=”server”>
13     <div>
14          <ul>
15                 <li>Hi King!</li>
16                 <li>Hi Rose!</li>
17         </ul>
18         <br />
19         <ul></ul>
20         <input type=button onclick = “ChangeBorder();” value=”改变边框” />
21     </div>
22     </form>
23 </body>

10. 一个很有用的方法: Css方法使用示例

1 <head runat=”server”>
2     <title>使用Css方法, 比较有用的一个方法</title>
3     <script src=Resources\js\jquery-1.2.1.js type=”text/javascript”></script>
4         <script language=jscript>
5             function SetBorderStyle()
6             {
7                 $(“ul”).css(“border”, “1px solid blue”);
8                 $(“ul li”).css(“border”, “1px solid red”);
9             }
10         </script>
11 </head>
12 <body>
13     <form id=”form1″ runat=”server”>
14     <div>
15         <ul>
16             <li></li>
17             <li></li>
18             <li></li>
19         </ul>
20         <input type=button value=”设置边框” onclick=”SetBorderStyle();” />
21     </div>
22     </form>
23 </body>

11. 滑动显示/隐藏元素

1 <head runat=”server”>
2     <title>滑动显示隐藏元素</title>
3        <script src=Resources\js\jquery-1.2.1.js type=”text/javascript”></script>
4         <script language=jscript>
5                         $(document).ready(function() {
6                 $(‘#faq’).find(‘.pic’).hide().end().find(‘.display’).click(function() {
7                      var answer = $(this).next();
8                      if (answer.is(‘:visible’)) {
9                          answer.slideUp();
10                      } else {
11                          answer.slideDown();
12                      }
13                  });
14             });
15         </script>
16 </head>
17 <body>
18     <form id=”form1″ runat=”server”>
19     <div id=”faq”>
20         <input class=”display” type=button value=”Slide显示/隐藏”  />
21         <input class=”pic” type=image src=”http://p.blog.csdn.net/images/p_blog_csdn_net/chengking/160914/t_GIRL.GIF” style=”width: 227px; height: 174px” />
22     </div>
23     </form>
24 </body>

12. 操作父元素

1 <head runat=”server”>
2     <title>操作父元素</title>
3     <link rel=”stylesheet” type=”text/css” href=”Resources/CSS/StyleSheet1.css” title=”blue” />
4     <script src=Resources\js\jquery-1.2.1.js type=”text/javascript”></script>
5         <script language=jscript>
6             $(document).ready(function() {
7                 $(“a”).hover(function() {
8                     $(this).parents(“p”).addClass(“BackColor”);
9                 }, function() {
10                     $(this).parents(“p”).removeClass(“BackColor”);
11                 });
12             });
13         </script>
14 </head>
15 <body>
16     <form id=”form1″ runat=”server”>
17     <div>
18         <p>
19             Hi! Rose.<br />
20             <a href=”#”>你好</a>
21         </p>
22     </div>
23     </form>
24 </body>

13. Toggle方法使用示例

1 <head runat=”server”>
2     <title>Toggle方法使用</title>
3     <script src=Resources\js\jquery-1.2.1.js type=”text/javascript”></script>
4         <script language=jscript>
5                $(document).ready(function() {
6                 $(“#btn”).toggle(function() {
7                     $(“.pic”).show(‘slow’);
8                 }, function() {
9                     $(“.pic”).hide(‘fast’);
10                 });
11             });
12     </script>
13 </head>
14 <body>
15     <form id=”form1″ runat=”server”>
16     <div>
17         <input id=”btn” type=button value=”toggle事件测试” />
18         <input class=”pic” type=image src=”http://p.blog.csdn.net/images/p_blog_csdn_net/chengking/160914/t_GIRL.GIF” style=”width: 227px; height: 174px; display:none;” />
19     </div>
20     </form>
21 </body>

14. Animate方法使用示例

1 <head runat=”server”>
2     <title>Animate方法示例</title>
3     <script src=Resources\js\jquery-1.2.1.js type=”text/javascript”></script>
4         <script language=jscript>
5                       $(document).ready(function() {
6                 $(“#btn”).toggle(function() {
7                     $(“.pic”).animate({
8                         height: ‘show’,
9                         opacity: ‘show’
10                     }, ‘slow’);
11                 }, function() {
12                     $(“.pic”).animate({
13                         height: ‘hide’,
14                         opacity: ‘hide’
15                     }, ‘slow’);
16                 });
17             });
18     </script>
19 </head>
20 <body>
21     <form id=”form1″ runat=”server”>
22     <div>
23         <input id=”btn” type=button value=”Animate事件测试” />
24         <input class=”pic” type=image src=”http://p.blog.csdn.net/images/p_blog_csdn_net/chengking/160914/t_GIRL.GIF” style=”width: 227px; height: 174px; display:none;” />
25     </div>
26     </form>
27 </body>

15. 改变表格行为(by calss property)

1 <head runat=”server”>
2     <title>改变表格行为</title>
3     <script src=Resources\js\jquery-1.2.1.js type=”text/javascript”></script>
4         <script type=”text/javascript”>
5         $(document).ready(function(){
6                 $(“.stripe tr”).mouseover(function(){
7                         //如果鼠标移到class为stripe的表格的tr上时，执行函数
8                         $(this).addClass(“悬浮”);}).mouseout(function(){
9                                         //给这行添加class值为over，并且当鼠标一出该行时执行函数
10                         $(this).removeClass(“悬浮”);})  //移除该行的class
11                 $(“.stripe tr:even”).addClass(“偶数”);
12                     //给class为stripe的表格的偶数行添加class值为:偶数
13                 $(“.stripe tr:odd”).addClass(“奇数”);
14                     //给class为stripe的表格的偶数行添加class值为:奇数
15         });
16         </script>
17         <style>
18         th {
19                 background:#0066FF;
20                 color:#FFFFFF;
21                 line-height:20px;
22                 height:30px;
23         }
24
25         td {
26                 padding:6px 11px;
27                 border-bottom:1px solid #95bce2;
28                 vertical-align:top;
29                 text-align:center;
30         }
31
32         td * {
33                 padding:6px 11px;
34         }
35
36         tr.奇数 td {
37                 background:#ecf6fc;  /*设置奇数行颜色*/
38         }
39         tr.偶数 td {
40                 background:#ecf6ee;  /*设置偶数行颜色*/
41         }
42
43         tr.悬浮 td {
44                 background:#6699ff;  /*这个将是鼠标高亮行的背景色*/
45         }
46
47         </style>
48
49 </head>
50 <body>
51     <form id=”form1″ runat=”server”>
52     <div>
53         <table class=”stripe” width=”50%” border=”0″ cellspacing=”0″ cellpadding=”0″>
54             <thead>
55               <tr>
56                 <th>姓名</th>
57                 <th>年龄</th>
58                 <th>QQ</th>
59                 <th>Email</th>
60               </tr>
61             </thead>
62             <tbody>
63               <tr>
64                 <td>张三</td>
65                 <td>20</td>
66                 <td>00000</td>
67                 <td>******</td>
68               </tr>
69               <tr>
70                 <td>李四</td>
71                 <td>20</td>
72                 <td>00000</td>
73                 <td>******</td>
74               </tr>
75               <tr>
76                 <td>小刘</td>
77                 <td>20</td>
78                 <td>00000</td>
79                 <td>*****</td>
80               </tr>
81             </tbody>
82         </table>
83
84     </div>
85     </form>
86 </body>

16. 操作jQuery属性示例

1 <head runat=”server”>
2     <title>操作元素属性</title>
3     <style>
4         .blue {
5                 background:#6699FF;
6                 color:#FFFFFF;
7                 line-height:20px;
8                 height:30px;
9         }
10     </style>
11     <script src=Resources\js\jquery-1.2.1.js></script>
12     <script type=”text/javascript”>
13         function ChangeElementStyleAndProperty()
14         {
15             if( i == 0 )
16                 $(“#tb”).css(“background”,”#6699ff”)                 //设定元素背景色
17             if( i == 1 )
18                 $(“#tb”).height(300);                                //设定高度
19             if( i == 2 )
20                 $(“#tb”).width(200);                                 //设定宽度
21             if( i == 3 )
22                 $(“#tb”).css({ color: “black”, background: “blue” });//设置我个属性
23             if( i == 4 )
24                 $(“#tb”).addClass(“blue”);                           //添加class
25             if( i == 5 )
26                 $(“#tb”).removeClass(“blue”);                        //删除class
27             if( i == 6 )
28                 $(“#tb”).toggleClass(“blue”);                        //交替添加class或删除class.
29             i++;
30             if( i == 6 ) i = 0;
31         }
32         var i = 0;
33     </script>
34 </head>
35 <body>
36     <form id=”form1″ runat=”server”>
37     <div>
38          <input id=”btn” type=button value=”Animate事件测试” onclick=”ChangeElementStyleAndProperty();” />
39          <table id=”tb”><tr><td>Hi King!</td></tr></table>
40     </div>
41     </form>
42 </body>

17. 利用Wrap方法动态的修改控件外观

1 <head runat=”server”>
2     <title>Wrap方法</title>
3     <script src=Resources\js\jquery-1.2.1.js></script>
4     <script type=”text/javascript”>
5         $(document).ready(function(){
6             $(“p”).wrap(“<div class=’wrap’></div>”);
7         });
8     </script>
9     <style>
10         .wrap {
11                 background:#0066FF;
12                 color:#FFFFFF;
13                 line-height:20px;
14                 height:30px;
15         }
16     </style>
17 </head>
18 <body>
19     <form id=”form1″ runat=”server”>
20     <div>
21         <p>Test Paragraph.</p>
22     </div>
23     </form>
24 </body>

18. 动态切换Css样式

1 <head runat=”server”>
2     <title>动态切换样式</title>
3     <link rel=”stylesheet” type=”text/css” href=”Resources/CSS/StyleSheet1.css” title=”blue” />
4     <link rel=”stylesheet” type=”text/css” href=”Resources/CSS/StyleSheet2.css” title=”gray” />
5     <script src=Resources\js\jquery-1.2.1.js></script>
6     <script type=”text/javascript”>
7         $(document).ready(function()
8         {
9             $(‘.styleswitch’).click(function()
10             {
11                 switchStylestyle(this.getAttribute(“title”));
12                 return false;
13             });
14         });
15
16         function switchStylestyle(styleName)
17         {
18             $(‘link[@rel*=style]‘).each(function(i)
19             {
20                 this.disabled = true;
21                 if (this.getAttribute(‘title’) == styleName) this.disabled = false;
22             });
23         }
24     </script>
25 </head>
26 <body>
27     <form id=”form1″ runat=”server”>
28     <div>
29         <div class=”BackColor” id=”div1″>注意看一下我的背景色<br />
30         </div>
31         <input class=”styleswitch” title=”blue” type=button value=”切换到: 蓝色背景” />
32         <input class=”styleswitch” title=”gray” type=button value=”切换到: 灰色背景” />
33     </div>
34     </form>
35 </body>

19. Prepend-Wrap-Append 组合方法示例

1 <head runat=”server”>
2     <title>Use Prepend-Wrap-Append Method</title>
3     <link href=”Resources/CSS/StyleSheet3.css” rel=”stylesheet” type=”text/css” />
4     <script src=Resources\js\jquery-1.2.1.js></script>
5     <script type=”text/javascript”>
6         $(document).ready(function(){ $(“div.roundbox”) .wrap(‘<div class=”Content”></div>’);
7         });
8
9         $(‘div.roundbox’).prepend(‘<div class=”Head”></div>’)
10         .append(‘<div class=”Foot”></div>’);
11     </script>
12 </head>
13 <body>
14     <form id=”form1″ runat=”server”>
15         <div class=”Head”>Head</div>
16         <div class=”roundbox”>
17             <br />
18             正文内容
19             <br />
20             正文内容
21             <br />
22             正文内容
23             <br />
24             <br />
25        </div>
26        <div class=”Foot”>Foot</div>
27     </form>
28 </body>

20.操作集合示例

1 <head runat=”server”>
2     <title>操作集合</title>
3     <script src=Resources\js\jquery-1.2.1.js></script>
4     <script language=jscript>
5         function SetColorToThreePMark()
6         {
7             $(“p”).each(function(i)
8                  { this.style.color=['gray','blue','green','red'][i]; }
9               )
10         }
11         function SetSwitchCllor()
12         {
13             $(“p”).each(function(i){this.style.color=['green','blue'][i%2]})
14         }
15     </script>
16
17 </head>
18 <body>
19     <form id=”form1″ runat=”server”>
20     <div>
21         <p>Hi! King.</p>
22         <p>Hi! Rose.</p>
23         <p>Hi! James.</p>
24         <p>Hi! ChengKing.</p>
25     </div>
26     <br />
27     <input id=”btn” type=button value=”依次为P指定不同颜色” onclick=”SetColorToThreePMark();” />
28     <input id=”Button1″ type=button value=”设置交替颜色” onclick=”SetSwitchCllor();” />
29     </form>
30 </body>

21. 扩展jQuery系统方法

1 <head runat=”server”>
2     <title>扩展JQuery系统方法</title>
3         <script src=Resources\js\jquery-1.2.1.js></script>
4     <script type=”text/javascript”>
5          $(document).ready(function() {
6                 $.extend({
7                   min: function(a, b){return a < b?a:b; },
8                   max: function(a, b){return a > b?a:b; }
9                 });
10         });
11         function Compute(type)
12         {
13             switch(type)
14             {
15                 case ‘max’: alert(‘最大值为:’ + $.max(3,5)); break;
16                 case ‘min’: alert(‘最小值为:’ + $.min(3,5)); break;
17             }
18         }
19     </script>
20 </head>
21 <body>
22     <form id=”form1″ runat=”server”>
23     <div>
24         <input id=”Button1″ type=button value=”执行max(3,5)” onclick=”Compute(‘max’);” />
25         <input id=”Button2″ type=button value=”执行min(3,5)” onclick=”Compute(‘min’);” />
26     </div>
27     </form>
28 </body>

22. 触发元素事件示例

1 <head runat=”server”>
2     <title>触发元素事件示例</title>
3     <script src=Resources\js\jquery-1.2.1.js></script>
4 </head>
5 <body>
6     <form id=”form1″ runat=”server”>
7     <div>
8         <input type=button value=”按钮1″ onclick=”alert(‘执行按钮1单击事件’);” />
9         <input type=button value=”按钮2″ onclick=”alert(‘执行按钮2单击事件’);” />
10         <input type=button value=”按钮3″ onclick=”alert(‘执行按钮3单击事件’);” />
11         <br />
12         <input onclick=”$(‘input’).trigger(‘click’);” type=”button” value=”触发三个按钮的事件” />
13     </div>
14     </form>
15 </body>

23. 为元素绑定和移除事件

1 <head runat=”server”>
2     <title>为元素绑定和移除事件</title>
3     <script src=Resources\js\jquery-1.2.1.js></script>
4 </head>
5 <body>
6     <form id=”form1″ runat=”server”>
7     <div>
8         <input class=”c” type=button value=”按钮1″ title=”执行按钮1单击事件”   />
9         <input class=”c”  type=button value=”按钮2″ title=”执行按钮2单击事件”  />
10         <input class=”c”  type=button value=”按钮3″ title=”执行按钮3单击事件”  />
11         <br /><br />
12         <input onclick=”$(‘.c’).trigger(‘click’);” type=”button” value=”触发上面三个按钮的事件” />
13         <input onclick=”$(‘.c’).bind(‘click’, function(){alert($(this)[0].title);});” type=”button” value=”绑定上面三个按钮的事件” />
14         <input onclick=”$(‘.c’).unbind(‘click’)” type=”button” value=”移除上面三个按钮的事件” />
15     </div>
16     </form>
17 </body>

24. each方法用法

1 <head runat=”server”>
2     <title>Each用法</title>
3     <script src=Resources\js\jquery-1.2.1.js></script>
4     <script language=jscript>
5     function UseEach1()
6     {
7         $.each( [6,7,8], function(i, n){ alert( “索引:” + i + “: ” + n ); });
8     }
9     function UseEach2()
10     {
11         $.each( { name: “Rose”, sex: “woman” }, function(i, value){ alert( “PropertyName: ” + i + “, Value: ” + value ); });
12     }
13     </script>
14 </head>
15 <body>
16     <form id=”form1″ runat=”server”>
17     <div>
18         <input class=”c” type=button value=”Each用法1″ onclick=”UseEach1();” />
19         <input class=”c” type=button value=”Each用法2″ onclick=”UseEach2();” />
20     </div>
21     </form>
22 </body>

25. 检查浏览器能力(打开jQuery.js源代码, 发现组件本身已经支持多种浏览器了!)

1 <head runat=”server”>
2     <title>检查浏览器能力</title>
3     <script src=Resources\js\jquery-1.2.1.js></script>
4     <script language=jscript>
5     function Check()
6     {
7         alert($.browser.msie);
8         alert($.browser.safari);
9         alert($.browser.opera);
10         alert($.browser.mozilla);
11     }
12     </script>
13 </head>
14 <body>
15     <form id=”form1″ runat=”server”>
16     <div>
17         <input type=button value=”检查浏览器能力”  onclick=”Check();” />
18     </div>
19     </form>
20 </body>

26. 解决$符被jQuery占用问题, prototype类库也有$方法

1 <head runat=”server”>
2     <title>解决$符被jQuery占用问题</title>
3     <script src=Resources\js\jquery-1.2.1.js></script>
4     <script language=jscript>
5     function Run1()
6     {
7         //调用jquery类库的$()方法
8         alert($(“p”).html());
9     }
10     function Run2()
11     {
12         //如果此时引入了prototype.js, 则将调用prototype类库中的$()方法
13         alert(jQuery(“p”).html());
14     }
15     function Switch()
16     {
17         jQuery.noConflict();
18     }
19     </script>
20 </head>
21 <body>
22     <form id=”form1″ runat=”server”>
23     <div>
24         <p>Hi! Rose.</p>
25         <input type=button value=”使用$方法执行”  onclick=”Run1();” />
26         <input type=button value=”使用jQuery方法执行”  onclick=”Run2();” />
27         <input type=button value=”切换: 用jQuery代替$符号功能”  onclick=”Switch();” />
28     </div>
29     </form>
30 </body>

(四). 其它jQuery相关网站链接

1. http://wiki.jquery.org.cn/doku.php

2. http://www.k99k.com/jQuery_getting_started.html

3. http://hi.baidu.com/xie_jin/blog/item/fa822bd9b9e8fb2f11df9bf7.html

4. http://visualjquery.com/1.1.2.html

5. http://jquery.org.cn/api/cn/api_11.xml

6. http://docs.jquery.com/DOM/Traversing/Selectors

(五). 示例教程代码下载

http://www.cnblogs.com/Files/MVP33650/JQuery(ByChengKing).rar

如果个别语句不明白, 您可以在下面留言.

来源: http://blog.csdn.net/ChengKing/archive/2007/12/05/1919265.aspx

]]> http://jiahu.net/javascript-%e7%bb%84%e4%bb%b6%e4%b9%8b-jqueryaz-%e6%95%99%e7%a8%8b-%e5%9f%ba%e4%ba%8easpnet%e8%bf%90%e8%a1%8c%e7%8e%af%e5%a2%83.htm/feed 0 奥运倒计时 http://jiahu.net/%e5%a5%a5%e8%bf%90%e5%80%92%e8%ae%a1%e6%97%b6.htm http://jiahu.net/%e5%a5%a5%e8%bf%90%e5%80%92%e8%ae%a1%e6%97%b6.htm#comments Mon, 01 Oct 2007 07:50:41 +0000 @ouc http://cngator.net/?p=122 Continue reading →]]>

源码如下:

<script type=”text/javascript”>
　　 var timedate= new Date(“August 8,2008″);
　　 var times= “中国北京 奥运会”;
　　 var now = new Date();
　　 var date = timedate.getTime() – now.getTime();
　　 var time = Math.floor(date / (1000 * 60 * 60 * 24));
　　 if (time >= 0)
　　 document.write( “现在离 “+times+” 还有: “+time +” 天.”)
</script>

]]> http://jiahu.net/%e5%a5%a5%e8%bf%90%e5%80%92%e8%ae%a1%e6%97%b6.htm/feed 0