some jsp display issue

 disable back button

<script type="text/javascript">
   
function noBack(){window.history.forward();}
</script>

<body
onload="noBack();" onpageshow="if(event.persisted)noBack();"
onunload="">

***************
display footer issue:
<style
type="text/css">
    html, body {
        margin:0;  
       
height:100%;
    }
    #maincontainer {
        *height:94%;
       
min-height:94%;
        position:relative;
    }
    #body {
       
padding-bottom:20px;
        height:200px;
        border:solid
1px red;
    }
    #footer {
        position:relative;
       
bottom:0;
        height:20px
    }
</style>

<body
onload="noBack();" onpageshow="if(event.persisted)noBack();"
onunload="">
       <div id="maincontainer"
class="clearfix">
            <div id="topsection">
   
             <jsp:include page="linkInfo.jsp" />           
   
        </div>
            <div id="content"
class="clearfix">
               ………………………..
       
</div>
        <div id="footer" align="center">
           
<jsp:include page="footer.jsp" />
        </div>       

   
</body>

***********************
display <br> in
jsp
<pre> text </pre>

Advertisements
Posted in Uncategorized | Leave a comment

web.xml

The web.xml file defines each servlet and JSP page within a Web
Application
. It also enumerates
enterprise beans
referenced in the Web
application
.
The file goes into the WEB-INF directory under the document
root
of a
web
application
.

A sample web.xml

This xml file is alls called deployment descriptor.
<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

<display-name>
The name of the application
</display-name>
<description>
C'mon, you know what goes into a description, don't you?
</description>

<context-param>
<param-name>name_of_context_initialization_parameter</param-name>
<param-value>value_of_context_initializtion_parameter</param-value>
<description> Again, some description </description>
</context-param>

<servlet>
<servlet-name>guess_what_name_of_servlet</servlet-name>
<description>Again, some description</description>
<servlet-class>com.foo-bar.somepackage.TheServlet</servlet-class>
<init-param>
<param-name>foo</param-name>
<param-value>bar</param-value>
</init-param>
</servlet>

<servlet-mapping>
<servlet-name>name_of_a_servlet</servlet-name>
<url-pattern>*.some_pattern</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>image</servlet-name>
<url-pattern>/image</url-pattern>
</servlet-mapping>

<session-config>
<session-timeout>30</session-timeout>
</session-config>

</web-app>

context-param

The values within the context-param element can
be accessed like so:
String value = getServletContext().getInitParameter("name_of_context_initialization_parameter");
Servlet initialization parameters (that is: the values within the servlet
element)
can be retrieved in a servlet or JSP page by
calling:

String value = getServletConfig().getInitParameter("foo");

session-timeout

<session-timeout>: The timeout for a session in minutes.

servlet

For each servlet in the web application, there is a <servlet>
element.
The name
identifies the servlet (<servlet-name>).

servlet-mapping

Each servlet in the web application gets a servlet
mapping
. The url pattern is used to map
URI
to servlets.
Obviously, the order of the elements matters!
Posted in Uncategorized | Leave a comment

java.util.ListIterator example

public static void main(String args[]) {
        List<String> list = new ArrayList<String>();
        list.add("C");
        list.add("A");
        list.add("E");

        System.out.print("Originlist contents of list:\n ");
        for(String str:list){
            System.out.print(str);
        }
       
        ListIterator<String> litr = list.listIterator();
        while (litr.hasNext()) {
          String element = litr.next();
          litr.set(element + "+");
        }
       
        System.out.print("\nModified list backwards: ");       
        for(String str:list){
            System.out.print(str);
        }
    }

Posted in Uncategorized | Leave a comment

How to create a stunning and smooth popup using jQuery

Nowadays, websites are more and more rich and interactive and
users are becoming more and more critical with all things in websites.
Using windows popup to show important information are in the air and We
are going to learn how to create a stunning and
great window popup from the scratch
using jQuery in
a simple and clean tutorial, the first one of this new blog. Just enjoy
it and tell me uf you can not understand something because my english
sucks…

You can test the tutorial
working overhere
.

Tested in: Firefox, Internet Explorer 6 & 7,
Opera (old and 9.52) , Safari & Chrome.

What will We need?

We only need these ingredients for our stunning popup:

  • HTML
  • CSS
  • jQuery Library
  • Desire to learn

jQuery
is a new javascript library focused on fast and stable development that
I am using last months to “add magic” and AJAX in sites as www.plusdeporte.com,
www.plusmusica.com
and others, in words of their creators:

jQuery is a fast and concise JavaScript
Library that simplifies HTML document transversing, event handling,
animating and AJax interactions for rapid web developtment.

Step 1: What We will do?

A picture is worth a thousand words… so We will learn how to do
something like this:

As You can see We will do a simple HTML website with a button that
activates our stunning and smooth popup :). So let’s rox guys!

Step 2: Setting up our simple webpage

So we need a simple HTML webpage with 2 html divisions: popupContact
for the popup and backgroundPopup
for helps our popup
gets more focus and style

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5.     <title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>  
  6.     <link rel="stylesheet" href="general.css" type="text/css" media="screen" />  
  7.     <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>  
  8.     <script src="popup.js" type="text/javascript"></script>  
  9. </head>  
  10. <body>  
  11.     <center>  
  12.         <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>  
  13.         <div id="button"><input type="submit" value="Press me please!" /></div>  
  14.     </center>  
  15.     <div id="popupContact">  
  16.         <a id="popupContactClose">x</a>  
  17.         <h1>Title of our cool popup, yay!</h1>  
  18.         <p id="contactArea">  
  19.             Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...  
  20.             <br/><br/>  
  21.             We can use it for popup-forms and more... just experiment!  
  22.             <br/><br/>  
  23.             Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!  
  24.             <br/><br/>  
  25.             <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>  
  26.         </p>  
  27.     </div>  
  28.     <div id="backgroundPopup"></div>  
  29. </body>  
  30. </html>  
<!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" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
	<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="popup.js" type="text/javascript"></script>
</head>
<body>
	<center>
		<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
		<div id="button"><input type="submit" value="Press me please!" /></div>
	</center>
	<div id="popupContact">
		<a id="popupContactClose">x</a>
		<h1>Title of our cool popup, yay!</h1>
		<p id="contactArea">
			Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
			<br/><br/>
			We can use it for popup-forms and more... just experiment!
			<br/><br/>
			Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
			<br/><br/>
			<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
		</p>
	</div>
	<div id="backgroundPopup"></div>
</body>
</html>

Note: If you see the <head>
section We included the jQuery hosted in a Google site. Some
people do that to save in cache the jQuery library and save loading time
in lots of webpage by having the same resource.

And here go the CSS, to add style to our html
document and most important to hide our html main divisions: popupContact
and backgroundPopup that conforms the “popup core” and
We don’t want to see our popup at the begining, right?

  1. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,  
  2. font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,  
  3. tfoot, thead, tr, th, td {  
  4. border:0pt none;  
  5. font-family:inherit;  
  6. font-size:100%;  
  7. font-style:inherit;  
  8. font-weight:inherit;  
  9. margin:0pt;  
  10. padding:0pt;  
  11. vertical-align:baseline;  
  12. }  
  13. body{  
  14. background:#fff none repeat scroll 0%;  
  15. line-height:1;  
  16. font-size12px;  
  17. font-family:arial,sans-serif;  
  18. margin:0pt;  
  19. height:100%;  
  20. }  
  21. table {  
  22. border-collapse:separate;  
  23. border-spacing:0pt;  
  24. }  
  25. caption, th, td {  
  26. font-weight:normal;  
  27. text-align:left;  
  28. }  
  29. blockquote:before, blockquote:after, q:before, q:after {  
  30. content:"";  
  31. }  
  32. blockquote, q {  
  33. quotes:"" "";  
  34. }  
  35. a{  
  36. cursorpointer;  
  37. text-decoration:none;  
  38. }  
  39. br.both{  
  40. clear:both;  
  41. }  
  42. #backgroundPopup{  
  43. display:none;  
  44. position:fixed;  
  45. _position:absolute/* hack for internet explorer 6*/  
  46. height:100%;  
  47. width:100%;  
  48. top:0;  
  49. left:0;  
  50. background:#000000;  
  51. border:1px solid #cecece;  
  52. z-index:1;  
  53. }  
  54. #popupContact{  
  55. display:none;  
  56. position:fixed;  
  57. _position:absolute/* hack for internet explorer 6*/  
  58. height:384px;  
  59. width:408px;  
  60. background:#FFFFFF;  
  61. border:2px solid #cecece;  
  62. z-index:2;  
  63. padding:12px;  
  64. font-size:13px;  
  65. }  
  66. #popupContact h1{  
  67. text-align:left;  
  68. color:#6FA5FD;  
  69. font-size:22px;  
  70. font-weight:700;  
  71. border-bottom:1px dotted #D3D3D3;  
  72. padding-bottom:2px;  
  73. margin-bottom:20px;  
  74. }  
  75. #popupContactClose{  
  76. font-size:14px;  
  77. line-height:14px;  
  78. right:6px;  
  79. top:4px;  
  80. position:absolute;  
  81. color:#6fa5fd;  
  82. font-weight:700;  
  83. display:block;  
  84. }  
  85. #button{  
  86. text-align:center;  
  87. margin:100px;  
  88. }  
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}

The CSS code is so long because I always used to add
a little CSS snippet to reset the CSS
and it helps me a lot in the layout
process
in all websites.

So if You follow all steps you may have something like this on your
screen:

Step 3: Adding magic to our popup with jQuery

Here is the core of the tutorial, the jQuery code that will allow Us
to do a stunning and smooth window popup with just a few functions in
our popup.js file, but first of all we must set up a variable
called popupStatus to control the status
of our popup:

  1. //SETTING UP OUR POPUP  
  2. //0 means disabled; 1 means enabled;  
  3. var popupStatus = 0;  
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

Now the function to load our popup:

  1. //loading popup with jQuery magic!  
  2. function loadPopup(){  
  3. //loads popup only if it is disabled  
  4. if(popupStatus==0){  
  5. $("#backgroundPopup").css({  
  6. "opacity""0.7"  
  7. });  
  8. $("#backgroundPopup").fadeIn("slow");  
  9. $("#popupContact").fadeIn("slow");  
  10. popupStatus = 1;  
  11. }  
  12. }  
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}

Function for close/disable our popup:

  1. //disabling popup with jQuery magic!  
  2. function disablePopup(){  
  3. //disables popup only if it is enabled  
  4. if(popupStatus==1){  
  5. $("#backgroundPopup").fadeOut("slow");  
  6. $("#popupContact").fadeOut("slow");  
  7. popupStatus = 0;  
  8. }  
  9. }  
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}

We want to center our popup too…

  1. //centering popup  
  2. function centerPopup(){  
  3. //request data for centering  
  4. var windowWidth = document.documentElement.clientWidth;  
  5. var windowHeight = document.documentElement.clientHeight;  
  6. var popupHeight = $("#popupContact").height();  
  7. var popupWidth = $("#popupContact").width();  
  8. //centering  
  9. $("#popupContact").css({  
  10. "position""absolute",  
  11. "top": windowHeight/2-popupHeight/2,  
  12. "left": windowWidth/2-popupWidth/2  
  13. });  
  14. //only need force for IE6  
  15.   
  16. $("#backgroundPopup").css({  
  17. "height": windowHeight  
  18. });  
  19.   
  20. }  
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
"height": windowHeight
});

}

So if we have a variable popupStatus to control the popup
status
and functions the functions: loadPopup,
disablePopup and centerPopup for
load, close and center our popup we need to interact with them by using
jQuery events control in the $(document).ready function.

First of all remember that the following code will be into this:

  1. $(document).ready(function(){  
  2. //following code will be here  
  3. });  
$(document).ready(function(){
//following code will be here
});

We want to activate our popup when the button with id #button
is clicked, so:

  1. //LOADING POPUP  
  2. //Click the button event!  
  3. $("#button").click(function(){  
  4. //centering with css  
  5. centerPopup();  
  6. //load popup  
  7. loadPopup();  
  8. });  
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});

Simple eh?, so continue for the closing event. We
want to close our popup in 3
different ways: Hitting ESC
key, Clicking out from the
popup
and Clicking on X,
so let’s do that:

  1. //CLOSING POPUP  
  2. //Click the x event!  
  3. $("#popupContactClose").click(function(){  
  4. disablePopup();  
  5. });  
  6. //Click out event!  
  7. $("#backgroundPopup").click(function(){  
  8. disablePopup();  
  9. });  
  10. //Press Escape event!  
  11. $(document).keypress(function(e){  
  12. if(e.keyCode==27 &amp;amp;amp;amp;&amp;amp;amp;amp; popupStatus==1){  
  13. disablePopup();  
  14. }  
  15. });  
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 &amp;amp;amp;amp;&amp;amp;amp;amp; popupStatus==1){
disablePopup();
}
});

Step 4: Trying our stunning and smooth window popup in jQuery!

And that’s all guys, I hope this tutorial helps you. You can try the tutorial
online here
to see how It is working and download
here all sources (use Saving as… if it doesn’t download)
.

Important update for multiple popups:

If you want to create multiple popups
without create one division for each popup you need to create a
javascript object
, then you will be able to
create multiple instances of the popup object.

If you see bugs, bad english, got questions or something tell me by
using comments,

Posted in Uncategorized | Leave a comment

javascript regular expression allow number & delete

<script   language="javascript">

function checkNumber(e)
{
        var key = window.event ? e.keyCode : e.which;
        //alert(key);
        var keychar = String.fromCharCode(key);
        var el = document.getElementById(‘test’);
        var msg = document.getElementById(‘msg’);
        reg = /^[\+\-]?\d*?\.?\d*?$/;// /^\d*\.?\d{0,2}$/
        var result = reg.test(keychar);

      if(key==8 || key==46|| (key>=35 && key<=40)){         
         return;
      }else if(!result){
           return false;
      }
      
}
 
</script>

 
<div id="test">
    input:<input type="text" onkeypress="return checkNumber(event);" />
   <span id="msg"></span>
</div>

Posted in Uncategorized | Leave a comment

jquery

   随着WEB2.0及
ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、
Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需
求而非实现细节上,从而提高项目的开发速度。
  jQuery是继prototype 之后的又一个优秀的Javascript框架。它是由
John Resig 于 2006 年初创建的,它有助于简化 JavaScript™ 以及Ajax
编程。有人使用这样的一比喻来比较prototype和jQuery:prototype就像Java,而jQuery就像ruby.
它是一个简洁快速灵活的JavaScript框架,它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

 

它具有如下一些特点:

代码简练、语义易懂、学习快速、文档丰富。
jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。
jQuery支持CSS1-CSS3,以及基本的xPath。
jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
可以很容易的为jQuery扩展其他功能。
能将JS代码和HTML代码完全分离,便于代码和维护和修改。
插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。

  jQuery的设计会改变你写JavaScript代码的方式,降低你学习使用JS操作网页的复杂度,提高网页JS开发效率,无论对于js初学者还是资深专家,jQuery都将是您的首选。
jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不同的Web应用程序中。
官方站点:http://jquery.com/   中文站点:http://jquery.org.cn/

 

1.2、目的
  通过学习本文档,能够对jQuery有一个简单的认识了解,清楚JQuery与其他JS框架的不同,掌握jQuery的常用语法、使用技巧及注意事项。

 

二、使用方法
  在需要使用JQuery的页面中引入JQuery的js文件即可。
例如:<script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></script>
  引入之后便可在页面的任意地方使用jQuery提供的语法。

三、学习教程及参考资料
  请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml
推荐两篇不错的jquery教程:《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》

四、语法总结和注意事项

1、关于页面元素的引用
  通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

 

2、jQuery对象与dom对象的转换
  只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。

普通的dom对象一般可以通过$()转换成jquery对象。
如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
应用情况如:根据对象的名称获取对象使用JQuery封装使用JQuery

 

 

  由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
  如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

 

 

 

3、如何获取jQuery集合的某一项
  对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引
号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而
dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:
$("div").eq(2).html();     //调用jquery对象的方法
$("div").get(2).innerHTML;   //调用dom的方法属性

 

 

4、同一函数实现set和get
  Jquery中的很多方法都是如此,主要包括如下几个:
$("#msg").html();     //返回id为msg的元素节点的html内容。

$("#msg").html("<b>new content</b>"); 
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

Ajax中常用的方法,用具局部更新时使用。

 

$("#msg").text();     //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>"); 
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>

$("#msg").height();     //返回id为msg的元素的高度
$("#msg").height("300");   //将id为msg的元素的高度设为300

$("#msg").width();     //返回id为msg的元素的宽度
$("#msg").width("300");   //将id为msg的元素的宽度设为300

例如在定制控件使用。

 

 

$("input").val(");   //返回表单输入框的value值
$("input").val("test");   //将表单输入框的value值设为test

 

$("#msg").click();   //触发id为msg的元素的单击事件
$("#msg").click(fn);   //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

例如使用便于HTML中表现层的html,CSS,js分开的使用

 

5、集合处理功能
  对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
$("p").each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][i]}) 
//为索引分别为0,1,2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=[‘#ccc’,’#fff’][i%2]}) 
//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})   
//为每个p元素增加了click事件,单击某个p元素则弹出其内容

 

常用的情况全选和全不选的应用

 

6、扩展我们需要的功能
$.extend({
   min: function(a, b){return a < b?a:b; },
   max: function(a, b){return a > b?a:b; }
});   //为jquery扩展了min,max两个方法
使用扩展的方法(通过“$.方法名”调用):
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

 

用于扩展JQuery的函数

 

7、支持方法的连写
  所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
  例如:
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert(‘mouse over event’)})
.each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][i]});

 

8、操作元素的样式
  主要包括以下几种方式:
$("#msg").css("background");     //返回元素的背景颜色
$("#msg").css("background","#ccc")   //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");   //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select");   //为元素增加名称为select的class
$("#msg").removeClass("select");   //删除元素名称为select的class
$("#msg").toggleClass("select");   //如果存在(不存在)就删除(添加)名称为select的class

 

9、完善的事件处理功能
  Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
如:
$("#msg").click(function(){alert("good")})   //为元素添加了单击事件
$("p").click(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][i]})
//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件:
(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
   function(){
   $(this).addClass("out");
});

(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
用户初始化html中页面信息

 

(3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
   //每次点击时轮换添加和删除名为selected的class。
   $("p").toggle(function(){
     $(this).addClass("selected");  
   },function(){
     $(this).removeClass("selected");
   });

 

用于触发事件或样式的之间切换

 

(4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如:
   $("p").trigger("click");     //触发所有p元素的click事件

(5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。
例如:
$("p").bind("click", function(){alert($(this).text());});   //为每个p元素添加单击事件
$("p").unbind();   //删除所有p元素上的所有事件
$("p").unbind("click")   //删除所有p元素上的单击事件

 

用于绑定事件使用

 

 

10、几个实用特效功能
  其中toggle()和slidetoggle()方法提供了状态切换功能。
  如toggle()方法包括了hide()和show()方法。
  slideToggle()方法包括了slideDown()和slideUp方法。

 

 

11、几个有用的jQuery方法
$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。

$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于:
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
   alert("Item #"+i+": "+tempArr[i]);
}
也可以处理json数据,如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为:
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
如:
$.extend(settings, options); 
//合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数(合并多项并返回)

$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
如:
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为:[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为:[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如:$.merge( [0,1,2], [2,3,4] )   //返回[0,1,2,3,4]
$.trim(str):删除字符串两端的空白字符。
如:$.trim("   hello, how are you?   ");   //返回"hello,how are you? "

 

12、解决自定义方法或其他类库与jQuery的冲突
  很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
 
 使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用
Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")。
如:
jQuery.noConflict();
// 开始使用jQuery
jQuery("div   p").hide();
// 使用其他库的 $()
$("content").style.display = ‘none’;

Posted in Uncategorized | Leave a comment

jquery

jQuery真是个非常强大的类库,今天学习了一下,爱上了,讲下jQuery中ajax使用方法.

例子:

test.html

页面引用<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

内容有:

<div id="divMsg">Hello World!</div>

用法1:(页面载入时读取远程页面内容到divMsg)

$("#divMsg").load(http://localhost:8012/t.asp, { "resultType": "html" });

返回类型resultType有如下几种:

"xml", "html", "script", "json", "jsonp", "text"

用法2:(点击post数据返回数据)

<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />

<script type="text/javascript" >

 function ajaxTest()
 {
  $.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
  {
   $("#divMsg").html(data);
  }
  );
 }

</script>

下面是摘自网络的函数:

post方法如下:

    function test(access_url, tipE){

        $.post(access_url,{ 
            first: "test1", second: "test2"
            }, function(data){
                    if(data.success){
                        $(‘#’ + tipE).html(‘处理成功’);
                    }else{
                        $(‘#’ + tipE).html(data.msg);   
                    }
            },’json’
       )
    }
如果想用get方法,则把post换为get就可以了,挺简单!

这个函数中data值为服务端返回的值,且为JSON格式,当然了,这里可以用其他类型,如text,xml等等之类。

服务端返回值是JSON格式,如:{success:true, msg:"测试成功"}

jQ

Posted in Uncategorized | Leave a comment