我的jQuery第三天 jQuery实例方法-DOM操作

jQuery实例方法-DOM操作

• 取赋值相关方法

1. .html()
2. .text()
3. .size()
4. .addClass()
5. .removeClass()
6. .hasClass()
7. .css()
8. .attr()
9. .prop()

• 注意
• 1. 尽量避免直接添加行间样式，因为其权重过高，这样不利于响应式设计，破坏了css3+html5优雅的解决方案
• 2. attr和prop的区别：jQuery认为attribute和checked selecked disabled就是表示该属性初始状态的值，property的checked selecked disabled表示该属性实时状态的值(true或flase)

html()

既可以取值也可以赋值

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        console.log($('ul').html())
        //会把ul里面的内容都打印出来，如果选择li则只会打印第一个li的值，如果在html里面传入内容则会把所有的东西都覆盖掉。
        //还可以传函数
         attr = ['zhou', 'yang','dada','ddd','aaa']
        $('ul li').html(function(index, ele){
            return '<p style = "color:red">' 
           + attr[index]+ ' </p>'
        })
        //通过传入函数让li里面加入span并改变里面的值
    </script>

text()

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
       console.log($('ul li').text());
       //将所有的li值取出来
       $('ul li').text(9)
       //将里面的值变为9
       //也可以放入函数
       attr = ['zhou', 'yang','dada','ddd','aaa']
        $('ul li').text(function(index, ele){
            return attr[index];
        })
    </script>

size()

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
       $('ul li').size === $('ul li').length
    </script>

addClass()

    <div class="dome active"></div>
    <div class="dome"></div>
    <div class="dome"></div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
       $('dome').eq(0).addClass('active')
       //会在第一个div标签的class属性加一个active的类名
              $('dome').eq(0).addClass(function(index,ele){
           if(index % 2 ==0){
               return 'zhou'
           }
           return 'active'
       })
       //并且也可以传函数
    </script>

removeClass()

$('dome').eq(0).removeClass('active dome')
//删除第一个div标签的class类名，如果什么都不添加将所有的删除
//也可以添加函数

hasClass()

• 判断前面有没有class类名

console.log($('dome').hasClass('active'));
//会看div里面有没有active如果有就返回ture
//可以添加函数，推荐使用该方法来更改状态和类名

css()

• 给标签添加行间样式
• 也可以取值

attr()

• 基于setAttribue getAttribute
• 在input写了的话这些都是初始值 checked selecked disabled

 <div class="dome" name = 'zhou'></div>
    <input type="checkbox">
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        //取值
     console.log($('.dome').attr('class'));
     console.log($('.dome').attr('name'));
        //赋值
        ($('.dome').attr('id','test'));
    </script>

prop()

• 基于对原生对象的dom的操作，特饮映射/非特性不能映射

<div class="dome" name = 'zhou'></div>
    <input type="checkbox" checked='checked'>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        //取值
    console.log($('.dome').prop('class'));

    console.log($('input').prop('checked'));
    //特性取值返回true或者false，只看状态是否被选中

    //赋值