几个jquery的常用功能

最新推荐文章于 2024-04-29 09:48:26 发布

focusforce

最新推荐文章于 2024-04-29 09:48:26 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： jquery function stylesheet containers class list

本文链接：https://blog.csdn.net/focusforce/article/details/5587396

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前提：用到的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>
   
  </div>
</div>
</td>
</tr>
</table>

//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("---请选择---");
   }

focusforce

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
几个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() { $("#dat
复制链接

扫一扫