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/> 默认
</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获取选中值
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 标签表示的导航内容
- 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
|
window.location.href=url;
window.open(url, "_blank")
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>
|
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. 其他
基于hexo + github pages搭建的个人博客，记录所有学习和工作中的博文，欢迎大家前去逛逛
声明
尽信书则不如，已上内容，纯属一家之言，因本人能力一般，见识有限，如发现bug或者有更好的建议，随时欢迎批评指正
扫描关注
