JQuery 实战笔记一

文章目录
  1. jquery实战笔记
    1. 1. jquery控制div标签的显示隐藏
    2. 2. 时间戳转日期
    3. 3. 获取radio群的值
    4. 4. 动态修改placeholder值
    5. 5. 判断字符串是否为数字类型
    6. 6. tab标签页的实现
    7. 7. 标签点击事件
    8. 8. jquery跳转链接
    9. 9. jquery 修改图片url
    10. 10. 图片加边框
    11. 11. 实现一个可检索的table
    12. 12. 表格内容固定
    13. 13. input回车响应
  2. II. 其他
    1. 个人博客: Z+|blog
    2. 声明
    3. 扫描关注

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

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×