HTML JQuery 技巧总结

元素之间的操作

$(".level1").children() 　　　获取到所有相邻的子元素
$(".level1").children("a") 　　获取到所有相邻并且满足条件的子元素

$("#li2").find("a")　　　　获取到匹配元素的子元素节点
Children 只能获取到相邻的子元素，不能获取到隔代子元素

$("#li1").next()　　获取到相邻的下一个同辈元素　　如果选择器命中多个目标则会返回所有命中目标的下一个同辈元素
$("#li2").prev() 　　获取到相邻的上一个同辈元素　　如果选择器命中多个目标则会返回所有命中目标的上一个同辈元素
$("#li2").siblings() 获取到匹配元素前后的所有同辈元素如果选择器命中多个目标则会返回所有命中目标的前后同辈元素

$("#li2").parent() 获取到匹配元素的父元素节点　　　　　　如果选择器命中多个目标则返回所有命中目标的父级节点
$("#2").parents() 获取到匹配元素的所有父元素节点　　　　#2是li中的a标签，会返回li ul .. Body html所有的父级节点
$("#2").parents("li") 获取到匹配元素的所有父元素节点　　如果有多个li嵌套，返回所有的li
$("#2").closest("li") 获取到匹配元素最近的父元素节点　　如果有多个li嵌套，返回最近的li

移除文本左右的空格

function trim(str) { //删除左右两端的空格
　　return str.replace(/(^s*)|(s*$)/g, "");
}

判断字符串中的字符中文算两个字符

    function chkstrlen(str) {
        var strlen = 0;
        for (var i = 0; i < str.length; i++) {
            if (str.charCodeAt(i) > 255) //如果是汉字，则字符串长度加2
                strlen += 2;
            else
                strlen++;
        }
        return strlen;
    }

移除掉多余的字符串

    function DeleteStr(str, lens) {
        var strlen = 0;
        var str1 = "";
        for (var i = 0; i < str.length; i++) {
            if (strlen <= lens) {
                if (str.charCodeAt(i) > 255) { //如果是汉字，则字符串长度加2
                    strlen += 2;
                    str1 += str[i];
                } else {
                    strlen++;
                    str1 += str[i];
                }
            }
        }
        return str1;
    }

多选按钮

点击按钮获取所有选中的按钮的值

$("input[name='nameType']:checkbox") 根据name获取到所有的多选按钮

$("input[name='nameType']:checkbox").each(function () {
    if ($(this).is(":checked")) {
        str += $(this).val() + ","
    }
})

判断多选按钮是否选中

$(obj).is(":checked") 如果没有选中返回false ，如果选中返回true

多选按钮全选

    $("#select").click(function() {  
        if ($(this).attr("checked")) {  
            $("input[name=items]").each(function() {  
                $(this).attr("checked", true);  
            });  
        } else {  
            $("input[name=items]").each(function() {  
                $(this).attr("checked", false);  
            });  
        }  
    });

上面这个我在使用的时候遇到过一个问题就是 IE 360都好使，谷歌和火狐第一次全选的时候没有问题，第二次的时候就不能用了

这个也是全选

　　　　 $('#checkAll').click(function () {//checkAll 是 全选按钮的Id
            $('input[name="namecheckbox"]').prop('checked', this.checked);
        });
        var $subBox = $("input[name='namecheckbox']");
        $subBox.click(function () {
            $("#checkAll").prop('checked', $subBox.length == $("input[name='namecheckbox']:checked").length ? true : false);
        });

下拉框

$("#FromProJect").find("option[value='" + appid + "']").attr("selected", true);　　

单选按钮

radio 点选按钮太小，使用label把他包起来这样点击文字也可以选中单选按钮

<label>
　　<input type="radio" name="nameType" />审核不通过
</label>

默认选中单选按钮

$("#radio1").attr("checked", true)

通过 name 和 value 找到 radio 并将其选中男
$("input[name=nameType][value='2']").attr("checked",true);

通过 name 来获取radio的value值
$("input[name='nameType']:checked").val();

鼠标获取到焦点是给一个弹出层提示

    $("li a").mouseover(function (e) {
        $("#popmenu").html(this.text)
        $("#popmenu").css({
            "top": (e.pageY + 10) + "px",
            "left": (e.pageX + 20) + "px",
            "display": "block"
        })

    }).mouseout(function () {
        $("#popmenu").hide();
    })

字符串相关

    //替换所有要替换的文字
    String.prototype.replaceAll = function (str1, str2) {
        var str = this;
        var result = str.replace(eval("/" + str1 + "/gi"), str2);
        return result;
    }

持续更新中