jquery实战笔记

写前端控制台中,实际遇到的不会的,通过查询解决的记录,汇总记录下来,一期主要包括:

  • 标签隐藏显示
  • 时间戳转换
  • radio单选框选中获取
  • 动态修改placeholder值
  • 判断字符串是否为数字类型
  • tab标签页实现
  • 标签点击事件
  • jquery跳转链接
  • jquery 修改图片url
  • 图片加边框
  • 实现一个可检索的table
  • 表格内容固定
  • input回车响应

1. jquery控制div标签的显示隐藏

1
2
3
<div id="queryExtend">
<label> hah </label>
</div

jquery的用法, 判断是否隐藏,是则显示;否则隐藏

1
2
3
4
5
6
7
function showQueryCondition() {
if($('#queryExtend').is(":hidden")) {
$('#queryExtend').show();
} else {
$('#queryExtend').hide();
}
}

2. 时间戳转日期

1
2
3
4
// 获取当前时间戳
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群的值

1
2
3
4
5
6
7
8
9
10
11
12
<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/> &nbsp;&nbsp; 默认 &nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="col-md-2">
<input type="radio" name="queryType" id="queryType" value="2"/> &nbsp;&nbsp; 查主库
</div>
<div class="col-md-2">
<input type="radio" name="queryType" id="queryType" value="3"/> &nbsp;&nbsp; 查从库
</div>
</div>

对应的jquery获取选中值

1
var queryDB = $("input[name='queryType']:checked").val();

4. 动态修改placeholder值

1
$('#itemId').attr('placeholder', '请输入商品ID ');

5. 判断字符串是否为数字类型

1
2
3
4
5
6
var str = "37";
var n = Number(str);
if (!isNaN(n))
{
alert("是数字");
}

6. tab标签页的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>

借助bootstrap,主要点

  • myTab 标签表示的导航内容
    • href 指向的本标签对应的内容
  • myTagContent 对应的标签页内容
    • id 与 导航的锚点对应
    • class="tab-pane fade in active" 表示生效的标签内容
    • class="tab-pane fade" 未激活的标签属性

7. 标签点击事件

1
$('#btn').click(function(){});

8. jquery跳转链接

1
2
3
4
5
6
7
8
9
10
// 本页面直接打开url
window.location.href=url;


// 新标签页打开url
window.open(url, "_blank")


// 在demo窗口打开url
window.open(url, "demo");

9. jquery 修改图片url

1
$('#img').attr("src", newImgUrl);

10. 图片加边框

1
<image id="data" style="border:1px solid #b5b3b3;"/>

11. 实现一个可检索的table

在一个bootstrap项目中,必要的 jquery, bootstrap.min.js需要依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<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>

12. 表格内容固定

1
<td style="word-break:break-all;width:20%">dc:650|tp:1|ci:700004593373|st:1481299200|mk:9|ws:1480694400|et:1481558399|nm:活动价|</td>

13. input回车响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$('#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中直接加入

1
onkeydown="if(event.keyCode==13) {queryAppAuthList();}"

II. 其他

个人博客: Z+|blog

基于hexo + github pages搭建的个人博客,记录所有学习和工作中的博文,欢迎大家前去逛逛

声明

尽信书则不如,已上内容,纯属一家之言,因本人能力一般,见识有限,如发现bug或者有更好的建议,随时欢迎批评指正

扫描关注

QrCode