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

巴特西

jQuery实战笔记

文章目录

1、标签隐藏显示

2、时间戳转换

3、radio单选框获取选中

4、判断字符串是否为数字类型

5、tab标签页实现

6、标签点击事件

7、jquery跳转链接

8、jquery修改图片url

9、图片加边框

10、实现一个可检索的table

11、表格内容固定

12、input回车响应

13、动态修改placeholder值

最新文章

热门文章