jQuery实战笔记
文章目录
- 1、标签隐藏显示
- 2、时间戳转换
- 3、radio单选框获取选中
- 4、判断字符串是否为数字类型
- 5、tab标签页实现
- 6、标签点击事件
- 7、jquery跳转链接
- 8、jquery修改图片url
- 9、图片加边框
- 10、实现一个可检索的table
- 11、表格内容固定
- 12、input回车响应
- 13、动态修改placeholder值
1、标签隐藏显示
<div id="queryExtend">
<label> hah </label>
</divjquery的用法, 判断是否隐藏，是则显示；否则隐藏
function showQueryCondition() {
if($('#queryExtend').is(":hidden")) {
$('#queryExtend').show();
} else {
$('#queryExtend').hide();
}
}2、时间戳转换
时间戳转日期
// 获取当前时间戳
var ns = Date.parse(new Date())/1000;
var timestamp4 = new Date(parseInt(nS) * 1000);
return timestamp4.toLocaleDateString().replace(/\//g, "/") + " " + timestamp4.toTimeString().substr(0, 8);3、radio单选框获取选中
获取radio群的值：
<div class="col-md-10 input-group input-group-lg">
<div class="col-md-2">
<input type="radio" name="queryType" id="queryType" value="1"
checked/> 默认
</div>
<div class="col-md-2">
<input type="radio" name="queryType" id="queryType" value="2"/> 查主库
</div>
<div class="col-md-2">
<input type="radio" name="queryType" id="queryType" value="3"/> 查从库
</div>
</div>对应的jquery获取选中值
var queryDB = $("input[name='queryType']:checked").val();4、判断字符串是否为数字类型
var str = "37";
var n = Number(str);
if (!isNaN(n))
{
alert("是数字");
}5、tab标签页实现
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
菜鸟教程
</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>- myTab 标签表示的导航内容（href 指向的本标签对应的内容）
- myTagContent 对应的标签页内容（id 与 导航的锚点对应，class=“tab-pane fade in active” 表示生效的标签内容，class=“tab-pane fade” 未激活的标签属性）
6、标签点击事件
$('#btn').click(function(){});7、jquery跳转链接
// 本页面直接打开url
window.location.href=url;
// 新标签页打开url
window.open(url, "_blank")
// 在demo窗口打开url
window.open(url, "demo");8、jquery修改图片url
$('#img').attr("src", newImgUrl);9、图片加边框
<image id="data" style="border:1px solid #b5b3b3;"/>10、实现一个可检索的table
在一个bootstrap项目中，必要的 jquery, bootstrap.min.js需要依赖
<div id="wrapper">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<input type="text" class="form-control input-sm m-b-xs" id="filter"
placeholder="Search in table">
<table class="footable table table-stripped" data-page-size="8" data-filter=#filter>
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th data-hide="phone,tablet">Platform(s)</th>
<th data-hide="phone,tablet">Engine version</th>
<th data-hide="phone,tablet">CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0
</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0
</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="http://s11.mogucdn.com/mlcdn/c45406/1512464758975_footable.all.min.js"></script>
<script>
$(document).ready(function() {
$('.footable').footable();
$('.footable2').footable();
});
</script>11、表格内容固定
<td style="word-break:break-all;width:20%">dc:650|tp:1|ci:700004593373|st:1481299200|mk:9|ws:1480694400|et:1481558399|nm:活动价|</td>12、input回车响应
$('#applyCertNum').bind('keypress',function(event){
if(event.keyCode == 13)
{
alert('你输入的内容为1：' + $('#applyCertNum').val());
}
});
2.方法2
$('#applyCertNum').on('keypress',function(event){
if(event.keyCode == 13)
{
alert('你输入的内容为1：' + $('#applyCertNum').val());
}
});
3.方法3
$('#applyCertNum').bind('keypress',function(event){
if(event.keyCode == "13")
{
alert('你输入的内容为2：' + $('#applyCertNum').val());
}
});
4.方法4
$("#applyCertNum").keydown(function(e) {
if (e.keyCode == 13) {
alert("12345....");
}
});html中直接加入
onkeydown="if(event.keyCode==13) {queryAppAuthList();}"13、动态修改placeholder值
$('#itemId').attr('placeholder', '请输入商品ID ');原文地址：
手机扫一扫
移动阅读更方便
你可能感兴趣的文章