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  < 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://files.cnblogs.com/MVP33650/JQuery(ByChengKing).rar

 

 

.

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

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1919265


你可能感兴趣的:(JavaScript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
    在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
  • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
    引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
  • EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
    ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
    版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
  • html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
    html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
  • 如何在 Python 中声明一个静态属性? 潮易 python开发语言
    在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
  • 数据格式：什么是JSON和XML isNotNullX jsonxml
    JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • 多线程编程之join()方法 周凡杨 javaJOIN多线程编程线程
    现实生活中，有些工作是需要团队中成员依次完成的，这就涉及到了一个顺序问题。现在有T1、T2、T3三个工人，如何保证T2在T1执行完后执行，T3在T2执行完后执行？问题分析：首先问题中有三个实体，T1、T2、T3， 因为是多线程编程，所以都要设计成线程类。关键是怎么保证线程能依次执行完呢？   Java实现过程如下： public class T1 implements Runnabl
  • java中switch的使用 bingyingao javaenumbreakcontinue
    java中的switch仅支持case条件仅支持int、enum两种类型。 用enum的时候，不能直接写下列形式。 switch (timeType) { case ProdtransTimeTypeEnum.DAILY: break; default: br
  • hive having count 不能去重 daizj hive去重having count计数
    hive在使用having count()是，不支持去重计数   hive (default)> select imei from t_test_phonenum where ds=20150701 group by imei having count(distinct phone_num)>1 limit 10;  FAILED: SemanticExcep
  • WebSphere对JSP的缓存 周凡杨 WAS JSP 缓存
          对于线网上的工程，更新JSP到WebSphere后，有时会出现修改的jsp没有起作用，特别是改变了某jsp的样式后，在页面中没看到效果，这主要就是由于websphere中缓存的缘故，这就要清除WebSphere中jsp缓存。要清除WebSphere中JSP的缓存，就要找到WAS安装后的根目录。        现服务
  • 设计模式总结 朱辉辉33 java设计模式
    1.工厂模式   1.1 工厂方法模式 (由一个工厂类管理构造方法)      1.1.1普通工厂模式(一个工厂类中只有一个方法)      1.1.2多工厂模式(一个工厂类中有多个方法)      1.1.3静态工厂模式(将工厂类中的方法变成静态方法) &n
  • 实例：供应商管理报表需求调研报告 老A不折腾 finereport报表系统报表软件信息化选型
    引言 随着企业集团的生产规模扩张，为支撑全球供应链管理，对于供应商的管理和采购过程的监控已经不局限于简单的交付以及价格的管理，目前采购及供应商管理各个环节的操作分别在不同的系统下进行，而各个数据源都独立存在，无法提供统一的数据支持；因此，为了实现对于数据分析以提供采购决策，建立报表体系成为必须。 业务目标 1、通过报表为采购决策提供数据分析与支撑 2、对供应商进行综合评估以及管理，合理管理和
  • mysql 林鹤霄
    转载源：http://blog.sina.com.cn/s/blog_4f925fc30100rx5l.html mysql -uroot -p ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)   [root@centos var]# service mysql
  • Linux下多线程堆栈查看工具(pstree、ps、pstack) aigo linux
    原文：http://blog.csdn.net/yfkiss/article/details/6729364   1. pstree pstree以树结构显示进程$ pstree -p work | grep adsshd(22669)---bash(22670)---ad_preprocess(4551)-+-{ad_preprocess}(4552)  &n
  • html input与textarea 值改变事件 alxw4616 JavaScript
    // 文本输入框(input) 文本域(textarea)值改变事件 // onpropertychange(IE) oninput(w3c) $('input,textarea').on('propertychange input', function(event) {      console.log($(this).val()) });  
  • String类的基本用法 百合不是茶 String
      字符串的用法;     // 根据字节数组创建字符串 byte[] by = { 'a', 'b', 'c', 'd' }; String newByteString = new String(by);         1,length()  获取字符串的长度     &nbs
  • JDK1.5 Semaphore实例 bijian1013 javathreadjava多线程Semaphore
    Semaphore类        一个计数信号量。从概念上讲，信号量维护了一个许可集合。如有必要，在许可可用前会阻塞每一个 acquire()，然后再获取该许可。每个 release() 添加一个许可，从而可能释放一个正在阻塞的获取者。但是，不使用实际的许可对象，Semaphore 只对可用许可的号码进行计数，并采取相应的行动。 S
  • 使用GZip来压缩传输量 bijian1013 javaGZip
            启动GZip压缩要用到一个开源的Filter：PJL Compressing Filter。这个Filter自1.5.0开始该工程开始构建于JDK5.0，因此在JDK1.4环境下只能使用1.4.6。         PJL Compressi
  • 【Java范型三】Java范型详解之范型类型通配符 bit1129 java
        定义如下一个简单的范型类，   package com.tom.lang.generics; public class Generics<T> { private T value; public Generics(T value) { this.value = value; } }
  • 【Hadoop十二】HDFS常用命令 bit1129 hadoop
    1. 修改日志文件查看器   hdfs oev -i edits_0000000000000000081-0000000000000000089 -o edits.xml cat edits.xml   修改日志文件转储为xml格式的edits.xml文件，其中每条RECORD就是一个操作事务日志   2. fsimage查看HDFS中的块信息等 &nb
  • 怎样区别nginx中rewrite时break和last ronin47
    在使用nginx配置rewrite中经常会遇到有的地方用last并不能工作，换成break就可以，其中的原理是对于根目录的理解有所区别，按我的测试结果大致是这样的。 location /    {         proxy_pass http://test; 
  • java-21.中兴面试题 输入两个整数 n 和 m ，从数列 1 ， 2 ， 3.......n 中随意取几个数 , 使其和等于 m bylijinnan java
    import java.util.ArrayList; import java.util.List; import java.util.Stack; public class CombinationToSum { /* 第21 题 2010 年中兴面试题 编程求解： 输入两个整数 n 和 m ，从数列 1 ， 2 ， 3.......n 中随意取几个数 , 使其和等
  • eclipse svn 帐号密码修改问题 开窍的石头 eclipseSVNsvn帐号密码修改
    问题描述：      Eclipse的SVN插件Subclipse做得很好，在svn操作方面提供了很强大丰富的功能。但到目前为止，该插件对svn用户的概念极为淡薄，不但不能方便地切换用户，而且一旦用户的帐号、密码保存之后，就无法再变更了。 解决思路：      删除subclipse记录的帐号、密码信息，重新输入
  • [电子商务]传统商务活动与互联网的结合 comsci 电子商务
          某一个传统名牌产品，过去销售的地点就在某些特定的地区和阶层，现在进入互联网之后，用户的数量群突然扩大了无数倍，但是，这种产品潜在的劣势也被放大了无数倍，这种销售利润与经营风险同步放大的效应，在最近几年将会频繁出现。。。。        如何避免销售量和利润率增加的
  • java 解析 properties-使用 Properties-可以指定配置文件路径 cuityang javaproperties
    #mq xdr.mq.url=tcp://192.168.100.15:61618; import java.io.IOException; import java.util.Properties; public class Test { String conf = "log4j.properties"; private static final
  • Java核心问题集锦 darrenzhu java基础核心难点
    注意，这里的参考文章基本来自Effective Java和jdk源码 1)ConcurrentModificationException 当你用for each遍历一个list时，如果你在循环主体代码中修改list中的元素，将会得到这个Exception，解决的办法是： 1)用listIterator, 它支持在遍历的过程中修改元素， 2)不用listIterator, new一个
  • 1分钟学会Markdown语法 dcj3sjt126com markdown
    markdown 简明语法 基本符号 *,-,+ 3个符号效果都一样，这3个符号被称为 Markdown符号 空白行表示另起一个段落 `是表示inline代码，tab是用来标记 代码段，分别对应html的code，pre标签 换行 单一段落( <p>) 用一个空白行 连续两个空格 会变成一个 <br> 连续3个符号，然后是空行
  • Gson使用二（GsonBuilder） eksliang jsongsonGsonBuilder
    转载请出自出处：http://eksliang.iteye.com/blog/2175473 一.概述     GsonBuilder用来定制java跟json之间的转换格式   二.基本使用 实体测试类： 温馨提示：默认情况下@Expose注解是不起作用的,除非你用GsonBuilder创建Gson的时候调用了GsonBuilder.excludeField
  • 报ClassNotFoundException: Didn't find class "...Activity" on path: DexPathList gundumw100 android
    有一个工程，本来运行是正常的，我想把它移植到另一台PC上，结果报： java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{com.mobovip.bgr/com.mobovip.bgr.MainActivity}: java.lang.ClassNotFoundException: Didn't f
  • JavaWeb之JSP指令 ihuning javaweb
      要点   JSP指令简介  page指令  include指令    JSP指令简介    JSP指令（directive）是为JSP引擎而设计的，它们并不直接产生任何可见输出，而只是告诉引擎如何处理JSP页面中的其余部分。 JSP指令的基本语法格式： <%@ 指令 属性名="
  • mac上编译FFmpeg跑ios 啸笑天 ffmpeg
    1、下载文件：https://github.com/libav/gas-preprocessor， 复制gas-preprocessor.pl到/usr/local/bin/下， 修改文件权限：chmod 777 /usr/local/bin/gas-preprocessor.pl 2、安装yasm-1.2.0 curl http://www.tortall.net/projects/yasm
  • sql mysql oracle中字符串连接 macroli oraclesqlmysqlSQL Server
    有的时候，我们有需要将由不同栏位获得的资料串连在一起。每一种资料库都有提供方法来达到这个目的： MySQL: CONCAT() Oracle: CONCAT(), || SQL Server: + CONCAT() 的语法如下： Mysql 中 CONCAT(字串1, 字串2, 字串3, ...): 将字串1、字串2、字串3，等字串连在一起。 请注意，Oracle的CON
  • Git fatal: unab SSL certificate problem: unable to get local issuer ce rtificate qiaolevip 学习永无止境每天进步一点点git纵观千象
    // 报错如下： $ git pull origin master fatal: unable to access 'https://git.xxx.com/': SSL certificate problem: unable to get local issuer ce rtificate   // 原因： 由于git最新版默认使用ssl安全验证，但是我们是使用的git未设
  • windows命令行设置wifi surfingll windowswifi笔记本wifi
    还没有讨厌无线wifi的无尽广告么，还在耐心等待它慢慢启动么 教你命令行设置 笔记本电脑wifi： 1、开启wifi命令 netsh wlan set hostednetwork mode=allow ssid=surf8 key=bb123456 netsh wlan start hostednetwork pause 其中pause是等待输入，可以去掉 2、
  • Linux（Ubuntu）下安装sysv-rc-conf wmlJava linuxubuntusysv-rc-conf
    安装：sudo apt-get install sysv-rc-conf 使用：sudo sysv-rc-conf 操作界面十分简洁，你可以用鼠标点击，也可以用键盘方向键定位，用空格键选择，用Ctrl+N翻下一页，用Ctrl+P翻上一页，用Q退出。     背景知识 sysv-rc-conf是一个强大的服务管理程序，群众的意见是sysv-rc-conf比chkconf
  • svn切换环境，重发布应用多了javaee标签前缀 zengshaotao javaee
    更换了开发环境，从杭州，改变到了上海。svn的地址肯定要切换的，切换之前需要将原svn自带的.svn文件信息删除，可手动删除，也可通过废弃原来的svn位置提示删除.svn时删除。   然后就是按照最新的svn地址和规范建立相关的目录信息，再将原来的纯代码信息上传到新的环境。然后再重新检出，这样每次修改后就可以看到哪些文件被修改过，这对于增量发布的规范特别有用。   检出
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他