常用jq代码

1. 只允许输入数字,且禁止输入法

<html>
<head>
<script type='text/javascript' src='../../js/jquery.min.js' charset='utf-8'></script>
<script type="text/javascript">
 $(function () {
     $(".onlyFloat").keydown(function (e) { 
           if (((event.keyCode > 47) && (event.keyCode < 58)) || (event.keyCode == 8) || ((event.keyCode > 95) && (event.keyCode < 106))|| (event.keyCode == 110)) { 　// 判断键值   
                return true; 
           } 
           else {
                return false;
           } 
            }).focus(function () {
                this.style.imeMode = 'disabled';   // 禁用输入法,禁止输入中文字符

            });      
  })
</head>
<body>
<input type="text" class="onlyFloat" />
</body>
</html>

动态添加的输入框无法绑定监听事件，如果还需要限制其输入，就直接在标签中添加onkeydown事件，详见下例

2.只允许输入整数且不能超过某值

<html>
<head>
<script type='text/javascript' src='../../js/jquery.min.js' charset='utf-8'></script>
<script type="text/javascript">
        function onlyNum(e) {
            var maxnum = 90; //最大值
            var oldnum = $(e).val(); //当前文本框中的数字 
            if ((event.keyCode > 36 && event.keyCode < 41) || (event.keyCode == 8)) {
                return true;
            }
            else if (event.keyCode > 47 && event.keyCode < 58) { 　// 判断键值   
                var nownum =parseInt( oldnum + String.fromCharCode(event.keyCode));
                if (nownum > maxnum) {
                    alert(0, "输入后的值大于限定值，不允许该健输入");
                    return false;
                }
                else {
                    return true;
                } 
            }
            else if (event.keyCode > 95 && event.keyCode < 106) {
                var inputcontent = String.fromCharCode(event.keyCode);
                switch (inputcontent) {
                    case "a": inputcontent="1"; break;
                    case "b": inputcontent = "2"; break;
                    case "c": inputcontent = "3"; break;
                    case "d": inputcontent = "4"; break;
                    case "e": inputcontent = "5"; break;
                    case "f": inputcontent = "6"; break;
                    case "g": inputcontent = "7"; break;
                    case "h": inputcontent = "8"; break;
                    case "i": inputcontent = "9"; break;
                    default: inputcontent = "0"; break;

                }
                var nownum = parseInt(oldnum + inputcontent);
                if (nownum > maxnum) {
                    alert( "输入后的值大于限定值，不允许该健输入");
                    return false;
                }
                else {
                    return true;
                }
            }
            else {
                return false;
            }
        } 
</script>
</head>
<body>
<input type="text" onkeydown="return onlyNum(this)"  style="ime-mode:disabled; ">
</body>
</html>

3.radio选中改变触发事件

<html>
<head>
<script type='text/javascript' src='../../js/jquery.min.js' charset='utf-8'></script>
<script type="text/javascript">
 $("input[type=radio][name=typestyle]").change(function () { 
        if (this.id == "radio_bq") { 
        }
        else { 
        }
  }) 
</script>
</head>
<body>
 <input type="radio" name="typestyle" checked="checked" class="k_radio" id="radio_br" />冰刃
 <input type="radio" name="typestyle" class="k_radio" id="radio_bq" />兵器
</body>
</html>

4.判断总复选框是否选中,遍历所有子复选框

<html>
<head>
<script type='text/javascript' src='../../js/jquery.min.js' charset='utf-8'></script>
<script type="text/javascript">
        //点击全选
        function AllCheckClick() {
            var isAll = $("#drqAllCheckbox").is(':checked');
            $.each($("#drqLeftList > table > tr"), function (k, v) { 
                var $checkbox = $(v).find("input[type='checkbox']");  
                if (isAll) {
                    $checkbox.prop("checked", "true");  
                } else {
                    $checkbox.removeAttr("checked"); 
                }  
            }); 
        }
</script>
</head>
<body>
<input type="checkbox" id="drqAllCheckbox" onclick="AllCheckClick()"/>
<div id="drqLeftList">
    <table>
        <tr>
            <td><input type="checkbox"/></td>
            <td></td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td></td>
        </tr>
    </table>
</div>
</body>
</html>

5. 打印页面某一块内容（内容块若带滚动条，使用下法不会出现只打印滚动条上部的情况），并去除页眉页脚，页面显示和打印时采用两套css

<html>
<head>
<script type='text/javascript' src='../../js/jquery.min.js' charset='utf-8'></script>
<script type="text/javascript">
    function labelPrint(){
        if (getExplorer() == "IE") { 
                pagesetup_null(); //删除打印页面的页眉页脚
        }
    
        var printhtml = $("#printdiv").html(); //获取div里的内容，不包括本身
        //var printhtml = $("#printdiv").prop("outerHTML"); //获取div的内容，包括本身
        var bodyHtml = document.body.innerHTML;
        document.body.innerHTML = printhtml;
        window.print();
        document.body.innerHTML = bodyHtml;
    }
        //获取当前浏览器
        function getExplorer() {
            var explorer = window.navigator.userAgent;
            //ie
            if (explorer.indexOf("MSIE") >= 0) {
                return "IE";
            }
            //firefox
            else if (explorer.indexOf("Firefox") >= 0) {
                return "Firefox";
            }
            //Chrome
            else if (explorer.indexOf("Chrome") >= 0) {
                return "Chrome";
            }
            //Opera
            else if (explorer.indexOf("Opera") >= 0) {
                return "Opera";
            }
            //Safari
            else if (explorer.indexOf("Safari") >= 0) {
                return "Safari";
            }
        }

        //删除打印页面的页眉页脚
        function pagesetup_null() { 
            var hkey_root, hkey_path, hkey_key;
            hkey_root = "HKEY_CURRENT_USER";
            hkey_path = "\Software\Microsoft\Internet Explorer\PageSetup\";
            try {
                var RegWsh = new ActiveXObject("WScript.Shell");
                hkey_key = "header";
                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
                hkey_key = "footer";
                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
                //hkey_key = "margin_left";
                //RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "0");
                //RegWsh.sendKeys('%fu');
            } catch (e) {

            }
        }
</script>
<style>
   @media screen{ 
     /*屏幕显示的css*/
    }

   @media print{
     /*打印采用的css*/
     /*@page{
        size:A4 portrait;
        margin-left:0;
     }*/ 
    } 
    
    /*公用的css*/
    #printdiv{
        border:1px solid;
    }
</style>
</head>
<body>
  <div id="buttonlist"> <a onclick="labelPrint()">打印</a></div>
  <div id="printdiv"></div>
</body>
</html>

6.对数据序列化以及反序列化

<html>
<head>
<script type='text/javascript' src='../../js/jquery.min.js' charset='utf-8'></script>
<script src="../../js/json2.js"></script>
<script type="text/javascript">
    function getContent(){
        var contentlist=[];
        var content={
            name:$("#").val(),
            age:$("#").val()
        }
        contentlist.push(content);
        var contentlistjson=JSON2.stringify(contentlist); //序列化 
        JSON2.parse(contentlistjson) //反序列化
        eval("(" + contentlistjson + ")"); //反序列化
    }
</script>
</head>
<body> 
</body>
</html>

7.获取单选框的选中值

<html>
<head>
<script type='text/javascript' src='../../js/jquery.min.js' charset='utf-8'></script>
<script type="text/javascript">
  var name =  $('input:radio:checked').val();
  //var name =  $("input[type='radio']:checked").val();
  //var name =  $("input[name='typestyle']:checked").val();
</script>
</head>
<body>
 <input type="radio" name="typestyle" checked="checked" class="k_radio" id="radio_br" />冰刃
 <input type="radio" name="typestyle" class="k_radio" id="radio_bq" />兵器
</body>
</html>

8.寻找某一元素的值

<html>
<head>
<script type='text/javascript' src='../../js/jquery.min.js' charset='utf-8'></script>
<script type="text/javascript">
         
        function findTd() {
           //$.each( $("#drqLeftList tr"),function(k,v){
             //  var text=$(this).find("td").eq(0).text();
           //})
           var text=$(#drqLeftList tr:first).find("td").eq(0).text(); //值为00
        }
</script>
</head>
<body> 
<div id="drqLeftList">
    <table>
        <tr>
            <td>00</td>
            <td>01</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
        </tr>
    </table>
</div>
</body>
</html>

9.操作元素样式(参考：https://www.hellojava.com/a/84.html)

<html>
<head>
<script type='text/javascript' src='../../js/jquery.min.js' charset='utf-8'></script>
<script type="text/javascript">
$(function(){ 
    $("#content").css("background"); //返回元素的背景颜色
    $("#content").css("background","#ccc") //设定元素背景为灰色
    $("#content").height(300); $("#msg").width("200"); //设定宽高
    $("#content").css({ color: "red", background: "blue" });//以名值对的形式设定样式
    $("#content").addClass("select"); //为元素增加名称为select的class
    $("#content").removeClass("select"); //删除元素名称为select的class
    $("#content").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class
})
 
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>

10.待补充

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/achigwwblog/p/9888344.html