jq动态控制样式的一些方法（批量控制样式，带参数控制样式）

1.带变量的操作方法

注意：如border等具有多个参数时，需要拼接字符串,并且需要拼接单位，如果没有单位将不起作用

<div class="box box1">
    <ul>
        <li class="haley1"><p><span><b>我是红色文字</b></span></p></li>
        <li class="haley2"><p><span><u>我是文字</u></span></p></li>
        <li class="haley3">我是应该带10px的边框，上下padding为10，左右padding为20</li>
        <li class="haley4">我是文字</li>
    </ul>
    <script>
        var w=10;
        var pt=10;
        var pl=20;
        var color='#f00';
        $('.haley3').css({
            'border':w+"px solid #f00",
            'padding':pt+'px '+pl+'px'
        });
        $('.box').find('ul>.haley1 b').css({
            'color':color
        });
    </script>
</div>

<style>
    .box{
        600px;
        height:300px;
        background: #46b8da;
        padding:20px;
    }
    .box1{
    }
</style>

2.批量操作样式

注意：使用群组选择器，each遍历操作

<div class="box box2">
    <ul>
        <li class="haley1"><p><span><b>我是文字</b></span></p></li>
        <li class="haley2"><p>
            <span>
                <u>我是绿色文字</u>
                <b>我是文字</b>
            </span>
        </p></li>
    </ul>
    <div class="child">我应该是绿色的文字</div>
    <ol>
        <li><span>我也应该是绿色的文字</span></li>
        <li><b>我也应该是默认颜色</b></li>
    </ol>
    <script>
        $.each([$('.box2').find('ul>.haley2 u'), $('.child'), $('ol>li>span')], function () {
            $(this).css({
                'color': 'green'
            });
        })
    </script>
    <style>
        .box{
            600px;
            height:300px;
            background: #46b8da;
            padding:20px;
        }
    </style>
</div>

3.需要拼接单位的几种情况

<div>
    <div class="box box3">
    <p>多年来，我一直在跟扶贫打交道，其实我就是从贫困窝子里走出来的。1969年初，我到延安农村插队当农民，还不到16岁。从北京一下子到那么穷的一个地方，感受确实很深。晚上黑灯瞎火，沿着那条沟亮着几盏煤油灯，真是“一灯如豆”。如果外出没有手电筒，深一脚浅一脚的，搞不好就掉沟里了。那里土地很薄，没有什么肥，粪是挑上去的，都是点种，真是广种薄收啊。刚开始的时候，我工分才能评六分五。两三年后，我什么都学会了，成农村壮劳力了，才能拿10分。那时候，挑100多斤的担子，走10里山路，一点问题没有。这10个工分，也就值八九分钱。算下来，出一天工，买不了一盒羊群烟（上世纪70年代，宝鸡卷烟厂生产的一种最便宜的香烟），当时一盒羊群烟九分钱。</p>
    </div>
    <script>
        var h=20;
        $('.box3').children('p').css({
            'height':h,
            'line-height':h,//<-----   不会自动自动加px,会认为是em 
            'text-indent':h,//自动加px
            'margin-left':h,//自动加px
            'letter-spacing':h,//自动加px
            'font-size':h,//自动加px
            'padding-left':h//自动加px
        });
    </script>
    <style>
        .box3>p{
            border:1px solid #c1e2b3;
        }
    </style>
</div>

  1）带变量拼接字符串的时候    'padding':pt+'px '+pl+'px'

  2) line-height 

  3) 不用px，需要用其他单位时 'top':20+'%'   ，'font-size':2+'rem'

4.几种常见的错误写法

4.1 children不能串联选择器，如果串联选择用find

代替方法【弊端符合条件的都会被选中】

$('.box1').find('>ul>li').css({
    'color':'red'
});