jQuery实战笔记

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

原文地址:https://www.cnblogs.com/aixing/p/13327503.html