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

　　

持续更新中