- 关注我的头条号
- 加入我的QQ群
扫描下面的二维码，“关注”我的头条号，我会每天更新免费视频课程。
上一节我们介绍了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)
