JS/jQuery常用代码片段

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dlming614/article/details/49074759

取属性值: $("#id").attr("attr");
设置属性值: $("#id").attr("attr", "value");
删除属性值: $("#id").removeAttr("attr");
取input值: $("id").val();
设置input值: $("id").val("value");
设置某元素内的html,包括div,td等: $("#id").html("html is ok");
设置元素内文本: $("#id").text("value");
添加css类名: $("id").addClass("go");
移除css类名: $("id").removeClass("go");

将JSON文本转为JSON对象: JSON.parse(data);
插入某元素块之前: $("#id").before("html");
插入某元素块内部的最后: $("#id").append("html");
四舍五入取两位小数: size.toFixed(2)

判断checkbox是否被选中

$("input[type=checkbox]").is(":checked") == true

设置间隔时间

var timeId = setInterval('showTime()', 3000);
function showTime(){
    var t = new Date();
    $('.show').html(t);
}

遍历对象元素

js的对象没有直接计算元素个数的函数,如需遍历可用

for(key in obj){
    alert(obj[key].value);
}

js字符串转对象:JSON.parse(str)
Jquery字符串转对象:$.parseJSON(str)
js对象转字符串:JSON.stringify(obj)

表单序列化

$("form").serialize();
// 输出(string):a=1&b=2

AJAX传值通用写法:

$.ajax({
    url : "http://www.ssyleo.com",
    type: 'post',
    dataType : 'json',
    data : {
        a : 'a',
        b : 'b',
    },
    success : function(e){
        alert('success');
    },
    error : function(e){
        alert('error');
    }
});

输入框计数,中文为1,英文为0.5:

// input加入onkeyup事件:οnkeyup="count(this.value)"
function count(v){
    // 中文:cn,英文:v.length-cn
    var cn=v.match(/[\u4E00-\uFA29]/g);
    if(cn)cn=cn.join('').length;
    else cn=0;
    document.getElementById('title_count').innerHTML= cn + (v.length - cn) * 0.5;
}
将byte转为kb,mb,gb:

size = Math.abs(size);
if( size >= 1024*1024*1024 ){
    size /= 1024*1024*1024;
    text = size.toFixed(2) + 'GB';
}else if( size < 1024*1024 && size > 1024 ){
    size /= 1024*1024;
    text = size.toFixed(2) + 'MB';
}else{
    size /= 1024;
    text = size.toFixed(2) + 'KB';
}

确认框:

if(confim('确认?')){
    alert('OK');
}

全选、反选、取消功能:

html部分:

<input type="radio" name="check" id="all">全选
<input type="radio" name="check" id="inverse">反选
<input type="radio" name="check" id="cancle">取消

<table id="tab">
    <tbody><tr>
        <th>选择</th>
        <th>id</th>
        <th>name</th>
    </tr>
    <tr class="item">
        <td><input type="checkbox" name="checkbox" data="123"></td>
        <td>123</td>
        <td>test1</td>
    </tr>
    <tr class="item">
        <td><input type="checkbox" name="checkbox" data="456"></td>
        <td>456</td>
        <td>test2</td>
    </tr>
</tbody></table>
<input type="button" value="提交" id="submit">

JS部分:

    $("#all").click(function(){
        $("input[name='checkbox']").each(function(){
            this.checked = true;
        });
    });
    $("#cancle").click(function(){
        $("input[name='checkbox']").each(function(){
            this.checked = false;
        });
    });
    $("#inverse").click(function(){
        $("input[name='checkbox']").each(function(){
           this.checked=!this.checked;
        });
    });

    $("#submit").click(function(){
        var ids_checked = '';
        var ids_unchecked = '';
        // 获取所有勾选项的ID
        $("input[name='checkbox']:checked").each(function(){
            ids_checked += $(this).attr("data") + ',';
        });
        ids_checked = ids_checked.substring(0, ids_checked.length - 1);
        // 获取所有未勾选项的ID
        $("input[name='checkbox']").not("input:checked").each(function(){
            ids_unchecked += $(this).attr("data") + ',';
        });
        ids_unchecked = ids_unchecked.substring(0, ids_unchecked.length - 1);
        alert(ids_checked);
        alert(ids_unchecked);
    });
</script>

取URL指定参数值:

// url='http://www.ssyleo.com?a=1&b=2
// 调用方法:alert(getParam('a'))
// 结果:1
function getParam(param){
    var url = location.href;
    var params = url.split('?');
    params = params[1];
    params_arr = params.split('&');
    for (var i = params_arr.length - 1; i >= 0; i--) {
        var param_arr = params_arr[i].split('=');
        if (param == param_arr[0]) {
            var rst = param_arr[1];
            break;
        }
    }
    if (typeof(rst) == 'undefined') {
        return '';
    }else{
        return rst;
    }
}

JS时间戳转换:

// 时间戳转北京时间
var unixStamp = new Date(1429951613 * 1000);
var Ymd = unixStamp .toLocaleDateString();
var His = unixStamp .getHours().toString() + ':' + unixStamp .getMinutes().toString() + ':' + unixStamp .getSeconds().toString();
alert(Ymd + ' ' + His); // 结果是2015/4/25 16:46:53

// js里用toLocalString的结果是类似于这样:2015/4/25 下午4:46:53,这种格式用来转时间戳不是很方便,所以我单独取了YmdHis

// 北京时间转时间戳
var timeString = '2015/4/25 16:46:53';
var time = new Date(timeString);
var unixStamp = time.getTime(time) / 1000;
alert(unixStamp); // 结果是1429951613

Unicode字符串转换:

// 字符串转Unicode
    function toUnicode(str) {
        var temp,r = '';
        for (i = 0; i < str.length; i++) {
            temp = str.charCodeAt(i).toString(16);
            while ( temp.length < 4 )
                temp = '0' + temp;
                r += '\\u' + temp;
        };
        return r;
    }

// Unicode转字符串
    function toString(unicode){
        return str = eval("'" + unicode + "'");
    }

判断是否是数字

if(isNaN(id)){
    alert("不是数字");
}else{
    alert("是数字");
}

判断是否是整数

if( 1.1 % 1 !== 0){
    alert("不是整数");
}

字符串判断大小的坑

var a = '21';
var b = '3';
alert(a > b); false;
alert(a - b > 0); true;
// 字符串不能直接比大小,因为只取了第一个数字
展开阅读全文

没有更多推荐了,返回首页