我在工作中遇到的JS问题汇总

1.tabmenu问题
这个问题我一直在网上参考源码，参考了很多源码，但是我感觉很难处理，我自己困惑的地方有这样几点。
1、我只能通过getElementById(“tab”)在读取他的子元素时我只能getElementsByTagName(“li”)，那么我如何才可以去读取他的classname呢？这个我很不清楚，也写了，但是是无法通过的，我很不能理解，希望有高人可以替我解释一下。
2、给一个元素增加新的classname的过程中时，我发现addclass（），被认为是没有定义的函数，我自己经过测试经过各种查资料发现只有通过x.className += ” “+”selected”;你还必须加个“ ”，否则class的名字就直接是AB而不是我们想要的A B了。
3、移除classname时，x.replace是行不通的。
4、左右侧必须一一对应控制台会报错。
【我参考的资料【挺有用的，很详细，不像网上就只有源码，这个也从思想的角度剖析了】，很棒，建议大家去看一下】
http://blog.sina.com.cn/s/blog_418d7b1e0100w6ch.html

我自己的代码如下，然后这个根据上方的那个资料，真的很棒，这里的JS和HTML一点关系都没有，不需要去更改css样式，也不需要去用复杂的什么OPACITY透明化。

<script>
    function changetab(){
    var tabs=document.getElementById("tab").getElementsByTagName("li");
            for(var i=0;ifunction tab(){
            var tabs=document.getElementById("tab").getElementsByTagName("li");
            var cts=document.getElementById("tabmenu").getElementsByTagName("div");
            for(var i=0;i"btn";
                cts[i].className="menut-right-div";
                if(tabs[i]==this){
                    tabs[i].className+=" "+"selected";
                    cts[i].className+=" "+"show";
                }   
/*控制台输出看他的classname对不对*/                        console.log(tabs[i].className);                             console.log(cts[i].className);
            }
        }
        window.onload=function(){
            changetab();
        }
 script>

9-24补充
仿别人网站时发现一个更加简单的tabmenu的代码，非常简短

html：
    <ul class="bonus-tab">
        <li class="active"><a href="javascript:couponTab(0)">可使用a>li>
        <li class=""><a href="javascript:couponTab(1)">不可使用a>li>
    ul>

<div class="bonus-tab-cont active">
    <ul class="bonus-list">
        <li>
            <div class="nobonus">1div>
        li>
    ul>
div>
<div class="bonus-tab-cont active">
    <ul class="bonus-list">
        <li>
            <div class="nobonus">1div>
        li>
    ul>
div>

js：
function couponTab(a)
{
    $(".bonus-tab li").removeClass("active");
    $(".bonus-tab li").eq(a).addClass("active");
    $(".bonus-tab-cont").removeClass("active");
    $(".bonus-tab-cont").eq(a).addClass("active");
}

③

$(function($) {
    $('.index-message-nav li a').click(function() {
        $(".index-message-nav li a[class='active']").removeAttr("class");
        $(this).addClass("active");
        //      $(this).addClass("active").siblings().removeClass();
        $('.index-message-down > div').hide().eq($('.index-message-nav li a').index(this)).show();
    });
});

2、留言板判断剩余输入字数
go to http://www.cnblogs.com/Sue_/articles/2277533.html

3、上次做移动端的时候发现用了min-height:100%使背景图片平铺了移动端整个屏幕防止造成背景图片不够大底部留白的情况。但是今天遇到的这个又无法实现了【我并不知道为什么】
然后只能用JS实现
代码如下

//使背景铺满整个屏幕
$(function(){
$('.con').height($(window).height());
})

JS代码

window.onload=function(){
    var con=document.getElementById('con');
    //var conHeight=con.offsetHeight;
    var c=document.documentElement.clientHeight;
    con.style.height=c+'px';
}

一开始是我用了JQ那样的代码，后来发现不可以，因为我让他的offsetHeight等于浏览器当前页面的clientHeight，一旦con中没有内容，那么还是失效的，只有这个方法才是可以的

4、点击功能
①给父节点中每一个子节点都绑定点击事件

$(".order-name").children().click(function(){}）


②消除同级的class样式

5、关于active的问题
在工作中常常会遇到这样的情况，给某按钮增加点击后的active样式
之前我在做的时候都是先判断是否有active类，没有的话给他加，有的话给他去掉这个类。
但是今天我遇到一个问题，有两个input，我必须只能点击其中一个。但是用radio来做的话样式是非常不好看的，因为字只能在○的后面显示，就像这个样子【○ 1 ○ 2】。
但是用span我就不会做了，后面百度了资料，有了好的方法
go to http://www.cnblogs.com/web-sheena/p/4206465.html
我的代码

$(this).toggleClass('active').siblings('XX').removeClass('active');

然后以后我在遇到此类问题，一行代码就可以解决了，不用再去判断是否有active类，太棒！！

6.链接跳转问题
JS：
go to http://blog.csdn.net/kongjing0815/article/details/5808063/

JQ:

6.我们常常会做到这样的，在注册页面对用户名、邮箱、手机号码等进行判断。但是如果直接用click事件你会发现当二次改变后并不会出现错误提示。
还有一点需要注意的是。要对输入的数值进行实时判断，一旦输入的数值有改变则提示的东西会立刻消失，再次进行判断
go to http://www.jb51.net/article/60789.htm

一定要在input后面加上[type=xx]，
一定要在input后面加上[type=xx]
一定要在input后面加上[type=xx]

重要的事情说三遍

因为如果不加的话他会受到干扰，点击下一个input会再发生请输入XX的事情

//对input输入的焦点事件的判断
                $('input[type=xx]').bind("blur",function(){
    var Value=$(this).val();
    var isEmpty=false;
    if(Value==""){
        $('.error').html("请输入XX");
        $('.error').show();
        console.log("请输入手机号码");
        isEmpty=true;
    }
                    if(!isEmpty&&phoneValue!=""){
    if(Value.length!=x){
        $('.error').hide();
        $('.error').html("手机号码格式错误");
        $('.error').show();
        console.log("格式错误");
    }
    else{
        $('#register-phone-error').hide();
        console.log("true");
        }
    }
//实时监测变化
    $('input[type=x]').bind('input propertychange', function(){
        $('#register-phone-error').hide();
    });

});

7.点击文字后文字改变,再点击后变回原来的文字

"javascript:this.innerHTML=(this.innerHTML=='一二三'?'四五六':'一二三');">一二三

8、像淘宝客户端那样分别勾选

父元素的同级节点只选择一个
$('.address-list li').on('click', '.address-list-title', function() {
    var obj = $(this).closest('li');
    if ($(this).hasClass('select')) {
                        $(this).removeClass('select').find('i.select').html('');
        obj.removeClass('has-select');
    } 
    else {
            if (obj.hasClass('has-select')) {
                return false;
            } else {
                    $(this).addClass('select').find('i.select').html('');
                obj.addClass('has-select');
            }
        }
});

$('.confirm-pay-rem').click(function() {
            var html = $('.confirm-pay-rem i').html();
            $(this).removeClass('active');
            if ($(this).hasClass('select')) {
                $(this).removeClass('select').find('i').html('');
            } else {
                $(this).addClass('select').find('i').html('');
            }
        });
        $('.confirm-pay-layer').on('click', '.confirm-layer-title', function() {
            var obj = $(this).closest('li');
            if ($(this).hasClass('select')) {
                $(this).removeClass('select').find('i').html('');
                obj.removeClass('has-select');
            } else {
                if (obj.hasClass('has-select')) {
                    return false;
                } else {
                    $(this).addClass('select').find('i').html('');
                    obj.addClass('has-select');
                }
            }
        });

9、点击弹出层的空白处然后弹出层消失
范例
http://www.internetke.com/tutorial/js/2015/0820/1718.html