JQuery學習筆記三：基礎DOM和CSS操作

基礎DOM和CSS操作

1.  DOM操作

alert($('#box').html());//擷取id為box下的内容（包括标簽名）
alert($('#box').text());//擷取文本，html标簽被清理
$('#box').html("<em>www.qq.com</em>");//替換id為box的内容
$('#box').text("<em>www.qq.com</em>");//替換文本内容，遇到html會轉義
alert($('input').val());//擷取input裡的value屬性
$('input').val('騰訊');//設定input裡的value屬性
$('input').val(['man','woman','code']);//設定首選項
           

2.  元素屬性操作

alert($('#box').attr('id'));//擷取id為box的标簽id屬性
$('#box').attr('title','boxTitle');//設定id為box的标簽的title屬性
//---批量設定id為box的标簽的屬性---
$('#box').attr({
    'title':'boxTitle',
    'class':'aaa',  //class不建議用attr設定，後面有更強大更豐富的方法代替
    'date':'2014-1-6'
});
//---
//---根據輸入動态設定屬性，index表述div的順序---
$('div').attr('title', function(index, value){
    //index 是div的索引
    //value 是原來title的值
    return index+'号';
});
//---
//$('div:first').removeAttr('title');//删除第一個div的title屬性
           

3.  CSS操作

alert($('div').css('color'));//擷取color屬性
$('div').css('color', 'red');//設定color屬性
//---擷取多個css屬性---
var box = $('div').css(['color', 'width', 'height']);
$.each(box, function(attr, value){
    alert(attr + ':' + value);
});
$('div').each(function(index, element){
    alert(index + ':' + element);
});
//---
//---批量設定css---
$('div').css({
    'color':'red',
    'background':'#ccc',
    'height':'30px'
});
//---局部設定，有價值！---
$('div').css('width', function(index, value){
    // index是div是索引
    // value是預設值
    return parseInt(value) - 500 + 'px';
});
//---
$('div').addClass('red');//為div添加1個class
$('div').addClass('red bg size');//為div添加多個class
$('div').removeClass('red');//從div删除1個class
$('div').removeClass('red bg');//從div删除多個class
//---點選變紅，再點選恢複,用于兩個樣式的切換---
$('div').click(function(){
    $(this).toggleClass('red');
    //$(this).toggleClass('red', true);
    //true的位置可以控制頻率，true為設定，false為還原為預設
});
//---