jQuery之dom操作(取赋值方法)

Posted tianya-guoke

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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全部取)
        $(‘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

 

 
 

以上是关于jQuery之dom操作(取赋值方法)的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的DOM操作

jQuery之常用DOM操作

DOM 操作后的 jQuery Mobile 和 .next()?

jQuery使用:DOM操作之元素包裹克隆DOM与data的综合应用

jQuery学习笔记DOM操作之包含节点方法

jQuery学习笔记DOM操作之替换节点方法