jQuery学习笔记4：DOM和CSS

1 设置元素及内容


样例：

alert($('#box').html());
alert($('#box').text()); //text获取的是文本，有html会自动被清理
$('#box').html('<em>www.li.cc</em>'); //替换HTML内容，HTML会自动解析
$('#box').text('<em>www.li.cc</em>'); //替换文本内容，有HTML会自动转义
alert($('input').val()); //获取表单value值
$('input').val('女'); //设置表单value值
$('input').val(['男', '女', '编程']); //根据表单value值选定对应选项

2 元素属性操作


样例：
alert($('#box').attr('id')); //获取key为id的属性值

$('div').attr('title', 'test'); //给div元素增加属性title='test'
$('div').attr({
'title' : 'test',
'class' : 'red',
'data' : '123'
});
备注：class不建议用attr来设置
$('div').removeAttr('title'); //删除title属性

jQuery中的很多方法都可以使用function(){}来返回字符串，比如：html()、text()、val()、is()、filter()等方法。如果涉及到多个元素集合的话，还可以传递index参数来获取索引值，并且可以使用第二个参数value来获取原始值。

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

$('div').attr('title', function (index, value) {
return '原来的title是：' + value + '，现在的title是：我是' + (index+1) + '号域名';
});

$('div').html($('div').html() + '<em>www.li.cc</em>');
等效于：
$('div').html(function (index, value) {
return value + '<em>www.li.cc</em>';
});

3 元素样式操作


样例：
alert($('div').css('color')); //获取元素内CSS样式的样色
$('div').css('color', 'red'); //设置元素行内CSS样式颜色为红色

var box = $('div').css(['color', 'width', 'height']); //得到CSS样式的数组对象
备注：box[0]不能访问，只能box['color']
//逐个遍历出来
for (var i in box) {
alert(i + ':' + box[i]);
}
//采用jQuery遍历方法$.each()
$.each(box, function (attr, value) {
alert(attr + ':' + value);
});

//访问原生JavaScript对象数组
alert($('div')[0]);
$('div').each(function (index, element) {
alert(index + ':' + element);
});

//设置多个样式
$('div').css('color', 'red').css('background-color', '#ccc');
等效于
$('div').css({
'color' : 'blue',
'background-color' : '#eee',
'width' : '200px',
'height' : '30px'
});
//需要计算值，传递匿名函数
$('div').css('width', function (index, value) {
return parseInt(value) - 500 + 'px';
});

$('div').addClass('red'); //添加一个CSS类
$('div').addClass('red bg size'); //添加多个CSS类
$('div').removeClass('bg'); //删除一个CSS类
$('div').removeClass('red size'); //删除多个CSS类

$('div').click(function () {
$(this).toggleClass('red size'); //两个样式之间的切换，默认样式和指定样式的切换
});

//实现样式1和样式2之间的切换
$('div').click(function () {
//这里只是click的局部，而又是toggle的全局
$(this).toggleClass('red'); //一开始切换到样式2
if ($(this).hasClass('red')) { //判断样式2存在后
$(this).removeClass('green'); //删除样式1
} else {
$(this).toggleClass('green'); //添加样式1
//$(this).addClass('green');
}
});
等效于：
$('div').click(function () {
$(this).toggleClass(function () {
//局部
if ($(this).hasClass('red')) {
$(this).removeClass('red');
return 'green';
} else {
$(this).removeClass('green');
return 'red';
}
});
});

4 CSS方法


样例：
alert($('div').width()); //获取元素高度，返回类型为number
$('div').width(500); //设置元素高度，直接传数值，默认加px
$('div').width('500px');
$('div').width('500pt');

$('div').width(function (index, width) {
return width - 500 + 'px'; //虽然可以不加，会智能添加，但还是建议加上单位，更加清晰。
});

alert($('div').offset().top); //相对于视口的偏移
alert($('div').position().top); //相对于父元素的偏移
alert($(window).scrollTop()); //获取当前滚动条的位置
$(window).scrollTop(300); //设置当前滚动条的位置

本文出自 “IT技术学习与交流” 博客，谢绝转载！