几个jquery的常用功能

前提：用到的jquery库jquery-1.4.2.js，jquery-ui-1.7.2.custom.min.js，ui.datepicker-zh-CN.js，ui.datetimepicker-zh-CN.js和ui.datetimepicker.js（这是另外下载的jquery的插件），以及jquery的资源。

 

1.日期控件

   $(function() {
   $("#datepicker").datepicker({//datepicker是页面上文本域的id
wOn: 'button',//此处还可以用'both'，表示在按钮和文本域点击均可弹出
   buttonImage :'./images/calendar.gif',
   buttonImageOnly :true
   });
   });

 

2.日期时间控件

    $(function() {
    $("#createTime").datetimepicker({
    showOn : 'both',
    buttonImage :
    './images/calendar.gif',
    buttonImageOnly : true
    });

 

3.页面初始化时在日期时间控件显示当前时间

$(function() {
    $("#createTime").datetimepicker({
    showOn : 'both',
    buttonImage :
    './images/calendar.gif',
    buttonImageOnly : true
    });

    $("#endTime").datetimepicker({
    showOn :
    'both',
    buttonImage :
    './images/calendar.gif',
    buttonImageOnly : true
    });

    Date.prototype.format = function(format){
    var o = {
    "M+" :
    this.getMonth()+1, //month
    "d+" : this.getDate(), //day
    "h+" :
    this.getHours(), //hour
    "m+" : this.getMinutes(), //minute
    "s+" :
    this.getSeconds(), //second
    "q+" : Math.floor((this.getMonth()+3)/3),
    //quarter
    "S" : this.getMilliseconds() //millisecond
    }
    if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
    (this.getFullYear()+"").substr(4 - RegExp.$1.length));
    for(var k in
    o)if(new RegExp("("+ k +")").test(format))
    format =
    format.replace(RegExp.$1,
    RegExp.$1.length==1 ? o[k] :
    ("00"+
    o[k]).substr((""+ o[k]).length));
    return format;
    };
    var date = new
    Date();
    $("#createTime").val(date.format("yyyy-MM-dd hh:mm"));
    });

4.反转显示/隐藏

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <table>
  <tr><td>
 <a href="#" class="trigger">查询产品</a></h6>
 </td>
 </tr>
 <tr>
  <td>
   <div class="toggle_container">
    <div class="block">
   <h3>Content Header</h3>
   <!--Content-->
  </div>
 </div>
</td>
</tr>
</table>

<script>
 $(document).ready(function(){

 //Hide (Collapse) the toggle containers on load
 $(".toggle_container").hide();

 //Switch the "Open" and "Close" state per click
 $(".trigger").toggle(function(){
 $(this).addClass("active");
 }, function () {
 $(this).removeClass("active");
 });

 //Slide up and down on click
 $(".trigger").click(function(){
  $(".toggle_container").slideToggle("slow");
  });
 });
</script>
</body>
</html>

 

5.tab

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" href="./stylesheets/base/ui.all.css"
 rel="stylesheet" />
<link type="text/css" href="stylesheets/base/ui.tabs.css"
 rel="stylesheet" />
<script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
 src="javascripts/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="javascripts/ui.tabs.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
 $(function() {
  $("#tabs").tabs();
 });
</script>
</head>
<body>
<div id="tabs">
<ul>
 <li><a href="#tabs-1">tab1</a></li>
 <li><a href="#tabs-2">tab2</a></li>
 <li><a href="#tabs-3">tab3</a></li>
</ul>
<div id="tabs-1">page 1</div>
<div id="tabs-2">page 2</div>
<div id="tabs-3">page 3</div>
</div>

</body>
</html>

 

6.批量清除控件内容

   function cfields(){
   $("#queryName").val("");//queryName为文本域id，以下同
   $("#queryNumber").val("");
   $("#type1List").val("---请选择---");//type1List为下拉框id，"---请选择---"为默认选项，以下同
   $("#type2List").val("---请选择---");
   }