JQuery 学习纪录(3)

CSS样式

DOM改变样式，可利用className，改变类样式 or style 行内样式，一般来说，style不用担心权重问题，而className会要担心！

修改单个样式

        css(name,value)        name:样式名,value:样式值        $('li').css('backgroundColor', 'red')            .css('color', 'green')            .css('fontSize', '32px');

修改多个样式

        css(obj)        $('li').css({            'backgroundColor': 'red',            'color': 'green',            'fontSize': '32px',            'border': '2px solid gray'        });

获取样式

        css(name)        name:想要获取的样式        console.log($('li').css('color'));        console.log($('li').css('fontSize'));        

修改个别的样式

        $('li').eq(0).css('backgroundColor', 'red');        $('li').eq(1).css('backgroundColor', 'gray');        $('li').eq(2).css('backgroundColor', 'yellow');

JQ的特性:

隐式迭带

设置操作:会给JQ内部所有物件设置相同的值
获取操作:只会返回第一个元素的值，所以如果三个都不同，会获取第一个元素的样式。

        // 所以如果三个都不同 会获取第一个元素的样式        console.log($('li').css('backgroundColor'));        

添加类

addClass:在元素标籤上，增加类，且是叠加上去，并不会覆盖掉原本有的类

当两个增加的类的样式相同时，权重也一样时，此时就要判断，css部分，设置的先后顺序，如果是后设置样式的就不会被，先设置的样式覆盖，如我先设置big，再设置small，那么，samll样式的权重自然就比big高

    $('input')      .eq(0)      .click(function() {        $('li').addClass('small');      });    $('input')      .eq(1)      .click(function() {        $('li').addClass('big');      });      

removeClass:移除一个类

    $('input')      .eq(2)      .click(function() {        $('li').removeClass('small');      });      

hasClass:判断一个类

    $('input')      .eq(3)      .click(function() {        $('li').hasClass('small');        console.log($('li').hasClass('small'));      });

toggleClass:切换类，可利用封装好的语法来使用

    $('input')      .eq(4)      .click(function() {        if ($('li').hasClass('small')) {          $('li').removeClass('small');        } else {          $('li').addClass('small');        }        // $('li').toggleClass('small');      });

添加属性

attr (name,value) 设置标籤里面的属性

        // 设置单个属性        // $('img').attr('alt', '哈啰统神');                // 设置多个属性        $('img').attr({            title: '太神拉',            alt: '改啰',            abc: '齁齁'        });                // 获取属性        console.log($('img').attr('alt')); //改啰

对于布林类型的属性(如checked , disabled, selected),应该用prop方法,而不要用attr,而prop用法跟attr一样，仅是prop是针对布林类型。

        // 获取选中按钮        $('input').eq(0).click(function () {            // $('#ck').attr('checked', true)            $('#ck').prop('checked', true);        });        // 获取选中按钮        $('input').eq(1).click(function () {            // $('#ck').attr('checked', false)            $('#ck').prop('checked', false);        });