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>
</div

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

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/> &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获取选中值

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 ');

原文地址：

灰灰blog