jQuery实例方法-DOM操作(二)

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

// .html  innerHTML
// 取值
$('ul').html(); //string类型 
$('ul li').html(); //只得到第一个li的内容
// 赋值
// $('ul').html('<p>abc</p>');
$('ul li').html('9'); //赋值全能成功
var arrName = ['赵','钱','孙','李'];
$('ul li').html(function(index, ele){
    return '<p style="color: orange">' + arrName[index] + '</p>';
})

// .text  innerText
// 取值
$('ul').text(); //string类型 
$('ul li').text(); //所有li的内容拼接
// 赋值
$('ul li').html(function(index, ele){
    return arrName[index];
})

// .size length
// jQuery版本问题，没有.size()
// $('ul li').size(); 
$('ul li').length; //4

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

// addClass removeClass hasClass

// 字符串 function
// $('.demo').eq(0).addClass('aa');
$('.demo').addClass( function (index, ele) {
    if(index % 2 == 0){
        return 'duyi';
    }else{
        return 'active';
    }
})

// removeClass 同 addClass
$('.demo').removeClass( function(index, ele) {
    if(index % 2 == 0){
        return 'duyi';
    }else{
        return 'active';
    }
})

$('.demo').hasClass('active'); //true false

.css()

// 赋值
$('.demo')
    .css({width:'100px',height:'100px',backgroundColor:'red'}) //可加px，也可不加
    .css({width:'+=100px'}); //width: 200px

//取值
$('.demo').css('backgroundColor'); // "rgb(255, 0, 0)"
$('.demo').css('width'); // "200px"

.attr()

// attr 基于 setAttribute getAttribut
// 取值
console.log( $('.demo').attr('class') ); //"demo"
console.log( $('.demo').attr('eg') ); //"aa"

// selected checked disabled
// <input type="checkbox">
console.log( $('input').attr('checked') ); //"undefined"
// <input type="checkbox" checked='checked'>
console.log( $('input').attr('checked') ); //"checked"

// 赋值
$('.demo').attr('id','test1');

.prop()

// prop js dom {}

// 特性映射 非特性不能映射

// 取值
console.log( $('.demo').attr('class') ); //"demo"
console.log( $('.demo').attr('eg') ); // undefined
console.log( $('input').attr('checked') ); //true false

// 赋值
$('.demo').prop('log', 'duyi');
// 非特性属性可添加，不可见，可通过prop取值