jQuery之dom操作（取赋值方法）

取赋值相关方法：

.html() .text() .size()

.addClass() .removeClass() .hasClass()

.css()

.attr() .prop()

注意：

1、尽量避免直接添加行间样式，因为其权重过高，这样不利于响应式设计，破坏了c3 + h5 优雅的解决方案

2、attr和prop的区别：jQuery认为attribute的checked selecked disabled 就是表示该属性初始状态的值，property的checked、selecked、disabled表示该属性实时状态的值

（true或false)

1、.html( ) （即可取值又可赋值）

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src = "./jquery.js"></script>
    <script> 
        $('ul').html();  //取值 (ul里的li全部取)

控制台中 console.log($('ul').html())；
显示为

        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>

        $('ul li').html(); //只取第一个li  结果为1

        //innerHTML
        $('ul').html(''); //赋值(可传普通字母，也可带标签)

        //还可传函数
        var arrName = ['周','王','张','白','刘']
        $('ul li').html(function(index,ele){
           return '<p style="color:orange">'+ arrName[index] + '</p>'
        })

         //赋值时附一个值会把所有的li都赋成9 (取值时取一个，赋值时赋所有)
         $('ul li').html('9');
    </script>

2、text( )

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src = "./jquery.js"></script>
    <script> 
        // text innerText
        $('ul').text(); //取值

console.log($('ul').text());
显示
        1
        2
        3
        4
        5

        $('ul li').text(); //取值（都取，与html不同）

console.log($('ul li').text());
显示     12345

        //赋值
        $('ul li').text('9') //都变9
        $('ul').text('9') //覆盖掉 变成一个9
        $('ul').text('<p>3</P>') //文本形式的标签   显示结果： <p>3</p>
        //也可传函数
        $('ul li').text(function(index,ele){
            return arrName[index];
        })
    </script>

3、size( )

$('ul li').size(); //相当于$('ul li').length

4、.addClass( ) 可传字符串

    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <script>
    $('.demo').eq(0).addClass('active')
   </script>

也可填两个属性
$('.demo').eq(0).addClass('active duyi')
所有div都加active属性
$('.demo').addClass('active')

也可传函数

$('.demo').addClass(function(index,ele){

if(index % 2 == 0){

return 'duyi'

}

return 'active'

});

</script>

.removeClass() 用法同理.addClass( )

.hasClass() 判断标签中存不存在类名

    <div class="demo active"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <script src= "./jquery.js"></script>
    <script>
    console.log($('.demo').hasClass('active'));
    //有active类名  返回true

小案例（点击更改颜色）

    <style>
        .demo{
            100px;
            height:100px;
            background:red;
            margin-bottom:10px;
        }
        .demo.active {
            background:orange;
        };
    </style>
</head>
<body>
    <div class="demo active"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <script src= "./jquery.js"></script>
    <script>
    $('.demo').click(function(e){
      $('.demo').removeClass('active')
      $(this).addClass('active')
    });
   </script>

换肤

        .wrapper .style1{
            background:orange;
        }
        .wrapper .style1 li{
            background:blue;
        }
        .wrapper .style2{
            background:purple;
        }
        .wrapper .style2 li{
            background:sienna;
        }
        .wrapper.active .style1{
            background:red;
        }
        .wrapper.active .style1 li{
            background:blueviolet;
        }
        .wrapper.active .style2{
            background:paleturquoise;
        }
        .wrapper.active .style2 li{
            background:greenyellow;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul class = "style1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul class = "style2">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

    <script src="./jquery.js"></script>
    <script>
        $('.wrapper').click(function (index,ele) {
           if($(this).hasClass('active')){
            $(this).removeClass('active')
           }else{
            $(this).addClass('active')
           }
        });

.css( )

        //.css赋值形式
        $('.demo').css('width','100px')
        $('.demo').css('width',100)
        //多个样式
        $('.demo').css({'100px',height:'100px',backgroundColor:'red'})
                  .css({'+=100px'}) //这种形式也可以
        //也可取值
        console.log( $('.demo').css('backgroundColor')) //结果返回RGB

.attr( ) 基于 setAttribute getAttribute

.prop( )

    <div class="demo" cst = 'aa'></div>
    <input type="checkbox" checked = ''>
    <script src="./jquery.js"></script>
    <script>
       //取值
       console.log( $('.demo').attr('class')) // 结果 demo
       console.log( $('.demo').attr('cst'))   // 结果 aa
       //checked中有没有赋值都返回checked
       console.log( $('input').attr('checked'))//取值是selected checked disabled 不用attr方法
       //prop 在标签上取值只能取特性的值  
       console.log( $('.demo').prop('class')) //cst不可以取
       console.log( $('input').prop('checked')) //返回 true 如果把checked = ''去掉则返回false (关注状态是否被选中)

       //赋值 
       $('.demo').attr('id','demo1'); //自定义的属性使用attr
       $('.demo').prop('id','demo1'); //特性使用prop