jQuery样式及属性操作




    
    Title
    




    
    
qweasdzzxc

上图：点击开关就可以显示或隐藏内容




    
    Title
    




    
    
qweasdzzxc

代码说明：

在jQuery中可以使用toggleClass('hide')， 如果有hide就移出，没有就添加，效果与上面代码一样。

属性操作

上图：使用attr可以获取标签中属性的值

上图：attr()中传入两个值，如果这个属性不存在就是新增这个属性和值，如果属性存在这是修改这个属性的值。

上图：删除属性

prop

prop用于操作checkbox和radio




    
    Title
    




    

    
    
qweasdzzxc

上图：$('#i2').prop('checked',true); 当为true时，就勾选

上图：当false时，就不勾选。

状态编辑框




    
    Title

    




添加


    

        1.1.1.11
        80
        test
        test
        
            编辑 | 删除
        
    

    

        1.1.1.12
        80
        test
        test
        
            编辑 | 删除
        
    

    

        1.1.1.13
        80
        test
        test
        
            编辑 | 删除
        
    

    

        1.1.1.14
        80
        test
        test
        
            编辑 | 删除

代码说明：

之前状态编辑框使用的方式是通过var port = $(tds[0]).text();获取td标签，然后使用$('.model input[name="hostname"]').val(host); 来赋值；

但是如果当数据发生变化时，比如我们新增了 test标签，增加多少个，我们就需要相对的新增$(tds[0]).text(); 和 input[name="hostname"]').val(host); 来获取值和赋值，这样非常不灵活，且比较麻烦。

1.1.1.11  我们在td标签中添加了自定义属性 target；
通过var n = $(this).attr('target');  来获取所有td标签中target属性的值，也就是hostname；
通过var text = $(this).text(); 来获取文本内容 也就是1.1.1.11和80这些内容。

var a1 = '.model input[name="';
var a2 = '"]';
var temp = a1 + n + a2;
//最终temp拼接的字符串是   .model input[name="hostname"]

通过$(temp).val(text);  将text赋值到input对话框中。

TAB切换菜单

上图： 途中红框中有多个菜单，每个菜单下面对应的内容也不同




    
    Title
    




    
      
        

            
菜单一

            
菜单二

            
菜单三

        

        

            
内容一

            
内容二

            
内容三

        

    


    







    
    Title
    




    

        

            
菜单一

            
菜单二

            
菜单三

        

        

            
内容一

            
内容二

            
内容三

        

    


    







    
    Title
    




    

        

            
菜单一
    
            
菜单二

            
菜单三

        

        

            
内容一
     
            
内容二

            
内容三

        

    


    
    







    
    Title
    




    

        

            
菜单一

            
菜单二

            
菜单三

        

        

            
内容一

            
内容二

            
内容三

代码说明：

var value = $(this).attr('a');    获取a属性的值，用于查找对应b属性相应值的标签。

$('.content').children("[b='" + value + "']")   前半部分就是通过拼接的方式，通过value来获取b属性对应值的标签

.removeClass('hide').siblings().addClass('hide');  后半部分移除当前content中b标签的hide，这样就会显示点击标签对应的内容，然后将其他兄弟标签添加hide，隐藏内容。

上图：点击菜单三，然后找到内容三，将其hide移除掉，然后将其他内容标签添加hide，就实现了点击相应标签就显示相应的内容效果。

索引




    
    Title
    






    

        
菜单一

        
菜单二

        
菜单三

    

    

        
内容一

        
内容二

        
内容三

代码说明：

我们将menu和content中的自定义属性删除；

var v = $(this).index();   获取点击菜单的索引

上图：获取到点击菜单的索引




    
    Title
    






    

        
菜单一

        
菜单二

        
菜单三

    

    

        
内容一

        
内容二

        
内容三

代码说明：

var m = $('.content').children().eq(v);  根据v这个索引值获取content下面对应索引的children标签

上图：可以看到菜单二和菜单三的标签，能看到hide




    
    Title
    






    

        
菜单一

        
菜单二

        
菜单三

    

    

        
内容一

        
内容二

        
内容三

代码说明：

var m = $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');
对点击的索引标签移出hide，兄弟标签添加hide。