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

Posted 2021-01-29 tianya-guoke

取赋值相关方法：

                  .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全部取)
        $(‘ul li‘).html(); //只取第一个li

        //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(); //取值
        $(‘ul li‘).text(); //取值（都取，与html不同）
        //赋值
        $(‘ul li‘).text(‘9‘) //都变9
        $(‘ul‘).text(‘9‘) //覆盖掉 变成一个9
        $(‘ul‘).text(‘<p>3</P>‘) //文本形式的标签
        //也可传函数
        $(‘ul li‘).text(function(index,ele){
            return arrName[index];
        })
    </script>

3、size( )

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