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为还原为默认
});
//---