JQuery学习记录（二）：基础DOM与CSS操作

扫描下面的二维码，“关注”我的百家号。

上一节我们介绍了jquery的常规选择器，本节我们再来近探讨一下jquery基础DOM操作和CSS操作。如果掌握并熟练运用jquery基础DOM与CSS操作，我们可以让我们网站的页面更加丰富多彩。

一、jquery设置元素及内容

获取 html 内容

$('#box').html();

获取文本内容，会自动清理html标签

$('#box').text();

设置 html 内容

$('#box').html('<em>www.li.cc</em>');

设置文本内容，会自动转义html标签

$('#box').text('<em>www.li.cc</em>');

获取表单内容

$('input').val();

设置表单内容

$('input').val('www.li.cc');

二、jquery对元素属性操作

获取属性的属性值

$('div').attr('title');

设置属性及属性值

$('div').attr('title', '我是域名');

删除指定的属性

$('div').removeAttr('title');

通过匿名函数返回属性值

$('div').attr('title', function () { return '我是域名';});

可以接受两个参数

$('div').attr('title', function (index, value) {
return value + (index+1) + '，我是域名';
});

三、jquery对元素CSS样式操作

获取元素行内 CSS 样式的颜色

$('div').css('color');

设置元素行内 CSS 样式颜色为红色

$('div').css('color', 'red');

得到多个 CSS 样式的数组对象，逐个遍历出来

方法1：

var box = $('div').css(['color', 'height', 'width']);
for (var i in box) {
alert(i + ':' + box[i]);
}

方法2：

var box = $('div').css(['color', 'height', 'width']);
$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组
alert(attr + ':' + value);
});

设置多个样式，可以传递多个 CSS 样式的键值对

$('div').css({
'background-color' : '#ccc',
'color' : 'red',
'font-size' : '20px'
})

设置某个元素的 CSS 样式的值， 但这个值需要计算我们可以传递一个匿名函数。

$('div').css('width', function (index, value) {
return (parseInt(value) - 500) + 'px';
});

添加多个 CSS 类

$('div').addClass('red bg');

删除多个 CSS 类

$('div').removeClass('red bg');

判断样式 red存在

$('div').hasClass('red')

检查类，不存在则添加，存在则删除（切换）

$('div').toggleClass('red');

实现样式 1 和样式 2之间的切换

$('div').click(function () {
$(this).toggleClass(function () {
if ($(this).hasClass('red')) {
$(this).removeClass('red');
return 'green';
} else {
$(this).removeClass('green');
return 'red';
}
});
});

四、jquery框架的css方法

获取元素的长度

$('div').width();

获取某个元素的长度

$('div').height();

设置元素长度（默认加 px）

$('div').width(500);

通过匿名函数设置某个元素的长度

$('div').width(function (index, value) {
return value - 500;
});

元素宽度，包含内边距padding

innerWidth()

元素高度，包含内边距padding

innerHeight()

元素宽度，包含边框和内边距

outerWidth()

元素高度，包含边框和内边距

outerHeight()

元素宽度，含边框和内边距、外边距

outerWidth(ture)

元素高度，含边框和内边距、外边距

outerHeight(true)

获取元素相对于视口的偏移位置

$('strong').offset().left;

获取元素相对于父元素的偏移位置

$('strong').position().left;

获取垂直滚动条的值

$(window).scrollTop();

设置垂直滚动条的值

$(window).scrollTop(300);

获取水平滚动条的值

scrollLeft()

设置水平滚动条的值

scrollLeft(value)